一起入门前端（三）

今天要讲的主角无疑是javascript了。

javascript简介：

JavaScript 是一种脚本语言，它的解释器被称为 JavaScript 引擎。JavaScript 被发明用于在 HTML 网页上使用，给HTML网页增加动态功能。

JavaScript 可以让网页呈现各种特殊效果，为用户提供良好的互动体验，对于一个互联网开发者来说，如果你想提供漂亮的网页、令用户满意的上网体验、各种基于浏览器的便捷功能、前后端之间紧密高效的联系，JavaScript是必不可少的工具。

第一个javascript程序：hello world

JavaScript 代码放在 <script>……</script> 标签里，这段代码的效果是，弹出一个小框，显示“hello world!”。

我们除了可以把包含代码的 <script> 标签放在 <body>……</body> 标签里，还可以把它放在 <head>……</head> 标签里。

这个程序的执行结果和刚才的没什么不同，但其实把 JavaScript 代码放在 <head></head> 和放在 <body></body>里是有区别的：

简单地说，放在 <head></head> 里的会比放在 <body></body> 先执行。head 标签里的代码会在页面还未开始绘制之前被解析，而在 body 里的代码则会在页面渲染的同时在读取到这段代码的时候才被执行。

外部的 JavaScript

除了直接把 JavaScript 代码写在 HTML 里，我们还可以把 JavaScript 的代码写在一个 js 文件中，在 HTML 里调用这个 js 文件。我们还是以“hello world”举例。

其实，前两种方式都是直接把 JavaScript 代码放在 HTML 中，在页面加载的同时，那些 JavaScript 的代码就被解析了。而把 JavaScript 代码放在外部文件中，只有在事件被触发，需要该段 JavaScript 代码时，才调用执行。

这样做有个好处，当页面比较复杂的时候，把大量的 JavaScript 代码放到外部文件，只有在需要的时候才执行，那么会明显地加快页面加载速度。

javascript的基础语法同其他编程语言并无多大差异，这里就不做介绍。

JavaScript 是事件驱动的，接下来介绍什么是事件，并举例说明一些常用的事件。

JavaScript 是 基于对象 的语言。这与 Java 不同，Java 是面向对象的语言。

基于对象的基本特征，就是采用事件驱动。

通常鼠标或热键的动作我们称之为事件（Event），而由鼠标或热键引发的一连串程序的动作，称之为事件驱动。对事件进行处理程序或函数，我们称之为事件处理程序。

事件处理程序

在某个事件发生的时候，执行特定的 JavaScript 代码（事件处理程序）。

比如点击页面的某个按钮这是一个很常见的事件，执行对应的事件处理程序，弹出提示小窗口，代码如下：

常用事件

除了刚才提到的 onclick 事件，还有这些常用的事件：

onclick 单击
ondblclick 双击
onfocus 元素获得焦点
onblur 元素失去焦点

onmouseover 鼠标移到某元素之上
onmouseout 鼠标从某元素移开

onmousedown 鼠标按钮被按下
onmouseup 鼠标按键被松开

onkeydown 某个键盘按键被按下
onkeyup 某个键盘按键被松开
onkeypress 某个键盘按键被按下并松开

接下来讲解JavaScript 的 DOM 操作，内容主要包括：

通过 ID、名字、标签名选取元素；
通过 getAttribute 和 setAttribute 获取和设置元素属性；
通过 parentNode 获取父元素、createElement 动态地创建节点、appendChild 和removeChild 动态地添加或者删除节点。

DOM 是 文档对象模型（Document Object Model）的简称，它的基本思想是把结构化文档（比如 HTML 和 XML）解析成一系列的节点，再由这些节点组成一个树状结构（DOM Tree）。所有的节点和最终的树状结构，都有规范的对外接口，以达到使用编程语言操作文档的目的，所以，DOM 可以理解成文档（HTML 文档、XML 文档）的编程接口。

严格地说，DOM 不属于 JavaScript，但是操作 DOM 是 JavaScript 最常见的任务，而 JavaScript 也是最常用于 DOM 操作的语言，本章介绍的就是 JavaScript 对 DOM 标准的实现和用法。