JavaScript & DOM 学习笔记（四）
案例：将整个图片库的浏览连接几种安排在图片库主页里，在用户点击某个图片链接时才把相应的图片传送出来。
图片素材： 将图片素材 存放入 images文件夹中，并将文件夹与 html 放在同一级目录下。
<!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html; 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 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> </html>
如果图片已经排好顺序，可以用 有序清单元素 <ol> 来标记这些图片链接。
这样这个网页就做好了，但是如果想浏览不同的图片，就需要借助 浏览器的后退按钮。可以做如下改进：
a. 通过增加一个“占位符”图片的办法在这个主页上为图片预留一个浏览区域
b. 点击某个图片的链接时，拦截网页的默认行为（跳转到图片页面），并将图片显示在“占位符”图片
将代码： <img id="placeholder" src="images/placeholder.gif" alt="my image gallery" /> 插入到 </ul> 后。效果图如下：
下面要编写 JavaScript 代码来实现 显示图片了。
建议将 JavaScript 代码写入单独的 .js 文件，在 html 文档中应用。我们新建一个 showPic.js 并放入 html 文档的 相同目录下的 scripts 文件夹中。代码如下：
<!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>Image Gallery</title> </head> <body> <h1>Snapshots</h1> <ul> <li> <a href="images/fireworks.jpg" title="A fireworks display" onClick="showPic(this);return false;">Fireworks</a> </li> <li> <a href="images/coffee.jpg" title="A cup of black coffee" onClick="showPic(this);return false;">Coffee</a> </li> <li> <a href="images/rose.jpg" title="A red, red rose" onClick="showPic(this);return false;">Rose</a> </li> <li> <a href="images/bigben.jpg" title="The famous clock" onClick="showPic(this);return false;">Big Ben</a> </li> </ul> <img id="placeholder" src="images/placeholder.gif" alt="my image gallery" /> <script type="text/javascript" src="scripts/showPic.js"></script> </body> </html>
function showPic(whichPic) {
var placeholder = document.getElementById("placeholder");
var picSrc = whichPic.getAttribute("href");
placeholder.setAttribute("src", picSrc);
}
若一个站点用到多个 JavaScript 文件，为了减少对站点的请求次数（提高性能），应该尽量把这些 .js 文件 合并到一个文件中。
上面代码中使用到了 onclick 事件处理函数，并且在使用函数 showPic（this）时使用了 this 关键字，this 代表了 <a> 这个元素节点。同时我们应该注意到，在showPic（）函数后面，我们增加了 return=false; 代码，这是为了 阻止 链接被点击时跳转的默认行为。
事件处理函数的工作机制：在给某个元素添加了事件处理函数后，一旦事情发生，相应的 JavaScript 代码就会被执行。被调用的 JavaScript 代码可以返回一个值，这个值将被传递给那个事件处理函数。所以上面我们使用 return=false; 来阻止跳转到链接窗口。
下面我们给 显示的图片加一个文本描述，每次点击图片的时候，将图片的 title 显示出来。在“占位符”图片下面加一个 <p>元素：
<p id="description">Choose a image</p>
使用 前一篇 中的 childNodes、nodeValue、firstChild 等元素属性来 改变 description。在 showPic.js 的 showPic function 中做出修改。
function showPic(whichPic) {
//show picture
var placeholder = document.getElementById("placeholder");
var picSrc = whichPic.getAttribute("href");
placeholder.setAttribute("src", picSrc);
//replace description of image
var text = whichPic.getAttribute("title");
var description = document.getElementById("description");
description.firstChild.nodeValue = text;
}
如果想让图片库更美观，可以加入以下 css 样式表，并在 <head> 中加入 <link> 标签引入样式。
link rel="stylesheet" type="text/css" href="styles/layout.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: bold;
text-decoration: none;
}
ul {
padding: 0;
}
li {
float: left;
padding: 1em;
list-style: none;
}
img {
display:block;
clear: both;
}