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

Javascript学习第二季（实战2）

 

今天我们来写一个javascript 图片馆，这个的应用程度还是比较大的，几乎前台展示方面的网站都用得到。我们以代码入手， 来解析每句话的含义。

 

Demo1:

 3C//DTD XHTML 1.1//EN"

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

 

 

 

 

        

 

 

 

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.childNodes[0].nodeValue = text

*/

 

如果你想用jquery写一个，可以这么写：

3C//DTD XHTML 1.1//EN"

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

 

 

 

 

 

        

 

 

 

javascript 图片馆

 

 

 

   

•  

        test1

     

     

•  

        test2

     

     

•  

        test3

     

     

•  

        test4

     

   

 

 

 

Choose an image.

 

 

 

 

你也许看出今天的例子的问题来了，第一： 没做必要的判断，（也就是做了太多的假设）

比如：

document.getElementById(“placeholder”); 我们难道可以肯定id为placeholder一定存在？

第二 ： 犯了一个大忌。

就是html和js没分开，而是参杂在一起写。这是非常不符合标准的。

W3c最基本的规定 ,

使用(x)html 去搭建文档结构。（结构层）

使用css去设置文档的显示效果。（表现层，展示层）

使用dom脚本去实现文档的行为。（行为层）

3者应该 分离开来。

 

具体优化代码 明天我们在讨论。。。

 

 

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

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

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