第六章 結構與行為的相互分離程度越大越好

標籤：

這一章讓javascript代碼完全移除HTML文檔。

編寫一個函數把有關操作關聯到onclick事件上。這個函數：

-檢查當前瀏覽器是否理解getElementsByTagName()方法；

-檢查當前瀏覽器是否理解getElementById()方法；

-構造一個迴圈來對連結進行遍曆處理

-對onclick事件處理函數進行設定

html檔案：

        <h1>chapter4 Snapshots</h1>        <ul id="imagegallery">            <li>                <a href="images/4-1.png"  title="藍眼蘿莉">圖片1</a>            </li>            <li>                <a href="images/4-2.png"  title="長發蘿莉">圖片2</a>               </li>            <li>                <a href="images/4-3.png"  title="明曉溪動漫圖">圖片3</a>            </li>            <li>                <a href="images/4-4.png"  title="黑子動漫圖">圖片4</a>            </li>                    </ul>        <img src="images/4-1.png" id="placeholder"/>        <p id="description">藍眼蘿莉</p>    

JS檔案：

<script type="text/javascript">
window.onload = ImgGallery;function showPic(pic){        var source = pic.getAttribute("href");    var placeholder = document.getElementById("placeholder");    placeholder.setAttribute("src",source);    /*在同一個網頁上切換顯示不同的文本: */    var text = pic.getAttribute("title");    var description = document.getElementById("description");    description.childNodes[0].nodeValue = text;}function ImgGallery(){if(!document.getElementsByTagName){    return false;}if(!document.getElementById){    return false;}if(!document.getElementById("imagegallery")){    return false;   //判斷id="imagegallery"的元素是否存在}var image = document.getElementById("imagegallery");var links = image.getElementsByTagName(‘a‘);//遍曆links數組裡的各個元素for(var i=0; i<links.length; i++){    links[i].onclick = function(){      showPic(this);      return false;      }　　}}</script>

 

第六章 結構與行為的相互分離程度越大越好