深入学习JavaScript-优快云博客

本文介绍了JavaScript的基础知识，包括变量声明、数据类型、操作符、流程控制语句等内容，并深入探讨了JavaScript对象、DOM操作及高级特性如Cookie、时钟事件等。

深入学习JavaScript

JavaScript基础

JavaScript简介

JavaScript是为了与HTML页面进行交互而设计的；
JavaScript是脚本语言(脚本语言是一种轻量级的编程语言)；
JavaScript是由多行可执行代码组成的；
JavaScript通常被嵌入到HTMP页面里；
JavaScript是一种解释语言(也就是不用预先编译就能执行)；
任何人都可以使用JavaScript，不需要购买版权。

JavaScript简单范例

<html>

<body>

<script type="text/javascript">

document.write("Hello World!")

</script>

</body>

</html>

对于处于HTML文档不同位置的JavaScript代码，执行方式有所不同。

在Head中的JavaScript代码只在被调用或者事件被触发的时候才执行
在Body中的JavaScript代码在Body被加载(load)的时候被执行，而且执行的结果被当作Body的一部分
另外可以生成js文件，并且在多个页面中进行调用

JavaScript变量

变量声明

变量在脚本中的第一次出现是在声明中。变量在第一次用到时就设置于内存中，便于后来在脚本中引用。使用变量之前先进行声明。可以使用 var 关键字来进行变量声明。

var count; // 单个声明。

var count, amount, level; // 用单个 var 关键字声明的多个声明。

var count = 0, amount = 100; // 一条语句中的变量声明和初始化。

如果在 var 语句中没有初始化变量，变量自动取 JavaScript 值 undefined。尽管并不安全，但声明语句中忽略 var 关键字是合法的 JavaScript 语法。这时，JavaScript 解释器给予变量全局范围的可见度。当在过程级中声明一个变量时，它不能用于全局范围；这种情况下，变量声明必须用 var 关键字。

变量生命期

如果在函数里面定义一个变量，那么这个变量只在函数里面有效，在函数退出之后变量就被释放掉了。

如果在函数外面定义一个变量，那么这个变量在整个网页里都能被调用。他的生命期从他被声明开始，到网页被关闭为止。

JavaScript操作符

JScript 具有全范围的运算符,包括算术、逻辑、位、赋值以及其他某些运算符。

计算		逻辑		位运算		赋值		杂项
描述	符号	描述	符号	描述	符号	描述	符号	描述	符号
负值	-	逻辑非	!	按位取反	~	赋值	=	删除	delete
递增	++	小于	<	按位左移	<<	运算赋值	oP=	typeof 运算符	typeof
递减	--	大于	>	按位右移	>>			void	void
乘法	*	小于等于	<=	无符号右移	>>>			instanceof	instanceof
除法	/	大于等于	>=	按位与	&			new	new
取模运算	%	等于	==	按位异或	^			in	in
加法	+	不等于	!=	按位或	\|
减法	-	逻辑与	&&
		逻辑或	\|\|
		条件（三元运算符）	?:
		逗号	,
		严格相等	===
		非严格相等	!==

== （相等）与 === （严格相等）的区别在于相等运算符在比较前强制转换不同类型的值。例如，相等对字符串 "1" 与数值 1 的比较结果将为 true。而严格相等不强制转换不同类型的值，因此它认为字符串 "1" 与数值 1 不相同。

JavaScript语句

if…else…

if (condition)

{

code to be executed if condition is true

}

else if (condition2)

{

code to be executed if condition2 is true

}

else

{

code to be executed if condition1 and condition2 are not true

}

switch…case

switch(n)

{

case 1:

execute code block 1

break

case 2:

execute code block 2

break

default:

code to be executed if n is

different from case 1 and 2

}

必须使用break语句来结束一个条件的处理，负责将会顺序执行其他case的语句。

for…

for (var=startvalue;var<=endvalue;var=var+increment)

{

code to be executed

}

for…in…

for (variable in object)

{

code to be executed

}

JavaScript 提供了一种特别的循环方式来遍历一个对象的所有用户定义的属性或者一个数组的所有元素。for...in 循环中的循环计数器是一个字符串，而不是数字。它包含当前属性的名称或者当前数组元素的下标。

例如：

<html>

<body>

var x

var mycars = new Array()

mycars[0] = "Saab"

mycars[1] = "Volvo"

mycars[2] = "BMW"

for (x in mycars)

{

document.write(mycars[x] + "<br />")

}

</script>

</body>

</html>

while…

while (var<=endvalue)

{

code to be executed

}

{

code to be executed

}

while (var<=endvalue)

break & continue

在以上循环语句中可以使用break来跳出循环，使用continue来结束本次循环回到循环的起始位置开始下一次循环。

break和continue都可以加上语句标示来指定跳出循环

try…catch

try

{

//Run some code here

}

catch(err)

{

//Handle errors here

}

可以使用err.description来得到错误描述。

throw

throw(exception)

可以使用throw来生成一个异常。例如：

<html>

<body>

var x=prompt("Enter a number between 0 and 10:","")

try

{

if(x>10)

throw "Err1"

else if(x<0)

throw "Err2"

}

catch(er)

{

if(er=="Err1")

alert("Error! The value is too high")

if(er == "Err2")

alert("Error! The value is too low")

}

</script>

</body>

</html>

JavaScript的弹出式对话框

JavaScript提供三种弹出式对话框

Alert对话框

alert("sometext")

Alert对话框只有一个确定按钮。

确认(Confirm)对话框

confirm("sometext")

确认对话框有确定和取消两个按钮。程序可以根据用户的选择来执行不同的操作。

提示(Prompt)对话框

prompt("sometext","defaultvalue")

程序可以通过提示对话框来获取用户的数据。

JavaScript对象

JavaScript对象是属性和方法的集合。一个方法就是一个函数，是对象的成员。属性是一个值或一组值（以数组或对象的形式），是对象的成员。JavaScript支持四种类型的对象：内部对象、生成的对象、宿主给出的对象（如 Internet 浏览器中的 window 和 document）以及 ActiveX 对象（外部组件）。

HTML DOM对象

HTML DOM为HTML定义了一系列标准对象和一个访问操作HTML文档的标准方法。所有的HTML元素连同它们的文本和属性都能通过DOM来访问。

HTML DOM是一个平台无关的语言。

JavaScript高级

Cookie

Cookie是保存在访问者电脑上的变量。每次这台电脑用同一浏览器请求一个页面时，它会将Cookie一起发送。

利用Cookie的例子：

Name cookie – 在用户第一次访问网页时，用户必须输入用户名。这个用户名被保存在Cookie中。用户下一次访问网页时，就能够给从Cookie中取出保存的用户名，为用户显示友好的欢迎信息例如“欢迎张三”。

Password cookie - 在用户第一次访问网页时，用户必须输入密码。这个密码被保存在Cookie中。用户下一次访问网页时，密码可以从Cookie中得到。

Date cookie – 用户访问网页时记录下用户访问的时间，在下一次访问时，显示“你上次于XXXX年XX月XX日访问了本网站”。

JavaScript Image Maps

Image Map是一个带有点击范围的图片。例如范例所示，在HTML中可以通过Image Map在图片上实现链接。而使用JavaScript可以增加注释等说明。

JavaScript时钟

使用JavaScript，能够使调用的函数在一定时间以后执行，这就是JavaScript时钟事件。

JavaScript提供简单的方法来使用时钟事件。这是两个主要的函数：

var TimeIdentify =setTimeout("javascript statement",milliseconds);

clearTimeout(TimeIdentify)

JavaScript对象

构造函数

要创建自己的对象实例，必须首先为其定义一个构造函数。构造函数创建一个新对象，赋予对象属性，并在合适的时候赋予方法。例如，下面的示例为 pasta 对象定义了构造函数。注意 this 关键字的使用，它指向当前对象。

// pasta 是有四个参数的构造器。

function pasta(grain, width, shape, hasEgg)

    // 是用什么粮食做的？

    this.grain = grain;

    // 多宽？（数值）

    this.width = width;

    // 横截面形状？（字符串）

    this.shape = shape;

// 是否加蛋黄？（boolean）

    this.hasEgg = hasEgg;

定义了对象构造器后，用 new 运算符创建对象实例。

var spaghetti = new pasta("wheat", 0.2, "circle", true);

var linguine = new pasta("wheat", 0.3, "oval", true);

属性

可以给对象实例添加属性以改变该实例，但是用相同的构造器生成的其他对象定义中并不包括这些属性，而且除非你特意添加这些属性那么在其他实例中并不显示出来。如果要将对象所有实例的附加属性显示出来，必须将它们添加到构造函数或构造器原型对象中。

// spaghetti 的附加属性。

spaghetti.color = "pale straw";

spaghetti.drycook = 7;

spaghetti.freshcook = 0.5;

var chowFun = new pasta("rice", 3, "flat", false);

// chowFun 对象或其他现有的 pasta 对象

// 都没有添加到 spaghetti 对象

// 的三个新属性。

// 将属性‘foodgroup’加到 pasta 原型对象

// 中，这样 pasta 对象的所有实例都可以有该属性，

// 包括那些已经生成的实例。

pasta.prototype.foodgroup = "carbohydrates"

// 现在 spaghetti.foodgroup、chowFun.foodgroup，等等

// 均包含值“carbohydrates”。

在定义中包含方法

可以在对象的定义中包含方法（函数）。一种方法是在引用别处定义的函数的构造函数中添加一个属性。例如，下面的示例扩充上面定义的 pasta 构造函数以包含 toString 方法，该方法将在显示对象的值时被调用。

// pasta 是有四个参数的构造器。

// 第一部分与上面相同。

function pasta(grain, width, shape, hasEgg)

    // 用什么粮食做的？

    this.grain = grain;

    // 多宽？（数值）

    this.width = width;

    // 横截面形状？（字符串）

    this.shape = shape;

    // 是否加蛋黄？（boolean）

    this.hasEgg = hasEgg;

    // 这里添加 toString 方法（如下定义）。

    // 注意在函数的名称后没有加圆括号；

    // 这不是一个函数调用，而是

    // 对函数自身的引用。

    this.toString = pastaToString;

// 实际的用来显示 past 对象内容的函数。

function pastaToString()

    // 返回对象的属性。

    return "Grain: " + this.grain + "\n" +

        "Width: " + this.width + "\n" +

        "Shape: " + this.shape + "\n" +

        "Egg?: " + Boolean(this.hasEgg);

var spaghetti = new pasta("wheat", 0.2, "circle", true);

// 将调用 toString() 并显示 spaghetti 对象

// 的属性（需要Internet 浏览器）。

window.alert(spaghetti);

使用原型来创建对象

在编写构造函数时，可以使用原型对象（它本身是所有构造函数的一个属性）的属性来创建继承属性和共享方法。原型属性和方法将按引用复制给类中的每个对象，因此它们都具有相同的值。可以在一个对象中更改原型属性的值，新的值将覆盖默认值，但仅在该实例中有效。属于这个类的其他对象不受此更改的影响。下面给出了使用原型来创建对象的示例，Circle（注意 this 关键字的使用）。

// 构造函数

function Circle (xPoint, yPoint, radius) {

    this.x = xPoint; // 圆心的 x 坐标。

    this.y = yPoint; // 圆心的 y 坐标。

    this.r = radius; // 圆的半径。

// 定义公共属性PI

Circle.prototype.pi = Math.PI;

// 定义公共函数

function ACirclesArea () {

    return this.pi * this.r * this.r; // 计算圆面积的公式为 ?r2。

Circle.prototype.area = ACirclesArea; // 计算圆面积的函数现在是 Circle Prototype 对象的一个方法。

使用这个原则，可以给预定义的构造函数（都具有原型对象）定义附加属性。例如，如果想要能够删除字符串的前后空格（与 VBScript 的 Trim 函数类似），就可以给 String 原型对象创建自己的方法。

// 增加一个名为 trim 的函数作为

// String 构造函数的原型对象的一个方法。

String.prototype.trim = function()

    // 用正则表达式将前后空格

    // 用空字符串替代。

    return this.replace(/(^\s*)|(\s*$)/g, "");

// 有空格的字符串

var s = "    leading and trailing spaces    ";

// 显示 "    leading and trailing spaces     (35)"

window.alert(s + " (" + s.length + ")");

// 删除前后空格

s = s.trim();

// 显示"leading and trailing spaces (27)"

window.alert(s + " (" + s.length + ")");

转载于:https://www.cnblogs.com/Sh-DragonTech/archive/2006/06/28/437495.html