《Javascript入门学习全集》 Javascript学习第二季（实战3）

Javascript学习第二季（实战3）

 

上章的例子虽然实现了功能，但毕竟不符合标准。

今天我们来优化 javascript 图片馆。

 

思路:

1， 为了消除我们的假设，我们可以这么做：

 if (!document.getElementById) return false;

 if (!document.getElementById("imagegallery")) return false;

2，为了符合标准，我们可以必须把html和js分离。

 首先得用js方法获取html的节点，然后来做相应的操作。

 

Demo1:

3C//DTD XHTML 1.1//EN"

"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

 

 

 

 

        

 

 

 

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++) {

    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 ， 可以说接近标准了。

 

写成这样也就可以放到网站上了。

当然老外是比较追求完美的，明天我们再来看看 例子 的再次 改进。

 

看懂，并不代表你能把代码写出来。写出来，并不能代表你写的代码就很完美。

希望大家多练习，多写例子。 修行靠自己…..

 

如果还有不懂，可以google 搜索资料.

或者联系我 ,可以去我的blog 给我留言 :

http://www.cssrain.cn/LoadMod.asp?plugins=GuestBookForPJBlog