javascript_DOM 编程艺术学习笔记(五)

原创 2015年11月18日 18:11:32

javascript_DOM 编程艺术学习笔记(五)

一、提高js代码的适用性和扩展性

改进前的代码:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>js example</title>	
	<link rel="stylesheet" type="text/css" href="css/index.css">
</head>
<body>
	<h1>SnapShots</h1>
	<ul>
		<li><a href="images/1.jpg" class="popup" title="1">1</a></li>
		<li><a href="images/2.jpg" class="popup" title="2">2</a></li>
		<li><a href="images/3.jpg" class="popup" title="3">3</a></li>
		<li><a href="images/4.jpg" class="popup" title="4">4</a></li>
	</ul>
	<img src="images/5.gif" alt="屌丝男" id="placeholder">
	<p id="description" name="description">choose an image!</p>
	<script type="text/javascript" src="js/index.js"></script>

</body>
</html> 
js代码:

window.onload = function() {
	if (!document.getElementById) return false;
	// 判断哪个属性是否存在,来确定浏览器是否支持这个js
	if (!document.getElementsByTagName) return false;
	var links = document.getElementsByTagName("a");
	for (var i = 0; i < links.length; i++) {
		if (links[i].className === "popup") {
			links[i].onclick = function() {
				showPic(this);
				return false;
			}
		}
	}
}

function showPic(element) {
	var imgElement = document.getElementById("placeholder");
	imgElement.src = element.href;
	var descriptionNode = document.getElementById("description");
	description.firstChild.nodeValue = element.title;
}
改进后代码

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>js example</title>	
	<link rel="stylesheet" type="text/css" href="css/index.css">
</head>
<body>
	<h1>SnapShots</h1>
	<ul id="imageGelley">
		<li><a href="images/1.jpg" title="1">1</a></li>
		<li><a href="images/2.jpg" title="2">2</a></li>
		<li><a href="images/3.jpg" title="3">3</a></li>
		<li><a href="images/4.jpg" title="4">4</a></li>
	</ul>
	<img src="images/5.gif" alt="屌丝男" id="placeholder">
	<p id="description" name="description">choose an image!</p>
	<script type="text/javascript" src="js/index.js"></script>
</body>
</html> 

window.onload = function() {
	if (!document.getElementById) return false;
	// 判断哪个属性是否存在,来确定浏览器是否支持这个js
	if (!document.getElementsByTagName) return false;
	if (!document.getElementById("imageGelley")) false;
	var gelleryNode = document.getElementById("imageGelley");
	var links = gelleryNode.getElementsByTagName("a");
	for (var i = 0; i < links.length; i++) {
		links[i].onclick = function() {	
			return !showPic(this);
		}
	}
}

function showPic(element) {
	if(!document.getElementById("placeholder")) return false;
	if(!document.getElementById("description")) return false;
	var imgElement = document.getElementById("placeholder");
	if(imgElement.nodeName != "IMG") return false;
	imgElement.src = element.href;
	var descriptionNode = document.getElementById("description");
	if(description.firstChild.nodeType == 3){ // 确定是文本节点
		description.firstChild.nodeValue = element.title;
	}
	return true;
}


扩展性测试

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>js example</title>	
	<link rel="stylesheet" type="text/css" href="css/index.css">
</head>
<body>
	<h1>SnapShots</h1>
	<ul id="imageGelley">
		<li><a href="images/1.jpg" title="1"><img src="images/1.jpg"></a></li>
		<li><a href="images/2.jpg" title="2"><img src="images/2.jpg"></a></li>
		<li><a href="images/3.jpg" title="3"><img src="images/3.jpg"></a></li>
		<li><a href="images/4.jpg" title="4"><img src="images/4.jpg"></a></li>
	</ul>
	<img src="images/5.gif" alt="屌丝男" id="placeholder">
	<p id="description" name="description">choose an image!</p>
	<script type="text/javascript" src="js/index.js"></script>
</body>
</html> 
现在添加一些a标签页会被js执行

2、让function依次运行

function addLoadEvent(func) {
	var oldonload = window.onload;
	if (typeof window.onload != 'function') {
		window.onload = func;
	} else {
		window.onload = function() {
			oldonload();
			func();
		}
	}
}




JavaScript_DOM编程艺术第二版学习笔记-第7章

动态创建标记 传统技术:document.write和innerHTML 深入剖析DOM方法:createElement、createTextNode、appendChild和insert...
  • sofia92
  • sofia92
  • 2015年12月16日 09:20
  • 768

javascript_DOM 编程艺术学习笔记(一)

包含了一维数组、多维数组的定义方法,对象的定义方法,变量的作用域,函数,...
  • ssqfzc
  • ssqfzc
  • 2015年11月17日 11:18
  • 349

Unix编程艺术

本书写作了五年之久,作者将UNIX三十年中未见纸端的艰难胜利的软件工程智慧融入文字,使UNIX家族成为最好最具创新软件的哲学、设计模式、工具、文化和传统,Raymond将之第一次带给我们,并向我们展示...
  • llwszjj
  • llwszjj
  • 2013年11月24日 15:11
  • 2317

《JavaScript DOM编程艺术》学习

JavaScript编程原则和使用习惯  在使用JavaScript之前需思考: 为这个网页增加这种额外的行为是否 确有必要“用户至上” , 这样做会对用户的浏览器产生怎样的影响?浏览器支持Jav...
  • qq_26437925
  • qq_26437925
  • 2016年02月01日 20:10
  • 1072

《Javascript_Dom 编程艺术》(第2版)读书笔记

---Chapter1 Dom : 平稳退化、渐进增强,以用户为中心的设计 ---Chapter 2 1.程序设计语言分为:解释性(javascript)和编译型(java,C++)两大类 2.变...
  • jjting
  • jjting
  • 2014年06月26日 17:54
  • 783

【我的JS第三本】JavaScript_DOM编程艺术第二版读书笔记

经过前一段时间HTML&CSS的学习,感觉视频加读书是一个比较不错的学习方法,两者相辅相成,互相补充,所以也准备看看关于JavaScript的书。       2015年12月14日,之前使用韩顺平老...
  • Creabine
  • Creabine
  • 2015年12月14日 21:12
  • 3234

总结一下这几天学的《JavaScript DOM编程艺术 第2版》(1)

整本书都是关于如何 DOM
  • u013236064
  • u013236064
  • 2014年08月11日 22:38
  • 1238

JAVA编程艺术之java知识概述

写代码: 明确需求。我要做什么? 分析思路。我要怎么做?1,2,3。 确定步骤。每一个思路部分用到哪些语句,方法,和对象。 代码实现。用具体的java语言代码把思路体现出来。 学习新技术的四点: 该技...
  • wang492239163
  • wang492239163
  • 2015年12月30日 12:40
  • 285

javascript DOM编程艺术 读后感与笔记

书评: 一开始接触前端的时候就在各个社区都听说过这本书,不愧为js最广为推荐的入门书,整本书读起来通畅易懂,对一个新手来说几乎不存在什么门槛,让人易于接受,该书通过一个个实例循序渐进,学到新的知识后...
  • m0_37506557
  • m0_37506557
  • 2017年02月25日 16:30
  • 309

案例研究:图片库改进版(js dom编程艺术第六章笔记)

本章完成的主要工作小结: 1.尽量让js代码不再依赖于那些没有保证的假设,为此引入测试项和检查,是js代码能够平稳退化 2.避免使用onkeypress事件处理函数 3.html标记文档与js分离 源...
  • ziyun0923
  • ziyun0923
  • 2016年09月12日 21:28
  • 715
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:javascript_DOM 编程艺术学习笔记(五)
举报原因:
原因补充:

(最多只允许输入30个字)