JavaScript让你能够在网页中进行编程，从而实现计算、响应、绘画、通信、提醒、变更、更新、修改等动态功能。

使用HTML和CSS时，你做的主要工作都是声明型的，例如指出一些文本为段落，或指出属于sale类的元素都为红色。使用JavaScript时，则要给网页添加行为，为此需要对计算进行描述。你需要知道如何描述类似于下面的事情：对所有的正确答案求和，以计算用户的得分；用户单击按钮时，播放表示获胜的声音；取回我最近发布的消息，并将其放到这个网页中。

如果没有给变量指定初始值， J a v a S c r i p t 将给它指定默认值u n d efi n e d 。JavaScript使用undefined来指出还没有给变量赋值。

浏览器提供了一个内置函数，可以用来获取用户输入；这个函数就是prompt。函数prompt与你使用过的函数alert很像（它也显示一个对话框，其中包含你指定的字符串），但它还提供了让用户输入响应的区域。这种响应将作为函数调用结果以字符串的形式返回；如果用户取消了对话框或没有输入任何响应，返回的将是null。

guess = prompt("Ready, aim, fire! (enter a number 0-6):");

如果用户单击这个对话框中的取消按钮，函数prompt将返回null（而不是一个字符串）。

扫描二维码关注公众号，回复： 3097910 查看本文章

函数 function

上面显示：My watch stopped at midnight

DOM：

。要充分利用你的
JavaScript技能，就必须知道如何与代码所属的网页交互。只有这样，才能编写出动态网页：能够对用户操作作出响应的网页，能够在加载后自动更新的网页。那么，如何与网页交互呢？使用DOM，即文档对象模型（document object model）。

处理DOM时，确保代码在网页完全加载后再执行至关重要；否则，代码执行时，DOM很可能还未创建。

如果你愿意，还能使用这种方式处理很多事件。有些事件是浏览器生成的，如加载事件，有些事件是用户与网页交互时生成的，还有些事件是JavaScript代码生成的。

刚才的示例演示了“网页加载完毕”事件，我们通过设置对象window的属性onload来处理它。你还可编写这样的事件处理程序：每隔5秒钟调用一次；在有来自Web服务的数据需要处理时调用；在用户单击按钮后，需要从表单获取数据时调用；等等。

以上是：在一个静态网页中添加代码，从而动态地修改了一个段落的内容。这看似简单，却是创建真正交互式网页的第一步。

下面来迈出第二步：知道如何获取DOM中的元素后，咱们来使用代码设置元素的特性。

类型、相等、转换等

你已经有丰富的JavaScript类型使用经验，你知道有数字、字符串和布尔值等基本类型，还知道有各种对象，其中有些是JavaScript提供的（如Math对象），有些是浏览器提供的（如document对象），还有些是我们自己编写的。

我们知道，将两个类型不同的值进行比较时，JavaScript会把一个值转换为另一个值的类型，再进行比较。你可能觉得这很奇怪，因为在其他语言中，这通常不是自动进行的，而需要编写代码显式地进行转换。不过，不用担心，JavaScript自动类型转换通常是件好事，只要你明白转换是在何时以及如何进行的。下面就来了解这一点：转换是何时以及如何进行的。

相等运算符有两个，而不是只有一个。我们已经介绍了==（相等），另一个是===（严格相等）。没错，就是三个等号。在可以使用==的任何地方，都可使用===，但在这样做之前，一定要明白它们之间有何不同。
===涉及的规则实际上只有一条。

当且仅当两个值的类型和值都相同时，它们才是严格相等的

有些开发人员将===（严格相等）称为等同运算符。

综合应用：编写一个应用程序

pass

异步编码：处理事件

之前我们所写的js代码，使用了一些函数、对象和方法，但从某种程度上说，它们都是按部就班地执行的。然而，JavaScript代码通常不是这样编写的，大多数JavaScript代码都是事件响应式的。

那么都是什么样的事件呢？用户单击网页、通过网络收到数据、定时器到期、DOM发生变化等。事实上，在浏览器中，幕后始终有各种事件在不断发生。本章将反思我们的编码方式，学习如何编写响应事件的代码以及为何要这样做。

事件是什么？

浏览器不会在获取并显示页面后就甩手不管了。在幕后，有很多事情在不断发生：用户单击按钮、鼠标位置发生变化、通过网络收到数据、窗口大小发生变化、定时器到期、浏览器位置发生变化等。这些都会触发事件。

如下所示：window.onload处理事件。

window.onload出现的原因？
我们都知道页面的代码顺序是从上往下进行加载，很多时候我们要对页面中的某一个模块进行操作，这时候我们常常使用javascript代码来进行操作。为了能够保证操作的模块或对象在js代码之前就加载了，我们不得不把js代码放在页面的底端。但是我们在设计页面的时候，为了把js代码放在一起，或者一个让页面更加简洁的位置，那就有可能出现代码中操作的对象未被加载的情况，那么我们该如何去解决呢？这时候window.onload就被有了存在的意义了。

-- 事件处理程序也叫回调函数或者监听器 --

为让处理程序在事件发生时得以调用，你首先需要注册它。你将看到，注册的方式有多种，具体采用哪种取决于事件的类型。

window.onload是什么？
window.onload是一个事件，在文档加载完成后能立即触发，并且能够为该事件注册事件处理函数。将要对对象或者模块进行操作的代码存放在处理函数中。即：window.onload =function (){这里写操作的代码};

当页面从上到下开始解析的时候，由于id为btn的元素还不存在，所以会导致问题。

F12打开调试界面：

就可以看到这里给出的信息提示：Uncaught TypeError: Cannot set property 'onclick' of null(…)

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>ididid</title>
	<script>
    	document.getElementById("btn").onclick = function() {
            alert("btn");
		}
	</script>
</head>
<body>
	<input id="btn" type="button" value="测试">
</body>
</html>

可以用window.onload 将script推迟到页面加载完成之后再执行。

页面加载完成之后执行事件就会弹出alert对话框。正确代码如下：

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>ididid</title>
	<script>
		window.onload=function() {
			document.getElementById("btn").onclick = function() {
			    alert("btn");
			}
		}
	</script>
</head>
<body>
	<input id="btn" type="button" value="测试">
</body>
</html>

以响应事件的方式组织代码是另一种代码编写方式。要以这种方式编写代码，需要考虑可能发生的事件以及代码应如何响应这些事件。在计算机科学中，通常说这种代码是异步（asynchronous）的，因为我们编写的代码仅在相应的事件发生时才会被调用。这种编码方式也改变了我们看待问题的角度，不再逐步地编写代码来实现算法，而是将处理各种事件的众多处理程序整合起来，构成一个应用程序。

向setTimeout传递了一个指向处理程序的引用，定时器到期后，将调用该处理程序。

调用setTimeout时，你还可以传入第三个参数；触发时间事件时，这个参数将被传递给处理程序。

第十章：函数

函数有趣的另一面：匿名性。
所谓匿名（anonymous），指的是没有名称的函数。怎么可能出现这样的情况呢？使用函数声明定义函数时，必须给它指定名称；但使用函数表达式定义函数时，不必给它指定名称。通过使用匿名函数，可让代码更简洁精练，可读性更强，效率更高，甚至更易于维护。

第九章异步编码：处理事件

当有事件发生时，都可以在代码中处理它。（事件处理程序 / 回调函数 / 监听器）

以响应事件的方式组织代码是另一种代码编写方式。要以这种方式编写代码，需要考虑可能发生的事件以及代码应如何响应这些事件。在计算机科学中，通常说这种代码是异步（asynchronous）的，因为我们编写的代码仅在相应的事件发生时才会被调用。这种编码方式也改变了我们看待问题的角度，不再逐步地编写代码来实现算法，而是将处理各种事件的众多处理程序整合起来，构成一个应用程序。