JavaScripting DOM编程艺术读书笔记(4

第4章案例研究：JavaScript美术馆

现在，是时候利用DOM去完成一些简单的任务了。在这一章中，我将带领大家用JavaScript和DOM去建立一个图片库，并将其称为“JavaScript”美术馆。我们将按照以下步骤来完成这一案例：

q 编写一份优秀的标记语言文档。

q 编写一个JavaScript函数以显示用户想要查看的图片。

q 在标记语言文档里触发一个调用JavaScript图片显示的函数。

q 对这个JavaScript函数的功能进行扩展。这需要用到几个新的DOM方法。

把一些图片发布到网上的办法有很多。最容易想到的办法是把所有的图片都放到同一个网页里。不过，我们必须面对的现实是：数据量越大，网页的下载时间就越长，但愿意等待很长时间去下载一个网页的人却没有几个。

因此。为每张图片分别创建一个网页的解决方案显然更值得考虑。但这一解决方案并非尽善尽美：首先，为每张图片制作一个网页需要花费不少时间和精力；其次，需要在每个网页上提供一些链接，来给出当前图片在整个图片库里的位置以方便人们从当前图片转到其他的图片。

如果你想两全其美，利用JavaScript来创建图片库将是最佳的选择：把整个图片库的浏览链接集中安排在你的图片库主页里，只在用户点击了这个主页里的某个图片链接时才把相应的图片传送给他。

4.1 编写标记语言文档

为了完成“JavaScript美术馆”案例，我特意用数码相机拍摄了几张照片，并把它们修整成最适合于用浏览器来查看的尺寸，即400像素宽*400像素高。

第一项工作是为这些图片创建一个连接清单。因为我没打算让这些图片按照某种特殊的顺序排列，所以将使用一个无序清单元素(<ul>)来列出那些链接。

下面就是我编写出来的HTML文档(gallery.html。图片集中保存在子目录images里。我的images子目录和gallery.html文件位于同一个子目录下)：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"

"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<head>

<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>

</ul>

</body>

</html>

在浏览器窗口中点击某个链接就可以转到相应的图片，但从图片重新返回到链接清单目前还必须借助于浏览器的back(后退)按钮。下面是这个基本的链接清单在浏览器窗口里的显示效果。

这是一个相当令人满意的网页，但它的默认行为还不太理想。下面是我觉得还需要改进的几个地方：

q 当点击某个链接时，我希望能留在这个网页而不是转到另一个窗口。

q 当点击某个链接时，我希望能在这个网页上同时看到那张图片以及原有的图片清单。

下面是我为了实现上述希望而需要完成的几项改进：

q 通过增加一个“占位符”图片的办法在这个主页上为图片预留一个浏览区域。

q 在点击某个链接时，将拦截这个网页的默认行为。

q 在点击某个链接时，将把“占位符”图片替换为与那个链接相对应的图片。

我们先来解决“占位符”图片的问题。我选用了一个类似于名片的图片。

把下面这些代码插入到图片名单的末尾：

我对这个图片的id属性进行了设置，这将使我可以通过一个外部的样式表对图片的显示位置和显示效果加以控制。例如，我可以让这个图片出现在链接清单的旁边而不是它的下方。我还可以在自己的JavaScript代码里使用这个id值。下面是这个页面在增加了“占位符”图片后的显示效果。

现在，我的HTML文档已经准备了。接下来的工作是编写一些必要的JavaScript代码。

4.2 编写JavaScript函数

为了把“占位符”图片替换为想要查看的图片，需要改变它的src属性。setAttribute()方法是完成这项工作的最佳选择，而我将利用这个方法写一个函数。这个函数只有一个参数，即我想查看的那张图片的链接；它将通过改变“占位符”图片的src属性的办法将其替换为我想查看的那张图片。

首先，需要给函数起一个好的名字。我想showPic()是一个不错的名字，既能提醒我它的用途，又足够简明扼要。另外，还需要给参数起一个名字，我决定把它命名为whichpic：

function showPic(whichpic)

whichpic代表一个元素节点；具体来说，就是一个指向某个图片的<a>元素。我需要知道那个图片的文件路径，这个路径可以通过在whichpic元素上调用getAttribute()方法的办法查出来——只要把“href”作为参数传递给getAttribute()方法，就可以知道那个图片的文件路径了：

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

接下来，还需要把“占位符”图片检索出来，这种事对getElementById()方法来说不过是小菜一碟：

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

现在，已经声明并赋值了两个变量：source和placeholder。它们可以让我的脚本简明易读。

我将使用setAttribute()方法对placeholder元素的src属性进行刷新。

placeholder.setAttribute("src",source);

4.2.1 DOM之前的解决方案

setAttribute()方法是“第1版DOM”(DOM Level 1)的组成部分之一，这个方法可以对任意元素节点的任意属性进行设置。在“第1版DOM”出现之前，程序员只能通过另外一种办法对一部分元素的属性进行设置，这个办法至少在目前还可以用来改变某些属性的值。

例如，在我的图片库脚本里，完全可以用下面这条语句来代替setAttribute()调用：

placeholder.src=source;

我个人更喜欢使用setAttribute()方法。这起码可以让我不必费心去记忆哪些元素的哪些属性可以用哪些DOM之前的方法去设置。虽然用那些老办法可以毫无问题地对文档里的图片，表单和其他一些元素的属性进行设置，但setAttribute()方法的优势在于它可以对文档中的任何一个元素的任何一个属性做出修改。

“第1版DOM”的另一个优势是可移植性更好。我希望大家能牢牢记住一点：DOM是一种适用于多种环境和多种程序设计语言的通用型API。如果想把从本书学到的DOM技巧运用在Web浏览器以外的应用环境里，严格遵守“第1版DOM”能够让你们避免与兼容性有关的任何问题。

4.2.2 showPic()函数的代码清单

function showPic(whichpic){

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

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

placeholder.setAttribute("src",source);

}

接下来的任务是把这个JavaScript函数与我们的HTML文档结合起来。

4.3 JavaScript函数的调用

我需要把刚编写出来的showPic()函数与图片库HTML文档结合起来。最简单的办法是把这个函数用一组<script>标签插入到那个文档的<head>部分，但我认为这种做法有点儿目光短浅：如果今后想把这同一函数用在许多个页面上的话，我将不得不反复多次地进行剪贴操作。为今后考虑，更有远见的办法是先把这个函数存入一个外部文件，然后在每一份需要用到这个函数的HTML文档的<head>部分插入一个链接来引用这个外部文件。

以.js作为文件扩展名，把这个函数存入一个文本文件。完全可以把这种文件命名为你们喜欢的任何东西，但我习惯于用这些文件所包含的函数的名字来命名它们——我给这个文件起的名字是showPic.js。

就象我刚才决定把所有的图片集中存放在images子目录里那样，把所有的JavaScript脚本文件集中放在一个子目录里也将是个好主意。我创建了一个名为script的子目录并把showPic.js文件保存到其中。

现在，需要在图片库HTML文档里插入一个链接来引用这个JavaScript脚本文件。我将把下面这条语句插入HTML文档的<head>部分(选择的插入位置是<head>标签之后)：

有了这条语句，把showPic()函数与图片库HTML文档结合起来的任务就已经完成了一半——我还需要为HTML文档里的每个图片链接增加一个函数调用动作，否则showPic()函数将永远也不会被调用。我将通过增加一个事件处理函数(event handler)的办法来完成这项工作。

事件处理函数

事件处理函数的作用是，在预定事件发生时让预先安排好的JavaScript代码开始执行，用术语来说就是“触发一个动作”。例如，如果想在鼠标指针悬停在某个元素上时触发一个动作，就需要用onmouseover事件处理函数；如果想在鼠标指针离开某个元素时触发一个动作，就需要使用onmouseout事件处理函数。在“JavaScript美术馆”案例里，我想在用户点击某个链接时触发一个动作，所以需要使用onclick事件处理函数。

我想通过onclick事件处理函数去触发的动作是调用showPic()函数，而要想调用这个函数，就必须向它传递一个参数：一个带有href属性的元素节点。在图片库HTML文档里，当我把onclick事件处理函数嵌入一些链接时，我需要把那些链接本身用作showPic()函数的参数。

有个非常简单但又非常有效的办法可以做到这一点：使用JavaScript语言中的this关键字。这个关键字的含义是“这个对象”。具体到正在讨论的这个例子，我将使用this来表示“这个<a>元素节点”：

showPic(this);

综上所述，我将使用onclick事件处理函数去调用showPic(this)方法。使用事件处理函数调用JavaScript代码的语法如下所示：

event="JavaScript statement(s)"

请注意，在如上所示的语法里，JavaScript代码是包含在一对引号之间的：我们可以把任意数量的JavaScript语句放在这对引号之间，只要把各条语句用分号隔开即可。

下面这条语句将完成“使用onclick事件处理函数调用showPic(this)方法”的任务：

οnclick="showPic(this);"

不过，如果只把上面这个事件处理函数插入到HTML文档中的链接去的话，将遇到这样一个问题：在onclick事件发生时，不仅showPic(this)函数将被调用，链接被点击时的默认行为也将发生。这意味着用户还是会被带到另外一个图片查看窗口里，而这是我不希望发生的事情。我需要阻止这种默认行为的发生。

要想达到这一目的，我们必须对事件处理函数的工作机制有进一步的了解：在给某个元素添加了事件处理函数后，一旦发生预定事件，相应的JavaScript代码就会被执行；那些JavaScript代码可以返回一个结果，而这个结果将被传递回那个事件处理函数。例如，我们可以给某个链接添加一个onclick事件处理函数，并让这个处理函数所触发的JavaScript代码返回布尔值true或false。这样一来，当这个链接被点击时，如果那段JavaScript代码返回给onclick事件处理函数的值是true，onclick事件处理函数将认为“这个链接被点击了”；反之，如果那段JavaScript代码返回给onclick事件处理函数的值是false，onclick事件处理函数将被认为“这个链接没有被点击”。

可以通过下面这个简单测试去验证这一结论：

<a href="http://www.example.com" οnclick="return false;">Click me</a>

如果像下面这样在onclick事件处理函数所触发的JavaScript代码里增加一条return false语句的话，我就可以不让用户被他们所点击的链接带到另外一个图片查看窗口里去：

οnclick="showPic(this);return false;"

下面是最后完成的onclick事件处理函数在图片库HTML文档里的样子：

只要给每个链接那添加一个onclick事件处理函数即可，这当然有些麻烦，但眼下只能这么做——我将在后面的内容里向大家介绍一个可以避免这种麻烦的办法。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"

"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<head>

<title>Image Gallery</title>

</head>

<body>

<h1>Snapshots</h1>

<ul>

<li><a href="images/fireworks.jpg" οnclick="showPic(this); return false;" title="A fireworks display">Fireworks</a></li>

<li><a href="images/coffee.jpg" οnclick="showPic(this); return false;" title="A cup of black coffee">Coffee</a></li>

</ul>

</body>

</html>

您好：
    当您在阅读和使用我所提供的各种内容的时候，我非常感谢，您的阅读已是对我最大的支持。
    我更希望您能给予我更多的支持。
    1.希望您帮助我宣传我的博客，让更多的人知道它，从中获益。
    2.希望您能多提出宝贵意见，包括我所提供的内容中的错误，建设性的意见，更希望获得哪些方面的帮助，您的经验之谈等等。
    3.更希望能得到您经济上的支持。

    我博客上面的内容均属于个人的经验，所有的内容均为开源内容，允许您用于任何非商业用途，并不以付费为前提，如果您觉得在阅读和使用我所提供的各种内容的过程中，您得到了帮助，并能在经济上给予我支持，我将感激不尽。

    您可以通过银行转帐付款给我：
    招商银行一卡通：
    卡号：6225888712586894
    姓名：牟勇

    您也可以通过汇款的方式：
    通讯地址：云南省昆明市女子(28)中学人民中路如意巷1号
    收信人：陈谦转牟勇收
    邮编：650021

    无论您给予我怎么样的支持，我都衷心的再次感谢。
    欢迎光临我的博客，欢迎宣传我的博客
    http://hi.csdn.net/mouyong
    http://blog.csdn.net/mouyong
    http://blog.sina.com.cn/mouyong
    EMail:mouyong@yeah.net

JavaScripting DOM编程艺术读书笔记(4－1)相关推荐

JavaScript DOM编程艺术 - 读书笔记1-3章
1.JavaScript语法准备工作一个普通的文本编辑器,一个Web浏览器. JavaScript代码必须通过Html文档才能执行,第一种方式是将JavaScript代码放到文档<head& ...
Javascript DOM 编程艺术读书笔记16/04/01
愚人节快乐开始用webstorm了,随着学习深入,代码越来越长,因为不借助ide还真是挺难的今天发现了一个严重的误区,text和textNode是完全不同的两个概念,之前没有特别注意,写代码很容易 ...
JavaScript DOM编程艺术学习笔记（一）
嗯,经过了一周的时间,今天终于将<JavaScript DOM编程艺术(第2版)>这本书看完了,感觉受益匪浅,我和作者及出版社等等都不认识,无意为他们做广告,不过本书确实值得一看,也值得推 ...
JavaScript DOM编程艺术简略笔记
简略目录 1.BOM 2.DHTML 3.数组 4.条件判断的注意点 5.函数中变量的作用域问题 6.几种对象的简介 7.BOM和DOM 8.DOM操作中的一些特别点 9.JS文件与CSS文件的引入方 ...
Java并发编程艺术----读书笔记（二）
版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/a724888/article/details/64214595 java并发编程艺术2 jav ...
JavaScript Dom编程艺术学习笔记（第4章）
案例研究:JavaScript图片库(待补充) (笔记并不覆盖章节所有内容,只记录个人认为的重点和难点) 一.DOM操作 placeholder.setAttribute("src" ...
【JavaScript DOM 编程艺术】笔记
第一章:JavaScript 简史 1.1 javascript的起源 JavaScript是一种脚本语言,通常只能通过web浏览器去完成一些操作而不能像普通意义上的程序那样独立运行,需要由Web浏览 ...
Java 并发编程艺术读书笔记
第 1 章并发编程的挑战 1.1.3 如何减少上下文切换减少上下文切换的方法有无锁并发编程.CAS 算法.使用最少线程和使用协程. 无锁并发编程.多线程竞争锁时,会引起上下文切换,所以多线程处理数 ...
《JavaScript DOM编程艺术》笔记1
1:DOM的学习一份文档就是一棵节点树: 节点分为不同的类型:元素节点,属性节点,文本节点: getElementById返回的是一个对象: getElementByTagName和getEleme ...

JavaScripting DOM编程艺术读书笔记(4－1)

JavaScripting DOM编程艺术读书笔记(4－1)相关推荐

最新文章

热门文章