图片库这个例子
1。符合平稳退化
<a href = “images/fireworks.jpg” onclick = “showPic(this); return false;” title = “A fireworks display”>Fireworks</a>
即使不支持javaScript 浏览器也会打开href属性给的链接 所以符合了平稳退化
而如果用<a href = “javascript:showPic(‘images/coffee.jpg’); return false;”</a>
即选用了javaScript伪协议，则在不支持js的浏览器上运行出不来效果
<a href=“#” onclick = “showPic(‘images/coffee.jpg’); return false;”</a>
这也是不符合平稳退化的原则
因为”#”是未指向任何目标的内部链接，把href属性的值设置为”#”只是为了创建一个伪链接。实际工作都由onclick属性负责完成。
2。js没有分离 没有做向下兼容
原来是在html里直接如上在标签里写onclick事件，显然没有把html和js分离
每个li都有onclick事件 可以把ul设置一个id名为imagegallery 然后在js里拿到这个ul的所有li设置其onclick事件（下面加的那些if都是为了向下兼容）
eg:
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;
}
}
}
function showPic(whichpic){
if(!document.getElementById(“placehoulder”)) return false;
var source = whichpic.getAttribute(“href”);
var placeholder = document.getElementById(“placehoulder”);
placeholder.setAttribute(“src”,source);
if(!document.getElementById(“description”)){
var text = whichpic.getAttibute(“title”);
var description = document.getElementById(“description”);
description.firstChild.nodeValue = text;
}
return true;
}
3。js何时执行：
如果在onload之前执行，即在html文档完成加载之前，此时的dom是不完整的。此方法里拿到dom节点的方法正确性就不定了。所以要在网页加载完毕即所有dom都加载完毕
window.onload = function(){
firstFunction();
secondFunction();
}
因为a标签中同时存在 href 与 onclick，如果想让 href 属性下的动作不执行，onclick 必须得到一个 false 的返回值。
这里比如当页面没有placehoulder，showPic就返回false了，这样也没有走后面的实现也不能走href的链接，没有做到平稳退化，所以应该考虑只有showPic能完整走下来的话才去禁掉href
可以改成:
links[i].onclick = function(){
return !showPic(this);
}