精通JavaScript:学习笔记1--现代JavaScript程序设计

1. 面向对象的JavaScript

    创建对象的构造函数,可以添加方法,也可以访问对象的属性的一个实例:


<!DOCTYPE html>
<html>
<head>
    <title>Throwing Errors Example</title>
</head>
<body>
    <script type="text/javascript">
		//'lecture'类的构造函数
		//用名称(name)和教师(teacher)作为参数
		function Lecture(name, teacher) {
			//将参数保存为对象的局部属性
			this.name = name;
			this.teacher = teacher;
		}
		
		//Lecture类的一个方法(method),用于生成一条显示Lecture信息的字符串
		Lecture.prototype.display = function() {
			return this.teacher + " is teaching " + this.name;
		};
		
		//Schedule类的构造函数,以课程的数组作为参数
		function Schedule(lectures) {
			this.lectures = lectures;
		}
		
		//构造一条字符串,表示课程的安排表
		Schedule.prototype.display = function() {
			var str = "";
			
			//遍历每项课程,建立包含它们信息的字符串
			for (var i = 0; i < this.lectures.length; i++) {
				str += this.lectures[i].display() + " ";
			}
			
			return str;
		};
		
		var mySchedule = new Schedule([
			new Lecture("Grm", "Mr. Smith"),
			new Lecture("Math", "Mrs. Jones"),
			new Lecture("English", "TBD")
		]);
		alert(mySchedule.display());
    </script>
</body>
</html>


浏览器显示如下:

精通JavaScript:学习笔记1--现代JavaScript程序设计_第1张图片

2. 分离式DOM脚本编程

    编写分离式代码意味着对HTML内容的完全分离:数据来自服务端,JavaScript代码则用来使之动态化.这种分离最重要的效果是:代码在不同的浏览器间使用时是完全可以降级(或者升级)运行的,这样你可以给支持某些高级特性的浏览器提供更丰富的交互,同时不支持这些特性的浏览器也能合理的降级运行它所支持的部分.

    编写现代的,分离式的代码包括两个方面:文档对象模型(DOM)和JavaScript事件.

1. DOM

    使用DOM定位并操作不同的DOM元素.


<html>
<head>
	<title>Introduction to the DOM</title>
	<script type="text/javascript">
		//我们必须在文档完成加载后再操作DOM
		window.onload = function() {
			//获取文档中的所有<li>元素
			var li = document.getElementsByTagName("li");
			
			//并给它们添加一个黑色边框
			for (var j = 0; j < li.length; j++) {
				li[j].style.border = "1px solid #000";
			}
			
			//获取ID为'everywhere'的元素
			var every = document.getElementById("everywhere");
			
			//从文档中删除这个元素
			every.parentNode.removeChild(every);
		};
	</script>
</head>
<body>
	<h1>Introduction to the DOM</h1>
	<p class="test">There are a number of reasons why the DOM is awesome, here are some:</p>
	<ul>
		<li id="everywhere">It can be found everywhere.</li>
		<li class="test">It's easy to use.</li>
		<li class="test">It can help you to find what you want, really quickly.</li>
	</ul>
</body>
</html>
浏览器显示如下:


精通JavaScript:学习笔记1--现代JavaScript程序设计_第2张图片

2. 事件

    使用DOM和事件来提供视觉特效:


<script type="text/javascript">
		//我们必须在文档完成加载后再操作DOM
		window.onload = function() {
			//获取文档中的所有<li>元素
			var li = document.getElementsByTagName("li");
			
			//并给它们添加一个黑色边框
			for (var j = 0; j < li.length; j++) {
				//给这个<li>元素加上mouseover的事件处理函数
				//它将这个<li>的背景颜色改为蓝色
				li[j].onmouseover = function() {
					this.style.backgroundColor = 'blue';
				};
				
				//给这个<li>元素加上mouseout的事件处理函数
				//将它的背景颜色重置为默认的白色
				li[j].onmouseout = function() {
					this.style.backgroundColor = "white";
				};
			}
			
		};
	</script>
浏览器显示如下:


精通JavaScript:学习笔记1--现代JavaScript程序设计_第3张图片


你可能感兴趣的:(精通JavaScript:学习笔记1--现代JavaScript程序设计)