title: 《DOM編程藝術》二、javascript圖片庫
date: 2017-06-03 10:00:29
tags: DOM編程藝術
從這一篇開始會逐步完成一個圖片庫的案例，但我們不能直接把所有的圖片直接放到一個頁面裏，因爲圖片下載的時間較長，用戶需要等待很長時間去加載一個網頁，所以我們需要一個圖片庫，把整個圖片庫的瀏覽鏈接集中安排在主頁裏，只在用戶點擊了這個主頁裏的某個圖片鏈接時才把相應的圖片加載。
1、建立基礎的HTML結構
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "utf-8"/>
<title>Image Gallery</title>
</head>
<body>
<h1>Snapshots</h1>
<ul>
<li>
<a href = "images/fireworks.jpg" title = "A fireworks display">Fireworks</a>
</li>
<li>
<a href = "images/coffee.jpg" title = "A cup of black offee">Coffee</a>
</li>
<li>
<a href = "images/rose.jpg" title = "A red,red rose">Rose</a>
</li>
<li>
<a href = "images/bigen.jpg" title = "The famous clock">Big Ben</a>
</li>
</ul>
</body>
</html>
2、改進圖片庫
這個網頁現在的功能是：
-
清單列表中的每個鏈接分別指向不同的圖片，點擊跳轉到相應的圖片頁面。
-
從圖片返回列表要藉助於瀏覽器的back功能。
需要改進的地方：
-
點擊某個鏈接時，能留在這網頁而不是轉到另一個窗口。
-
點擊某個鏈接時，能在這個網頁上同時看到那張圖片及原有清單列表。
-
點擊某個鏈接時，在圖片的下方顯示改圖片的描述文字。
完成上述目標要完成的幾項改進：
-
通過增加一個佔位圖片的辦法在這個主頁上爲圖片預留一個瀏覽區域。
-
點擊某個鏈接時，攔截這個網頁的默認行爲。把佔位圖片替換爲與那個鏈接相對應的圖片。
-
點擊某個鏈接時，獲取鏈接的描述文字，保存到圖片下方的位置。
第一步、增加佔位圖片
html部分
<img id = "placeholder" src = "images/placeholder.jpg" alt = "my image galley"/>js部分
function showPic(whichpic){
var source = whichpic.getAttribute("href");
var placeholder = document.getElementById("placeholder");
placeholder.setAttribute("src",source);
}爲了把佔位圖片替換爲要查看的圖片，需要一個方法來改變它的src屬性。
參數whichpic代表一個指向某個圖片的a元素，變量source是參數a元素的href屬性值，變量placeholder是佔位圖片的元素對象。
我們還有另一種方法，也就是非DOM方法，直接用
placeholder.src = source;，效果等同於placeholder.setAttribute("src",source);，我選擇DOM方法的原因是setAttribute是第1級DOM，它的兼容性和可移植性更好，DOM本身適用於任何一種標記語言，DOM是一種適用於多種環境和多種程序設計語言的通用型API，而非DOM方法只能適用於web瀏覽器，所以在以後的選擇時，儘量選擇DOM方法。
最後將該方法單獨存爲一個叫做show_pic.js的文件並引用。在實際開發中，可以將多個功能放到一個js文件中，這樣可以減少對站點的請求次數，提高性能。
<script src="script/script.js"></script>第二步、事件處理函數
事件處理函數的作用是在特定事件發生時，調用特定的javascript代碼。這個案例中要使用的是onclick點擊事件。
<a href = "images/fireworks.jpg" onclick = "showPic(this);return false;" title = "A fireworks display">Fireworks</a>在每一條鏈接上增加onlcick事件和處理程序。showPic就是之前寫好的方法，將this作爲參數傳進去，this這裏指的就是a元素對象。
return false的作用是阻止默認行爲被調用，a元素的默認行爲是打開一個新窗口，我不需要這個效果，所以要組織。
事件處理函數的工作機制：在給某個元素添加了事件處理函數後，一旦事件發生，javascript代碼便會執行，這些被調用的javascript代碼可以返回一個值，這個值將被傳遞給事件處理函數，具體到此案例中，當onclick被觸發時，如果執行的代碼返回true，onclick事件處理函數就會認爲這個鏈接被點擊了，如果返回false，onclick事件處理函數就認爲這個鏈接沒有被點擊，所以當onclick認爲沒有點擊鏈接，自然也不會打開一個新鏈接。
第三步、增加圖片描述文字
現在我要用DOM給圖片增加一段描述，這段描述的位置在img標籤之後，同時也起到了佔位符的作用
<p id="description">Choose an image</p>爲了實現這個功能也需要擴展一下showPic函數。
-
獲取a標籤的title屬性值，並存入變量text。
-
獲取描述文本的元素，id值爲description的p元素，保存到變量description。
-
把description對象的第一個子節點的nodeValue屬性值設置爲變量text的值。
function showPic(whichpic){
var source = whichpic.getAttribute("href");
var placeholder = document.getElementById("placeholder");
placeholder.setAttribute("src",source);
var text = whichpic.getAttribute('title'); // 1
var description = document.getElementById('description'); // 2
description.firstChild.nodeValue = text; // 3
}這裏設置描述文本我使用的是nodeChild屬性，nodeChild屬性可以設置和獲取文本元素的文本內容。需要注意的是必須是文本節點。
比如description是一個元素節點，那麼description.nodeChild獲取的就是null，用description的子節點纔有效description.firstChild.nodeChild，這裏description只有一個子節點並且是文本節點，所以使用firstChild和lastChild都一樣，如果description有好幾個子元素，要獲取其中的某個可以用children[index]來獲取。
最終效果
最後我們增加一些css樣式來美化一下頁面,創建style.css文件並引入html文件中。
body {
font-family: "Helvetica","Arial",serif;
color: #333;
background-color: #ccc;
margin: 1em 10%;
}
h1 {
color: #333;
background-color: transparent;
}
a {
color: #c60;
background-color: transparent;
font-weight: bold;
text-decoration: none;
}
ul {
padding: 0;
}
li {
float: left;
padding: 1em;
list-style: none;
}
img {
display: block;
clear:both;
}以下是script.js文件的最終內容
function showPic(whichpic){
var source = whichpic.getAttribute("href");
var placeholder = document.getElementById("placeholder");
placeholder.setAttribute("src",source);
var text = whichpic.getAttribute('title');
var description = document.getElementById('description');
description.firstChild.nodeValue = text;
}html文件的最終結構如下
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "utf-8"/>
<title>Image Gallery</title>
<link rel="stylesheet" type="" href="./css/style.css">
</head>
<body>
<h1>Snapshots</h1>
<ul>
<li>
<a href = "images/fireworks.jpg" onclick = "showPic(this);return false;" title = "A fireworks display">Fireworks</a>
</li>
<li>
<a href = "images/coffee.jpg" onclick = "showPic(this);return false;" title = "A cup of black offee">Coffee</a>
</li>
<li>
<a href = "images/rose.jpg" onclick = "showPic(this);return false;" title = "A red,red rose">Rose</a>
</li>
<li>
<a href = "images/bigben.jpg" onclick = "showPic(this);return false;" title = "The famous clock">Big Ben</a>
</li>
</ul>
<img id = "placeholder" src = "images/placeholder.gif" alt = "my image galley"/>
<p id="description">Choose an image</p>
<script src="script/script.js"></script>
</body>
</html>頁面的最終效果如下，點擊i鏈接可以改變圖片和描述文字。
