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里了。