案列研究：javascript美术馆

时间：2008-04-03 来源：biaoflying

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Image Gallery</title>
</head>
<body>
<h1>Snapshots</h1>
<ul>
    <li>
      <a href="images/fireworks.jpg" title="A fireworks display">Fireworks</a>
    </li>
    <li>
      <a href="images/coffee.jpg" title="A cup of black coffee">Coffee</a>
    </li>
    <li>
      <a href="images/rose.jpg" title="A red, red rose">Rose</a>
    </li>
    <li>
      <a href="images/bigben.jpg" title="The famous clock">Big Ben</a>
    </li>
</ul>
</body>
</html>

现在需要改变.html文档的一些行为，比如点击链接时不是直接连接到该图片(另一个网页)，而是在网页的空白部分显示该图片。
   定义showPic.js
   function showPic(whicPic){
   var source=whicPic.getAttribute("href");
   var placeholder=document.
      getElementById("placeholder");
   placeholder.setAttribute("src",source);
}
//whicPic指的是页面中的链接
//函数的目的就是需要在placeholder设置所点链接href属性的图片
//在点击某个元素时，该元素会被保存为一个this对象，从而这样
//showPic（this）将该元素传入到该函数中。
#此时当点击<a>元素时placeholder中会显示图片但是链接被点击的默认行为#还是会发生
//在每个<a>元素中加入以下代码：onclick="showPic(this);return //false;"
//事件处理函数的工作机制：
//在给某个元素添加了事件处理函数之后一旦发生了预定的事件，相应的//javascript函数被调用，并返回一个结果true或者false。若为true则//事件处理函数认为链接被点击了，若为false事件处理函数认为链接没有被点//击。

对javascript函数功能进行扩展
1，childNodes属性
用于检索一个元素的所有子元素。返回一个数组，包含给定元素节点的所有子元素。
如获取body元素的所有子元素：
var body=document.getElementsByTagName("body")[0];
body.childNodes;
DOM为body元素提供了一个更为简单的使用方式：document.body;
document.body.childNodes;
2,nodeType属性
body元素中应该只有三个元素，h1，ul，img元素，但输出的数字却远大于此。这时因为文档树的的节点类型并非只有元素节点一种。childNodes包含了文档中其他的属性节点以及文本节点。
可以使用nodeType属性来区分文档中的各个节点类型，它返回的是一个数字
它共有12中可取值，其中只有3中是有价值的：
·元素节点的值为1
·属性节点的值为2
·文本节点的值为3

在文档末尾添加<p id="description">Choose an image</p>,需要在选定某张图片时更改<p>元素的内容为相应的<a>链接的title属性值。
nodeValue属性
如果需要改变某个文本节点的值，可以使用以下的方式node.nodeValue=.
但是：
var des=document.getElementById("description");
在这里得到的是id为description的<p>元素节点，而不是其中的文本节点。使用以下的方式：
des.childNodes[0].nodeValue;
firstChild和lastChild
访问第一个子节点和最后一个子节点可以分别使用firstChild和lastChild。相应的较为麻烦的方式：childNodes[0],childNodes[childNodes.length-1]
到这里showPic可以修改为：
function showPic(whicPic){
    var source=whicPic.getAttribute("href");
    var placeholder=document.
      getElementById("placeholder");
    placeholder.setAttribute("src",source);
    var text=whicPic.getAttribute("title");
    var des=document.getElementById("description");
    des.firstChild.nodeValue=text;
}

预留退路
臭名昭著的弹出窗：
window.open(url,name,features);
eg：
window.open("http://www.baidu.com",
"popup","width=320,height=480");
#test.js

function popUp(ref){
window.open(ref,"popup","width=320,height=480");
}

#test.html

也可以通过javascript为协议实现以上的功能：
<a href="javascript:
    popUp('http://www.baidu.com');">Example</a>
或者通过内嵌事件处理函数来实现：
<a href="#" onclick="popUp('http://www.baidu.com');
    return false">Example</a>
将href属性设置为#表示创建了一个空连接或者指向该文档的开头。“return false”的意思前面已经交代。
但是在以上的html代码中onclick对应的javascript代码可能不会被执行，因为用户既有可能禁用了javascript功能。预留退路：
<a href="http://www.example.com" onclick=
    "popUp('http://www.example.com');return false">
    Example</a>
更为简洁的方式：
<a href="http://www.example.com" onclick=
    "popUp(this.getAttribute('href'));return false">
    Example</a>
以上例子还是稍有不足之处，如果能将javascript代码放在外部文件中将更加完善。

分离javascript
向CSS学习，javascript并不要求事件必须在html文档中处理。可以在javascript文件中把一个事件添加到html文档中的某个元素上面。

#test.html
<a href="http://www.baidu.com" class="popup">Example</a>

#test.js
window.onload=prepareLinks;
function popUp(ref){
   window.open(ref,"popup","width=320,height=480");
}
function prepareLinks(){
       var links=document.getElementsByTagName("a");
       for(var i=0;i<links.length;i++){
       if(links[i].getAttribute("class")=="popup"){
           //A Test.
           alert(Links[i].getAttribute("href"));
           links[i].onclick=function(){
               popUp(this.getAttribute("href"));
               return false;
           }
       }
   }
}

向后兼容

现代的浏览器大多支持javascript，而且对DOM的支持对非常不错。但是在某些版本比较来的browser中，可能无法理解DOM提供的属性和方法。
javascript中几乎所有的东西都被当作对象对待。意味着可以使用以下的方式检测某个DOM方法在浏览器中是否被支持。
if(method){
    statements;
}
eg:
    function myFunction(){
      if(document.getElementById){
        statement;//如果浏览器不支持该方法，则{}中的内容永远不会
                  //被执行。
    }
}
如此写法的缺点就是，对DOM方法的检测将被包含在一堆一堆的花{}中(当需要检测的DOM方法较多的时候)。反向进行检测“如果不理解这个方法请离开”：
if(!method)return false;

window.onload=function(){
if(!document.getElementsByTagName)
return false;
var links=.....
.....
}