圖片庫這個例子
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);
}