javascript
JavaScript 第四课 案例研究：JavaScript图片库
主要內(nèi)容：
- 編寫一個優(yōu)秀的標(biāo)記文件
- 編寫一個JavaScript函數(shù)以顯示用戶想要查看的內(nèi)容
- 由標(biāo)記出發(fā)函數(shù)調(diào)用
- 使用幾個新方法擴展這個JavaScript函數(shù)
學(xué)習(xí)過DOM，我們用JavaScript和DOM去建立一個圖片庫。最好的辦法是什么呢？
利用JavaScript來建立圖片庫是最佳的選擇：把整個圖片庫的瀏覽鏈接集中安排在圖片庫主頁里，只在用戶點擊了這個主頁里的某個圖片鏈接時才把相應(yīng)的圖片傳送給他。首先找到四張圖片，把它們修正成最適合于用瀏覽器來查看的圖片，就是400像素寬*300像素高。
4.1、標(biāo)記
第一項工作是為一些圖片創(chuàng)建一個鏈接清單。可以讓這些圖片按照特定順序排列，使用無序清單列表<ul>來列出那些鏈接。圖片也可以事先排好序，那就使用一個有序清單元素<ol>來標(biāo)記這些圖片鏈接。
代碼:
我們把這些標(biāo)記保存到gallery.html文件，并把圖片集中到目錄images里。我的images目錄和gallery.html文件位于同一目錄。
當(dāng)然，這并不是一個令人滿意的網(wǎng)頁。尤其是它的默認(rèn)行為還不太理想。我們提出幾點需要改進(jìn)的地方。
- 當(dāng)點擊某個鏈接時，我希望能留在這個網(wǎng)頁而不是轉(zhuǎn)到另一個窗口。
- 當(dāng)點擊某個鏈接時，我希望能在這個網(wǎng)頁上同時看到那張圖片以及原有的圖片清單。
為了實現(xiàn)我們提出的幾點改進(jìn)，我們要進(jìn)行哪些步驟呢？
- 通過增加一個“占位符”圖片的方法在這個主頁上位圖片預(yù)留一個瀏覽區(qū)域。
- 在點擊某個鏈接時，攔截這個網(wǎng)頁的默認(rèn)行為。
- 在點擊某個攔截時，把”占位符“替換為與那個鏈接相對應(yīng)的圖片。
我們先來解決”占位符“圖片的問題。選用了一個類似于名片的圖片。
把下列代碼添加到圖片清單的末尾：
<img id = "placeholder" src = "images/placeholder.gif" alt = "my image gallery"/>
如上圖所示，那么“占位符圖片”我們已經(jīng)搞好了。
下面開始編寫JavaScrpit代碼。
4.2????JavaScript
????為了把“占位符”圖片替換為想要查看的圖片，需要改變它的src屬性。setAttribute是完成這項工作的最佳選擇，而我將利用這個方法寫一個函數(shù)。這個函數(shù)只有一個參數(shù)，就是一個圖片鏈接。它通過改變“占位符圖片”的src屬性的辦法將其替換為參數(shù)照片。
1、首先，需要給函數(shù)起一個名字，簡明扼要。我們將其命名為showPic。還需要給這個函數(shù)參數(shù)起一個名字。命名為whichpic：
function showPic(whichpic)
whichpic 代表著一個元素節(jié)點，具體的說，那是一個指向某個圖片的<a>元素。我需要分解出圖片的文件路徑，這可以通過在whichpic元素上調(diào)用getAttribute得到。只要把"href"作為參數(shù)傳遞給getAttribute就行了：
? ? whichpic.getAttribute("href")
我們把這個路徑存入變量source:
var source =?whichpic.getAttribute("href");
2、獲取“占位符”圖片，這對getElementById來說很容易：
document.getElementById("placeholder")
我們可以把獲得的這個元素賦給變量placeholder:
var placeholder = document.getElementById("placeholder")；
我們聲明了兩個變量 placeholder和 source。這可以讓腳本簡明易讀。
3、我將使用setAttribute對placeholder元素的src屬性進(jìn)行刷新。setAttribute函數(shù)有兩個參數(shù)，一個是屬性名，一個是屬性的值。具體到這個例子，我想對src屬性進(jìn)行設(shè)置，所以第一個參數(shù)是"src"；第二個參數(shù)是src屬性的值，我們已經(jīng)把它保存到source變量里了。
placeholder.setAttribute("src",source)；
setAttribute方法是“第1級DOM”（DOM）的組成部分，它可以設(shè)置任意元素節(jié)點的任意屬性。
"第1級DOM"的優(yōu)勢是可移植性好。DOM是一種適用于多種環(huán)境和多種應(yīng)用程序設(shè)計語言的通用型API。
4.3應(yīng)用這個JavaScript函數(shù)
我們來總結(jié)一下這個函數(shù)：
function showPic(whichpic){
? ? var source = whichpic.getAttribute("href");
? ? var placeholder = document.getElementById("placeholder");
? ? placeholder.setAttribute("src",source);
}
下面我們在圖片庫中使用它。我們將其保存為擴展名為showPic.js的文本文件。
我們把所有的圖片集中放在一個images子目錄里，把所有的JavaScript腳本文件集中放在一個子目錄srcipts里。
現(xiàn)在，我們需要在圖片庫文檔里插入一個鏈接來引用這個JavaScript腳本文件。我們將下面這行代碼插入到HTML文檔的</body>標(biāo)簽之前：
<script type = "text/javascript" src = "scripts/showPic.js"></script>
此外，我們還需要為圖片列表的鏈接添加行為了，也就是事件處理函數(shù)（event handler），才能達(dá)成目標(biāo)。
事件處理函數(shù)
事件處理函數(shù)的作用是，在特定事件發(fā)生時調(diào)用特定的JavaScript代碼。例如，想在鼠標(biāo)指針懸停在某個元素上時觸發(fā)一個動作，就需要使用onmouseover事件處理函數(shù)；如果想在鼠標(biāo)指針離開某個元素時觸發(fā)一個動作，就需要使用onmouseout事件處理函數(shù)。我們想在用于點擊某個鏈接時觸發(fā)一個動作，所以需要onclick事件處理函數(shù)。
showPic函數(shù)需要一個參數(shù)：一個帶有href屬性的元素節(jié)點參數(shù)。當(dāng)我們把Onclick事件處理函數(shù)嵌入到一個鏈接時，需要把這個鏈接本身用作showPic函數(shù)的參數(shù)。
我們可以使用this關(guān)鍵字。大概意思就是"這個對象"。在這里，this就表示“這個<a>元素節(jié)點”:
showPic（this）;
綜上所述，我們使用onclick事件處理函數(shù)來給鏈接添加行為。添加事件處理函數(shù)的語法如下所示：
event = "JavaScript statement(s)"請注意：JavaScript代碼包含在一對引號之間。我們可以把任意數(shù)量的JavaScript語句放在這對引號之間，只要把各語句用分號隔開就行。
? ? onclick()事件就可以調(diào)用showPic方法了：
????? ? onclick = "showPic(this);"
不過僅僅把事件處理函數(shù)放到一個圖片列表中，還會遇到一個問題：點擊鏈接時，不僅showPic函數(shù)會被調(diào)用，鏈接被點擊的默認(rèn)行為也會被調(diào)用。這意味著用戶還是會被帶到圖片查看窗口。因此我們要阻止這個默認(rèn)行為。
? ? 我們來了解一下，事件處理函數(shù)的工作機制。在給某個元素添加了事件處理函數(shù)后，一旦事件發(fā)生，相應(yīng)的JavaScript代碼就會得到執(zhí)行。被調(diào)用的JavaScript代碼可以返回一個值，這個值將被傳遞給事件處理函數(shù)。例如當(dāng)我們給某個鏈接添加一個onclick事件處理函數(shù)，并讓這個處理函數(shù)所觸發(fā)的JavaScript代碼返回布爾值true或false。這樣一來，當(dāng)這個鏈接被點擊時，如果那段JavaScript代碼返回的是true，onclick事件處理函數(shù)就認(rèn)為“這個鏈接被點擊了”，就會跳轉(zhuǎn)。相反，如果返回的值是false，onclick事件處理函數(shù)就認(rèn)為“這個鏈接沒有被點擊”，不會跳轉(zhuǎn)。
? ? 我們可以驗證一下，添加一行代碼：
? ? <a href = "https://www.baidu.com" onclick = "return false;">Click me</a>
當(dāng)點擊這個鏈接時，因為onclick事件處理函數(shù)所觸發(fā)的JavaScript代碼返回給它的值是false,所以這個鏈接的默認(rèn)行為沒有被觸發(fā)，就是不會跳轉(zhuǎn)到百度。
同樣，我們在onclick事件處理函數(shù)所觸發(fā)的JavaScript代碼里增加一條return false語句，就可以防止用戶被帶到目標(biāo)鏈接窗口：
下面是完整的代碼：
如：點擊Big Ben
4.4對這個函數(shù)進(jìn)行擴展
在同一個網(wǎng)頁上切換顯示不同的文本。
圖片庫文檔里的每個圖片鏈接都有一個title屬性。可以把這個屬性取出來并讓它和相應(yīng)的圖片一同顯示在網(wǎng)頁上。title屬性的值可以通過getAttribute輕而易舉的得到。
var text = whichpic.getAttribute(title)；
下面是DOM提供的幾個新屬性：
childNodes屬性：在一個節(jié)點樹上，childNodes屬性可以用來獲取任何一個元素的所有子元素，它是一個包含這個元素全部子元素的數(shù)組：element.childNodes。
nodeType屬性：每個節(jié)點都有一個nodeType屬性。元素節(jié)點的nodeType屬性是1；屬性節(jié)點的nodeType屬性是2；文本節(jié)點的nodeType屬性是3；
nodeValue屬性：可以改變一個文本節(jié)點的值。
firstChild和lastChild屬性。
下面是我們的一個小實例：
Html:
JavaScript:
function showPic(whichpic){var source = whichpic.getAttribute("href");var placeholder = document.getElementById("placeholder");placeholder.setAttribute("src",source);var text = whichpic.getAttribute("title");//當(dāng)圖片庫頁面的某個圖片鏈接被點擊時，這個鏈接的title屬性值將被提取并保存到text變量中var description = document.getElementById("description");//得到id是"description"的<p>元素，并把它保存到變量description里；description.firstChild.nodeValue= text;//把description對象的第一個節(jié)點的nodeValue屬性值設(shè)置為變量text的值。alert(description.firstChild.nodeValue);} function countBodyChildren(){var body_element = document.getElementsByTagName("body")[0];//alert(body_element.nodeType); }window.onload = countBodyChildren;CSS:
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:blod;text-decoration:none; } ul{padding:0; } li{float:left;padding:1em;list-style:none; } img{display:block;clear:both; }主要內(nèi)容是：
1、如何利用DOM所提供的方法去編寫圖片庫腳本。
2、如何利用事件處理函數(shù)把JavaScript代碼與網(wǎng)頁集成在一起。
總結(jié)
以上是生活随笔為你收集整理的JavaScript 第四课 案例研究：JavaScript图片库的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： java session超时判断_详解S
- 下一篇： 4W字全面解读数据中台、数据仓库和数据湖