JavaScript入门

JavaScript简述

用来向HTML页面添加交互行为的一种脚本语言（脚本语言是一种轻量级的编程语言）

JavaScript组成：

• 核心（ECMAScript）：语言核心部分。
• 文档对象模型（DOM）：网页文档操作标准。
• 浏览器对象模型（BOM）：客户端和浏览器窗口操作基础。

简单概括，ECMAScript 是 JavaScript 语言的规范标准，JavaScript 是 ECMAScript 的一种实现。
JavaScript作用

• 在html中嵌入动态文本
• 对浏览器事件做出相应
• 读写HTML元素
• 验证提交数据等

JavaScript的引入

1)内嵌式

<script type="text/javascript">
	//javascript code
</script>

2)外联式

<script src="xxx.js" type="text/javascript" charset="utf-8"></script>

JS文件延迟和异步加载

defer和async属性
对于导入的 JavaScript 文件，将按照 ＜script> 标签在文档中出现的顺序来执行，而且执行过程是文档解析的一部分，不会单独解析或者延期执行。

—般情况下，在文档的 标签中包含 JavaScript 脚本，或者导入的 JavaScript 文件。这意味着必须等到全部 JavaScript 代码都被加载、解析和执行完以后，才能继续解析后面的 HTML 部分。如果加载的 JavaScript 文件很大， HTML 文档解析就容易出现延迟。

为了避免这个问题，在开发 Web 应用程序时，建议把导入 JavaScript 文件的操作放在 后面，让浏览器先 将网页内容解析并呈现出来后，再去加载 JavaScript 文件，以便加快网页响应速度。
1）延迟加载
<script> 标签有一个布尔型属性 defer，defer 属性只适用于外部 JavaScript 文件, 设置该属性能够将 JavaScript 文件延迟到页面解析完毕后再运行。

<!--外部文件 test.js 包含的脚本将延迟到浏览器解析完网页之后再执行。-->
<script type="text/javascript" defer src="test.js"></script>

2）异步加载
为 < script> 标签设置 async 属性，让浏览器异步加载 JavaScript 文件，即在加载 JavaScript 文件时，浏览器不会暂停，而是继续解析。这样能节省时间，提升响应速度。

 <script type="text/javascript" async src="test.js"></script>

通过设置 async 属性，就不用考虑 < script> 标签的放置位置，用户可以根据习惯继续把很多大型 JavaScript 库文件放在 < head> 标签内。

代码块

代码块就是使用 < script> 标签包含的 JavaScript 代码段。

	<script>
	    //JavaScript 代码块 1
	    alert(a);
	</script>
	<script>
	    //JavaScript 代码块 2
	    var a = 1;
	</script>

JavaScript 是按块执行的，但是不同块都属于同一个作用域（全局作用域），下面块中的代码可以访问上面块中的变量。因此，如果把上面示例中两个代码块的顺序调换一下，就不会出现语法错误。

JavaScript字符编码

JavaScript 遵循 Unicode 字符编码规则。Unicode 字符集中每个字符使用 2 个字节来表示，这意味着用户可以使用中文来命名 JavaScript 变量。
考虑到 JavaScript 版本的兼容性以及开发习惯，不建议使用双字节的中文字符命名变量或函数名。

由于 JavaScript 脚本一般都嵌入在网页中，并最终由浏览器来解释，因此在考虑到 JavaScript 字符编码的同时， 还要兼顾 HTML 文档的字符编码，以及浏览器支持的编码。一般建议保持 HTML 文档的字符编码与 JavaScript 字符编码一致，以免出现乱码。

基础操作

获取元素内容
获取元素

document.getElementById(“id名称” );

获取元素里面的值

document.getElementById(“id名称”).value;

javascripte的输出

警告框：alert();
向页面指定位置写入内容：innerHTML(属性)
向页面写入内容：document.write(“”);

<script>
	//警告框
	//alert("aaa");
	
	//确认按钮
	//confirm("您确认删除吗？");
	
	//提示输入框
	prompt("请输入价格：");
</script>

Window对象

setInterval():它有一个返回值，主要是提供给clearInterval使用。
setTimeout():它有一个返回值，主要是提供给clearTimeout使用。
clearInterval():该方法只能清除由setInterval设置的定时操作
clearTimeout():该方法只能清除由setTimeout设置的定时操作

Location对象

Location 对象包含有关当前 URL 的信息

History对象

History 对象包含用户（在浏览器窗口中）访问过的 URL。

javascript事件

• onfocus/onblur:聚焦离焦事件，用于表单校验的时候比较合适。
• onclick/ondblclick:鼠标单击和双击事件
• onkeydown/onkeypress：搜索引擎使用较多
• onload：页面加载事件，所有的其它操作(匿名方式)都可以放到这个绑定的函数里面去。如果是有名称，那么在html页面中只能写一个。
• onmouseover/onmouseout/onmousemove：购物网站商品详情页。
• onsubmit：表单提交事件，有返回值，控制表单是否提交。
• onchange:当用户改变内容的时候使用这个事件(二级联动)

javascript的DOM操作

Document:整个html文件都成为一个document文档
Element:所有的标签都是Element元素
Attribute：标签里面的属性
Text：标签中间夹着的内容为text文本
Node:document、element、attribute、text统称为节点node.

Document对象

每个载入浏览器的 HTML 文档都会成为 Document 对象

Element对象

element.appendChild()
		向元素添加新的子节点，作为最后一个子节点。
element.firstChild
		返回元素的首个子节点。
element.getAttribute()
		返回元素节点的指定属性值。
element.innerHTML
		设置或返回元素的内容。
element.insertBefore()
		在指定的已有的子节点之前插入新节点。
element.lastChild
		返回元素的最后一个子元素。
element.setAttribute()
		把指定属性设置或更改为指定值。
element.removeChild()
		从元素中移除子节点。
element.replaceChild()
		替换元素中的子节点。

我们所认知的html页面中所有的标签都是element元素

Attribute对象

我们所认知的html页面中所有标签里面的属性都是attribute

基本语法

变量

• JavaScript变量可以不声明，直接使用，默认值：undefined
• JavaScript变量是弱类型，及同一个变量可以存放不同类型的数据
• JavaScript区分大小写。

var 变量值=值;

JavaScript 引擎的解析方式是：先解析代码，获取所有被声明的变量，然后再一行一行地运行。 这样，所有声明的变量都会被提升到代码的头部，这就叫作变量提升（Hoisting）。

标识符

JavaScript 标识符包括变量名、函数名、参数名和属性名。

第一个字符必须是字母、下划线（_）或美元符号（$）。
除了第一个字符外，其他位置可以使用 Unicode 字符。一般建议仅使用 ASCII 编码的字母，不建议使用双字节的字符。
不能与 JavaScript 关键字、保留字重名。
可以使用 Unicode 转义序列。例如，字符 a 可以使用“\u0061”表示。

关键字

关键字就是 ECMA-262 规定的 JavaScript 语言内部使用的一组名称（或称为命令）。

保留字

保留字就是 ECMA-262 规定的 JavaScript 语言内部预备使用的一组名称（或称为命令）。

空白符（分隔符）

分隔符（空白符）就是各种不可见字符的集合，如空格（\u0020）、水平制表符（\u0009）、垂直制表符（\u000B）、换页符（\u000C）、不中断空白（\u00A0）、字节序标记（\uFEFF）、换行符（\u000A）、 回车符（\u000D）、行分隔符（\u2028）、段分隔符（\u2029）等。

在 JavaScript 中，分隔符不被解析，主要用来分隔各种记号，如标识符、关键字、直接量等信息。 在 JavaScript 脚本中，常用分隔符来格式化代码，以方便阅读。

注释

注释就是不被解析的一串字符。JavaScript 注释有以下两种方法：

单行注释：//单行注释信息。
		使用单行注释时，在//后面的同一行内的任何字符或代码都会被忽视，不再解析。
多行注释：/*多行注释信息*/。
		在多行注释中，包含在/*和*/符号之间的任何字符都视被为注释文本而忽略掉。

转义字符

JavaScript 定义反斜杠加上字符可以表示字符自身。注意，一些字符加上反斜杠后会表示特殊字符，而不是原字符本身，这些特殊转义字符被称为转义序列，具体说明如表所示。

如果在一个正常字符前添加反斜杠，JavaScript 会忽略该反斜杠。

基本数据类型

JavaScript 的数据类型分为两种：

简单的值（原始值）：包含字符串、数字和布尔值，此外，还有两个特殊值——null（空值）和 undefined（为定义）。
复杂的数据结构（泛指对象）：包括狭义的对象、数组和函数。

在 JavaScript 中，函数是一种比较特殊的结构。它可以是一段代码集合，也可以是一种数据类型；可以作为对象来使用，还可以作为构造函数创建类型。JavaScript 函数的用法比较灵活，这也是 JavaScript 语言敏捷的一种表现（函数式编程）。

布尔型

在 JavaScript 中，undefined、null、""、0、NaN 和 false 这 6 个特殊值转换为布尔值时为 false，被称为假值。除了假值以外，其他任何类型的数据转换为布尔值时都是 true。

Null

使用 typeof 运算符检测 null 值，返回 Object，表明它属于对象类型，但是 JavaScript 把它归为一类特殊的值。

字符串（string）

JavaScript 字符串（String）就是由零个或多个 Unicode 字符组成的字符序列。零个字符表示空字符串。

数字（数值）

在 JavaScript 程序中，直接输入的任何数字都被视为数值直接量。
示例1
数值直接量可以细分为整型直接量和浮点型直接量。浮点数就是带有小数点的数值，而整数是不带小数点的数值。

var int = 1;  //整型数值
var float = 1.0;  //浮点型数值

整数一般都是 32 位数值，而浮点数一般都是 64 位数值。

JavaScript 中的所有数字都是以 64 位浮点数形式存储，包括整数。例如，2 与 2.0 是同一个数。
示例2
浮点数可以使用科学计数法来表示。

var float = 1.2e3;

其中 e （或 E）表示底数，其值为 10，而 e 后面跟随的是 10 的指数。指数是一个整型数值，可以取正负值。上述代码等价于：

var float = 1.2*10*10*10;
var float = 1200;

浮点数溢出
执行数值计算时，要防止浮点数溢出。例如，0.1+0.2 并不等于 0.3。

num = 0.1+0.2;   //0.30000000000000004

解决方法：浮点数中的整数运算是精确的，所以小数表现出来的问题可以通过指定精度来避免。

a = (1+2)/10;   //0.3

特殊数值

NaN

• 当 NaN 参与数学运算时，运算结果也是 NaN。
• typeof 不能分辨数字和 NaN，并且 NaN 不等同于它自己。

NaN === NaN //false
NaN !== NaN //true

• 使用 isNaN() 全局函数可以判断 NaN。
• 使用 isFinite() 全局函数可以判断 NaN 和 Infinity。因此，可以使用它来检测 NaN、正负无穷大。如果是有限数值，或者可以转换为有限数值，那么将返回 true。如果只是 NaN、正负无穷大的数值，则返回 false 。

Undefined类型

undefined 是 Undefined 类型的唯一值，它表示未定义的值。当声明变量未赋值时，或者定义属性未设置值时，默认值都为 undefined。

null 和 undefined 属于两种不同类型，使用全等运算符（==）或 typeof 运算符可以进行检测。

console.log(null === undefined);  //false
console.log(typeof null);  //返回"object"
console.log(typeof undefined);  //返回"undefined"

严格模式（use strict）

启用严格模式
在代码首部添加以下一行字符串,即可启用严格模式。

"use strict"

//严格模式
'use strict';  /*有效的严格模式*/
globalVar = 100;

注释语句不作为有效的 JavaScript 代码。因此，只要前面没有会产生实际运行结果的语句，“use strict” 就可以不在第一行。

不支持严格模式的浏览器会把它作为字符串直接量忽略掉。
推荐将整个 JavaScript 文件脚本放在一个立即执行的匿名函数中，在匿名函数内启动严格模式。

判断类型（typeof+constructor+toString）

使用 typeof 运算符可以判断基本数据类型,但是 typeof 有很多局限性.
使用 constructor
constructor 是 Object 类型的原型属性，它能够返回当前对象的构造器（类型函数）。利用该属性，可以检测复合型数据的类型，如对象、数组和函数等。

undefined 和 null 没有 constructor 属性，不能够直接读取，否则会抛出异常。
数值直接量也不能直接读取 constructor 属性，应该先把它转换为对象再调用。

console.log(10.construetor);  //抛出异常
console.log((10).constructor);  //返回 Number 类型
console.log(Number(10).constructor);  //返回 Number 类型

toString
toString 是 Object 类型的原型方法，它能够返回当前对象的字符串表示。利用该属性，可以检测复合型数据的类型，如对象、数组、函数、正则表达式、错误对象、宿主对象、自定义类型对象等；也可以对值类型数据进行检测。

判断相等或者不等于

在相等运算中，应注意以下几个问题：

• 如果操作数是布尔值，则先转换为数值，其中 false 转为 0，true 转换为 1。
• 如果一个操作数是字符串，另一个操作数是数字，则先尝试把字符串转换为数字。
• 如果一个操作数是字符串，另一个操作数是对象，则先尝试把对象转换为字符串。
• 如果一个操作数是数字，另一个操作数是对象，则先尝试把对象转换为数字。
• 如果两个操作数都是对象，则比较引用地址。如果引用地址相同，则相等；否则不等。

对象操作（in、instanceof、delete）运算符

对象操作运算主要是针对对象、数组、函数这 3 类复合型对象执行某种程序，设计的运算符包括 in、instanceof、delete。

in运算符能够检测左侧操作数是否为右侧操作数的成员。其中，左侧操作数是一个字符串，或者可以转换为字符串的表达式，右侧操作数是一个对象或数组。

instanceof运算符能够检测左侧的对象是否为右侧类型的示例。

delete运算符能够删除指定对象的属性、数组元素或变量。如果删除操作成功，则返回 true；否则返回 false。

原内容出处

http://c.biancheng.net/js/