JavaScript 第四課 案例研究：JavaScript圖片庫

主要內容：

  • 編寫一個優秀的標記文件
  • 編寫一個JavaScript函數以顯示用戶想要查看的內容
  • 由標記出發函數調用
  • 使用幾個新方法擴展這個JavaScript函數

學習過DOM，我們用JavaScript和DOM去建立一個圖片庫。最好的辦法是什么呢？

利用JavaScript來建立圖片庫是最佳的選擇：把整個圖片庫的瀏覽鏈接集中安排在圖片庫主頁里，只在用戶點擊了這個主頁里的某個圖片鏈接時才把相應的圖片傳送給他。首先找到四張圖片，把它們修正成最適合于用瀏覽器來查看的圖片，就是400像素寬*300像素高。

4.1、標記

第一項工作是為一些圖片創建一個鏈接清單。可以讓這些圖片按照特定順序排列，使用無序清單列表<ul>來列出那些鏈接。圖片也可以事先排好序，那就使用一個有序清單元素<ol>來標記這些圖片鏈接。

代碼:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="utf-8"></meta><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 coffee”>Coffee</a></li><li><a href = "images/rose.jpg" title = “ A red，red rose”>Rose</a></li><li><a href = "images/bigben.jpg" title = “ The famous clock”>Big Ben</a></li></ul>
</body>

我們把這些標記保存到gallery.html文件，并把圖片集中到目錄images里。我的images目錄和gallery.html文件位于同一目錄。

當然，這并不是一個令人滿意的網頁。尤其是它的默認行為還不太理想。我們提出幾點需要改進的地方。

  • 當點擊某個鏈接時，我希望能留在這個網頁而不是轉到另一個窗口。
  • 當點擊某個鏈接時，我希望能在這個網頁上同時看到那張圖片以及原有的圖片清單。

為了實現我們提出的幾點改進，我們要進行哪些步驟呢？

  • 通過增加一個“占位符”圖片的方法在這個主頁上位圖片預留一個瀏覽區域。
  • 在點擊某個鏈接時，攔截這個網頁的默認行為。
  • 在點擊某個攔截時，把”占位符“替換為與那個鏈接相對應的圖片。

我們先來解決”占位符“圖片的問題。選用了一個類似于名片的圖片。

把下列代碼添加到圖片清單的末尾：

<img id = "placeholder" src = "images/placeholder.gif" alt = "my image gallery"/>


如上圖所示，那么“占位符圖片”我們已經搞好了。

下面開始編寫JavaScrpit代碼。

4.2????JavaScript

????為了把“占位符”圖片替換為想要查看的圖片，需要改變它的src屬性。setAttribute是完成這項工作的最佳選擇，而我將利用這個方法寫一個函數。這個函數只有一個參數，就是一個圖片鏈接。它通過改變“占位符圖片”的src屬性的辦法將其替換為參數照片。

1、首先，需要給函數起一個名字，簡明扼要。我們將其命名為showPic。還需要給這個函數參數起一個名字。命名為whichpic：

function showPic(whichpic)

whichpic 代表著一個元素節點，具體的說，那是一個指向某個圖片的<a>元素。我需要分解出圖片的文件路徑，這可以通過在whichpic元素上調用getAttribute得到。只要把"href"作為參數傳遞給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屬性進行刷新。setAttribute函數有兩個參數，一個是屬性名，一個是屬性的值。具體到這個例子，我想對src屬性進行設置，所以第一個參數是"src"；第二個參數是src屬性的值，我們已經把它保存到source變量里了。

placeholder.setAttribute("src",source)；


setAttribute方法是“第1級DOM”（DOM）的組成部分，它可以設置任意元素節點的任意屬性。

"第1級DOM"的優勢是可移植性好。DOM是一種適用于多種環境和多種應用程序設計語言的通用型API。

4.3應用這個JavaScript函數

我們來總結一下這個函數：

function showPic(whichpic){

? ? var source = whichpic.getAttribute("href");

? ? var placeholder = document.getElementById("placeholder");

? ? placeholder.setAttribute("src",source);

}

下面我們在圖片庫中使用它。我們將其保存為擴展名為showPic.js的文本文件。

我們把所有的圖片集中放在一個images子目錄里，把所有的JavaScript腳本文件集中放在一個子目錄srcipts里。

現在，我們需要在圖片庫文檔里插入一個鏈接來引用這個JavaScript腳本文件。我們將下面這行代碼插入到HTML文檔的</body>標簽之前：

<script type = "text/javascript" src = "scripts/showPic.js"></script>

此外，我們還需要為圖片列表的鏈接添加行為了，也就是事件處理函數（event handler），才能達成目標。

事件處理函數

事件處理函數的作用是，在特定事件發生時調用特定的JavaScript代碼。例如，想在鼠標指針懸停在某個元素上時觸發一個動作，就需要使用onmouseover事件處理函數；如果想在鼠標指針離開某個元素時觸發一個動作，就需要使用onmouseout事件處理函數。我們想在用于點擊某個鏈接時觸發一個動作，所以需要onclick事件處理函數。

showPic函數需要一個參數：一個帶有href屬性的元素節點參數。當我們把Onclick事件處理函數嵌入到一個鏈接時，需要把這個鏈接本身用作showPic函數的參數。

我們可以使用this關鍵字。大概意思就是"這個對象"。在這里，this就表示“這個<a>元素節點”:
showPic（this）;

綜上所述，我們使用onclick事件處理函數來給鏈接添加行為。添加事件處理函數的語法如下所示：

event = "JavaScript statement(s)"請注意：JavaScript代碼包含在一對引號之間。我們可以把任意數量的JavaScript語句放在這對引號之間，只要把各語句用分號隔開就行。

? ? onclick()事件就可以調用showPic方法了：

????? ? onclick = "showPic(this);"

不過僅僅把事件處理函數放到一個圖片列表中，還會遇到一個問題：點擊鏈接時，不僅showPic函數會被調用，鏈接被點擊的默認行為也會被調用。這意味著用戶還是會被帶到圖片查看窗口。因此我們要阻止這個默認行為。

? ? 我們來了解一下，事件處理函數的工作機制。在給某個元素添加了事件處理函數后，一旦事件發生，相應的JavaScript代碼就會得到執行。被調用的JavaScript代碼可以返回一個值，這個值將被傳遞給事件處理函數。例如當我們給某個鏈接添加一個onclick事件處理函數，并讓這個處理函數所觸發的JavaScript代碼返回布爾值true或false。這樣一來，當這個鏈接被點擊時，如果那段JavaScript代碼返回的是true，onclick事件處理函數就認為“這個鏈接被點擊了”，就會跳轉。相反，如果返回的值是false，onclick事件處理函數就認為“這個鏈接沒有被點擊”，不會跳轉。

? ? 我們可以驗證一下，添加一行代碼：

? ? <a href = "https://www.baidu.com" onclick = "return false;">Click me</a>

當點擊這個鏈接時，因為onclick事件處理函數所觸發的JavaScript代碼返回給它的值是false,所以這個鏈接的默認行為沒有被觸發，就是不會跳轉到百度。

同樣，我們在onclick事件處理函數所觸發的JavaScript代碼里增加一條return false語句，就可以防止用戶被帶到目標鏈接窗口：

onclick = "showPic(this);return false;"

下面是完整的代碼：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="utf-8"></meta><title>	Image Gallery</title>
</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 coffee”>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><a href = "https://www.baidu.com"οnclick="return false;">Click me</a></ul><img id="placeholder" src="images/placeholder.gif" alt="my image gallery"/><script type="text/javascript" src="scripts/showPic.js"></script>
</body>

如：點擊Big Ben


4.4對這個函數進行擴展

在同一個網頁上切換顯示不同的文本。

圖片庫文檔里的每個圖片鏈接都有一個title屬性。可以把這個屬性取出來并讓它和相應的圖片一同顯示在網頁上。title屬性的值可以通過getAttribute輕而易舉的得到。

var text = whichpic.getAttribute(title)；

下面是DOM提供的幾個新屬性：

childNodes屬性：在一個節點樹上，childNodes屬性可以用來獲取任何一個元素的所有子元素，它是一個包含這個元素全部子元素的數組：element.childNodes。

nodeType屬性：每個節點都有一個nodeType屬性。元素節點的nodeType屬性是1；屬性節點的nodeType屬性是2；文本節點的nodeType屬性是3；

nodeValue屬性：可以改變一個文本節點的值。

firstChild和lastChild屬性。

下面是我們的一個小實例：
Html:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="utf-8"></meta><title>	Image Gallery</title><link rel="stylesheet" type="text/css" href="css/layout.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 coffee”>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><li><a href = "https://www.baidu.com" οnclick="return true;">Click me (baidu)</a></li></ul><img id="placeholder" src="images/placeholder.gif" alt="my image gallery"/><p id = "description">Choose an image. </p><script type="text/javascript" src="scripts/showPic.js"></script></body>

JavaScript:

function showPic(whichpic){var source = whichpic.getAttribute("href");var placeholder = document.getElementById("placeholder");placeholder.setAttribute("src",source);var text = whichpic.getAttribute("title");//當圖片庫頁面的某個圖片鏈接被點擊時，這個鏈接的title屬性值將被提取并保存到text變量中var description = document.getElementById("description");//得到id是"description"的<p>元素，并把它保存到變量description里；description.firstChild.nodeValue= text;//把description對象的第一個節點的nodeValue屬性值設置為變量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;
}

主要內容是：

1、如何利用DOM所提供的方法去編寫圖片庫腳本。

2、如何利用事件處理函數把JavaScript代碼與網頁集成在一起。






本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/news/274073.shtml
繁體地址，請注明出處：http://hk.pswp.cn/news/274073.shtml
英文地址，請注明出處：http://en.pswp.cn/news/274073.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！

相關文章

windows下mongodb安裝與使用整理

windows下mongodb安裝與使用整理

一、首先安裝mongodb 1.下載地址&#xff1a;http://www.mongodb.org/downloads 2.解壓縮到自己想要安裝的目錄&#xff0c;比如d:\mongodb 3.創建文件夾d:\mongodb\data\db、d:\mongodb\data\log&#xff0c;分別用來安裝db和日志文件&#xff0c;在log文件夾下創建一個日志文…
閱讀更多...
可變參數列表（va_list,va_arg,va_copy,va_start,va_end）

可變參數列表（va_list,va_arg,va_copy,va_start,va_end）

本文轉自:http://blog.csdn.net/costa100/article/details/5787068 va_list arg_ptr&#xff1a;定義一個指向個數可變的參數列表指針&#xff1b; 　　 　　va_start(arg_ptr, argN)&#xff1a;使參數列表指針arg_ptr指向函數參數列表中的第一個可選參數&#xff0c;說明&…
閱讀更多...
src與href屬性的區別

src與href屬性的區別

src和href之間存在區別&#xff0c;能混淆使用。src用于替換當前元素&#xff0c;href用于在當前文檔和引用資源之間確立聯系。 src是source的縮寫&#xff0c;指向外部資源的位置&#xff0c;指向的內容將會嵌入到文檔中當前標簽所在位置&#xff1b;在請求src資源時會將其指向…
閱讀更多...
USACO4.12Beef McNuggets(背包+數論）

USACO4.12Beef McNuggets(背包+數論）

昨天晚上寫的一題 結果USACO一直掛中 今天交了下 有一點點的數論知識 背包很好想 就是不好確定上界 官方題解&#xff1a; 這是一個背包問題。一般使用動態規劃求解。 一種具體的實現是&#xff1a;用一個線性表儲存所有的節點是否可以相加得到的狀態&#xff0c;然后每次可以…
閱讀更多...
Java 循環語句中 break,continue,return有什么區別？

Java 循環語句中 break,continue,return有什么區別？

break 結束循環&#xff0c;跳出循環體,進行后面的程序;continue 結束本次循環&#xff0c;進行下次循環;return 跳出循環體所在的方法&#xff0c;相當于結束該方法; 例子&#xff1a; public class whiletrueTest{public static void main(String[] args) {heihei();haha();…
閱讀更多...
Epoll模型詳解

Epoll模型詳解

轉自http://blog.163.com/huchengsz126/blog/static/73483745201181824629285/ Linux 2.6內核中提高網絡I/O性能的新方法-epoll I/O多路復用技術在比較多的TCP網絡服務器中有使用&#xff0c;即比較多的用到select函數。 1、為什么select落后 首先&#xff0c;在Linux內核中…
閱讀更多...
運算放大器單電源應用中的使用齊納二極管偏置方法

運算放大器單電源應用中的使用齊納二極管偏置方法

運算放大器單電源應用中的偏置方法除了使用大電阻使運放輸出達到電源電壓的一半外&#xff0c;還有使用齊納二極管&#xff08;穩壓管&#xff09;方法也能得到達到應用目的。 下面就推薦幾個齊納二極管&#xff08;分別對應著電源電壓是15V,12V&#xff0c;9V;5V&#xff09; …
閱讀更多...
Java——demo之仿ATM操作

Java——demo之仿ATM操作

java.util.Scanner類&#xff0c;這是一個用于掃描輸入文本的新的實用程序。其中nextInt()獲取String型&#xff0c;而next()獲取int、double型。這是一個仿ATM的小程序。 實現條件 1.登陸界面&#xff0c;2.三次登陸機會&#xff0c;登陸成功進入登陸菜單&#xff0c;3&#x…
閱讀更多...
dpi 、 dip 、分辨率、屏幕尺寸、px、density 關系以及換算

dpi 、 dip 、分辨率、屏幕尺寸、px、density 關系以及換算

本文轉自&#xff1a;http://www.cnblogs.com/yaozhongxiao/archive/2014/07/14/3842908.html 一、基本概念 dip &#xff1a; Density independent pixels &#xff0c;設備無關像素。 dp &#xff1a;就是dip px &#xff1a; 像素 dpi &#xf…
閱讀更多...
Ninject使用demo

Ninject使用demo

public class HomeController : Controller{public ActionResult Index(){ //核心對象IKernel ninjectKernel new StandardKernel();ninjectKernel.Bind<IValueCaculator>().To<LinqValueCalcalator>(); //方案1&#xff1a;獲取接口實例IV…
閱讀更多...
Java 集合中關于Iterator 和ListIterator的詳解

Java 集合中關于Iterator 和ListIterator的詳解

1.Iterator Iterator的定義如下&#xff1a;public interface Iterator<E> {}Iterator是一個接口&#xff0c;它是集合的迭代器。集合可以通過Iterator去遍歷集合中的元素。Iterator提供的API接口如下&#xff1a;forEachRemaining(Consumer<? super E> action)&a…
閱讀更多...
使用xrandr和cvt命令添加自定義的分辨率模式

使用xrandr和cvt命令添加自定義的分辨率模式

可以使用xrandr -q命令查看當前支持的分辨率模式: 如果過沒有你想要的分辨率模式,則需要自己創建新的分辨率模式,例如,我想要創建800x750的分辨率模式,步驟如下: 1.使用cvt命令創建新的分辨率: 2.使用xrandr –newmode modeline信息(CVT命令產生的結果)創建新的mode: $xra…
閱讀更多...
Java List集合

Java List集合

我們先看一下jdk1.9對其的描述&#xff1a;什么是List&#xff0c;也就是一個有序集合(序列)。1.List接口 List集合代表一個有序集合&#xff0c;集合中每個元素都有其對應的順序索引。List集合允許使用重復元素&#xff0c;可以通過索引來訪問指定位置的集合元素。 List接口繼…
閱讀更多...
winform錯誤提示 ：窗口類名無效(Window class name is not valid)

winform錯誤提示 ：窗口類名無效(Window class name is not valid)

winfrom 程序在 xp 操作系統上報錯提示 窗口類名無效(Window class name is not valid) 解決方法 注釋 Program類 里 這句 Application.EnableVisualStyles(); 解決轉載于:https://www.cnblogs.com/z_lb/p/3288850.html
閱讀更多...
如何在linux下通過ssh運行X圖形軟件

如何在linux下通過ssh運行X圖形軟件

服務器端&#xff1a;編輯/etc/ssh/sshd_config中的以下內容 啟用AllowTcpForwarding 啟用X11Forwarding 將X11DisplayOffset設定為10. 啟用X11UseLocalhost 客戶機端&#xff1a;編輯/etc/ssh/ssh_config中的以下內容 啟用X11Forwarding 連接時ssh -X或者ssh -Y就可以了…
閱讀更多...
Java Set集合

Java Set集合

Set接口什么是Set&#xff0c;就是不包含重復元素的集合。Set是一種不包括重復元素的Collection。它維持它自己的內部排序&#xff0c;所以隨機訪問沒有任何意義。與List一樣&#xff0c;它同樣允許null的存在但是僅有一個。由于Set接口的特殊性&#xff0c;所有傳入Set集合中的…
閱讀更多...
linux下制作win7安裝U盤

linux下制作win7安裝U盤

轉自:http://blog.csdn.net/pipisorry/article/details/41369821 http://blog.csdn.net/pipisorry/article/details/41369821 已裝Linux&#xff0c;再用U盤安裝win7(網絡安裝應該也可以)&#xff0c; 先要在linux里面制作一個win7安裝U盤&#xff08;windows下用ultraiso制…
閱讀更多...
Java Map集合

Java Map集合

Map集合&#xff1a;Map接口Map與List、Set接口不同&#xff0c;它是由一系列鍵值對組成的集合&#xff0c;提供了key到Value的映射。同時它也沒有繼承Collection。在Map中它保證了key與value之間的一一對應關系。也就是說一個key對應一個value&#xff0c;所以它不能存在相同的…
閱讀更多...
gsettings命令使用簡介

gsettings命令使用簡介

1.gsettings創建項 應用程序可以使用gsettings來保存配置信息&#xff0c;可以通過代碼在程序中進行設置、修改gsettings的已有的項&#xff0c;但是不能通過程序代碼創建新的gsettings項&#xff0c;gsettings的項的在一個叫做schema的規范文件中創建&#xff0c;schema文檔其…
閱讀更多...
Collection 和 Collections區別

Collection 和 Collections區別

Collection 和 Collections區別&#xff08;1&#xff09;java.util.Collection 是一個集合接口&#xff08;集合類的一個頂級接口&#xff09;。它提供了對集合對象進行基本操作的通用接口方法。Collection接口在Java 類庫中有很多具體的實現。Collection接口的意義是為各種具…
閱讀更多...
最新文章

Copyright @ 2022~2023