Javascript Dom编程艺术读书笔记（二）

案例优化
分离

<a href="images/Second-hand time.jpg" title="一部20世纪后半叶的微观俄国史，笔力直抵普京时代"        onclick="showimage(this); return false;">二手时间</a>

如果这样写html源码的话，其实Javascript与HTML分离的已经差不多了，能不能完全分离呢？可以参考CSS。
如果CSS与HTML没有分离的话写出来的代码像这样：

<p> style="font-weight: bold; color: red;">Be careful!</p>

分离之后可以这样写：

.waring {    font-weight: bold;    color: red;}

<p class="waring">Be careful!</p>

Javascipt也能像CSS那样与HTML分离。

<ul id="change">        <li>            ...        </li>        <li>            ...        </li>        <li>            ...                 </li>        <li>            ...                    </li>    </ul>

先为ul标签设置一个id属性，这样就能通过Dom定位到ul标签下的所有a标签，问题来了，a标签有4个并且没有设置其它属性来区分，怎么确定你点击链接后网页显示正确的图片？
可以用onclick：

for (var i=0; i<links.length; i++){        links[i].onclick = function(){            return showimage(this)? false:true;        }

上面的循环把所有的a标签遍历了一遍，但是只有你点击的链接才会触发showimage()函数，并且用this把当前你所点击的链接传入到showimage()函数，这样就可以进行图片的更换了。

window.onload = prepareGallery;function prepareGallery(){    var gallery = document.getElementById("change")    var links = gallery.getElementsByTagName("a")    for (var i=0; i<links.length; i++){        links[i].onclick = function(){            return showimage(this)? false:true;        }    }}

注意一下返回值，如果showimage()不能顺利执行prepareGallery()
函数便会返回true，这样避免了浏览器不支持Javascript时图片也能正常显示。
在编写showimage()函数之前，要进行优化。
优化
如果浏览器不支持Javascript，那么编写的网页也要能正确的显示网页。判断网页是否支持javascript如果不支持就返回真值，这样网页也能正常显示图片。

window.onload = prepareGallery;function prepareGallery(){    if(!document.getElementsByTagName) return false;    if(!document.getElementById) return false;    if(!document.getElementById("change")) return false;    var gallery = document.getElementById("change")    var links = gallery.getElementsByTagName("a")    for (var i=0; i<links.length; i++){        links[i].onclick = function(){            /*当showimage函数返回true即支持javascriptprepareGallery函数返回false*/            return showimage(this)? false:true;        }    }}function showimage(whichpic){    if(!document.getElementById("placeholder")) return false;    var source = whichpic.getAttribute("href");    var placeholder = document.getElementById("placeholder")    placeholder.setAttribute("src", source);    if(document.getElementById("description")) {        /*text不能正常获取时用空格来表示*/        var text = whichpic.getAttribute("title")? whichpic.getAttribute("title"):" ";        var description = document.getElementById("description")        /*判断节点是否为文本节点，文本节点nodeType的属性值为3*/        if(description.firstChild.nodeType == 3){            description.firstChild.nodeValue = text;        }    }    return true;}

书中用缩略图代替了文字，本人不会处理图片，便写了一个python脚本来进行图片缩略（未缩略的图片格式为jpg为了区分我把缩略后的图片格式存为bmp）。用缩略图代替了文字后效果就像下面这样（排版没排好，见笑了）：

代码放在我的github里了。