改进:
1、实现预留后路
2、实现分离javascript
3、实现向后兼容性
4、利用css让网页变得更美观。
一、预留后路
已经具备
<a href="images/fireworks.jpg" title="A fireworks display" >Fireworks</a>
即使浏览器禁用javascript也可以显示图片来。
二、分离javascript
还有οnclick="showPic(this); return false;",
我们应该在外部文件里完成添加onclick事件处理函数的工作,那样才能让我们的html文档没有“杂质”。
我们发现图片清单里的各个设置有一个共同点:它们都包含在同一个列表清单元素(<ul>)里。
给整个清单设置一个独一无二的ID就可以了:
<ul id="imagegallery">
<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>
编写函数prepareGallery()把有关操作关联到onclick事件上。
function prepareGallery() {
//三、进行必要的检查,向后兼容性
if (!document.getElementsByTagName) return false;
if (!document.getElementById) return false;
if (!document.getElementById("imagegallery")) return false;
//三、进行必要的检查,向后兼容性
var gallery = document.getElementById("imagegallery");
var links = gallery.getElementsByTagName("a");
for ( var i=0; i < links.length; i++) {
links[i].onclick = function() {
return showPic(this);
return false;
}
}
=======================
showPic()函数的完整代码:
prepareGallery()函数的完整代码:
由于在html文档完成加载之前,DOM是不完整的。必须让 prepareGallery()函数 只在网页加载之后才得到执行。网页加载完毕时会触发一个onload事件,这个事件与window对象相关联。为了让事态的发展不偏离计划,必须把 prepareGallery()函数 绑定到这个事件上:
window.οnlοad= prepareGallery;
还有个更通用的决解方案----不管你打算在页面加载完毕时执行几个函数,它都可以应对自如。它是由Simon编写的一个函数addLoadEvent(),功能:
-------把现有的 window.onload事件处理函数的值存入变量oldonload。
-------如果在这个处理函数上还没有绑定任何函数,就像平时那样把新函数添加给它。
-------如果在这个 处理函数上已经绑定了一些函数,就把新函数追加到现有的指令的末尾。
addLoadEvent()函数的完整代码:
showPic(whichpic)、prepareGallery() 和addLoadEvent(func)函数组成showPic.js
页面的完整代码:
layout.css的完整代码:
1、实现预留后路
2、实现分离javascript
3、实现向后兼容性
4、利用css让网页变得更美观。
一、预留后路
已经具备
<a href="images/fireworks.jpg" title="A fireworks display" >Fireworks</a>
即使浏览器禁用javascript也可以显示图片来。
二、分离javascript
还有οnclick="showPic(this); return false;",
我们应该在外部文件里完成添加onclick事件处理函数的工作,那样才能让我们的html文档没有“杂质”。
我们发现图片清单里的各个设置有一个共同点:它们都包含在同一个列表清单元素(<ul>)里。
给整个清单设置一个独一无二的ID就可以了:
<ul id="imagegallery">
<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>
编写函数prepareGallery()把有关操作关联到onclick事件上。
function prepareGallery() {
//三、进行必要的检查,向后兼容性
if (!document.getElementsByTagName) return false;
if (!document.getElementById) return false;
if (!document.getElementById("imagegallery")) return false;
//三、进行必要的检查,向后兼容性
var gallery = document.getElementById("imagegallery");
var links = gallery.getElementsByTagName("a");
for ( var i=0; i < links.length; i++) {
links[i].onclick = function() {
return showPic(this);
return false;
}
}
=======================
showPic()函数的完整代码:
function
showPic(whichpic)
{
//前面这些if都是三、进行必要的检查,向后兼容性,不做太多的假设
if (!document.getElementById("placeholder")) return true;
var source = whichpic.getAttribute("href");
var placeholder = document.getElementById("placeholder");
placeholder.setAttribute("src",source);
if (!document.getElementById("description")) return false;
if (whichpic.getAttribute("title")) {
var text = whichpic.getAttribute("title");
} else {
var text = "";
}
var description = document.getElementById("description");
if (description.firstChild.nodeType == 3) {
description.firstChild.nodeValue = text;
}
return false;
}
//前面这些if都是三、进行必要的检查,向后兼容性,不做太多的假设
if (!document.getElementById("placeholder")) return true;
var source = whichpic.getAttribute("href");
var placeholder = document.getElementById("placeholder");
placeholder.setAttribute("src",source);
if (!document.getElementById("description")) return false;
if (whichpic.getAttribute("title")) {
var text = whichpic.getAttribute("title");
} else {
var text = "";
}
var description = document.getElementById("description");
if (description.firstChild.nodeType == 3) {
description.firstChild.nodeValue = text;
}
return false;
}
prepareGallery()函数的完整代码:
function
prepareGallery()
{
//三、进行必要的检查,向后兼容性
if (!document.getElementsByTagName) return false;
if (!document.getElementById) return false;
if (!document.getElementById("imagegallery")) return false;
//三、进行必要的检查,向后兼容性
var gallery = document.getElementById("imagegallery");
var links = gallery.getElementsByTagName("a");
for ( var i=0; i < links.length; i++) {
links[i].onclick = function() {
return showPic(this);
}
//键盘浏览功能
links[i].onkeypress = links[i].onclick;
}
}
//三、进行必要的检查,向后兼容性
if (!document.getElementsByTagName) return false;
if (!document.getElementById) return false;
if (!document.getElementById("imagegallery")) return false;
//三、进行必要的检查,向后兼容性
var gallery = document.getElementById("imagegallery");
var links = gallery.getElementsByTagName("a");
for ( var i=0; i < links.length; i++) {
links[i].onclick = function() {
return showPic(this);
}
//键盘浏览功能
links[i].onkeypress = links[i].onclick;
}
}
由于在html文档完成加载之前,DOM是不完整的。必须让 prepareGallery()函数 只在网页加载之后才得到执行。网页加载完毕时会触发一个onload事件,这个事件与window对象相关联。为了让事态的发展不偏离计划,必须把 prepareGallery()函数 绑定到这个事件上:
window.οnlοad= prepareGallery;
还有个更通用的决解方案----不管你打算在页面加载完毕时执行几个函数,它都可以应对自如。它是由Simon编写的一个函数addLoadEvent(),功能:
-------把现有的 window.onload事件处理函数的值存入变量oldonload。
-------如果在这个处理函数上还没有绑定任何函数,就像平时那样把新函数添加给它。
-------如果在这个 处理函数上已经绑定了一些函数,就把新函数追加到现有的指令的末尾。
addLoadEvent()函数的完整代码:
function
addLoadEvent(func)
{
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function() {
oldonload();
func();
}
}
}
// 这里只有一个prepareGallery()函数,所以就添加一行
addLoadEvent(prepareGallery);
// 如果还有function1()函数,就在addLoadEvent(prepareGallery);下面添加addLoadEvent(function1);
// 无论我们打算在页面加载完毕时执行多少函数,都只要多写一条语句就可以安排一切了。呵呵
// 为以后的扩展做准备,预留后路
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function() {
oldonload();
func();
}
}
}
// 这里只有一个prepareGallery()函数,所以就添加一行
addLoadEvent(prepareGallery);
// 如果还有function1()函数,就在addLoadEvent(prepareGallery);下面添加addLoadEvent(function1);
// 无论我们打算在页面加载完毕时执行多少函数,都只要多写一条语句就可以安排一切了。呵呵
// 为以后的扩展做准备,预留后路
showPic(whichpic)、prepareGallery() 和addLoadEvent(func)函数组成showPic.js
页面的完整代码:
<!
DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd" >
< html xmlns ="http://www.w3.org/1999/xhtml" xml:lang ="en" >
< head >
< meta http-equiv ="content-type" content ="text/html; charset=utf-8" />
< title > Image Gallery </ title >
< script type ="text/javascript" src ="scripts/showPic.js" ></ script >
< link rel ="stylesheet" href ="styles/layout.css" type ="text/css" media ="screen" />
</ head >
< body >
< h1 > Snapshots </ h1 >
< ul id ="imagegallery" >
< li >
< a href ="images/fireworks.jpg" title ="A fireworks display" >
< img src ="images/thumbnail_fireworks.jpg" alt ="Fireworks" />
</ a >
</ li >
< li >
< a href ="images/coffee.jpg" title ="A cup of black coffee" >
< img src ="images/thumbnail_coffee.jpg" alt ="Coffee" />
</ a >
</ li >
< li >
< a href ="images/rose.jpg" title ="A red, red rose" >
< img src ="images/thumbnail_rose.jpg" alt ="Rose" />
</ a >
</ li >
< li >
< a href ="images/bigben.jpg" title ="The famous clock" >
< img src ="images/thumbnail_bigben.jpg" alt ="Big Ben" />
</ a >
</ li >
</ ul >
< img id ="placeholder" src ="images/placeholder.gif" alt ="my image gallery" />
< p id ="description" > Choose an image. </ p >
</ body >
</ html >
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd" >
< html xmlns ="http://www.w3.org/1999/xhtml" xml:lang ="en" >
< head >
< meta http-equiv ="content-type" content ="text/html; charset=utf-8" />
< title > Image Gallery </ title >
< script type ="text/javascript" src ="scripts/showPic.js" ></ script >
< link rel ="stylesheet" href ="styles/layout.css" type ="text/css" media ="screen" />
</ head >
< body >
< h1 > Snapshots </ h1 >
< ul id ="imagegallery" >
< li >
< a href ="images/fireworks.jpg" title ="A fireworks display" >
< img src ="images/thumbnail_fireworks.jpg" alt ="Fireworks" />
</ a >
</ li >
< li >
< a href ="images/coffee.jpg" title ="A cup of black coffee" >
< img src ="images/thumbnail_coffee.jpg" alt ="Coffee" />
</ a >
</ li >
< li >
< a href ="images/rose.jpg" title ="A red, red rose" >
< img src ="images/thumbnail_rose.jpg" alt ="Rose" />
</ a >
</ li >
< li >
< a href ="images/bigben.jpg" title ="The famous clock" >
< img src ="images/thumbnail_bigben.jpg" alt ="Big Ben" />
</ a >
</ li >
</ ul >
< img id ="placeholder" src ="images/placeholder.gif" alt ="my image gallery" />
< p id ="description" > Choose an image. </ p >
</ body >
</ html >
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;
}
#imagegallery {
list-style: none;
}
#imagegallery li {
display: inline;
}
#imagegallery li a img {
border: 0;
}
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;
}
#imagegallery {
list-style: none;
}
#imagegallery li {
display: inline;
}
#imagegallery li a img {
border: 0;
}