JavaScript 第四课案例研究：JavaScript图片库

最新推荐文章于 2021-04-26 16:35:37 发布

卡布达1号

最新推荐文章于 2021-04-26 16:35:37 发布

阅读量330

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/weixin_39241397/article/details/79629853

版权

JavaScript 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

主要内容：

编写一个优秀的标记文件
编写一个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文件位于同一目录。

当然，这并不是一个令人满意的网页。尤其是它的默认行为还不太理想。我们提出几点需要改进的地方。

当点击某个链接时，我希望能留在这个网页而不是转到另一个窗口。
当点击某个链接时，我希望能在这个网页上同时看到那张图片以及原有的图片清单。

为了实现我们提出的几点改进，我们要进行哪些步骤呢？

通过增加一个“占位符”图片的方法在这个主页上位图片预留一个浏览区域。
在点击某个链接时，拦截这个网页的默认行为。
在点击某个拦截时，把”占位符“替换为与那个链接相对应的图片。

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

把下列代码添加到图片清单的末尾：

如上图所示，那么“占位符图片”我们已经搞好了。

下面开始编写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>标签之前：

此外，我们还需要为图片列表的链接添加行为了，也就是事件处理函数（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代码与网页集成在一起。

卡布达1号

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
3
评论
JavaScript 第四课案例研究：JavaScript图片库

主要内容：编写一个优秀的标记文件编写一个JavaScript函数以显示用户想要查看的内容由标记出发函数调用使用几个新方法扩展这个JavaScript函数学习过DOM，我们用JavaScript和DOM去建立一个图片库。最好的办法是什么呢？利用JavaScript来建立图片库是最佳的选择：把整个图片库的浏览链接集中安排在图片库主页里，只在用户点击了这个主页里的某个图片链接时才把相应的图片传送给他。首...
复制链接

扫一扫