JavaScript的学习

阅读量：7050 次

发布时间：2019-06-28

本文共 12015 字，大约阅读时间需要 40 分钟。

第1章JavaScript简介

1.1简介

JavaScript 是一种基于 Java 程序语言的脚本语言。JavaScript 语言设计出来是用在居于 web 的网页（包括客户端和服务器端）上的，这个文档里的内容只涉及了客户端的 JavaScript(它是被嵌入到网页中的 HTML 代码中，并且由浏览器来执行的脚本语言)。

JavaScript 语言可以设计和访问一个 web 页面中的所有元素，如：图片元素（images）、表单元素（form elements）、链接（links）等等。这些对象属性等在 JavaScript 程序运行中可以被复制、修改。JavaScript 还可以捕捉客户端用户对当前网页的动作，如：鼠标的点击动作或者键盘的输入动作等等。JavaScript 的这些功能使我们能够对用户的输入等动作做出相对应的反应动作，从而实现一些交互性。

1.2JavaScript优点

JavaScript具有很多优点：

　　 1、简单性　JavaScript是一种脚本编写语言，它采用小程序段的方式实现编程，像其它脚本语言一样，JavaScript同样已是一种解释性语言，它提供了一个简易的开发过程。它的基本结构形式与C、C++、VB、Delphi十分类似。但它不像这些语言一样，需要先编译，而是在程序运行过程中被逐行地解释。它与HTML标识结合在一起，从而方便用户的使用操作。

2、动态性　 JavaScript是动态的，它可以直接对用户或客户输入做出响应，无须经过Web服务程序。它对用户的反映响应，是采用以事件驱动的方式进行的。所谓事件驱动，就是指在主页中执行了某种操作所产生的动作，就称为“事件”。比如按下鼠标、移动窗口、选择菜单等都可以视为事件。当事件发生后，可能会引起相应的事件响应。

3、跨平台性　JavaScript是依赖于浏览器本身，与操作环境无关，只要能运行浏览器的计算机，并支持JavaScript的浏览器就可以正确执行。

4、节省CGI的交互时间　随着WWW的迅速发展有许WWW服务器提供的服务要与浏览者进行交流，确浏览的身份、需服务的内等，这项工作通常由CGI/PERL编写相应的接口程序与用户进行交互来完成。很显然，通过网络与用户的交互过程一方面增大了网络的通信量，另一方面影响了服务器的服务性能。服务器为一个用户运行一个CGI时，需要一个进程为它服务，它要占用服务器的资源(如CPU服务、内存耗费等)，如果用户填表出现错误，交互服务占用的时间就会相应增加。被访问的热点主机与用户交互越多，服务器的性能影响就越大。

1.3网页中加入Javascript

要在你的网页中使用 JavaScript ，你首先必须要知道该将它放在哪儿。其实很简单，只要在你的网页（HTML文件）中插入 <SCRIPT> 和 </SCRIPT> 标记对，你就可以在这两个标记队之间插入你的 JavaScript 代码了如

Document.write(“hellow!”)

</script>

或者，可以将javascript代码放在一个单独的文件里如：

</script>

一个简单的JavaScript实例

<html>

<head>

<title>JavaScript实例</title>

</head>

<body>

document.write('<font size="20" color="#00aeff">JavaScript 实例</font>');

document.write ("<hr>")

</script>

</body>

</html>

第2章 Javascript 数据结构

2.1 Javascript数据类型

JavaScript 有六种数据类型。主要的类型有 number、string、object 以及 Boolean 类型,其他两种类型为 null 和 undefined。

1、 String 字符串类型:字符串是用单引号或双引号来说明的。（使用单引号来输入包含引号的字符串。）如：“The cow jumped over the moon.”

2、数值数据类型：JavaScript 支持整数和浮点数。整数可以为正数、0 或者负数；浮点数可以包含小数点、也可以包含一个 “e”（大小写均可，在科学记数法中表示“10的幂”）、或者同时包含这两项。

3、Boolean 类型：可能的 Boolean 值有 true 和 false。这是两个特殊值，不能用作 1 和 0。

4、Undefined 数据类型：一个为 undefined 的值就是指在变量被创建后，但未给该变量赋值以前所具有的值。

5、Null 数据类型：null 值就是没有任何值，什么也不表示。

6、object类型：除了上面提到的各种常用类型外，对象也是JavaScript中的重要组成部分，这部分将在后面章节详细介绍。

2.2 Javascript变量

在 JavaScript 中变量用来存放脚本中的值，这样在需要用这个值的地方就可以用变量来代表，一个变量可以是一个数字，文本或其它一些东西。

JavaScript是一种对数据类型变量要求不太严格的语言，所以不必声明每一个变量的类型，变量声明尽管不是必须的，但在使用变量之前先进行声明是一种好的习惯。可以使用 var 语句来进行变量声明。如：var men = true; // men 中存储的值为 Boolean 类型。

JavaScript变量声明：

JavaScript变量声明可以用var关键字来声明，并可以赋值。对变量作声明的最大好处是可以及时的发现代码中的错误。

Var max；//定义了一个变量类型不确定。

Var max=100；//定义了一个初始值为100的整型变量。

Javascript可以不做声明

X=100; //整数

Y=”100”;//字符串

Z=true;//布尔型

Cost=19.5;//实型

JavaScript中有两种变量：全局变量声明在函数外的，其作用范围是整个函数；局部变量定义在函数体内的，只对函数是可见的。

　变量命名:JavaScript 是一种区分大小写的语言，因此将一个变量命名为 computer 和将其命名为 Computer是不一样的。

　　另外，变量名称的长度是任意的，但必须遵循以下规则：

　　 1.第一个字符必须是一个字母（大小写均可）、或一个下划线(_)或一个美元符 ($)。

　　 2.后续的字符可以是字母、数字、下划线或美元符。

　　 3.变量名称不能是保留字。

2.3表达式

在定义完变量之后，就可以对它们进行赋值、改变、计算等一系列操作，这一次通常是通过表达式来完成的，可以说它们是变量、常量、布尔以及运算符的集合。

2.4 运算符

1、算术运算符

描述	符号
负值	-
递增	++
递减	—
乘法	*
除法	/
取模运算	%
加法	+
减法	-

2、逻辑运算符

描述	符号
逻辑非	!
小于	<
大于	>
小于等于	<=
大于等于	>=
等于	==
不等于	!=
逻辑与	&&
逻辑或	\|\|
条件（三元运算符）	?:
逗号	,
严格相等	===
非严格相等	!==

3、位运算符

描述	符号
按位取反	~
按位左移	<<
按位右移	>>
无符号右移	>>>
按位与	&
按位异或	^
按位或	\|

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

基本的字符串、数值和布尔值是按值比较的。如果它们的值相同，比较结果为相等。对象（包括Array、Function、String、Number、Boolean、Error、Date以及 RegExp 对象）按引用比较。即使这些类型的两个变量具有相同的值，只有在它们正好为同一对象时比较结果才为 true。

例如：

// 具有相同值的两个基本字符串。

var string1 = "Hello";

var string2 = "Hello";

// 具有相同值的两个 String 对象。

var StringObject1 = new String(string1);

var StringObject2 = new String(string2);

// 比较结果为 true。

if (string1 == string2)

     // 执行某些命令（将要运行的）。

// 比较结果为 false。

if (StringObject1 == StringObject2)

    //执行某些命令（不会运行）。

// 要比较 String 对象的值，

// 用 toString() 或者 valueOf() 方法。

if (StringObject1.valueOf() == StringObject2)

     //执行某些命令（将要运行的）。

第3章 javascript语句

3.1变量声明，赋值语句：var。

语法如下： var 变量名称 [=初始值]

例：var computer = 32 //定义computer是一个变量，且有初值为32。

3.2函数定义语句：function，return。

Javascrip使用 function 关键字来定义一个函数语法如下： function 函数名称（函数所带的参数）

｛

函数执行部分

｝

return 表达式 //return语句指明将返回的值。

　　例：function square ( x )

　　　　 {

　　　　　　 return x*x；

　　　　　}

3.3条件和分支语句：if...else，switch。

if...else语句完成了程序流程块中分支功能：

语法如下：

if (条件)

｛

　执行语句1

｝

else

{

　　　执行语句2

　｝

分支语句switch可以根据一个变量的不同取值采取不同的处理方法。语法如下：

switch (expression)

{

　　case label1: 语句串1；

　　case label2: 语句串2；

　　case label3: 语句串3；

　　...

　　default: 语句串3；

　 }

如果表达式取的值同程序中提供的任何一条语句都不匹配，将执行default　中的语句。

3.4. 循环语句：for， for...in，while,break,continue

　1、for语句的语法如下：

for (初始化部分；条件部分；更新部分)

｛

执行部分...

｝

只要循环的条件成立，循环体就被反复的执行。　　　　 for...in语句与for语句有一点不同，它循环的范围是一个对象所有的属性或是一个数组的所有元素。

2、for...in语句的语法如下：

for (变量 in 对象或数组)

{

　语句...

　}

3、 while语句所控制的循环不断的测试条件，如果条件始终成立，则一直循环，直到条件不再成立。语法如下：

while (条件)

　｛

　　执行语句...

　　}

break语句结束当前的各种循环，并执行循环的下一条语句。continue语句结束当前的循环，并马上开始下一个循环。

4、对象操作语句：with，this，new。

with语句的语法如下：

with (对象名称)

{

　执行语句

}

作用是这样的：如果你想使用某个对象的许多属性或方法时，只要在with语句的（）中写出这个对象的名称，然后在下面的执行语句中直接写这个对象的属性名或方法名就可以了。

new语句是一种对象构造器，可以用new语句来定义一个新对象。　　　　语法是这样的：新对象名称＝ new 真正的对象名比如说，我们可以这样定义一个新的日期对象： var curr＝ new Date()，然后，变量curr就具有了Date对象的属性。this运算符总是指向当前的对象。

5、注释语句：//，/*...*/。

　　 //这是单行注释

　　/*这可以多行注释.... */

第4章 JavaScript对象

4.1 JavaScript 中为浏览器提供的对象

1、window 对象

window 对象提供了一些很有用的方法，使用这些方法你可以在浏览器中弹处对话框 (pop-up)：

alert() 显示一个消息框，只有一个 'OK' ('确定') 按钮；

confirm() 显示一个对话框，带有 'OK' ('确定') 和 'Cancel' ('取消') 按钮；

prompt() 显示一个可以让用户输入信息的对话框。

Window对象中有个经常用到的方法：setTimeout() 方法。此方法可以让 JavaScript 每隔一段间隔时间执行一段代码，代码的执行遵循事件句柄中的规则，也就是说，在这个函数中，每隔一段时间就会执行几条语句如

window.setTimeout('titleScroll()', 500)"

2、document 对象

document 对象可能将会是使用的最多的对象之一。此对象包含了与页面内容相关的几个属性：

bgColor - 页面的背景色；

fgColor - 页面的前景色，即文本的颜色；

linkColor - 超文本链接的颜色；

lastModified - 此页面 (HTML 文件) 最后被修改的时间；

images - 图片对象组成的数组，数组中的每一个元素对应于网页中的每一个 <IMG> 标记，数组元素对应的顺序是在 HTML 文件代码中标记出现的先后顺序；

forms - 表单 (form) 对象组成的数组，数组中的每一个元素对应于网页中的每一个 <FORM> 标记，数组元素对应的顺序是在 HTML 文件代码中标记出现的先后顺序；

links - 超文本链接对象组成的数组，数组中的每一个元素对应于网页中的每一个 <A> 标记，数组元素对应的顺序是在 HTML 文件代码中标记出现的先后顺序；

通常情况下，这些属性对应的是 HTML 标记的属性值，例如 bgColor 属性对应的是 <BODY> 标记中 BGCOLOR="..." 代码中的属性值，你会发现，在其它标记 (像图片和超文本链接) 中也是这样对应的。

images、forms 和 links 属性实际上都是数组，对于数组中的元素，通常会使用像下边的语句那样访问：

var abc = document.forms[3];

这样变量 abc 指向的是网页中的第四个 (因为在 JavaScript 中数租下标是从 0 开始的) <form> 标记对应的图片对象，但是这样用起来其实并不方便，因为如果表单太多，你就必须知道每一个表单在网页中排在第几，要不然就无法知道数组的下标应该是几。不过不用担心， JavaScript 提供了一个方便的方法让你指向表单对象，那就是通过各个表单元素的Id：

var abc = document.forms["menu"];

此外，你还可以使用下边的代码一样代替上边的代码：

var abc = document.formid;

3、对象

使用单独的表单 form 对象之前，首先要引用 form 对象。form 对象由网页中的 <FORM></FORM> 标记对创建， form 里边的元素是由 <INPUT> 等标记创建的

【处理一个表单 form】

通常一个 <FORM> 标记中含有 ACTION="...." 的语句，这个语句是用来指定一个表单提交后的服务器端处理文件的文件名 (包括路径，即整个URL)，在的一部分中，我们曾经使用过 onSubmit 事件来判断用户的输入是否正确，如果正确就将这些信息提交到服务器进行处理，而服务器上用来处理这些信息的程序所在的文件就是通过 ACTION="..." 来指定的。

对象各元素类型

【button 按钮对象】

按钮有三种类型，一般的按钮 (button)，“提交” (submit) 按钮和 “重置” (reset) 按钮，它们有共同的属性和方法，也有各自不同的属性和方法。这三种按钮可以在 <INPUT> 标记中通过 TYPE="...." 来创建，例它们三个的不同之处在于，submit 提交按钮有个默认动作是点击此类按钮以后自动提交表单的内容；reset 重置按钮的默认动作是点击此类按钮以后自动将表单的内容恢复到最初的状态；而对于一般的 button 按钮来说，则没有默认动作，需要通过使用 onClick 事件句柄，在此事件触发时调用函数才行。

你也可以通过使用 onClick 事件句柄来改变 submit 和 reset 按钮的默认动作。这个在线示例中就使用了这三种不同的按钮来完成计算功能。

【text (文本框)、password (密码输入框)、hidden (隐藏域) 和 textarea (多行文本框) 对象】

这几个对象都很相似，输入的都是字符串，它们仅仅是显示的方式不一样而已：

text - 一个单行的文本输入框

password - 一个单行的密码输入框，输入的字符将不会显示出来，显示出来的只是 '*' 号

hidden - 一个单行的文本域，但是它不会在页面上显示任何东西，而且使用网页的用户不能直接修改它的值，但是你却可以通过代码修改它的值

textarea - 多行的文本输入框，可以在框中使用 “回车” 换行

【checkbox (复选框) 和 radio (单选框) 按钮对象】

checkbox 和 radio 按钮可以为用户提供一序列选项，checkbox 用于可以多选的选项中，而 radio 用于只能单选的选项中。

checkbox 对象通过 VALUE="...." 来设置值，但表单提交之后，服务器接收到的只是选中的项的值，此对象有一个 checked 的属性，此属性用来判断每一个复选框的状态，即选中还是没选中，例如：<INPUT TYPE="checkbox" checked> 表示此复选框被选中；而 <INPUT TYPE="checkbox"> 表示此复选框没有被选中。

【select 和 option 对象】

使用 select 选项列表 (即是通常的下拉列表框之类的) 也是一种给用户提供选项的有用方法，看一下下边的代码：

<option value="AL">Alabama

<option value="AK">Alaska

<option value="AZ">Arizona

<option value="AR">Arkansas

<option value="CA">California

<option value="CO">Colorado

<option value="CT">Connecticut

<option value="DE">Delaware

<option value="DC">District of Columbia

...

<option value="WY">Wyoming

</select>

一个 select 对象是由 <SELECT> 标记创建的。此对象的 options 属性是一个对应于 option 对象群的数组，每一个 <OPTION> 标记对应一个 option 对象，也就是对应一个 select 对象的选项。

我们访问表单中的对象可以用两种方式

Document.forms[0].objectid或者是document.getElementById(“objectid”)

4.2 核心 (对象)

JavaScript 中可供使用的最基本的数据类型对象，这些对象是：

1、Array - 数组对象：

例： Var arr=new Array(5);

【属性】

length 用法：<数组对象>.length；返回：数组的长度，即数组里有多少个元素。它等于数组里最后一个元素的下标加一。所以，想添加一个元素，只需要：myArray[myArray.length] = ...。

【方法】

join() 用法：<数组对象>.join(<分隔符>)；返回一个字符串，该字符串把数组中的各个元素串起来，用<分隔符>置于元素与元素之间。这个方法不影响数组原本的内容。

reverse() 用法：<数组对象>.reverse()；使数组中的元素顺序反过来。如果对数组[1, 2, 3]使用这个方法，它将使数组变成：[3, 2, 1]。

slice() 用法：<数组对象>.slice(<始>[, <终>])；返回一个数组，该数组是原数组的子集，始于<始>，终于<终>。如果不给出<终>，则子集一直取到原数组的结尾。

sort() 用法：<数组对象>.sort([<方法函数>])；使数组中的元素按照一定的顺序排列。如果不指定<方法函数>，则按字母顺序排列。在这种情况下，80 是比 9 排得前的。如果指定<方法函数>，则按<方法函数>所指定的排序方法排序。<方法函数>比较难讲述，这里只将一些有用的<方法函数>介绍给大家

2、Boolean - 布尔对象

例： Var flag = true；

3、Date - 时间对象

定义一个日期对象：

例：var DateObject=new Date（）；

var Year = MyDate.getFullYear();

var Month = MyDate.getMonth();

var date = MyDate.getDate();

var day = MyDate.getDay();

【方法】

以下有很多“g/set[UTC]XXX”这样的方法，它表示既有“getXXX”方法，又有“setXXX”方法。“get”是获得某个数值，而“set”是设定某个数值。如果带有“UTC”字母，则表示获得/设定的数值是基于 UTC 时间的，没有则表示基于本地时间或浏览期默认时间的。

如无说明，方法的使用格式为：“<对象>.<方法>”，下同。

g/set[UTC]FullYear() 返回/设置年份，用四位数表示。如果使用“x.set[UTC]FullYear(99)”，则年份被设定为 0099 年。

g/set[UTC]Year() 返回/设置年份，用两位数表示。设定的时候浏览器自动加上“19”开头，故使用“x.set[UTC]Year(00)”把年份设定为 1900 年。

g/set[UTC]Month() 返回/设置月份。

g/set[UTC]Date() 返回/设置日期。

g/set[UTC]Day() 返回/设置星期，0 表示星期天。

g/set[UTC]Hours() 返回/设置小时数，24小时制。

g/set[UTC]Minutes() 返回/设置分钟数。

g/set[UTC]Seconds() 返回/设置秒钟数。

g/set[UTC]Milliseconds() 返回/设置毫秒数。

g/setTime() 返回/设置时间，该时间就是日期对象的内部处理方法：从 1970 年 1 月 1 日零时正开始计算到日期对象所指的日期的毫秒数。如果要使某日期对象所指的时间推迟 1 小时，就用：“x.setTime(x.getTime() + 60 * 60 * 1000);”（一小时 60 分，一分 60 秒，一秒 1000 毫秒）。

getTimezoneOffset() 返回日期对象采用的时区与格林威治时间所差的分钟数。在格林威治东方的市区，该值为负，例如：中国时区（GMT+0800）返回“-480”。

toString() 返回一个字符串，描述日期对象所指的日期。这个字符串的格式类似于：“Fri Jul 21 15:43:46 UTC+0800 2000”。

toLocaleString() 返回一个字符串，描述日期对象所指的日期，用本地时间表示格式。如：“2000-07-21 15:43:46”。

toGMTString() 返回一个字符串，描述日期对象所指的日期，用 GMT 格式。

toUTCString() 返回一个字符串，描述日期对象所指的日期，用 UTC 格式。

parse() 用法：Date.parse(<日期对象>)；返回该日期对象的内部表达方式。

4、Number - 数值对象，可以是整数和浮点数；

Var num=15.2

5、String - 字符串对象

Var str=“23456”；等价于var str= new string（“23456”）

【属性】

length 用法：<字符串对象>.length；返回该字符串的长度。

【方法】

charAt() 用法：<字符串对象>.charAt(<位置>)；返回该字符串位于第<位置>位的单个字符。注意：字符串中的一个字符是第 0 位的，第二个才是第 1 位的，最后一个字符是第 length - 1 位的。

charCodeAt() 用法：<字符串对象>.charCodeAt(<位置>)；返回该字符串位于第<位置>位的单个字符的 ASCII 码。

fromCharCode() 用法：String.fromCharCode(a, b, c...)；返回一个字符串，该字符串每个字符的 ASCII 码由 a, b, c... 等来确定。

indexOf() 用法：<字符串对象>.indexOf(<另一个字符串对象>[, <起始位置>])；该方法从<字符串对象>中查找<另一个字符串对象>（如果给出<起始位置>就忽略之前的位置），如果找到了，就返回它的位置，没有找到就返回“-1”。所有的“位置”都是从零开始的。

lastIndexOf() 用法：<字符串对象>.lastIndexOf(<另一个字符串对象>[, <起始位置>])；跟 indexOf() 相似，不过是从后边开始找。

split() 用法：<字符串对象>.split(<分隔符字符>)；返回一个数组，该数组是从<字符串对象>中分离开来的，<分隔符字符>决定了分离的地方，它本身不会包含在所返回的数组中。例如：'1&2&345&678'.split('&')返回数组：1,2,345,678。关于数组，我们等一下就讨论。

substring() 用法：<字符串对象>.substring(<始>[, <终>])；返回原字符串的子字符串，该字符串是原字符串从<始>位置到<终>位置的前一位置的一段。<终> - <始> = 返回字符串的长度（length）。如果没有指定<终>或指定得超过字符串长度，则子字符串从<始>位置一直取到原字符串尾。如果所指定的位置不能返回字符串，则返回空字符串。

toLowerCase() 用法：<字符串对象>.toLowerCase()；返回把原字符串所有大写字母都变成小写的字符串。

toUpperCase() 用法：<字符串对象>.toUpperCase()；返回把原字符串所有小写字母都变成大写的字符串。

6、math“数学”对象，提供对数据的数学计算

引用 :Math.<名>

【属性】

E 返回常数 e (2.718281828...)。

LN2 返回 2 的自然对数 (ln 2)。

LN10 返回 10 的自然对数 (ln 10)。

LOG2E 返回以 2 为低的 e 的对数 (log2e)。

LOG10E 返回以 10 为低的 e 的对数 (log10e)。

PI 返回π（3.1415926535...)。

SQRT1_2 返回 1/2 的平方根。