Javascript学习第二部（实战3）
上章的例子虽然实现了功能，但毕竟不符合标准。
思路:
1， 为了消除我们的假设，我们可以这么做：
if (!document.getElementById) return false;
if (!document.getElementById("imagegallery")) return false;
2，为了符合标准，我们可以必须把html和js分离。
首先得用js方法获取html的节点，然后来做相应的操作。
Demo1:
<!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>
<script type="text/javascript" >
function 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++) {
links[i].onclick = function() {
return showPic(this);
}
links[i].onkeypress = links[i].onclick;
}
}
window.onload = function(){
prepareGallery();
}
</script>
</head>
<body>
<h1>Snapshots</h1>
<ul id="imagegallery">
<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>
<img id="placeholder" src="images/placeholder.gif" alt="my image gallery" />
<p id="description">Choose an image.</p>
</body>
</html>
现在我们来解析每句的含义：
首先我们把眼光放在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++) {
links[i].onclick = function() {
return showPic(this);//this指向 links[i] ；
}
links[i].onkeypress = links[i].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 ， 可以说接近标准了。
写成这样也就可以放到网站上了。
当然老外是比较追求完美的，明天我们再来看看 例子 的再次 改进。
看懂，并不代表你能把代码写出来。写出来，并不能代表你写的代码就很完美。
希望大家多练习，多写例子。 修行靠自己…..
点击下载此文件