# 案例研究：JavaScript圖片庫
- <a href="#no1">4.1 標記</a>
- <a href="#no2">4.2 JavaScript</a>
- <a href="#no3">4.3 應用這個JavaScript函數</a>
- <a href="#no4">4.4 對這個函數進行擴展</a>
- <a href="#no5">4.5 小結</a>
**本章內容**
- 編寫一個優秀的標記文件。
- 編寫一個JavaScript函數以顯示用戶想要查看的圖片。
- 由標記觸發函數調用。
- 使用幾個新方法擴展這個JavaScript函數。
##<a name="no1">4.1 標記</a>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<h1>Fc-demo</h1>
<ul>
<li><a href="http://7xr9pe.com1.z0.glb.clouddn.com/1.jpg" alt="第1張圖片">第1張圖片</a></li>
<li><a href="http://7xr9pe.com1.z0.glb.clouddn.com/2.jpg" alt="第2張圖片">第2張圖片</a></li>
<li><a href="http://7xr9pe.com1.z0.glb.clouddn.com/3.jpg" alt="第3張圖片">第3張圖片</a></li>
<li><a href="http://7xr9pe.com1.z0.glb.clouddn.com/4.jpg" alt="第4張圖片">第4張圖片</a></li>
</ul>
</body>
</html>
改進點：
1. 點擊某個連接時，停留在當前頁面。
2. 點擊某個連接時，能同時看到圖片以及原有圖片清單。
做法：
1. 通過增加一個“占位符”圖片的方法在這個頁面上為圖片預留一個瀏覽區域。
2. 在點擊某個鏈接時，攔截這個網頁的默認行為。
3. 在點擊某個鏈接時，把“占位符”圖片替換為與那個連接對應的圖片。
把下面代碼插入到圖片清單的末尾：
<img id="placeholder" src="http://7xr9pe.com1.z0.glb.clouddn.com/0.gif" alt="">
##<a name="no2">4.2 JavaScript</a>
1. 需要給函數起一個好名字，它應該能描述這個函數的用途，還要簡明扼要。
#
function showPic(whichpic)
#
`whichpic`代表著一個元素節點。
whichpic.getAttribute('href');
把這個路徑存入變量 `source`：
var source = whichpic.getAttribute('href');
獲取“占位符”圖片：
var placeholder = document.getElementById('placeholder');
設置“占位符”路徑：
placeholder.setAttribute('src', source);
###4.2.1 非DOM解決方案
element.value = 'the new value';
等價于
element.setAttribute('value', 'the new value');
###4.2.2 最終的函數代碼清單
function showPic(whichpic){
var source = whichpic.getAttribute('href');
var placeholder = document.getElementById('placeholder');
placeholder.setAttribute('src', source);
}
##<a name="no3">4.3 應用這個JavaScript函數</a>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<h1>Fc-demo</h1>
<ul>
<li><a href="http://7xr9pe.com1.z0.glb.clouddn.com/1.jpg" onclick="showPic(this);return false;" alt="第1張圖片">第1張圖片</a></li>
<li><a href="http://7xr9pe.com1.z0.glb.clouddn.com/2.jpg" onclick="showPic(this);return false;" alt="第2張圖片">第2張圖片</a></li>
<li><a href="http://7xr9pe.com1.z0.glb.clouddn.com/3.jpg" onclick="showPic(this);return false;" alt="第3張圖片">第3張圖片</a></li>
<li><a href="http://7xr9pe.com1.z0.glb.clouddn.com/4.jpg" onclick="showPic(this);return false;" alt="第4張圖片">第4張圖片</a></li>
</ul>
<img id="placeholder" src="http://7xr9pe.com1.z0.glb.clouddn.com/0.gif" alt="">
<script>
function showPic(whichpic){
var source = whichpic.getAttribute('href');
var placeholder = document.getElementById('placeholder');
placeholder.setAttribute('src', source);
}
</script>
</body>
</html>
##<a name="no4">4.4 對這個函數進行擴展</a>
###4.4.1 childNodes 屬性
> 在一顆節點樹上，`childNodes`屬性可以用來獲取任何一個元素的所有子元素，它是一個包含這個元素全部子元素的數組：
element.childNodes
###4.4.2 nodeType 屬性
> 每一個節點都有`nodeType`屬性,`nodeType`的值是一個數字而非字符串。
node.nodeType
**`nodeType`屬性總共有12種可取值，其中僅有3中具有實用價值。**
1. 元素節點的`nodeType`屬性值是1。
2. 屬性節點的`nodeType`屬性值是2。
3. 文本節點的`nodeType`屬性值是3。
###4.4.3 在標記里增加一段描述
> 目的：將文本節點的值替換成目標圖片連接的title值。
<p id="description">Choose an image.</p>
將如上代碼插入圖片“占位符”后面。
###4.4.4 用JavaScript改變這段描述
> 在圖片連接被點擊時，為了能動態的用圖片`title`替換掉圖片說明，需要對`showPic`函數做一些修改。
function showPic(whichpic){
var source = whichpic.getAttribute('href');
var placeholder = document.getElementById('placeholder');
placeholder.setAttribute('src', source);
var text = whichpic.getAttribute('alt');
var description = document.getElementById('description');
}
###4.4.5 nodeValie 屬性
> 如果想改變一個文本節點的值，就用DOM提供的`nodeValue`屬性，它用來得到（和設置）一個節點的值：
node.nodeValue
###4.4.6 firstChild 和 lastChild 屬性
> 數組元素`childNodes[0]`有個更直觀易讀的同義詞。無論何時何地，只需要訪問childNoes數組的第一個元素，都可以把它寫成`firstChild`。
node.firstChild == node.childNodes[0]
與之對應的 `lastChild`屬性：
node.lastChild == node.childNodes[node.childNodes.length - 1]
###4.4.7 利用 nodeValue 屬性刷新這段描述
**最終的代碼清單**
function showPic(whichpic){
var source = whichpic.getAttribute('href');
var placeholder = document.getElementById('placeholder');
placeholder.setAttribute('src', source);
var text = whichpic.getAttribute('alt');
var description = document.getElementById('description');
description.firstChild.nodeValue = text;
}
##<a name="no5">4.5 小結</a>
> 本章介紹了一個簡單的`JavaScript`應用案例，還介紹了DOM提供的幾個信屬性，它們是：
- childNodes
- nodeType
- nodeValue
- firstChild
- lastChild
