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.mzph.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文件夹下创建一个日志文…
阅读更多...
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();…
阅读更多...
运算放大器单电源应用中的使用齐纳二极管偏置方法

运算放大器单电源应用中的使用齐纳二极管偏置方法

运算放大器单电源应用中的偏置方法除了使用大电阻使运放输出达到电源电压的一半外&#xff0c;还有使用齐纳二极管&#xff08;稳压管&#xff09;方法也能得到达到应用目的。 下面就推荐几个齐纳二极管&#xff08;分别对应着电源电压是15V,12V&#xff0c;9V;5V&#xff09; …
阅读更多...
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…
阅读更多...
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接口继…
阅读更多...
Java Set集合

Java Set集合

Set接口什么是Set&#xff0c;就是不包含重复元素的集合。Set是一种不包括重复元素的Collection。它维持它自己的内部排序&#xff0c;所以随机访问没有任何意义。与List一样&#xff0c;它同样允许null的存在但是仅有一个。由于Set接口的特殊性&#xff0c;所有传入Set集合中的…
阅读更多...
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文档其…
阅读更多...
Java 之HashSet、LinkedHashSet、TreeSet比较

Java 之HashSet、LinkedHashSet、TreeSet比较

4.HashSet、LinkedHashSet、TreeSet比较 Set接口Set不允许包含相同的元素&#xff0c;如果试图把两个相同元素加入同一个集合中&#xff0c;add方法返回false。Set判断两个对象相同不是使用运算符&#xff0c;而是根据equals方法。也就是说&#xff0c;只要两个对象用equals方法…
阅读更多...
jquery1.9学习笔记 之选择器(基本元素四)

jquery1.9学习笔记 之选择器(基本元素四)

ID选择器("#id") 描述&#xff1a; 选择与给出ID属性匹配的单元标签。 对于ID选择器&#xff0c;jquery使用JS的函数document.getElementById()&#xff0c;当一个标签附加到ID选择器上时&#xff0c;也是非常有效的。如h2#pageTitle&#xff0c;jquery会在识别元素标…
阅读更多...
Java（ArrayList和LinkedList）、（HashTable与HashMap）、（HashMap、Hashtable、LinkedHashMap和TreeMap比较）

Java（ArrayList和LinkedList）、（HashTable与HashMap）、（HashMap、Hashtable、LinkedHashMap和TreeMap比较）

1.ArrayList和LinkedList &#xff08;1&#xff09;ArrayList是实现了基于动态数组的数据结构&#xff0c;LinkedList基于链表的数据结构。 &#xff08;2&#xff09;对于随机访问get和set&#xff0c;ArrayList绝对优于LinkedList&#xff0c;因为LinkedList要移动指针。 &a…
阅读更多...
Java 集合之自动打包和解包以及泛型

Java 集合之自动打包和解包以及泛型

自动打包与解包&#xff1a;泛型&#xff1a;上栗子&#xff1a; TestMap1.java: package com.zhj.www; import java.util.*;public class TestMap {public static void main(String[] args) {Map m1 new HashMap();Map m2 new TreeMap();//m1.put("one", new Inte…
阅读更多...
泗洪高薪行业

泗洪高薪行业

泗洪高薪行业转载于:https://www.cnblogs.com/soundcode/p/3302297.html
阅读更多...
Java IO 节点流与处理流类型

Java IO 节点流与处理流类型

处理流类型&#xff1a;1、处理流之首先缓冲流&#xff1a;解释&#xff1a;例子&#xff1a;TestBufferStream1.java package com.zhj.www;import java.io.BufferedInputStream; import java.io.FileInputStream; import java.io.IOException;public class TestBufferStream1 …
阅读更多...
高级浏览器-SRWare Iron 29.0.1600.0 版本发布

高级浏览器-SRWare Iron 29.0.1600.0 版本发布

SRWare Iron是德国一安全公司srware改造的Chrome&#xff08;铬&#xff09;命名为铁&#xff08;iron&#xff09;的浏览器。于2008年9月18日首次发布。 据官方介绍&#xff0c;Iron浏览器砍掉了Chromium原程序中的很多有碍“隐私”问题的代码。 “iron中去除的功能包括&#…
阅读更多...
Java 线程多线程编程1---基础

Java 线程多线程编程1---基础

1、线程的基本概念例子&#xff1a;分析&#xff1a;2、线程的创建和启动第一种线程的创建&#xff1a;定义一个线程类来实现Runner接口 例子&#xff1a; package com.zhj.www; import java.lang.Thread; public class TestThread1 {public static void main(String[] args) {…
阅读更多...
windows挂载linux网络文件系统NFS

windows挂载linux网络文件系统NFS

ubuntu上安装配置nfs服务 #apt-get install nfs-kernel-server #mkdir /home/nfs #vim /etc/exports 在文档的最后一行加入/home/nfs *(rw,sync,no_root_squash,no_subtree_check)&#xff0c;保存退出。 #/etc/init.d/rpcbind restart 重启rpcbind #/etc/init.d/nfs-kern…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023