JS(03) Node节点属性和事件之图片库

JS(03) Node节点属性和事件之图片库

 1  <! DOCTYPE html >
 2  < html >
 3      <!-- 我们希望做到的是
 4          1.当点击某个链接，我们3希望能留在这个网页而不是转到另外一个窗口
 5          2.当点击某个链接，我们希望能在这个网页上同事看到那张图片和原有的图片清单
 6       -->
 7      <!--
 8          1.当我们触发onclick事件时，不仅showPic函数会被调用，链接也会起作用，而跳转到另外一个窗口
 9            所以，这里有个知识点，对于a标签的onclick函数，如果你让onclick函数返回false，那么浏览器
10            会认为你没有点击链接，也就不会发生跳转。
11          2.如果吧a标签看成对象，你会发现这个很容易理解,我们给a标签增加了onclick函数具体的做什么事情，
12            也就是说onclick函数是a对象里的一个方法，那么这里的this就是指的就是a标签这个对象。现在你明白
13            为什么要用this了吧（想想C++、java）
14       -->
15      < head >
16          < meta  charset ="utf-8"   />
17          < title >Image Gallery </ title >
18      </ head >
19      < body >
20          < h1 >Snapshots </ h1 >
21          < ul >
22              < li >< a  href ="images/fireworks.jpg"  title ="A fireworks display"  onclick ="return showPic(this);" >Fireworks </ a ></ li >
23              < li >< a  href ="images/coffee.jpg"  title ="A cup of black coffee"   onclick ="return showPic(this);" >Coffee </ a ></ li >
24              < li >< a  href ="images/rose.jpg"  title ="A red. red rose"  onclick ="return showPic(this);" >Rose </ a ></ li >
25              < li >< a  href ="images/bigben.jpg"  title ="The famous clock"  onclick ="return showPic(this);" >Big Ben </ a ></ li >
26          </ ul >
27          < img  id ="placeholder"  src ="images/placeholder.jpg"  alt ="my image gallery"   />
28          < p  id ="desp" >Choose an Image </ p >
29          < script  type ="text/javascript"  src ="scripts/showPic.js" ></ script >
30      </ body >
31  </ html >

showPic.js

function showPic(whichPic) {
     var source = whichPic.getAttribute("href");
     var placeholder = document.getElementById("placeholder");
    placeholder.setAttribute("src",source);
     var text = whichPic.getAttribute("title");
     var txtNode = document.getElementById("desp").firstChild;
    txtNode.nodeValue = text;
     return  false;
     /*
        经验总结:
        1.由于js是动态语言，所以存在一个很严重的问题，
        那就是你自己取的变量名称时，尽可能的采用骆驼峰写法，
        并且最后借助好的编辑器，有自动补全功能的编辑器，一面
        拼写错误，这种错误低级，而且查找起来十分困难。

        2.如果站点用到多个js文件，因该把它合并到一个文件中。以减少请求次数，提高性能。

     */
}