必威体育下载基督教Heilmann

您当前正在浏览必威体育下载基督教Heilmann七月的博客必威体育简介档案,2008。

7月份存档,2008

根据我的课程参与者,缺少的本地DOM方法

星期四,7月31日2008

在课程中,我目前正在桑尼维尔讲授DOM我问与会者在本地语言中缺少哪些方法DOM这是我们的想法:

  • 创建(url文本)-一个快捷方式的方法,以创建一个链接与文本节点内-这是你经常要做的,当创建接口
  • 插入后(newnode、oldnode)有一个方法,但是没有insertAfter
  • 删除模式(节点)-本地人搬迁儿童是复杂的
  • textElement(元素名称,文本)–似乎没有必要创建元素,然后创建一个文本节点并应用它,这可能是第一步
  • AdScript(URL)-延迟加载javascript
  • normalizeNode(节点)-删除那些讨厌的断行干扰下一步先辈同胞
  • getText(节点)–检索文本节点或元素节点的文本内容
  • setText(节点,文本)–无论节点类型如何设置文本

我要求与会者每人想出一个方法并展示给他们,我们得到了:


jukuhelpers = function(){
函数createLink(url、text、cssclass){
var link = document.createElement(' a');
if (typeof url = 'string'){
link.setAttribute(“href”,url);
}

if (typeof text = ' string'){
link.appendChild(document.createTextNode(文本));
}

if (typeof cssClass = 'string'){
link.classname=cssclass;
}

返回链路;
}

函数插入后(newnode,oldnode){
旧节点.nextisbling
?oldnode.parentnode.insertbefore(newnode,oldnode.nextisbling)
:oldNode.parentNode.appendChild(newNode);
}

函数removeNode(节点){
如果(节点){
node.parentNode.removeChild(节点);
}

}
函数textfelement(elementname,text){
if (typeof text = ' string'){
var txtElement = document.createElement(elementName);
var txtNode = document.createTextNode(text);
txtelement.appendchild(txtnode);
}

返回txtElement;
}

函数addScript(url){
var s=document.createElement(“script”);
s.setAttribute('类型','文本/javascript');
s.setattribute('src',url);
var head=document.getElementsByTagname('head')[0];
head.appendChild(年代);
}

函数getText(节点){
VAT-TXT;
if(node和node.nodeType=1){
if(node.hasChildNodes()){
txt = node.firstChild.nodeValue;
}

}
if(node和node.nodeType=3){
txt = node.nodeValue;
}

返回三种;
}

函数设置文本(节点、文本){
if(node和node.nodeType=1){
if(node.hasChildNodes()){
node.firstChild.nodeValue = text;
}

否则{
node.appendChild(document.createTextNode(文本));
}

}
if(node和node.nodeType=3){
node.nodeValue=文本;
}

}
函数normalizeNode(节点){
如果(node.hasChildNodes){
var spaceTest = / s ^ + $ /;
var children = node.childNodes;
对于(var i=0;children[i];i++){
if(children[i].nodeType==3){
如果(spaceTest.test(孩子[我].nodeValue)){
children[i].parentnode.removechild(children[i]);
}

}
}

}
}

返回{
createLink:创建链接,
insertAfter:insertAfter,
重塑模式:重塑模式,
textElement:textElement,
addscript:添加脚本,
获取文本:获取文本,
setText:setText,
Normalizenode:标准化node
}

}();

你可以得到JukelSelp.Js如果您想自己使用它,请归档。

还有什么遗漏或错误吗?

Yui探员–不要错过这些Yui教程

星期天,7月27日2008

我尊敬的同事克劳斯Komenda似乎花了和我为大众写酷东西一样多的时间,但不知何故,他并没有出现在很多阅读清单上。羞耻,我说,把我的裤子拉到腋下(是的,我看了辛普森一家)我指给你看,尊敬的读者对一系列文章的解释悠悠全权代理悠悠

是的,我也喜欢他们,因为我很喜欢邦德。

在山谷中培训新开发人员-第3天

星期天,7月27日2008

第三天,我们更深入地研究了DOM以及如何访问和创建当前文档中的内容。我很快意识到的一件事是教学DOM在FireBug出现之前要简单得多——您可以从一个属性引导到另一个属性,从一个方法引导到另一个方法。使用FireBug,他们可以更快地找到可以做什么,还可以得到很多FireFox提供但不是标准的好处。

我们学习了基础知识setAttribute以及与较短的属性表示法(msie将expando属性视为属性,为了删除它们,必须同时为属性和对象属性空)。

然后我们很快地createElement创建节点并检测是否需要以某种方式将它们应用到文档中以使它们出现。
这导致方法列表末尾我们发现没有insertAfter,的逻辑错误是什么DOM
作为一种补救办法,我要求小组自己写insertAfter,这是一个很好的练习,可以遍历子节点并使用创建方法进行循环。当然,有几种写作方法insertAfter,但当我看到一位与会者提出了一个我从未想过的问题时,我感到相当震惊:


函数insertAfter(newElm榆树){
var clone = elm.cloneNode(true);
elm.parentNode.insertBefore(克隆、榆树);
elm.parentnode.replaceChild(新elm,elm);
}

我对它的性能不太确定,但我很喜欢它的逻辑:这样,无论旧节点在哪里(最后一个节点,第一个或中间的某个地方)。这也意味着你不需要使用叉子方法列表末尾分别。

我们所经历的其他示例是删除具有特定类的节点(以显示在迭代节点列表并编写一个简单的表单验证脚本,在强制字段为空时更改它们的标签。

我用……结束了这一天JSONus的输出美国石油学会列出书签和标签的清单:


在一个额外的步骤中,我问团队,而不是打电话美国石油学会在自己的脚本标记中逐步增强链接,并动态创建脚本标记:

我的美味链接


然后我们大谈特谈。的非逻辑性DOM方法及其参数顺序(“为什么?document.insertBefore(oldNode newNode)不可能,但我们需要oldNode.parentNode.insertBefore(newNode oldNode)),并提出了一个愿望清单DOM本机方法:

  • 创建(url文本)
  • 插入后(newnode、oldnode)–与本地人一致DOM不一致
  • 删除模式(节点)
  • textElement(元素名称,文本)
  • AdScript(URL)
  • normalizeNode(节点)——删除空格
  • getText(节点)
  • setText(节点,文本)

这张单子也是课程作业,我们将在周一查看结果。

在硅谷培训新开发人员-第2天

星期五,7月25日,2008

在当前的Juku计划的第二天,我们涵盖了“阅读”部分DOM脚本:属性,节点属性以及如何以某个节点为起点在文档中导航(NextSibling、Previoussing、ParentNode、ChildNodes…)。

  • 我们还详细讨论了节点类型以及如何识别元素和文本节点,其中当然提出了空白的概念HTML烦人的“node-noise”。
  • 我们讨论了element.attribute和element.getattribute(attribute)之间的区别,特别是在读取链接的href属性时。
  • 我们在白板上做了一个脚本规划会议,分析了HTML,以找出到达某个元素的最短路径,讨论各种方法。
  • 我们讨论了对Style属性的操作,它的危险(混合了表现形式和结构,损害可维护性)及其良好的用途(使用offsetHeight创建相同高度的列)。
  • 我们通过动态添加来避免样式属性CSS类及其相关问题(测试现有类)
  • 我们在削减你的DOM编写最低形式的脚本,通过使用getElementsByTagName而不是遍历节点树来避免大的循环和条件测试。
  • 我们通过操作nodeValue属性介绍了文本节点内容的更改

今天我们将开始使用DOM

在硅谷培训新开发人员-第一天

星期四,7月24日,2008

我现在在森尼维尔,加州教会了一群聪明的年轻人DOM悠悠。我是雅虎的Juku项目!(与罗斯哈姆斯和道格拉斯·克罗克福德)进行为期12天的强化课程。自然地,这让我很忙,我很少写博客——至少我是这么想的。实际上,我认为对我们在这里讨论的内容进行逐日的报告并没有什么害处,作为对我自己的提醒,也可能是对你们自己的培训课程的启发。

第一天对我来说是传统的试水日,看看我的训练方式是否适合团队。我讨厌带着厚厚的活页夹坐在课堂式的训练中,中间穿插着一些编码练习,这些练习比任何有用的东西都要有用。相反,我更多的是一种亲力亲为的风格,我试图让参与者形成并在我的指导和帮助下运行大部分课程。这门课程有一个总体的总体规划(你需要在y时间内涵盖x数量的内容,毕竟),但根据主题的不同,每一天可能会有很大的不同。我通常不会尽可能多地使用电脑(因为它会导致人们四处冲浪,并因工作邮件而分心),但在这种情况下,这是很难做到的。

我了解了与会者,问他们是谁,他们所做的事情,他们来这里的原因以及他们想从这门课中学到什么。我很高兴地听到,虽然小组成员的学科知识水平有很大的不同,他们都想“学习如何在现实世界中应用程序”必威体育下载和“深入了解浏览器如何处理DOMDOM脚本”。

我从解释开始DOM脚本不仅仅是操作DOM但是我们创造了这个词(在现在已经不存在的黄蜂工作组中)作为DHTML发展。我再次强调了分离开发层和渐进增强背后的思想的必要性。

  • 我们设置了一个有效的HTML文档,解释什么是需要任何文件成为一个doctype,一个标题,编码,语言,阅读方向和所有必要的元素。
  • 我们讨论了样式和脚本的放置位置以及它们的位置对性能的影响。
  • 然后我们去了解必威体育下载DOM,设置并使用Firebug来处理它,并查看getElementById()和getElementsByTagName()。
  • 我们讨论了优化循环和迭代结果HTML在不牺牲可维护性或性能的情况下,尽可能少地使用代码的集合。
  • 我们开始阅读HTML发现了类和for等保留字的痛苦
  • 最后,我们创建了自己的getElementsByClassName函数。

最后一个方面特别有趣,因为我故意让函数的规范保持松散,并要求团队在投入使用之前在白板上计划它。围绕计划的讨论表明,有数百万种方法可以解决这个问题,如果您将来自以ui为中心的背景的开发人员与铁杆c++开发人员混合使用,就会得到解决相同问题的有趣方法

你可以看到不同团队的结果在本文档中。不同的例子用快速评论技巧所以要尝试一下,只需在函数前面的/*前面添加另一个斜杠。

第二天就要开始了……