1.先来看第四章所提到的图片库代码：

    
    		    
    
        
     
            first picture        
        
     
            second picture        
    
    
    
Choose an image.
        

（1）第一个问题是，它能平稳退化吗？如果JavaScript功能禁用，它还正常工作吗？答案是肯定的。但是如果换成以下方式，在不支持或禁用JavaScript后，则会出现问题。

first picture

first picture

（2）第二个问题是，它的JavaScript与HTML标记是分离的吗？

由于onclick事件插入到了HMTL中，所以答案是它们混杂在一起了。因此，想要把JavaScript代码分离出来，首先需要想办法让HTML和JavaScript通过特定的方式关联起来（如id、class等）。

a.修改一下原有的HTML如下：

    
        
     
            first picture        
        
     
            second picture        
    

b.编写JavaScript函数，如下：

function prepareGallery(){    if(!document.getElementsByTagName){        return false;    }    if(!document.getElementById){        return false;    }    if(!document.getElementById("imagegallery"){        return false;    }    var gallery = document.getElementById("imagegallery");    var links = gallery.getElementsByTagName("a");    for(var i = 0; i < links.length; i++){        links[i].onclick = function{            showPic(this);            return false;            //如果showPic返回为true，这里onclick返回false；如果showPic返回为false，onclick返回true，执行默认点击事件            //return !showPic(this);        }     }}

c.通过window.onload执行上面的函数，如下：

window.onload = function{    prepareGallery();    //这里可要添加多个函数}

需要加载多个函数的问题，还有一种最佳的解决方法，我们新建一个函数：

function addLoadEvent(func){    var oldonload = window.onload;    if(typeof window.onload != 'function'){        window.onload = func;    }    else{        window.onload = function(){            oldonload();            func();        };    }}

addLoadEvent(prepareGallery);

d.改进showPic()，如下：

function showPic(whichPic){    if(!document.getElementById("placeholder")){         return false;    }    var source = whichPic.getAttribute("href");    var placeholder = document.getElementById("placeholder");    if(placeholder.nodeName != "IMG"){    //注意：nodeName总是返回大写字母的值        return false;    }    placeholder.setAttribute("src", source);    if(document.getElementById("description")){        var text = whichPic.getAttribute("title")?whichPic.getAttribute("title"):"";        var description = document.getElementById("description");        if(description.firstChild.nodeType == 3){            description.firstChild.nodeValue = text;        }    }    return true;}

综上，整个页面代码如下：

1.新建test.html，代码如下：

    
    		    
    
        
     
            first picture        
        
     
            second picture        
    
    
    
Choose an image.
    

2.同一目录下新建test.js，代码如下：

function showPic(whichPic){    if(!document.getElementById("placeholder")){         return false;    }    var source = whichPic.getAttribute("href");    var placeholder = document.getElementById("placeholder");    if(placeholder.nodeName != "IMG"){    //注意：nodeName总是返回大写字母的值        return false;    }    placeholder.setAttribute("src", source);    if(document.getElementById("description")){        var text = whichPic.getAttribute("title")?whichPic.getAttribute("title"):"";        var description = document.getElementById("description");        if(description.firstChild.nodeType == 3){            description.firstChild.nodeValue = text;        }    }    return true;}function addLoadEvent(func){    var oldonload = window.onload;    if(typeof window.onload != 'function'){        window.onload = func;    }    else{        window.onload = function(){            oldonload();            func();        };    }}addLoadEvent(prepareGallery);function prepareGallery(){    if(!document.getElementsByTagName){        return false;    }    if(!document.getElementById){        return false;    }    if(!document.getElementById("imagegallery")){        return false;    }    var gallery = document.getElementById("imagegallery");    var links = gallery.getElementsByTagName("a");    for(var i = 0; i < links.length; i++){        links[i].onclick = function(){            //如果showPic返回为true，这里onclick返回false；如果showPic返回为false，onclick返回true，执行默认点击事件            return !showPic(this);        }        links[i].onkeypress = links[i].onclick;  //把鼠标操作的行为传给键盘     }}

3.同一目录下，新建source文件夹，里面存放两张图片1.jpg和2.jpg。

PS：尊重原创，参考资料：JavaScript DOM编程艺术(中文第2版)