JavaScript 简介

JavaScript实现

核心 (ECMAScript)
文档对象模型 (DOM)
浏览器对象模型 (BOM)

ECMAScript

ECMA-262定义是基础
Web浏览器是ECMAScript实现可能的宿主环境之一

宿主环境不仅提供基本的ECMAScript实现，同时也会提供该语言的扩展，以便语言和环境之间对接交互。而这些扩展-如DOM，则利用ECMAScript的核心类型和语法提供更多具体的功能，一边实现针对环境的操作。其它宿主环境包括Node 和 Adobe Flash。

ECMA262标准规定
语法，类型，语句，关键字，保留字，操作符，对象

文档对象模型 (DOM)

文档对象模型(DOM, Document Object Model) 是针对XML 进过扩展用于 HTML 的应用程序编程接口 (API, Application Programming Interface).

DOM 把整个页面映射为多个层节点。HTML 或 XML 页面中的每个组成部分都是某种类型的节点，这些节点又包含着不同类型的数据。

浏览器对象模型 (BOM)

提供与浏览器交互的方法和接口

在HTML中使用JavaScript

元素

1. async:可选。表示应该立即下载脚本，但不妨碍页面的其它操作。 比如：下载其他资源或等待加载其它的脚本。只对外部脚本文件有效。

2. charset ：可选。表示通过 src 属性指定的代码的字符集。由于大多数浏览器会忽略它的值，因此这个属性很少使用。

3. defer ：可选。表示脚本可以延迟到文档完全被解析和显示之后再执行。只对外部脚本文件有
   效。IE7 及更早版本对嵌入脚本也支持这个属性。

4. language ：已废弃。原来用于表示编写代码使用的脚本语言（如 JavaScript 、 JavaScript1.2或 VBScript ）。大多数浏览器会忽略这个属性，因此也没有必要再用了。

5. src ：可选。表示包含要执行代码的外部文件。

6. type ：可选。可以看成是 language 的替代属性；表示编写代码使用的脚本语言的内容类型（也称为 MIME 类型）。虽然 text/javascript 和 text/ecmascript 都已经不被推荐使用，但一直以来使用的都还是 text/javascript 。实际上，服务器在传送 JavaScript 文件时使用的MIME 类型通常是 application/x–javascript ，但在 type 中设置这个值却可能导致脚本被忽略。另外，在非IE浏览器中还可以使用以下值： application/javascript 和 application/ecmascript 。考虑到约定俗成和最大限度的浏览器兼容性，目前 type 属性的值依旧还是text/javascript 。不过，这个属性并不是必需的，如果没有指定这个属性，则其默认值仍为text/javascript 。

包含在元素内部的 JavaScript 代码将被从上之下一次解释。 在解析引擎对元素内部的所有代码执行王弼后，页面中的其余内容都不会被浏览器加载或显示。

只要不存在 defer 和 async 属性，浏览器都会按照 元素在页面中出现的先后顺序对它们依次进行解析。换句话说，在第一个 元素包含的代码解析完成后，第
二个 包含的代码才会被解析，然后才是第三个、第四个……

标签的位置

以往，所有的 元素都应该放在页面的 元素中。
作用：所有外部文件（包括 CSS 文件和 JavaScript 文件）的引用都放在相同的地方，把全部的JavaScript代码都被下载，解析，执行完以后，才能开始呈现页面的内容(浏览器在遇到标签时，才开始呈现内容)。对于大型程序，需要很多JavaScript代码的页面来说，会导致浏览器在呈现页面时出现明显的延迟。 现在都习惯把 JavaScript放在元素中页面内容的后面，有些特殊放入在特殊位置。

延迟脚本

标签定义了 defer 属性，这个属性的用途是表明脚本在执行时不会影响页面的构造。也就是说，脚本会被延迟到整个页面都解析完毕后再运行。因此，在 元素中设置，defer属性，相当于告知浏览器立即下载，但延迟执行。

延迟脚本并不一定会按照顺序执行，也不一定会在 DOMContentLoaded事件触发前执行，因此最好只包含一个延迟脚本。

defer 属性只适用于外部脚本文件

把延迟脚本放在页面底部仍然是最佳选择

异步脚本

指定 async 属性的目的：不让页面等待两个脚本下载和执行，从而异步加载页面其它内容。建议异步脚本不要再加载期间修改DOM.
异步脚本一定会在页面的 load 事件前执行，但可能会在 DOMContentLoaded 事件触发之前或之后执行。

基本概念

语法

区分大小写
ECMAScript 中的一切（变量、函数名和操作符）都区分大小写

标识符
第一个字符必须是一个字母、下划线（ _ ）或一个美元符号（ $ ）
其他字符可以是字母、下划线、美元符号或数字

ECMAScript 标识符采用驼峰大小写格式，也就是第一个字母小写，剩下的每个单词的首字母大写

注释
// 单行注释
多行注释

严格模式
严格模式：JavaScirpt定义了一种不同的解析与执行模型。

在严格模式下ECMAScript3 中的一些不确定的行为将得到处理，而且对某些不安全的操作也会抛出错误。

"use strict"

它是一个编译指示（pragma），用于告诉支持的 JavaScript 引擎切换到严格模式。这是为不破坏 ECMAScript 3 语法而特意选定的语法.

// 可以在函数内部包含 这条编译指示function doSomething(){    "use strict";    //函数体}

语句

ECMAScript 中的语句以一个分号结尾；如果省略分号，则由解析器确定语句的结尾
加上分号也会在某些情况下增进代码的性能，因为这样解析器就不必再花时间推测应该在哪里插入分号了。

变量

ECMAScript 的变量是松散类型，松散类型就是可以用来保存任何类型的数据。每一个变量仅仅是一个用于保存值的占位符。
定义变量时使用var 操作符(var 是一个关键字)后面跟一个变量名 (一个标识符)

用 var 操作符定义的变量将成为定义该变量的作用域中的局部变量。如果在函数中使用var 定义一个变量，那么这个变量在函数推出后就会被销毁。

数据类型

ECMAScript 中有 5 中简单数据类型(基本数据类型): Undefined , Null, Boolean, Number, String. 一种复杂数据类型：Object。
Object本质上是由一组无序的名值对组成的。
ECMAScript不支持任何创建自定义类型的机制。
ECMAScript数据类型具有动态性，因此没有定义其它数据类型的必要。

typeof 操作符
作用：检测数据类型
typeof 是一个操作符而不是函数

"undefined" ——如果这个值未定义；
"boolean" ——如果这个值是布尔值；
"string" ——如果这个值是字符串；
"number" ——如果这个值是数值；
"object" ——如果这个值是对象或 null ；
"function" ——如果这个值是函数。

调用 typeof null 会返回 "object" ，因为特殊值 null 被认为是一个空的对象引用

Undefined 类型

Undefined 类型只有一个值， 特殊的 undefined。 在使用var 声明变量但未对其加以初始化，这个值就是 undefeind。

var a; // 变量声明之后默认就是 undefeind 不需要 指定赋值 undefinedvar b = undefined;a === b; // true

对未初始化的变量执行 typeof 操作符会返回 undefined 值，而对未声明的变量执行 typeof 操作符同样也会返回 undefined 值.

对未初始化和未声明的变量执行typeof 操作符都 返回 了 undefined 值， 因为这两种变量从技术角度有本质区别，但实际上无论对那种变量也不可能执行真正的操作。

Null 类型

Null 类型 值是：null。 null表示一个空对象的指针， typeof操作符检测 null 值时会返回 'object'

如果定义的变量准备在将来用于保存对象，那么最好将该变量初始化为 null。 只需要检测null值， 就可以知道相应的变量是否已经保存了一个对象的引用。

undefined 值是派生自 null 值， 因此 ECMA-262规定对它们的想等测试返回 true .

null == undefiend // truenull === undefiend // false

定义的变量准备当作真正保存对象，就明确的让该变量保存 null 值。 体现 null 作为空对象指针的惯例， 有助于区分 null 和 undefined

Boolean 类型

Boolean 类型 是 ECMAScript 中使用得最多的一种类型，该类型字面值： true 和 false。
这两个值与数字值不是一回事， 因此 true 不一定等于 1， 而 false 也不一定等于 0.

Boolean 类型的字面值 true 和 false 是区分大小写的。 True 和 False (以及其它的混合大小写形式) 都不是 Boolean 值， 只是标识符。

ECMAScript 中所有类型的值都有与这两个Boolean值等价的值。 要将一个值转换对应的Boolean值，可以调用转型函数 Boolean();

false值： false, '' (空字符串) , 0, NaN, null, undefined

Number 类型

Number 类型使用 IEEE754 格式来表示 整数和浮点数值(浮点数值在某些语言中也被称之为双精度数值)。 ECMA-262定义了不同的数值字符量格式：十进制，八进制，十六进制.

浮点数值
数值中必须包含一个小数点，并且小数点后面必须至少有一位数字.

由于保存浮点数值需要的内存空间是保存整数值的两倍， 因此 ECMAScript会不失时机的将浮点数值转换为整数值。

如果小数点后面没有跟任何数字，这个数值就可以作为整数值来保存。如果浮点数值本身表示的就是一个整数(如1.0) , 这个数值也会被转换为整数

var floatNum = 1.; // 小数点后面没有数字 解析成 整数1var falotNum2 = 10.0; // 整数  解析为 10

对于极大或极小的数值，可以用 e 表示法 (科学记数法) 表示浮点数值。 用 e 表示法表示的数值等于 e 前面的数值 乘以 10 的指数次幂

var floatNum = 3.125e7; // 等于 31250000

浮点数值的最高精度是 17 位小数， 但在进行算术计算时，其精确度远远不如整数。
例如：0.1+0.2 结果并不是 0.3 。 而是 0.30000000000000004

数值范围

ECMAScript 能够表示的最小数值保存在 Number.MIN_VALUE， 大多数浏览器为： 5e-324
能够表示的最大数值保存在 Number.MAX_VALUE ，值为： 1.7976931348623157e+308

超出数值的话，这个数值将被自动转换成特殊的 Infinity 值。

这个数值是负数，则会被转换成 -Infinity (负无穷大) , 如果这个数值是正数，则会被转换成 Infinity (正无穷大)

某次计算返回正或负的 Infinity 值， 那么该值无法继续参与下一次的计算。 因为 Infinity 是不能够参与计算的数值。
确定一个数值是不是有穷(换句话说，是不是位于最大和最小的数值之间)，可以使用 isFinite() 函数， 参数是位于最大与最小数值之间返回true。

var result = Number.MAX_VALUE + Number.MAX_VALUE; // Infinityconsole.log( isFinite(result) ); //false;

NaN

NaN，非数值(Not a Number) 是一个特殊的数值，这个数值用于表示一个本来要返回数值的操作符未返回数值的情况(这样就不会抛出错误).

任何数值除以 0会返回 NaN
只有 0除以 0 才会返回 NaN，正数除以 0 返回 Infinity，负数除以 0返回-Infinity。

10 / 0 // NaN

NaN特点：

1. 任何涉及 NaN 的操作 (例如 NaN /10) 都会返回 NaN (多不计算中有可能导致问题)

2. NaN 与任何值都不相等， 包括NaN 本身 (NaN == NaN //false)

isNaN() 函数, 判定参数是否"不是数值"

isNaN() 在接收到一个值之后，会尝试将这个值转换为数值。某些不是数值的值会直接转换为数值，例如字符串 "10" 或 Boolean
而并不是任何不能被转换为数值的值都会导致这个函数返回true.

isNaN() 在接收到一个值之后，会尝试将这个值转换为数值。
某些不是数值的值会直接转换为数值，例如字符串 "10" 或 Boolean.
不能转换成功的数值的值，isNaN() 返回true .

console.log(isNaN(NaN)); // trueconsole.log(isNaN(10)); // false（10 是一个数值）console.log(isNaN("10")); // false（可以被转换成数值 10）console.log(isNaN("blue")); // true（不能转换成数值）console.log(isNaN(true)); // false（可以被转换成数值 1）console.log(isNaN({})); // true // isNaN() 适用于对象。在基于对象调用 isNaN(); 函数时，会首先调用对象的valueOf();方法，然后确定该方法返回的值是否可以转为数值，如果不能，则基于这个数值再调用toString();方法，再测试返回值。如果不能返回true.

数值转换
非数值转换为数值: Number(); parseInt(); parseFloat();

Number() : 用于任何数据类型

规则：
Boolean: true -> 1, false -> 0;
Bumber: 数字值, 简单的传入 和 返回;
Null: null -> 0;
Undeinfed: undefined -> NaN;

String:
1: 如果字符串中只包含数字(包含前面带正好或负号的情况),则将其转换为十进制数值。

Number('1');  // 1;Number('123'); // 123;Number('011'); // 11; (注意：前导零被忽略);Number('000000211'); // 211

2: 如果字符串中包含有效浮点格式。 转换为对应的浮点数值 (会忽略前导零);
3: 如果字符串中包含有效的十六进制格式，转换为相同大小的十进制数值;
4: 如果是空字符串， 转换为 0;
5: 字符串中包含其它以外的格式字符串，转换为NaN。

Object: 调用对象的valueOf(); [与对象object相关的原始值(如果存在)。如果没有值与object相关，则返回对象自身。] 然后按照前面的规则转换返回的值。如果转换结果是NaN。
则调用对象的toString(); 方法，然后依照前面的规则转换返回的值。

parseInt(), parseFlaot(); : 把字符串转换成数值 (尽力转换,能给转换的都转换)

是否符合数值模式，会忽略字符串前面的空格，直到找到第一个非空格字符.

如果字符不是数值字符或者负号，就返回 NaN。
parsetInt(); 转换空字符串会返回 NaN (Number() 对空字符串返回0 );

parsetInt(''); // NaN

如果第一个字符是数字字符， parseInt(); 会继续解析第二个字符，直到解析完所有后续字符串遇到一个非字符串字符.

parseInt('123bule'); // 1234  "1234blue" 被转换1234，"blue" 被忽略parseInt('22.2'); // 22 小数点并不是有效的数字字符parseInt("0xf"); // 15（十六进制数）

parseFloat() 只解析十进制值，没有用第二个参数指定基数的用法

var num1 = parseFloat("1234blue"); // 1234 （整数）var num2 = parseFloat("0xA"); // 0var num3 = parseFloat("22.5"); // 22.5var num4 = parseFloat("22.34.5"); // 22.34var num5 = parseFloat("0908.5"); // 908.5var num6 = parseFloat("3.125e7"); // 31250000

String 类型
由零或多个 16 位 Unicode 字符组成的字符序列

字符字面量

\n 换行 \r 回车

字符串的特点

ECMAScript 中的字符串是不可变的，字符串一旦创建，它的值就是不能改变的。要改变某个变量保存的字符串，首先要销毁原来的字符串，然后再用另一个包含新值的字符串赋值。

转换为字符串

toString(); // 返回相应值的字符串
数值，布尔值，对象和字符串值 (每个字符串都有一个toString();方法，该方法返回字符串的一个副本) 但是 null 和 undefined 没有这个方法

在不知道要转换的值是不是 null 或 undefined 的情况下，还可以使用转型函数 String() ，这个
函数能够将任何类型的值转换为字符串。

转型函数 String(); 能够将任何类型的值转为字符串。
String();转换规则:
如果值有toString(); 方法，则调用该方法(没有参数) 并返回相应的结果。
null -> 'null';
undefined -> 'undefined';

null 和 undefined 没有 toString() 方法，所以 String()函数就返回了这两个值的字面量

Object 类型

对象是一组数据和功能的集合。对象可以通过执行 new 操作符后跟要创建的对象类型的名称来创建。而创建Object 类型的实例并未其添加属性和方法。

Object 类型所具有的任何属性和方法也同样存在于更具体的对象中.

Object 的每个实例都具有下列属性和方法:

constructor：保存着用于创建当前对象的构造函数。
hasOwnProperty(prototyName) : 检测给定的属性在当前对象实例中(而不是在实例的原型中) 是否存在。 参数为属性名,必须以字符串形式指定 o.hasOwnPrototye('name'); //false or true
isPrototypeOf(object); 检查传入的对象是否是传入对象的原型
propertyIsEnumerable(propertyName) ：用于检查给定的属性是否能够使用 for-in 语句来枚举。与 hasOwnProperty() 方法一样，作为参数的属性名必须以字符串形式指定。
toLocaleString() ：返回对象的字符串表示，该字符串与执行环境的地区对应。
toString() ：返回对象的字符串表示。
valueOf() ：返回对象的字符串、数值或布尔值表示。通常与 toString() 方法的返回值
相同。

关键字：JavaScript, dom, 脚本

版权声明

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处。如若内容有涉嫌抄袭侵权/违法违规/事实不符，请点击 举报 进行投诉反馈！