1.優化

     showPic函式中裡仍存在一些需要處理的假設

    ①檢查title屬性是否存在，可以測試它是否為null

 var text=whichpic.getAttribute("title")?whichpic.getAttribute("title"):"";

    ②檢查placeholder元素是否存在，但需要假設那是張照片。

        nodeName屬性總是返回一個大寫字母的值，即使在HTML文件中是小寫字母

  if（placeholder.nodeName!="IMG"）return false;
 

    ③檢查description元素的第一個子元素是否為文字節點

 if(description.firstChild.nodeType==3){
     description.firstChild.nodeValue=text;
}

    ④showPic（）的完整程式碼

  function showPic(whichpic){
       if(!document.getElementById("placeholder")) return false;
       var source=whichpic.getAttribute("href");
       var placeholder=document.getElementById("placeholder");
       if(placeholder.nodeName!="IMG") 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;
 }
 

2.鍵盤訪問

  links[i].onclick=function(){
      return showPic(this)?false：true;
  }

     上面程式碼存在一個假定：使用者只會用滑鼠來點選這個連結。實際上，並非所有使用者都是使用滑鼠來瀏覽Web的。

      下面我們將介紹用於處理鍵盤事件的onkeypress事件處理函式。

       ①onkeypress事件與onclick事件觸發同樣的行為

  links[i].onclick=function(){
     return showPic(this)?false:true;
 }
  
  links[i].onkeypress=function(){
     return showPic(this)?false:true;
  }

    第二種方式：

 links[i].onkeypress=links[i].onclick;

       ②小心onkeypress

          然而onkeypress這個事件處理函式很容易出問題，使用者每按下一個按鍵都會觸發它。

          而幾乎在所有的瀏覽器中，用Tab鍵移動到某個連結然後按下回車也會觸發onclick事件。

          因此，最好不要使用onkeypress事件處理函式。onclick事件處理函式已經能滿足需要。雖然它叫“onclick”，但它對鍵盤的訪問的支援相當完美。

3.把JavaScript與CSS結合起來

     在把內嵌事件處理函式移出標誌文件時，我們在文件裡為JavaScript程式碼留下了掛鉤

<ul id="imagegallery">

    我們可以使用這個掛鉤用於css樣式表中：

   ①

#imagegallery li{
   display:inline; 
}

<link rel="stylesheet" href="styles/layout.css" type="text/css" media="screen"/>

4.DOM Core和HTML-DOM

      ①DOM Core：可以用來處理任何一種標記語言編寫出來的文件

        getElementById

        getElementsByTagName

        getAttribute

        setAttribute

      ② HTML-DOM：提供了許多描述各種HTML元素的屬性.

        onclick    

        element.getAttribute("src")  等價於 element.src   (這些方法與屬性互換)

      ③

       同樣的操作可以只使用DOM Core也可以使用HTML-DOM來實現。通常HTML-DOM更短的。但是它們都只能用來處理Web文件。

 placeholder.setAttribute("src",source);
// DOM Core

 placeholder.src=source;
// HTML-DOM