JS

JavaScript：写入 HTML 输出

document.write("<h1>This is a heading</h1>");

document.write() 仅仅向文档输出写内容。

如果在文档已完成加载后执行 document.write，整个 HTML 页面将被覆盖

JavaScript：对事件作出反应

<button type="button" onclick="alert('Welcome!')">点击这里</button>

JavaScript：改变 HTML 内容

document.getElementById("demo").innerHTML="Hello JavaScript";    //改变内容

JavaScript：改变 HTML 样式

document.getElementById("demo").style.color="#ff0000";    

JavaScript：验证输入

isNaN(x)

<button type="button" onclick="myFunction()">Try it</button>

JavaScript 拥有动态类型。这意味着相同的变量可用作不同的类型：

break 语句用于跳出循环。

continue 用于跳过循环中的一个迭代。

try 语句测试代码块的错误。

catch 语句处理错误。

throw 语句创建自定义错误。

try

  {

  adddlert("Welcome guest!");

  }

catch(err)

  {

  txt="There was an error on this page.

";

  txt+="Error description: " + err.message + "

";

  txt+="Click OK to continue.

";

  alert(txt);

  }

try

  {

  var x=document.getElementById("demo").value;

  if(x=="")    throw "empty";

  if(isNaN(x)) throw "not a number";

  if(x>10)     throw "too high";

  if(x<5)      throw "too low";

  }

catch(err)

  {

  var y=document.getElementById("mess");

  y.innerHTML="Error: " + err + ".";

  }

如果前缀为 0，则 JavaScript 会把数值常量解释为八进制数，如果前缀为 0 和 "x"，则解释为十六进制数。

浏览器对象模型 (BOM) 使 JavaScript 有能力与浏览器“对话”。

所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。

全局变量是 window 对象的属性。

全局函数是 window 对象的方法。

Window 尺寸

有三种方法能够确定浏览器窗口的尺寸（浏览器的视口，不包括工具栏和滚动条）。

对于Internet Explorer、Chrome、Firefox、Opera 以及 Safari：

• window.innerHeight - 浏览器窗口的内部高度
• window.innerWidth - 浏览器窗口的内部宽度

对于 Internet Explorer 8、7、6、5：

• document.documentElement.clientHeight
• document.documentElement.clientWidth

或者

• document.body.clientHeight
• document.body.clientWidth

实用的 JavaScript 方案（涵盖所有浏览器）：

实例

var w=window.innerWidth

|| document.documentElement.clientWidth

|| document.body.clientWidth;

var h=window.innerHeight

|| document.documentElement.clientHeight

|| document.body.clientHeight;

其他 Window 方法

一些其他方法：

• window.open() - 打开新窗口
• window.close() - 关闭当前窗口
• window.moveTo() - 移动当前窗口
• window.resizeTo() - 调整当前窗口的尺寸

window.screen 对象包含有关用户屏幕的信息

window.screen 对象在编写时可以不使用 window 这个前缀。

一些属性：

• screen.availWidth - 可用的屏幕宽度
• screen.availHeight - 可用的屏幕高度

Window Location

用于获得当前页面的地址 (URL)，并把浏览器重定向到新的页面。swindow.location 对象在编写时可不使用 window 这个前缀。

一些例子：

• location.hostname 返回 web 主机的域名
• location.pathname 返回当前页面的路径和文件名
• location.port 返回 web 主机的端口 （80 或 443）
• location.protocol 返回所使用的 web 协议（http:// 或 https://）

location.href 属性返回当前页面的 URL。

location.assign() 方法加载新的文档。

history.back() 方法加载历史列表中的前一个 URL。

history .forward() 方法加载历史列表中的下一个 URL。

window.navigator 对象包含有关访问者浏览器的信息

navigator.appCodeName

navigator.appName

navigator.appVersion

navigator.cookieEnabled

navigator.platform

navigator.userAgent

navigator.systemLanguage

来自 navigator 对象的信息具有误导性，不应该被用于检测浏览器版本，这是因为：

• navigator 数据可被浏览器使用者更改
• 一些浏览器对测试站点会识别错误
• 浏览器无法报告晚于浏览器发布的新操作系统

警告框：window.alert()

确认框：当你点击 "确认", 确认框返回 true， 如果点击 "取消", 确认框返回 false。window.confirm() 

提示框：如果用户点击确认，那么返回值为输入的值。如果用户点击取消，那么返回值为 null。 window.prompt()

语法:window.prompt("sometext","defaultvalue");

换行：弹窗使用 反斜杠 + "n"( ) 来设置换行

计时

• setInterval() - 间隔指定的毫秒数不停地执行指定的代码。
• setTimeout() - 暂停指定的毫秒数后执行指定的代码

window.setInterval("javascript function",milliseconds);

window.clearInterval(intervalVariable)

window.setTimeout("javascript 函数",毫秒数);

window.clearTimeout(timeoutVariable)

如：var myVar=setInterval(function(){myTimer()},1000);

clearInterval(myVar);

Cookies

Cookies 用于存储 web 页面的用户信息。Cookies 是一些数据, 存储于你电脑上的文本文件中。

Cookies 以名/值对形式存储，如下所示:username=John Doe

JavaScript 中，创建 cookie 如下所示：document.cookie="username=John Doe";

可以为 cookie 添加一个过期时间（以 UTC 或 GMT 时间）。默认情况下，cookie 在浏览器关闭时删除：

document.cookie="username=John Doe; expires=Thu, 18 Dec 2013 12:00:00 GMT";

可以使用 path 参数告诉浏览器 cookie 的路径。默认情况下，cookie 属于当前页面。

document.cookie="username=John Doe; expires=Thu, 18 Dec 2013 12:00:00 GMT; path=/";

 JavaScript 中, 可以使用以下代码来读取 cookies：

var x = document.cookie;

document.cookie 将以字符串的方式返回所有的 cookies，类型格式： cookie1=value; cookie2=value; cookie3=value;

 修改 Cookie

document.cookie="username=John Smith; expires=Thu, 18 Dec 2013 12:00:00 GMT; path=/";

删除 Cookie

document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 GMT";

JavaScript 的核心 ECMAScript 描述了该语言的语法和基本对象；

ECMAScript原始类型：

• undefined - 如果变量是 Undefined 类型的
• boolean - 如果变量是 Boolean 类型的
• number - 如果变量是 Number 类型的
• string - 如果变量是 String 类型的
• object - 如果变量是一种引用类型或 Null 类型的

undefined只能用type of 运算符来进行判断，因为其他运算符，必须在变量定义的情况下进行。

Null 类型

另一种只有一个值的类型是 Null，它只有一个专用值 null，即它的字面量。值 undefined 实际上是从值 null 派生来的，因此 ECMAScript 把它们定义为相等的。尽管这两个值相等，但它们的含义不同。undefined 是声明了变量但未对其初始化时赋予该变量的值，null 则用于表示尚未存在的对象（在讨论 typeof 运算符时，简单地介绍过这一点）。如果函数或方法要返回的是对象，那么找不到该对象时，返回的通常是 null。

特殊的 Number 值

几个特殊值也被定义为 Number 类型。前两个是 Number.MAX_VALUE 和 Number.MIN_VALUE，它们定义了 Number 值集合的外边界。当计算生成的数大于 Number.MAX_VALUE 时，它将被赋予值 Number.POSITIVE_INFINITY，意味着不再有数字值。同样，生成的数值小于 Number.MIN_VALUE 的计算也会被赋予值 Number.NEGATIVE_INFINITY，也意味着不再有数字值。如果计算返回的是无穷大值，那么生成的结果不能再用于其他计算。事实上，有专门的值表示无穷大，（如你猜到的）即 Infinity。Number.POSITIVE_INFINITY 的值为 Infinity。Number.NEGATIVE_INFINITY 的值为 -Infinity。

由于无穷大数可以是正数也可以是负数，所以可用一个方法判断一个数是否是有穷的（而不是单独测试每个无穷数）。可以对任何数调用 isFinite() 方法，以确保该数不是无穷大。最后一个特殊值是 NaN，表示非数（Not a Number）。NaN 也不能用于算术计算。NaN 的另一个奇特之处在于，它与自身不相等，

出于这个原因，不推荐使用 NaN 值本身。函数 isNaN() 会做得相当好

Number 类型的 toString() 方法返回的都是数字的十进制表示

基只是要转换成的基数的另一种加法而已，它是 toString() 方法的参数：

ECMAScript 提供了两种把非数字的原始值转换成数字的方法，即 parseInt() 和 parseFloat()。

parseInt() 方法首先查看位置 0 处的字符，判断它是否是个有效数字；如果不是，该方法将返回 NaN，不再继续执行其他操作。但如果该字符是有效数字，该方法将查看位置 1 处的字符，进行同样的测试。这一过程将持续到发现非有效数字的字符为止，此时 parseInt() 将把该字符之前的字符串转换成数字。

parseInt() 方法还有基模式

var iNum2 = parseInt("10", 8);     //返回 8

parseFloat() 方法与 parseInt() 方法的处理方式相似parseFloat() 方法也没有基模式。

强制类型转换

• Boolean(value) - 把给定的值转换成 Boolean 型；
• Number(value) - 把给定的值转换成数字（可以是整数或浮点数）；
• String(value) - 把给定的值转换成字符串；

Boolean() 函数

当要转换的值是至少有一个字符的字符串、非 0 数字或对象时，Boolean() 函数将返回 true。如果该值是空字符串、数字 0、undefined 或 null，它将返回 false。

Number() 函数

Number() 函数的强制类型转换与 parseInt() 和 parseFloat() 方法的处理方式相似，只是它转换的是整个值，而不是部分值。

String() 函数

最后一种强制类型转换方法 String() 是最简单的，因为它可把任何值转换成字符串。

强制转换成字符串和调用 toString() 方法的唯一不同之处在于，对 null 和 undefined 值强制类型转换可以生成字符串而不引发错误：

引用类型

引用类型通常叫做类（class），也就是说，遇到引用值，所处理的就是对象。

ECMAScript 中的所有对象都由这个Object对象继承而来，Object 对象中的所有属性和方法都会出现在其他对象中

Object 对象具有下列属性：

constructor

对创建对象的函数的引用（指针）。对于 Object 对象，该指针指向原始的 Object() 函数。

Prototype

对该对象的对象原型的引用。对于所有的对象，它默认返回 Object 对象的一个实例。

Object 对象几个方法：

hasOwnProperty(property)

判断对象是否有某个特定的属性。必须用字符串指定该属性。（例如，o.hasOwnProperty("name")）

IsPrototypeOf(object)

判断该对象是否为另一个对象的原型。

PropertyIsEnumerable

判断给定的属性是否可以用 for...in 语句进行枚举。

ToString()

返回对象的原始字符串表示。对于 Object 对象，ECMA-262 没有定义这个值，所以不同的 ECMAScript 实现具有不同的值。

ValueOf()

返回最适合该对象的原始值。对于许多对象，该方法返回的值都与 ToString() 的返回值相同。

Boolean 对象

Boolean 对象是 Boolean 原始类型的引用类型。

Number 对象

Number对象是 Number 原始类型的引用类型。

要得到数字对象的 Number 原始值，只需要使用 valueOf() 方法：

var iNumber = oNumberObject.valueOf();

toFixed() 方法返回的是具有指定位数小数的数字的字符串表示

var oNumberObject = new Number(68);

alert(oNumberObject.toFixed(2));

Exponential() 方法

与格式化数字相关的另一个方法是 toExponential()，它返回的是用科学计数法表示的数字的字符串形式。

toPrecision() 方法

toPrecision() 方法根据最有意义的形式来返回数字的预定形式或指数形式。

 String 对象

String 对象具有属性 length，它是字符串中的字符个数

 charAt() 和 charCodeAt() 访问的是字符串中的单个字符。这两个方法都有一个参数，即要操作的字符的位置

charAt() 方法返回的是包含指定位置处的字符的字符串，如果想得到的不是字符，而是字符代码，那么可以调用 charCodeAt() 方法。

concat() 方法

出于这种原因，较常见的是用加号（+）连接字符串，因为这种形式从逻辑上表明了真正的行为

indexOf() 和 lastIndexOf() 方法返回的都是指定的子串在另一个字符串中的位置，如果没有找不到子串，则返回 -1。

这两个方法的不同之处在于，indexOf() 方法是从字符串的开头（位置 0）开始检索字符串，而 lastIndexOf() 方法则是从字符串的结尾开始检索子串。

slice() 和 substring()。这两种方法返回的都是要处理的字符串的子串，都接受一个或两个参数。第一个参数是要获取的子串的起始位置，第二个参数（如果使用的话）是要获取子串终止前的位置（也就是说，获取终止位置处的字符不包括在返回的值内）。如果省略第二个参数，终止位就默认为字符串的长度。

在参数为负数时，它们处理参数的方式才稍有不同

var oStringObject = new String("hello world");

alert(oStringObject.slice("-3"));           //输出 "rld"

alert(oStringObject.substring("-3"));       //输出 "hello world"

alert(oStringObject.slice("3, -4"));                //输出 "lo w"

alert(oStringObject.substring("3, -4"));    //输出 "hel"

大小写转换：

var oStringObject = new String("Hello World");

alert(oStringObject.toLocaleUpperCase());   //输出 "HELLO WORLD"

alert(oStringObject.toUpperCase());                 //输出 "HELLO WORLD"

alert(oStringObject.toLocaleLowerCase());   //输出 "hello world"

alert(oStringObject.toLowerCase());                 //输出 "hello world"

instanceof 运算符

在使用 typeof 运算符时采用引用类型存储值会出现一个问题，无论引用的是什么类型的对象，它都返回 "object"。instanceof 运算符与 typeof 运算符相似，用于识别正在处理的对象的类型。与 typeof 方法不同的是，instanceof 方法要求开发者明确地确认对象为某特定类型。

var oStringObject = new String("hello world");

alert(oStringObject instanceof String);     //输出 "true"

一元运算符

delete 运算符删除对以前定义的对象属性或方法的引用。delete o.name;

delete 运算符不能删除开发者未定义的属性和方法。

void 运算符对任何值返回 undefined，该运算符通常用于避免输出不应该输出的值

<a href="javascript:window.open('about:blank')">Click me</a>

<a href="javascript:void(window.open('about:blank'))">Click me</a>

ECMAScript 中，所有整数字面量默认都是有符号整数.

位运算 NOT（~）表示,位运算 AND 由和号（&）表示, 位运算 OR 由符号（|）表示，位运算 XOR 由符号（^）表示，左移运算由两个小于号表示（<<），左移运算保留数字的符号位。有符号右移运算符由两个大于号表示（>>），留数字的符号位，无符号右移运算符由三个大于号（>>>）表示，对于正数，无符号右移运算的结果与有符号右移运算一样。

逻辑 NOT 运算符返回的一定是 Boolean 值, 由感叹号（!）表示。如果运算数是 undefined，发生错误. 逻辑 AND 运算符用双和号（&&）表示, 逻辑 OR 运算符由双竖线（||）表示

论何时比较一个数字和一个字符串，ECMAScript 都会把字符串转换成数字，然后按照数字顺序比较它们。

等号由双等号（==）表示，当且仅当两个运算数相等时，它返回 true。非等号由感叹号加等号（!=）表示，当且仅当两个运算数不相等时，它返回 true。全等号由三个等号表示（===），只有在无需类型转换运算数就相等的情况下，才返回 true。var sNum = "66";

var iNum = 66;

alert(sNum == iNum);      //输出 "true"

alert(sNum === iNum);     //输出 "false"

with 语句用于设置代码在特定对象中的作用域.

提示：with 语句是运行缓慢的代码块，尤其是在已设置了属性值时。大多数情况下，如果可能，最好避免使用它。

switch 语句的语法：

switch (expression)

  case value: statement;

    break;

  case value: statement;

    break;

  case value: statement;

    break;

  case value: statement;

    break;

...

  case value: statement;

    break;

  default: statement;

函数是 ECMAScript 的核心。

arguments 对象

在函数代码中，使用特殊对象 arguments，开发者无需明确指出参数名，就能访问它们。

ECMAScript 不会验证传递给函数的参数个数是否等于函数定义的参数个数。开发者定义的函数都可以接受任意个数的参数（根据 Netscape 的文档，最多可接受 255 个），而不会引发任何错误。任何遗漏的参数都会以 undefined 传递给函数，多余的函数将忽略。用 arguments 对象判断传递给函数的参数个数，即可模拟函数重载

ECMAScript 的函数实际上是功能完整的对象。

Function 类可以表示开发者定义的任何函数。

用 Function 类直接创建函数的语法如下：

var function_name = new function(arg1, arg2, ..., argN, function_body)

ECMAScript 定义的属性 length 声明了函数期望的参数个数。

Function 对象也有与所有对象共享的 valueOf() 方法和 toString() 方法。这两个方法返回的都是函数的源代码，在调试时尤其有用。

闭包，指的是词法表示包括不被计算的变量的函数，也就是说，函数可以使用函数之外定义的变量。

对象废除

var oObject = new Object;

// do something with the object here

oObject = null;

每用完一个对象后，就将其废除，来释放内存，这样还确保不再使用已经不能访问的对象，从而防止程序设计错误的出现, 废除对象的所有引用时。如果一个对象有两个或更多引用，则要正确废除该对象，必须将其所有引用都设置为 null。

在 ECMAScript 中，所有对象并非同等创建的。

一般来说，可以创建并使用的对象有三种：本地对象、内置对象和宿主对象。

本地对象就是 ECMA-262 定义的类（引用类型）。它们包括：

• Object
• Function
• Array
• String
• Boolean
• Number
• Date
• RegExp
• Error
• EvalError
• RangeError
• ReferenceError
• SyntaxError
• TypeError
• URIError

ECMA-262 把内置对象（built-in object）定义为“由 ECMAScript 实现提供的、独立于宿主环境的所有对象，在 ECMAScript 程序开始执行时出现”。 ECMA-262 只定义了两个内置对象，即 Global 和 Math （它们也是本地对象，根据定义，每个内置对象都是本地对象）。所有非本地对象都是宿主对象（host object），即由 ECMAScript 实现的宿主环境提供的对象。所有 BOM 和 DOM 对象都是宿主对象。

ECMAScript 中只存在一种作用域 - 公用作用域。ECMAScript 中的所有对象的所有属性和方法都是公用的。有些开发者还喜欢用单下划线说明私有成员，例如：obj._color

ECMAScript 并没有静态作用域。不过，它可以给构造函数提供属性和方法

function sayHello() {

  alert("hello");

}

 

sayHello.alternate = function() {

  alert("hi");

}

 

sayHello();               //输出 "hello"

sayHello.alternate();     //输出 "hi"

关键字 this 总是指向调用该方法的对象

ECMAScript 拥有很多创建对象或类的方法。

对象冒充实现多重继承。

function ClassZ() {

    this.newMethod = ClassX;

    this.newMethod();

    delete this.newMethod;

 

    this.newMethod = ClassY;

    this.newMethod();

    delete this.newMethod;

}

call() 方法

call() 方法是与经典的对象冒充方法最相似的方法。它的第一个参数用作 this 的对象。其他参数都直接传递给函数自身。

要与继承机制的对象冒充方法一起使用该方法，只需将前三行的赋值、调用和删除代码替换即可：

function ClassB(sColor, sName) {

    //this.newMethod = ClassA;

    //this.newMethod(color);

    //delete this.newMethod;

    ClassA.call(this, sColor);

 

    this.name = sName;

    this.sayName = function () {

        alert(this.name);

    };

}

apply() 方法

apply() 方法有两个参数，用作 this 的对象和要传递给函数的参数的数组。

function sayColor(sPrefix,sSuffix) {

    alert(sPrefix + this.color + sSuffix);

};

 

var obj = new Object();

obj.color = "blue";

 

sayColor.apply(obj, new Array("The color is ", "a very nice color indeed."));

方法也用于替换前三行的赋值、调用和删除新方法的代码：

function ClassB(sColor, sName) {

    //this.newMethod = ClassA;

    //this.newMethod(color);

    //delete this.newMethod;

    ClassA.apply(this, new Array(sColor));

 

    this.name = sName;

    this.sayName = function () {

        alert(this.name);

    };

}

第一个参数仍是 this，第二个参数是只有一个值 color 的数组。可以把 ClassB 的整个 arguments 对象作为第二个参数传递给 apply() 方法：

function ClassB(sColor, sName) {

    //this.newMethod = ClassA;

    //this.newMethod(color);

    //delete this.newMethod;

    ClassA.apply(this, arguments);

 

    this.name = sName;

    this.sayName = function () {

        alert(this.name);

    };

}

只有超类中的参数顺序与子类中的参数顺序完全一致时才可以传递参数对象。如果不是，就必须创建一个单独的数组，按照正确的顺序放置参数。

原型链（prototype chaining）

继承这种形式在 ECMAScript 中原本是用于原型链的，prototype 对象是个模板，要实例化的对象都以这个模板为基础，prototype 对象的任何属性和方法都被传递给那个类的所有实例。原型链利用这种功能来实现继承机制

在 ECMAScript 的弱类型世界中，这是极其有用的工具，不过使用对象冒充时不能使用它。

原型链的弊端是不支持多重继承。记住，原型链会用另一类型的对象重写类的 prototype 属性。

混合方式

这种继承方式使用构造函数定义类，并非使用任何原型。对象冒充的主要问题是必须使用构造函数方式，这不是最好的选择。不过如果使用原型链，就无法使用带参数的构造函数了。

function ClassA(sColor) {

    this.color = sColor;

}

 

ClassA.prototype.sayColor = function () {

    alert(this.color);

};

 

function ClassB(sColor, sName) {

    ClassA.call(this, sColor);

    this.name = sName;

}

 

ClassB.prototype = new ClassA();

 

ClassB.prototype.sayName = function () {

    alert(this.name);

};