JavaScript Introduction 简介

Posted on Edited on In

JavaScript是面向Web的编程语言，绝大多数现代网站都使用了JavaScript，并且所有的现代Web浏览器（电脑，手机，平板）均包含了JavaScript解释器。
这使得JavaScript能够称得上史上使用最广泛的编程语言。JavaScript也是前端开发工程师必须掌握的三种技能之一：描述网页内容的HTML、描述网页样式的CSS、以及描述网页行为的JavaScript。

JavaScript 起源

JavaScript 从一个简单的输入验证器发展成为一门强大的编程语言，完全出乎人们的意料。
应该说，它既是一门非常简单的语言，又是一门非常复杂的语言。说它简单，是因为学会使用它只需片刻功夫；而说它复杂，是因为要真正掌握它则需要数年时间。

语言特性

  1. JavaScript是一门动态的、弱类型的、面向对象的、解释型的编程语言，非常适合面向对象和函数式的编程风格。
  2. JavaScript的语法来自于Java
  3. 它的一等函数（first-classfunction）来自于Scheme，它的基于原型（prototype-based）的继承来自于Self。
  4. 但学习本课程不必去了解那些（Java/Scheme/Slef）语言或熟悉那些术语。

优点

  1. 更少的服务器交互
  2. 即时反馈给访问者
  3. 增加互动性
  4. 丰富的接口

脚本语言

往往不独立使用，要和HTML/jsp/php/asp/asp.net配合使用，脚本语言有自己的变量、函数、控制语句（顺序、分支、循环）等。

编译语言

Java程序 === .java → .class（编译） → jvm执行

解释性语言

JS脚本 → 浏览器（JS引擎解释）

区别

相比编译语言翻译成机器语言（字节码、二进制码）效率高。

JavaScript 实现

ECMA

欧洲计算机制造商协会（ECMA，European Computer Manufactures Association）
定义了名为ECMAScript（发音为 ek-ma-script）的脚本语言标准，它是通用的，与平台无关的语言标准。自此以后，浏览器开发商开始致力于将 ECMAScript 作为各自 JavaScript 实现的基础。虽然基础相同，但具体实现在不同浏览器上却略有差异。

组成

  1. 核心（ECMAScript），由 ECMA-262 定义，提供核心语言功能。
  2. 文档对象模型（DOM），提供访问和操作网页内容的方法和接口。
  3. 浏览器对象模型（BOM），提供与浏览器交互的方法和接口。

在当前5个主要浏览器（IE、FireFox、Chrome、Safari 和 Opera）中都得到了不同程度的支持。
其中，所有浏览器对 ECMAScript 3 版本的支持大体上都还不错，而对 ECMAScript 5 的支持程度越来越高，但对 DOM 的支持则彼此相差比较多。
对于已经正式纳入 HTML5 标准的 BOM 来说，尽管各浏览器都实现了某些众所周知的共同特性，但其他特性还是会因浏览器而异。

ECMAScript

  1. ECMAScript 标准由 语法、数据类型、语句、关键字、保留字、运算符、对象 组成。
  2. 它与 Web 浏览器没有任何依赖关系，并且这门语言本身并不包含输入和输出定义。
  3. ECMAScript 定义的只是这门语言的基础，而在此基础之上可以构建更完善的脚本语言。

环境

Web浏览器只是ECMAScript 实现的宿主环境之一，其他宿主环境包括 Node 和 Adobe Flash。
宿主环境不仅提供基本的 ECMAScript 实现，同时也会提供该语言的扩展（例如：DOM、BOM），这些扩展则利用 ECMAScript 的核心类型和语法提供更多更具体的功能。

JavaScript 是 Web 浏览器对 ECMAScript 标准的实现，ActionScript 是 Adobe Flash 对 ECMAScript 标准的实现。

ECMAScript历史

  1. 1997年，ECMAScript 1 版发布。
  2. 1998年6月，ECMAScript 2 版发布。
  3. 1999年12月，ECMAScript 3 版发布。
  4. 2000年，ECMAScript 4 开始酝酿，最终这个版本没有通过。
  5. 2009年12月，ECMAScript 5 版发布。
  6. 2011年6月，ECMAscript 5.1 版发布，成为国际标准。
  7. 2015年6月，ECMAScript 6 正式通过，成为国际标准。
  8. ECMAScript 2017

注：
3.0版是一个巨大的成功，在业界得到广泛支持，成为通行标准，奠定了 JavaScript 语言的基本语法，以后的版本完全继承。直到今天，初学者一开始学习 JavaScript，其实就是在学3.0版的语法。

DOM

文档对象模型（DOM，Document Object Model）
是用于HTML的应用程序编程接口（API），它把整个页面映射为一个多层节点结构。HTML页面中的每个组成部分都是某种类型的节点，这些节点又包含着不同类型的数据。看下面这个HTML页面：

1
2
3
4
5
6
7
8
9
<html>
    <head>
        <title>Sample Page</title>
    </head>
    <body>
    	<h1>h1</h1>
        <p><span>Hello World!</span></p>
    </body>
</html>

DOM节点层次图

1
2
3
4
5
6
7
8
html
	head
		meta
		title
	body
		h1
		p
			span

通过 DOM 创建的这个表示文档的树形图，开发人员获得了控制页面内容和结构的主动权。借助 DOM 提供的 API，开发人员可以轻松自如地删除、添加、替换或修改任何节点。

注：
由于Netscape和微软实现的DOM互不兼容，负责制定Web通信标准的W3C（World Wide Web Consortium，万维网联盟）开始着手规划 DOM。

DOM1 级

DOM 核心：映射文档结构，简化对文档中任意部分的操作和访问。
DOM HTML：在 DOM 核心的基础上，添加了针对 HTML 的对象和方法。

DOM2 级

DOM 视图：定义了跟踪不同文档视图的接口。
DOM 事件：定义了事件和事件处理的接口。
DOM 样式：定义了基于 CSS 伪元素应用样式的接口。
DOM 遍历和范围：定义了遍历和操作文档树的接口。

DOM3 级

DOM 加载和保存：引入了以统一方式加载和保存文档的方法。
DOM 验证：新增了验证文档的方法。
DOM 核心扩展。

BOM

浏览器对象模型（BOM，Browser Object Model）
是用于浏览器的应用程序编程接口（API），它把整个浏览器窗口映射为一个对象。
从根本上讲，BOM 只处理浏览器窗口和框架，但人们习惯上也把所有针对浏览器的 JavaScript 扩展算作 BOM 的一部分，

例如：

  1. 弹出新浏览器窗口的功能。
  2. 移动、缩放和关闭浏览器窗口的功能。
  3. 提供浏览器详细信息的 navigator 对象。
  4. 提供浏览器所加载页面的详细信息的 localtion 对象。
  5. 提供用户显示器分辨率详细信息的 screen 对象。
  6. 对 cookies 的支持。
  7. XMLHttpRequest 和 IE 的 ActiveXObject 这样的自定义对象。

注：
BOM 最让人头疼的是没有相关的规范和标准，每个浏览器都有独有的实现，这个问题在 HTML5 中得到了解决.
HTML5 致力于把很多 BOM 功能写入正式规范。