Javascript学习第二季-实战.doc

Javascript学习第二季（实战1）转眼间，第一季已经学完了。如果你认真学习第一季了，那么第二季的实战应该对你来说，不会很难。从今天起，我们开始DOM实战演练。仅仅是演练，不要吓坏了哦. Demo1:window.onload = function() var para = document.createElement(p); var info = nodeName: + para.nodeName;/ 节点的名称 info+= nodeType: +para.nodeType; / 判断节点的类型， 如果为1 ，则是元素节点。 alert(info);Demo2:window.onload = function() var para = document.createElement(p);/创建一个元素节点p var txt = document.createTextNode(Hello world);/创建一个文本节点 para.appendChild(txt); var testdiv = document.getElementById(testdiv); testdiv.appendChild(para);Demo3:window.onload = function() var node_p = document.createElement(p); var txt_p = document.createTextNode(this is ); node_p.appendChild(txt_p); var node_strong = document.createElement(strong); var txt_strong = document.createTextNode(my); node_strong.appendChild(txt_strong); node_p.appendChild(node_strong); var txt_x = document.createTextNode( name. ); node_p.appendChild(txt_x); var testdiv = document.getElementById(testdiv); testdiv.appendChild(node_p);Demo4:window.onload=function() var a =document.createElement(span); var b =document.createTextNode(cssrain); a.appendChild(b); document.body.appendChild(a); /默认添加在文档的最后。 /如果我们想指定位置，那么得使用insertBefore()aaaaaaaaaaaaacccccccbbbbbbbbbDemo5:window.onload=function() var a =document.createElement(span); var b =document.createTextNode(cssrain); a.appendChild(b); var mubiao = document.getElementById(b); mubiao.parentNode.insertBefore(a,mubiao); /插入到div b 前面。 /* parentElement.insertBefore( newElement , targetElement );从上面语法可以看出， 父元素， 新元素，目标元素 是 insertBefore使用的3要素。其实我们可以不管 父元素， 因为 父元素我们 可以用 目标元素.parentNode 得到。那么insertBefore就很好用了。只要给2个参数 ： 新元素 和目标元素。那么有没有 insertAfter()方法呢？答案看下个例子。 */aaaaaaaaaaaaacccccccbbbbbbbbbDemo6:/ DOM没有提供insertAfter()方法，所以我们只能自己写一个。function insertAfter(newElement,targetElement) var parent = targetElement.parentNode; /首先获取目标节点的 父节点 if (parent.lastChild = targetElement) / 如果最后的节点是目标元素，则直接添加。因为默认是最后 parent.appendChild(newElement); / appendChild()默认是添加到最后 else parent.insertBefore(newElement , targetElement.nextSibling);/如果不是，则插入在目标元素的下一个兄弟节点 的前面。也就是目标元素的后面。 window.onload=function() var a =document.createElement(span); var b =document.createTextNode(cssrain); a.appendChild(b); var mubiao = document.getElementById(b); insertAfter( a, mubiao ); aaaaaaaaaaaaacccccccbbbbbbbbbdddddd如果能把上面的例子都看懂，搞懂。相信你的DOM编程技术已经有很大的进步了。如果你是一名jquery爱好者，相信你也想用jquery写出同样的功能。下面是jquery的代码，比较简单：Jquery demo1 : 插入 到 div 的 id=b 的前面。(实现了跟DEMO 5同样的功能。) $(function() $(cssrain).insertBefore( div#b ); )aaaaaaaaaaaaacccccccbbbbbbbbbJquery demo2：Jquery内部实现了 ，insertafter():例子：(实现了跟DEMO 6同样的功能。) $(function() $(cssrain).insertAfter( div#b ); )aaaaaaaaaaaaacccccccbbbbbbbbbkkkkjQuery里封装了很多dom操作的方法，比如上面说的 insertBefore(),insertAfter(),还有prepend(),prependTo(),append(),appendTo(),add(),wrap(),before(),clone()等等。大大简化了DOM的操作。 但我们不能太依靠它，毕竟js还是基石。明天我们讲做一个 javascript 图片馆。也就是在很久以前文章里的一个例子。呵呵，上次叫你们拿笔记住不懂的地方，现在那张纸还在吗？明天再会。如果还有不懂，可以google 搜索资料. aJavascript学习第二季（实战2）今天我们来写一个javascript 图片馆，这个的应用程度还是比较大的，几乎前台展示方面的网站都用得到。我们以代码入手， 来解析每句话的含义。 Demo1: Image Galleryfunction showPic(whichpic) var source = whichpic.getAttribute(href); var placeholder = document.getElementById(placeholder); placeholder.setAttribute(src,source); var text = whichpic.getAttribute(title); var description = document.getElementById(description); description.firstChild.nodeValue = text; javascript 图片馆 test1 test2 test3 test4 Choose an image.首先从html 入手;在a标签上加事件我们要注意，避免要他跳转。解决方法：函数返回false； 事件认为链接没有被点击。showPic(this) : this 代表当前对象。然后看js代码： var source = whichpic.getAttribute(href); /获取当前点击的元素的属性href的值 var placeholder = document.getElementById(placeholder); /获取目标对象placeholder.setAttribute(src,source);/* 设置目标的属性src。从而达到改变图片。 setAttribute完成了2部操作：即先创建属性，然后赋值。如果属性存在，则覆盖属性的值。 当然我们可以用 placeholder.src = source; 不过，还是建议大家使用setAttribute(),它是1级dom， 他可以对文档中的任何一个元素的任何一个属性做出修改。 另外他的移植性更好。 */var text = whichpic.getAttribute(title); /获取当前点击的元素的属性title的值 var description = document.getElementById(description); /获取目标对象 description.firstChild.nodeValue = text;/*如果忘记nodeValue的使用，可以参考Javascript学习第一季（8）.nodeValue一般只用来设置文本节点的值。 你也许会想descritption.firstChild一定是文本节点吗/?如果你这么想，说明你对nodeValue已经很了解了。下面我们应该这么处理：if (description.firstChild.nodeType = 3) /nodeType=3 说明节点是否是文本节点。 description.firstChild.nodeValue = text; 当然 也可以改成： description.childNodes0.nodeValue = text*/如果你想用jquery写一个，可以这么写： Image Gallery function showPic(whichpic) var source = $(whichpic).attr(href); var placeholder = $(#placeholder); $(placeholder).attr(src, source); var text = $(whichpic).attr(title); var description = $(#description);$(description).text(text); javascript 图片馆 test1 test2 test3 test4 Choose an image.你也许看出今天的例子的问题来了，第一： 没做必要的判断，（也就是做了太多的假设）比如：document.getElementById(“placeholder”); 我们难道可以肯定id为placeholder一定存在？第二 ： 犯了一个大忌。就是html和js没分开，而是参杂在一起写。这是非常不符合标准的。W3c最基本的规定 , 使用(x)html 去搭建文档结构。（结构层）使用css去设置文档的显示效果。（表现层，展示层）使用dom脚本去实现文档的行为。（行为层）3者应该 分离开来。具体优化代码 明天我们在讨论。如果还有不懂，可以google 搜索资料. Javascript学习第二季（实战3）上章的例子虽然实现了功能，但毕竟不符合标准。今天我们来优化 javascript 图片馆。 思路:1， 为了消除我们的假设，我们可以这么做： if (!document.getElementById) return false; if (!document.getElementById(imagegallery) return false;2，为了符合标准，我们可以必须把html和js分离。 首先得用js方法获取html的节点，然后来做相应的操作。Demo1: Image Galleryfunction showPic(whichpic) if (!document.getElementById(placeholder) return true; var source = whichpic.getAttribute(href); var placeholder = document.getElementById(placeholder); placeholder.setAttribute(src,source); if (!document.getElementById(description) return false; if (whichpic.getAttribute(title) var text = whichpic.getAttribute(title); else var text = ; var description = document.getElementById(description); if (description.firstChild.nodeType = 3) description.firstChild.nodeValue = text; return false;function prepareGallery() if (!document.getElementsByTagName) return false; if (!document.getElementById) return false; if (!document.getElementById(imagegallery) return false; var gallery = document.getElementById(imagegallery); var links = gallery.getElementsByTagName(a); for ( var i=0; i links.length; i+) linksi.onclick = function() return showPic(this); linksi.onkeypress = linksi.onclick; window.onload = function() prepareGallery(); Snapshots Fireworks Coffee Rose Big Ben Choose an image.现在我们来解析每句的含义：首先我们把眼光放在prepareGallery（）函数里：if (!document.getElementsByTagName) return false; / 为保证向后兼容：我们判断document.getElementsByTagName是否可以用。 if (!document.getElementById) return false; /同上 if (!document.getElementById(imagegallery) return false; /判断 imagegallery 是否存在，如果存在 就 获取。 var gallery = document.getElementById(imagegallery); var links = gallery.getElementsByTagName(a); for ( var i=0; i links.length; i+) linksi.onclick = function() return showPic(this);/this指向 linksi ； linksi.onkeypress = linksi.onclick; /当超链接获取焦点的时候，按任意键，触发onclick事件 /注意：当获取焦点的时候，回车，会触发onclick事件。 然后我们再来看showPic（）函数：function showPic(whichpic) if (!document.getElementById(placeholder) return true; /判断 id为 placeholder 的 对象是否存在。 /如果 placeholder 不存在 ，则返回true， 页面跳转 /如果返回false，页面不跳转。按照需求，当不存在的时候，我们应该返回true。 / 也就是跳转。 var source = whichpic.getAttribute(href); var placeholder = document.getElementById(placeholder); placeholder.setAttribute(src,source); if (!document.getElementById(description) return false; /判断 id为 description 的 对象是否存在。 if (whichpic.getAttribute(title) /判断 id为 description 的 属性 title 是否存在。 var text = whichpic.getAttribute(title); else var text = ; var description = document.getElementById(description); if (description.firstChild.nodeType = 3) /nodeType=3 说明节点是文本节点。 description.firstChild.nodeValue = text; return false;这个例子相对前章的例子，做了不少的优化。其实不能说是优化，应该说是改进。增加了很多判断，相信有部分js程序员都没做过这么多 必要的判断。_当然我们这个例子，也分离了html和js ， 可以说接近标准了。写成这样也就可以放到网站上了。当然老外是比较追求完美的，明天我们再来看看 例子 的再次 改进。看懂，并不代表你能把代码写出来。写出来，并不能代表你写的代码就很完美。希望大家多练习，多写例子。 修行靠自己.如果还有不懂，可以google 搜索资料. Javascript学习第二季（实战4）上章的例子虽然实现了功能,也做了相应的判断，也符合标准了。但还有一个问题就是： Choose an image. 在html中只是为了图片切换 而做的，而没其他的用途。所以我们不必把他直接写在html中，而是可以用js-DOM方法动态去创建html，从来达到再次简化html。 思路:1， 把html中的Choose an image.删除。然后用dom方法 在js中创建。function preparePlaceholder() if (!document.createElement) return false; if (!document.createTextNode) return false; var placeholder = document.createElement(img);/创建元素节点 placeholder.setAttribute(id,placeholder);/创建属性，设置属性 placeholder.setAttribute(src,images/placeholder.gif); placeholder.setAttribute(alt,my image gallery); var description = document.createElement(p); description.setAttribute(id,description); var desctext = document.createTextNode(Choose an image);/创建文本节点 description.appendChild(desctext); var gallery = document.getElementById(imagegallery); document.getElementsByTagName(body)0.appendChild(placeholder); / 这样添加 。默认是添加到文档的最后。 document.getElementsByTagName(body)0.appendChild(description); /如果想添加在其他地方， 可以 使用 insertBefore()好了，我们来看看完整的代码.Demo1: Image Galleryfunction showPic(whichpic) if (!document.getElementById(placeholder) return true; var source = whichpic.getAttribute(href); var placeholder = document.getElementById(placeholder); placeholder.setAttribute(src,source); if (!document.getElementById(description) return false; if (whichpic.getAttribute(title) var text = whichpic.getAttribute(title); else var text = ; var description = document.getElementById(description); if (description.firstChild.nodeType = 3) description.firstChild.nodeValue = text; return false;function prepareGallery() if (!document.getElementsByTagName) return false; if (!document.getElementById) return false; if (!document.getElementById(imagegallery) return false; var gallery = document.getElementById(imagegallery); var links = gallery.getElementsByTagName(a); for ( var i=0; i links.length; i+) linksi.onclick = function() return showPic(this); linksi.onkeypress = linksi.onclick; /*这个例子 相对 gallery2.html 有了重大变化。我去掉了HTML中的预览图片和title。 而改用在 js中动态创建。*/function preparePlaceholder() if (!document.createElement) return false; if (!document.createTextNode) return false; var placeholder = document.createElement(img);/创建元素节点 placeholder.setAttribute(id,placeholder);/创建属性，设置属性 placeholder.setAttribute(src,images/placeholder.gif); placeholder.setAttribute(alt,my image gallery); var description = document.createElement(p); description.setAttribute(id,description); var desctext = document.createTextNode(Choose an image);/创建文本节点 description.appendChild(desctext); var gallery = document.getElementById(imagegallery); document.getElementsByTagName(body)0.appendChild(placeholder); / 这样添加 。默认是添加到文档的最后。 document.getElementsByTagName(body)0.appendChild(description); /如果想添加在其他地方， 可以使用insertBefore()window.onload = function() preparePlaceholder(); /动态创建 html . prepareGallery(); Snapshots 好了，一个完美的javascript图片馆出炉了。(注：实战4 - demo2 有点小变化，可以参考参考。)兴奋吧。做程序就是要的这种感觉。图片馆做完了，我们也许需要总结下。加深印象。不过这是明天的事情，今天我们去外面走走，透透气 ，运动运动。毕竟身体是革命的本钱。_。打篮球去了，今天写到这里，明天我们总结下，这几天写 这个图片馆 中一些要点。如果还有不懂，可以google 搜索资料. Javascript学习第二季（5）总结 javascript 图片馆 上4篇文章我们讲了 从简单到 复杂 写了一个javascript 图片馆 .也许你对会发现 dom编程 其实也不是很复杂嘛，就那几个老方法 用来用去。呵呵。今天我们来总结下 前4节的内容，巩固下基础。 然后明天我们将 继续实战（用javascript做 动画效果）。那是明天的事，今天我们就把 今天要做的做好。1, js中的预留退路。这个问题在某种情况下会发生，就是客户禁用了js怎么办。我们看下面3段代码： 代码1： test1 如果客户端不支持js或者禁用了js。那么 这段代码将没用。如果改成这样呢： test1 当然是换汤不换药，一样不能得到我们想要的结果。如果改成下面的呢： test1 当客户端禁用了js后，用户将链接到一张新图片。虽然效果不怎么人性化了，但至少客户还是能正常访问。2，分离js和html。还记得我们的第一个图片馆例子吗？其中代码我们是这么写的： test1 test2显然，这是不符合分离的原则。再看看下面的代码： test1 test2Script: var gallery = document.getElementById(imagegallery); var links = gallery.getElementsByTagName(a); for