javascript学习

Javascript 學習

一．

Javascript概述 ................................................................................................................... 5

1.1什麼是javascript？ ............................................................................................................. 5 1.2 JavaScript与java ............................................................................................................... 5 1.3 JavaScript 的类别 .............................................................................................................. 6 1.4 JavaScript 能做什么？ ...................................................................................................... 6 1.5 JavaScript不能做什么？ ................................................................................................... 7 二．

JavaScript 注释 ................................................................................................................. 8

2.1单行的注释以 // 开始。 ..................................................................................................... 8 2.2 JavaScript 多行注释 .......................................................................................................... 8 2.3使用注释来防止执行 ........................................................................................................... 9 2.4在行末使用注释 ................................................................................................................. 10 三．

JavaScript 变量 ............................................................................................................... 10

3.1 正如代数一样，JavaScript 变量用于保存值或表达式。 ........................................... 10 3.2 JavaScript 变量名称的规则： ........................................................................................ 11 3.3 实例：在脚本执行的过程中，可以改变变量的值。可以通过其名称来引用一个变量，以此显示或改变它的值。 ........................................................................................................ 11 四．

JavaScript 运算符 ........................................................................................................... 13

4.1算术运算符 ......................................................................................................................... 13

- 1 - 王定陽 程式開發組(WBIS4)

2013/6/28

4.2 JavaScript 赋值运算符 .................................................................................................... 13 4.3 用于字符串的 + 运算符 .................................................................................................. 14 4.4 对字符串和数字进行加法运算 ........................................................................................ 15 五．

JavaScript 比较和逻辑运算符 ....................................................................................... 16

5.1比较运算符 ......................................................................................................................... 16 5.2逻辑运算符 ......................................................................................................................... 17 5.3条件运算符 ......................................................................................................................... 17 六．

JavaScript 條件语句 ....................................................................................................... 17

6.1条件语句 .............................................................................................................................. 18 6.2 If 语句 ................................................................................................................................. 18 6.4 JavaScript Switch 语句 ................................................................................................... 22 七．

JavaScript 消息框 ........................................................................................................... 25

7.1警告框 ................................................................................................................................. 25 7.3提示框 ................................................................................................................................. 25 八．

JavaScript函數 ................................................................................................................ 26

8.1 JavaScript 函数 ................................................................................................................ 26 8.2 如何定义函数 .................................................................................................................... 27 8.3 return 语句......................................................................................................................... 28 8.4 JavaScript 变量的生存期 ................................................................................................ 29

- 2 - 王定陽 程式開發組(WBIS4)

2013/6/28

九． JavaScript 循环 ............................................................................................................... 29

9.1 JavaScript 循环 ................................................................................................................ 29 9.3 while 循环 .......................................................................................................................... 32 9.4 do...while 循环 .................................................................................................................. 34 十．

JavaScript break 和 continue 语句 ............................................................................. 35

10.1 Break ................................................................................................................................ 35 十一． 十二．

JavaScript For...In 声明 ............................................................................................. 38 JavaScript 事件 ........................................................................................................... 39

12.1事件 ................................................................................................................................... 39 12.2 onload 和 onUnload ...................................................................................................... 40 12.3 onFocus, onBlur 和 onChange ................................................................................... 40 12.4 onSubmit .......................................................................................................................... 41 12.5 onMouseOver 和 onMouseOut ................................................................................... 41 十三．

JavaScript Try...Catch 和Throw语句 ..................................................................... 41

13.1 JavaScript - 捕获错误 .................................................................................................... 42 13.2 Try...Catch 语句 ............................................................................................................. 42 13.3 JavaScript Throw 声明 .................................................................................................. 47 十四．

JavaScript 特殊字符 ................................................................................................... 48

14.1 插入特殊字符 .................................................................................................................. 49

- 3 - 王定陽 程式開發組(WBIS4)

2013/6/28

十五． JavaScript 指导方针 ................................................................................................... 50

15.1 JavaScript 对大小写敏感 .............................................................................................. 50 15.2 空格 .................................................................................................................................. 50

- 4 - 王定陽 程式開發組(WBIS4)

2013/6/28

一． Javascript概述

1.1什麼是javascript？

JavaScript是一种程序设计语言，它是轻型的、解释型的，具有面向对象能力的设计语言。

轻型：因为它是脚本语言，相对比较简单，是为非程序员提供的设计语言。脚本一般不具备通用性，所能处理的问题范围有限。但它有许多特性可以让它更加灵活，让程序设计新手更加容易使用。如它的变量不必具有一个明确的类型（无类型语言）。

解释型：还是因为它是脚本语言，脚本多为解释执行。

面向对象：JavaScript的对象更象Perl语言中的关联数组，它的继承机制与Ｃ++和Java中的继承机制大相径庭。

1.2 JavaScript与java

JavaScript不是Java的简化版本，它仅是在句法构成上（如都具有If语言、While循环和&&运算符这样的结构）和都够能提供网页上的可执行内容上与Java类似而已。但两者却是很好的搭档，Javascript可以控制浏览器的行为和内容，却不能绘图和执行连网。而Java虽然不能在总体上控制浏览器，但是却可以绘图、执行连网和多线程。客户端的JavaScript可以与嵌入网页的Java applet进行交互，并且能够对它进行控制，从这一意义上说，JavaScript真的可以脚本化java。

- 5 - 王定陽 程式開發組(WBIS4)

2013/6/28

1.3 JavaScript 的类别

1.3.1客户端 JavaScript

将JavaScript解释器嵌入WEB浏览器，就形成客户端JavaScript，它就是我们通常所说的JavaScript。 1.3.2其他环境中的JavaScript

JavaScript是常规用途的程序设计语言，它能够嵌入任何应用程序，用来为程序提供脚本的功能。如为Web服务器提供的JavaScript解释器，可以用JavaScript来编写服务器端脚本。

1.4 JavaScript 能做什么？

JavaScript真正的强大之处在于它支持的基于浏览器和文档的对象。客户端JavaScript将JavaScript解释器的脚本化能力与Web浏览器定义的文档对象模型（Document Object Model，DOM）结合在一起。两种技术是以一种相互作用的方式结合在一起的，所以产生的结果大于两部分能力之和，即客户端JavaScript使得可执行的内容散布在网络中的各个地方，它是新一代动态DHTML文档的核心。

（1）、控制文档的外观和内容 （2）、对浏览器的控制 （3）、与HTML表单的交互 （4）、与用户的交互

- 6 - 王定陽 程式開發組(WBIS4)

2013/6/28

（5）、用Cookie读写客户的状态

1.5 JavaScript不能做什么？

JavaScript是一种客户端（client-side）语言；也就是说，设计它的目的是在用户的机器上执行任务，而不是在服务器上。因此，JavaScript有一些固有的限制，这些限制主要出于安全原因：

（1）、除了能够动态生成浏览器要显示的HTML文档（包括图象、表、框架、表单和字体、等等）之外，JavaScript不具有任何图形处理能力。

（2） JavaScript不允许读写客户机器上的文件。这是有好处的，因为你肯定不希望网页能够读取自己硬盘上的文件，或者能够将病毒写入硬盘，或者能够操作你计算机上的文件。唯一的例外是，JavaScript可以写到浏览器的cookie文件，但是也有一些限制。

（3） JavaScript不允许写服务器机器上的文件。尽管写服务器上的文件在许多方面是很方便的（比如存储页面点击数或用户填写的表单数据），但是JavaScript不允许这么做。相反，需要用服务器上的一个程序处理和存储这些数据。这个程序可以是用Perl或PHP等语言编写的CGI或Java程序。

（4） JavaScript不能关闭不是由它自己打开的窗口。这是为了避免一个站点关闭其他任何站点的窗口，从而独占浏览器。

（5） JavaScript不能从来自另一个服务器的已经打开的网页中读取信息。换句话

- 7 - 王定陽 程式開發組(WBIS4)

2013/6/28

说，网页不能读取已经打开的其他窗口中的信息，因此无法探察访问这个站点的冲浪者还在访问哪些其他站点。

二． JavaScript 注释

可以添加注释来对 JavaScript 进行解释，或者提高其可读性。

2.1单行的注释以 // 开始。 本例用单行注释来解释代码：

2.2 JavaScript 多行注释

多行注释以 /* 开头，以 */ 结尾。

本例使用多行注释来解释代码：

- 8 - 王定陽程式開發組(WBIS4)

2013/6/28

2.3使用注释来防止执行

在本例中，我们用注释来阻止一行代码的执行：

在本例中，我们用注释来阻止若干行代码的执行：

2.4在行末使用注释

在本例中，注释放置在语句的行末：

三． JavaScript 变量

3.1 正如代数一样，JavaScript 变量用于保存值或表达式。- 10 - (WBIS4)

王定陽 程式開發組

2013/6/28

可以给变量起一个简短名称，比如 x，或者更有描述性的名称，比如 length。 JavaScript 变量也可以保存文本值，比如 carname=\。 3.2 JavaScript 变量名称的规则：

（1）变量对大小写敏感（y 和 Y 是两个不同的变量） （2）变量必须以字母或下划线开始

注释：由于 JavaScript 对大小写敏感，变量名也对大小写敏感。

3.3 实例：在脚本执行的过程中，可以改变变量的值。可以通过其名称来引用一个变量，以此显示或改变它的值。

本例展示原理:

3.3.1声明（创建）JavaScript 变量

在 JavaScript 中创建变量经常被称为“声明”变量。 可以通过 var 语句来声明 JavaScript 变量：

var x; var carname;

在以上声明之后，变量并没有值，不过可以在声明它们时向变量赋值：

var x=5;

var carname=\

注释：在为变量赋文本值时，请为该值加引号。 3.3.2 向JavaScript 变量赋值

- 11 - 王定陽 程式開發組

(WBIS4)

2013/6/28

(WBIS4)

通过赋值语句向 JavaScript 变量赋值：

x=5;

carname=\

变量名在 = 符号的左边，而需要向变量赋的值在 = 的右侧。

在以上语句执行后，变量 x 中保存的值是 5，而 carname 的值是 Volvo。 3.3.3向未声明的 JavaScript 变量赋值

如果所赋值的变量还未进行过声明，该变量会自动声明。 这些语句：

x=5;

carname=\ 与这些语句的效果相同：

var x=5;

var carname=\ 3.3.4重新声明 JavaScript 变量

如果再次声明了 JavaScript 变量，该变量也不会丢失其原始值。

var x=5; var x;

在以上语句执行后，变量 x 的值仍然是 5。在重新声明该变量时，x 的值不会被重置或清除。

- 12 - 王定陽 程式開發組

2013/6/28

3.3.5 JavaScript 算术

正如代数一样，可以使用 JavaScript 变量来做算术：

y=x-5; z=y+5;

四． JavaScript 运算符

4.1算术运算符

算术运算符用于执行变量与/或值之间的算术运算。 给定 y=5，下面的表格解释了这些算术运算符：

运算符 描述 例子 结果 + 加 x=y+2 x=7 - 减 x=y-2 x=3 * 乘 x=y*2 x=10 / 除 x=y/2 x=2.5 % 求余数 (保留整数) x=y%2 x=1 ++ 累加 x=++y x=6 -- 递减 x=--y x=4

4.2 JavaScript 赋值运算符

赋值运算符用于给 JavaScript 变量赋值。

- 13 - 王定陽 (WBIS4)

程式開發組

2013/6/28

给定 x=10 和 y=5，下面的表格解释了赋值运算符：

运算符 = += -= *= /= %=

4.3 用于字符串的 + 运算符

+ 运算符用于把文本值或字符串变量加起来（连接起来）。 如需把两个或多个字符串变量连接起来，请使用 + 运算符。

txt1=\txt2=\txt3=txt1+txt2;

在以上语句执行后，变量 txt3 包含的值是 \。 要想在两个字符串之间增加空格，需要把空格插入一个字符串之中：

txt1=\txt2=\

- 14 - 王定陽 程式開發組

(WBIS4)

2013/6/28

例子 x=y x+=y x-=y x*=y x/=y x%=y 等价于 x=x+y x=x-y x=x*y x=x/y x=x%y 结果 x=5 x=15 x=5 x=50 x=2 x=0 txt3=txt1+txt2; 或者把空格插入表达式中：

txt1=\txt2=\txt3=txt1+\

在以上语句执行后，变量 txt3 包含的值是：\4.4 对字符串和数字进行加法运算 请看这些例子：

x=5+5;

document.write(x);

x=\document.write(x); x=5+\

document.write(x); x=\

- 15 - (WBIS4)

王定陽 程式開發組

2013/6/28

document.write(x); 规则是：

如果把数字与字符串相加，结果将成为字符串。

五． JavaScript 比较和逻辑运算符

比较和逻辑运算符用于测试 true 或 false。 5.1比较运算符

比较运算符在逻辑语句中使用，以测定变量或值是否相等。 给定 x=5，下面的表格解释了比较运算符： 运算符 == === != > < >= <= 如何使用

可以在条件语句中使用比较运算符对值进行比较，然后根据结果来采取行动：

- 16 - 王定陽 程式開發組

(WBIS4)

2013/6/28

描述 等于 全等（值和类型） 不等于 大于 小于 大于或等于 小于或等于 例子 x==8 为 false x===5 为 true；x===\为 false x!=8 为 true x>8 为 false x<8 为 true x>=8 为 false x<=8 为 true if (age<18) document.write(\

5.2逻辑运算符

逻辑运算符用于测定变量或值之间的逻辑。 给定 x=6 以及 y=3，下表解释了逻辑运算符： 运算符 && 描述 and 例子 (x < 10 && y > 1) 为 true || ! 5.3条件运算符

or not (x==5 || y==5) 为 false !(x==y) 为 true JavaScript 还包含了基于某些条件对变量进行赋值的条件运算符。 语法

variablename=(condition)?value1:value2 例子

greeting=(visitor==\

如果变量 visitor 中的值是 \，则向变量 greeting 赋值 \\，否则赋值 \。

六． JavaScript 條件语句

- 17 - 王定陽 程式開發組

(WBIS4)

2013/6/28

6.1条件语句

在编写代码时，经常需要根据不同的条件完成不同的行为。可以在代码中使用条件语句来完成这个任务。

在 JavaScript 中，我们可以使用下面几种条件语句： if 语句：在一个指定的条件成立时执行代码。

if...else 语句：在指定的条件成立时执行代码，当条件不成立时执行另外的代码。 if...else if....else 语句：使用这个语句可以选择执行若干块代码中的一个。 switch 语句：使用这个语句可以选择执行若干块代码中的一个。

6.2 If 语句

如果希望指定的条件成立时执行代码，就可以使用这个语句。 语法：

if (条件) {

条件成立时执行代码 }

注意：请使用小写字母。使用大写的 IF 会出错！

实例 1

实例 2

注意：请使用双等号 (==) 来比较变量！

注意：在语法中没有 else。仅仅当条件为 true 时，代码才会执行。

If...else 语句

如果希望条件成立时执行一段代码，而条件不成立时执行另一段代码，那么可以使用

if....else 语句。 语法：

if (条件)

- 19 - 王定陽 程式開發組

(WBIS4)

2013/6/28

{

条件成立时执行此代码 } else {

条件不成立时执行此代码 } 实例

If...else if...else 语句

当需要选择多套代码中的一套来运行时，请使用 if....else if...else 语句。 语法：

if (条件1) {

条件1成立时执行代码 }

else if (条件2) {

条件2成立时执行代码 } else {

条件1和条件2均不成立时执行代码 }

- 21 - 王定陽 程式開發組

(WBIS4)

2013/6/28

实例：

6.4 JavaScript Switch 语句

如果希望选择执行若干代码块中的一个，你可以使用 switch 语句：

- 22 - 王定陽 程式開發組

(WBIS4)

2013/6/28

语法： switch(n) { case 1: 执行代码块 1 break case 2: 执行代码块 2 break default:

如果n即不是1也不是2，则执行此代码 }

工作原理：switch 后面的 (n) 可以是表达式，也可以（并通常）是变量。然后表达式中的值会与 case 中的数字作比较，如果与某个 case 相匹配，那么其后的代码就会被执行。break 的作用是防止代码自动执行到下一行。

实例：

七． JavaScript 消息框

可以在 JavaScript 中创建三种消息框：警告框、确认框、提示框。 7.1警告框

警告框经常用于确保用户可以得到某些信息。

当警告框出现后，用户需要点击确定按钮才能继续进行操作。 语法：

alert(\文本\7.2确认框

确认框用于使用户可以验证或者接受某些信息。

当确认框出现后，用户需要点击确定或者取消按钮才能继续进行操作。

如果用户点击确认，那么返回值为 true。如果用户点击取消，那么返回值为 false。 语法：

confirm(\文本\7.3提示框

提示框经常用于提示用户在进入页面前输入某个值。

当提示框出现后，用户需要输入某个值，然后点击确认或取消按钮才能继续操纵。

- 25 - 王定陽 程式開發組

(WBIS4)

2013/6/28

如果用户点击确认，那么返回值为输入的值。如果用户点击取消，那么返回值为 null。 语法：

prompt(\文本\默认值\

八． JavaScript函數

函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块。 8.1 JavaScript 函数

将脚本编写为函数，就可以避免页面载入时执行该脚本。

函数包含着一些代码，这些代码只能被事件激活，或者在函数被调用时才会执行。 可以在页面中的任何位置调用脚本（如果函数嵌入一个外部的 .js 文件，那么甚至可以从其他的页面中调用）。

函数在页面起始位置定义，即 部分。

假如上面的例子中的 alert(\没有被写入函数，那么当页面被载入时它就会执行。现在，当用户击中按钮时，脚本才会执行。我们给按钮添加了 onClick 事件，这样按钮被点击时函数才会执行。

8.2 如何定义函数 创建函数的语法：

function 函数名(var1,var2,...,varX) {

- 27 - 王定陽 程式開發組

(WBIS4)

2013/6/28

}

代码．．．

var1, var2 等指的是传入函数的变量或值。{ 和 } 定义了函数的开始和结束。 注意：无参数的函数必须在其函数名后加括号：

function 函数名() { 代码．．． }

注意：别忘记 JavaScript 中大小写字母的重要性。\这个词必须是小写的，否则 JavaScript 就会出错。另外需要注意的是，必须使用大小写完全相同的函数名来调用函数。

8.3 return 语句

return 语句用来规定从函数返回的值。

因此，需要返回某个值的函数必须使用这个 return 语句。 例子

下面的函数会返回两个数相乘的值（a 和 b）：

function prod(a,b) {

- 28 - 王定陽 程式開發組

(WBIS4)

2013/6/28

x=a*b return x }

当调用上面这个函数时，必须传入两个参数：

product=prod(2,3)而从 prod() 函数的返回值是 6，这个值会存储在名为 product 的变量中。

8.4 JavaScript 变量的生存期

当在函数内声明了一个变量后，就只能在该函数中访问该变量。当退出该函数后，这个变量会被撤销。这种变量称为本地变量。可以在不同的函数中使用名称相同的本地变量，这是因为只有声明过变量的函数能够识别其中的每个变量。

如果在函数之外声明了一个变量，则页面上的所有函数都可以访问该变量。这些变量的生存期从声明它们之后开始，在页面关闭时结束。

九． JavaScript 循环

JavaScript 中的循环用来将同一段代码执行指定的次数（或者当指定的条件为 true 时）。

9.1 JavaScript 循环

在编写代码时，常常希望反复执行同一段代码。我们可以使用循环来完成这个功能，这样就用不着重复地写若干行相同的代码。

JavaScript 有两种不同种类的循环：

- 29 - 王定陽 程式開發組

(WBIS4)

2013/6/28

for：将一段代码循环执行指定的次数 while：当指定的条件为 true 时循环执行代码 9.2 for 循环

在脚本的运行次数已确定的情况下使用 for 循环。 语法：

for (变量=开始值;变量<=结束值;变量=变量+步进值) {

} 实例：

解释：下面的例子定义了一个循环程序，这个程序中 i 的起始值为 0。每执行一次循环，i 的值就会累加一次 1，循环会一直运行下去，直到 i 等于 10 为止。

注释：步进值可以为负。如果步进值为负，需要调整 for 声明中的比较运算符。

结果：

The number is 0 The number is 1 The number is 2 The number is 3 The number is 4 The number is 5 The number is 6 The number is 7 The number is 8 The number is 9

(WBIS4)

- 31 - 王定陽 程式開發組

2013/6/28

The number is 10

9.3 while 循环

while 循环用于在指定条件为 true 时循环执行代码。 语法：

while (变量<=结束值) {

}

注意：除了<=，还可以使用其他的比较运算符。 实例：

解释：下面的例子定义了一个循环程序，这个循环程序的参数 i 的起始值为 0。该程序会反复运行，直到 i 大于 10 为止。i 的步进值为 1。

结果：

The number is 0 The number is 1 The number is 2 The number is 3 The number is 4 The number is 5 The number is 6 The number is 7 The number is 8 The number is 9 The number is 10

(WBIS4)

- 33 - 王定陽 程式開發組

2013/6/28

9.4 do...while 循环

do...while 循环是 while 循环的变种。该循环程序在初次运行时会首先执行一遍其中的代码，然后当指定的条件为 true 时，它会继续这个循环。所以可以这么说，do...while 循环为执行至少一遍其中的代码，即使条件为 false，因为其中的代码执行后才会进行条件验证。

语法：

do {

}

while (变量<=结束值) 实例：

结果：

The number is 0

十． JavaScript break 和 continue 语句

有两种特殊的语句可用在循环内部：break 和 continue。

10.1 Break

break 命令可以终止循环的运行，然后继续执行循环之后的代码（如果循环之后有代码的话）。

实例：

- 35 - 王定陽 程式開發組

(WBIS4)

2013/6/28

结果：

The number is 0 The number is 1 The number is 2 10.2 Continue

continue 命令会终止当前的循环，然后从下一个值继续运行。实例：

- 36 - (WBIS4)

王定陽 程式開發組

2013/6/28

结果：

The number is 0 The number is 1 The number is 2 The number is 4 The number is 5 The number is 6

- 37 - (WBIS4)

王定陽 程式開發組

2013/6/28

The number is 7 The number is 8 The number is 9 The number is 10

十一． JavaScript For...In 声明

For...In 声明用于对数组或者对象的属性进行循环操作。

for ... in 循环中的代码每执行一次，就会对数组的元素或者对象的属性进行一次操作。 语法：

for (变量 in 对象) {

}

“变量”用来指定变量，指定的变量可以是数组元素，也可以是对象的属性。 实例：

使用 for ... in 循环遍历数组。

十二． JavaScript 事件

事件是可以被 JavaScript 侦测到的行为。 12.1事件

JavaScript 使我们有能力创建动态页面。事件是可以被 JavaScript 侦测到的行为。 网页中的每个元素都可以产生某些可以触发 JavaScript 函数的事件。比方说，我们可以在用户点击某按钮时产生一个 onClick 事件来触发某个函数。事件在 HTML 页面中定义。

事件举例：

- 39 - 王定陽 程式開發組

(WBIS4)

2013/6/28

鼠标点击 页面或图像载入

鼠标悬浮于页面的某个热点之上 在表单中选取输入框 确认表单 键盘按键

注意：事件通常与函数配合使用，当事件发生时函数才会执行。

12.2 onload 和 onUnload

当用户进入或离开页面时就会触发 onload 和 onUnload 事件。

onload 事件常用来检测访问者的浏览器类型和版本，然后根据这些信息载入特定版本的网页。

onload 和 onUnload 事件也常被用来处理用户进入或离开页面时所建立的 cookies。

例如，当某用户第一次进入页面时，可以使用消息框来询问用户的姓名。姓名会保存在 cookie 中。当用户再次进入这个页面时，可以使用另一个消息框来和这个用户打招呼：\。 12.3 onFocus, onBlur 和 onChange

onFocus、onBlur 和 onChange 事件通常相互配合用来验证表单。

- 40 - 王定陽 程式開發組

(WBIS4)

2013/6/28

本文来源：https://www.bwwdw.com/article/d7u7.html