JavaScript

来源：互联网发布：淘宝待收货p图教程编辑：程序博客网时间：2024/05/19 03:20

JavaScript与Java不同

• JS是Netscape公司的产品，Java是Sun公司的产品。

• JS是基于对象，Java是面向对象。

• JS只需解释就可以执行，Java需要先编译成字节码文件，再执行。

• JS是弱类型，Java是强类型。

• JavaScript的特点

• 解释性：由浏览器直接解释执行

• 用于客户端

• 安全性:不允许直接访问本地硬盘

• 简单易用：脚本式语言最大的优点是易学易用，是一种轻量级的程序语言

• 动态性:他可以直接对用户或客户输入作出响应，无须经过web服务程序，他对用户的反映响应，是采用以事件驱动的方式进行的。

• 跨平台性:只要是可以解释Js的浏览器都可以执行，和操作系统无关

JavaScript的局限性：浏览器有很多种，每种对JavaScript的支持程度是不一样的，效果会有一定的差距。

• JavaScript的作用

– 校验用户输入的内容：用户输入内容的校验常分为两种

• 格式性校验：JavaScript

• 功能性校验

– 有效地组织网页内容

– 动态地显示网页内容：时钟显示等

– 动画显示

当有多个html页面使用到相同的JS脚本时，可以将js代码封装到一个文件中，只要在script标签的src属性引入一个js文件。（

• 注意：

– JavaScript程序内容必须置于<script></script>标签中，type=“text/javascript”用于区别其他脚本程序语言。

– 对于不支持javascript程序的浏览器，标记之间的内容就会被隐藏起来，否则就会被当做html的内容显示出来，而对于支持javascript程序的浏览器，这对标签不起任何作用。

– Javascript程序对大小写字母是敏感的，即在同一个程序语句中如果使用大写或小写字母将代表不同的意义。

– 使用注释/*多行注释*/ //单行注释

– Javascript程序在html文件中的位置没有严格的规定，但根据Javascript程序的功能和作用，一般将其置于3种位置：

• 在html<body>标记中的任何位置。如果所编写的Javascript程序用于输出网页内容的，应该将Javascript程序置于html文件中需要显示该内容的位置。

• 在html<head>标记。如果所编写的Javascript程序需要在某一个html文件中多次使用，那就应该编写Javascript函数，并将函数置于html文件的<head>标记中。

• 在一个单独的js文件中。如果编写的Javascript程序需要在多个html文件中使用，或Javascript程序内容很长时。

• JavaScript主要包括3种数据类型：简单数据类型、特殊数据类型、复合数据类型。

• 简单数据类型：数值型、字符型、布尔型

• 复合数据类型：对象、数组、函数

• 特殊数据类型：null、undefined

转义字符

字符

说明

示例

退格符

alert(“这是第一句 \b 这是第二句”)

换页符

alert(“这是第一句\f 这是第二句”)

换行符

alert(“这是第一句\n 这是第二句”)

回车符

alert(“这是第一句\r 这是第二句”)

制表符

alert(“这是第一句\t 这是第二句”)

常量和变量

• 常量：不能改变的数据。可以为整型、逻辑型、字符串型等。

• 变量：在计算机内存中暂时保存数据的地方。用关键字var声明或用赋值的形式。var i；i=10；var count=10；var i，j；

• 变量命名规则

– 第一个字符必须是字母（大小写均可）、下划线（_）或美元符（$）;

– 后续字符可以是字母、数字、下划线或美元符；

– 变量名称不能是保留字；

– 字符大小写敏感；

• 变量可以不声明直接使用 k=100；（k没定义就直接用）

• 变量弱类型检查，且可随时改变数据类型

运算符和表达式

• 运算符对一个或多个变量或值（操作数）进行运算，并返回一个新值

• 根据所执行的运算，运算符可分为以下类别：

– 算术运算符

– 比较运算符

– 逻辑运算符

– 赋值运算符=、+=、-=、*=、/=、%=

– 位运算符（很少用）

算术运算符

说明

示例

加

a = 5 + 8

减

a = 8 - 5

除

a = 20 / 5

乘

a = 5*19

取模－两个数相除的余数

10 % 3 = 1

一元自加。该运算符带一个操作数，将操作数的值加 1。返回的值取决于 ++ 运算符位于操作数的前面或是后面

++x将返回 x 自加运算后的值。

x++ 将返回 x 自加运算前的值

- -

一元自减。该运算符只带一个操作数。返回的值取决于 -- 运算符位于操作数的前面或是后面

--x 将返回 x 自减运算后的值。

x-- 将返回 x 自减运算前的值

比较运算符

运算符

说明

示例

= =

等于。如果两个操作数相等，则返回真。

a = = b

不等于。如果两个操作数不相等，则返回真。

Var2 != 5

大于。如果左边的操作数大于右边的操作数，则返回真。

Var1 > var2

小于。如果左边的操作数小于右边的操作数，则返回真。

Var2 < var1

小于等于。如果左边的操作数小于或等于右边的操作数，则返回真。

Var2 <= 4

Var2 <= var1

大于等于。如果左边的操作数大于或等于右边的操作数，则返回真。

Var1 >= 5

Var1 >= var2

逻辑运算符

运算符

值

说明

与 ( &&)

expr1 && expr2

只有当 expr1 和 expr2 同为真时，才返回真。否则，返回假。

或 ( || )

expr1 || expr2

如果其中一个表达式为真，或两个表达式同为真，则返回真。否则，返回假。

非 (!)

!expr

如果表达式为真，则返回假。如果为假，则返回真。

流程控制

• 所谓结构化程序设计思想，就是要使所设计的程序给人一种一目了然的感觉，条理清晰，模块化，书写层次分明，要求：

– 顺序结构：一条接一条，自上而下

– 选择结构：判断给定条件，根据不同情况做不同处理

– 循环结构：多次重复执行同一系列命令

if 语句

if(条件)

{

JavaScript代码;

}

switch 语句

switch (表达式)

{

case 常量1 :

JavaScript语句;

break;

case 常量2 :

JavaScript语句;

break;

...

default :

JavaScript语句;

}

q for循环

例：

var i;

for (i=0; i<10; i++)

{

// 语句;

}

q while循环

while(循环条件)

{

//语句；

}

q do－while循环

{

//语句；

}while(循环条件);

JavaScript 函数

• 函数实际上就是一段有名字的程序，这样，在整个程序的任何位置，只要使用该名字，就会执行由这段名字命名的程序。

• JavaScript使用函数的目的有两个

– 为了更好地组织程序，当需要重复地使用一段程序时，就应该将这段程序写成函数。

– 用于网页中的事件处理。

内置函数

• eval 函数：用于计算字符串表达式的值

该函数可以对以字符串形式表示的任意有效的 JavaScript代码求值。eval() 函数有一个参数，该参数就是想要求值的代码。

isNaN 函数：用于验证参数是否为 NaN（非数字）

isNaN(numValue)

返回一个 Boolean 值，指明提供的值是否是保留值 NaN （不是数字）。

如果值是 NaN，那么 isNaN 函数返回 true ，否则返回 false

自定义函数

• 定义函数：

function 函数名([参数1,参数2，…]){

语句;

}

• 调用函数：
函数调用一般和表单元素的事件一起使用，调用格式为：事件名＝“函数名” ;

函数的参数

参数是由函数的使用方传递到函数体中的变量，用于为函数中的操作提供相应的信息和数据。

• 参数的传递

– 按值传递：传递的只是原变量的一份拷贝，因此，如果在函数中改变了这个参数的值，原变量不会跟着改变，它将保留原有的值。

– 按地址传递：这时传递的是原变量的内存地址，即函数中的参数和原变量是同一个变量。因此在函数中改变了参数值，原变量也会随之改变。

注意：如果参数的数据类型是对象，其传递方式按地址传递的

变量的作用域

JavaScript的变量分为全局变量和局部变量。全局变量是作用在全程序范围内的变量，它声明在函数体外；局部变量是定义在函数体内的变量，它仅仅在函数体内起作用。

JavaScript 对象简介

• 内置对象

• 浏览器对象

• 自定义对象

• 注意：一个对象在被引用之前，必须存在。另外在JavaScript中对于对象属性和方法的引用，有两种情况：

– 该对象为静态对象，表示在引用该对象的属性或方法时不需要为它创建实例；

– 在引用该对象属性和方法时必须为它创建一个实例，叫做动态对象。

String 对象

创建字符串有两种不同方法：

• 使用 var 语句 var newstr = “这是我的字符串"

• 创建 String 对象

var newstr = new String (“这是我的字符串")

• 字符串相加：+或+= （字符串的连接）

• 在字符串中使用特殊字符
“sdfg’ × “她说：’今天不出门’” √ 或使用转义字符 “她说：\”今天不出门\”” “\n”

• 比较字符串是否相等 == != user==null|| user==“”

• 数字字符串和数值的相互转换

String相关函数

• 属性：length

• 方法：

– charAt(index): 返回指定索引位置处的字符。

– indexOf(subString[,startIndex]): 返回 String 对象内第一次出现子字符串的字符位置。

– substr(start [, length ]):返回一个从指定位置开始的指定长度的子字符串。

– substring(start, end):返回位于 String 对象中指定位置的子字符串。

– toLowerCase:返回一个字符串，该字符串中的字母被转换为小写字母。

Math 对象

名称

说明

属性

∏ 的值，约等于 3.1415

LN10

10 的自然对数的值，约等于 2.302

Euler 的常量的值，约等于 2.718。Euler 的常量用作自然对数的底数

abs(y)

返回 y 的绝对值

sin (y)

返回 y 的正弦，返回值以弧度为单位。

cos (y)

返回 y 的余弦，返回值以弧度为单位

tan (y)

返回 y 的正切，返回值以弧度为单位

min (x, y)

返回 x 和 y 两个数中较小的数

max (x, y)

返回 x 和 y 两个数中较大的数

random

返回0-1的随机数

方法

round (y)

四舍五入取整

sqrt (y)

返回 y 的平方根

Math.random( ) ：产生0－1的随机小数

Math.round( )：四舍五入取整，如9.34 取整为9

数学运算 Math对象

• Math.ceil(x)返回>=x的最小整数

• Math.floor(x) 返回<=x的最大整数

• Math.pow(x,y)返回x的y次方

• Math.random()返回0-1之间的随机小数

• Math.round(x)返回x的四舍五入的整数

Date 对象

Data 方法的分组：

方法分组

说明

setxxx

这些方法用于设置时间和日期值

getxxx

这些方法用于获取时间和日期值

Toxxx

这些方法用于从 Date 对象返回字符串值

parsexxx & UTCxx

这些方法用于解析字符串

用作 Date 方法的参数的整数：

值

整数

Seconds 和 minutes

0 至 59

Hours

0 至 23

Day

0 至 6（星期几）

Date

1 至 31（月份中的天数）

Months

0 至 11（一月至十二月）

Set 方法：

方法

说明

setDate

设置 Date 对象中月份中的天数，其值介于 1 至 31 之间。

setHours

设置 Date 对象中的小时数，其值介于 0 至 23 之间。

setMinutes

设置 Date 对象中的分钟数，其值介于 0 至 59 之间。

setSeconds

设置 Date 对象中的秒数，其值介于 0 至 59 之间。

setTime

设置 Date 对象中的时间值。

setMonth

设置 Date 对象中的月份，其值介于 1 至 12 之间。

Get 方法：

方法

说明

getDate

返回 Date 对象中月份中的天数，其值介于 1 至 31 之间

getDay

返回 Date 对象中的星期几，其值介于 0 至 6 之间

getHours

返回 Date 对象中的小时数，其值介于 0 至 23 之间

getMinutes

返回 Date 对象中的分钟数，其值介于 0 至 59 之间

getSeconds

返回 Date 对象中的秒数，其值介于 0 至 59 之间

getMonth

返回 Date 对象中的月份，其值介于 0 至11 之间

getFullYear

返回 Date 对象中的年份，其值为四位数

getTime

返回自某一时刻（1970 年 1 月 1 日）以来的毫秒数

To 方法：

方法

说明

ToGMTString

使用格林尼治标准时间 (GMT) 数据格式将 Date 对象转换成字符串表示

ToLocaleString

使用当地时间格式将 Date 对象转换成字符串表示

Parse 方法和 UTC 方法

方法

说明

Date.parse (date string )

用日期字符串表示自 1970 年 1 月 1 日以来的毫秒数

Date.UTC (year, month, day, hours, min., secs. )

Date 对象中自 1970 年 1 月 1 日以来的毫秒数

数组

• 声明数组

var 数组名 = new Array(数组大小);

• 常用属性

length：返回数组中元素的个数

• 常用方法

方法

说明

join

将数组中的元素组合成字符串

reverse

颠倒数组元素的顺序，使第一个元素成为最后一个，而最后一个元素成为第一个

sort

对数组元素进行排序

• Array对象常用的属性是length，排序方法：sort

• 循环语句分为：for 循环、while循环、do-while循环

• Eval( )函数可以计算某个计算表达式的值，

isNaN( )函数可用于判断是否是一个数字

• String对象的indexOf( )方法用于查找子字符串

• Math对象的random( )方法可以产生0－1的随机数

• Date对象有setxxx( )方法用于设置日期和时间，getxxx( )方法用于获得日期和时间

Window 对象

• 窗口对象window是浏览器网页的文档对象模型结构中的最高级的对象，只要网页的html标记中包含有<body>或<frameset>标记，该网页就会包含一个窗口对象。

• window对象的常用属性和方法

属性

名称

说明

document

表示给定浏览器窗口中的 HTML 文档。

history

包含有关客户访问过的URL的信息。

location

包含有关当前 URL 的信息。

name

设置或检索窗口或框架的名称。

status

设置或检索窗口底部的状态栏中的消息。

screen

包含有关客户端的屏幕和显示性能的信息。

方法

名称

说明

alert (“m提示信息")

显示包含消息的对话框。

confirm（“提示信息”）

显示一个确认对话框，包含一个确定取消按钮

prompt（”提示信息“）

弹出提示信息框

open ("url","name")

打开具有指定名称的新窗口，并加载给定 URL 所指定的文档；如果没有提供 URL，则打开一个空白文档

close ( )

关闭当前窗口

setTimeout(”函数”,毫秒数)

设置定时器：经过指定毫秒值后执行某个函数

clearTimeout(定时器对象)

取消setTimeout设置

定时器的使用：实现延期执行或重复执行

• window对象提供了两种方法来实现定时器：

– window. setTimeout(表达式[expression],延时时间[n])

– window. setInterval(表达式[expression],延时时间[n])

注意：expression可以是用引号括起来的代码，也可以是一个函数名（不能带任何参数的函数）

• 如何取消定时器：

– 取消setTimeout：window.clearTimeout(id);

– 取消setInterval:window.clearInterval(id);

屏幕（screen）对象

• 屏幕对象是JavaScript运行时自动产生的对象

• 屏幕对象常用属性

– height：返回显示屏幕的高度。

– width ：返回显示器屏幕的宽度。

– availHeight ：返回显示屏幕的高度 (除 Windows 任务栏之外)。

– availWidth：返回显示屏幕的宽度 (除 Windows 任务栏之外)。

– colorDepth：返回目标设备或缓冲器上的调色板的比特深度（每像素中用于颜色的位数，其值为1,4,8,15,16,24,32）。

• 网页可见区域宽：document.body.clientWidth

• 网页可见区域高：document.body.clientHeight

• 网页可见区域宽：document.body.offsetWidth (包括边线的宽)

• 网页可见区域高：document.body.offsetHeight (包括边线的宽)

• 网页正文全文宽：document.body.scrollWidth

• 网页正文全文高：document.body.scrollHeight

• 网页被卷去的高：document.body.scrollTop

• 网页被卷去的左：document.body.scrollLeft

• 网页正文部分上：window.screenTop

• 网页正文部分左：window.screenLeft

• 屏幕分辨率的高：window.screen.height

• 屏幕分辨率的宽：window.screen.width

• 屏幕可用工作区高度：window.screen.availHeight

• 屏幕可用工作区宽度：window.screen.availWidth

Location对象

• 处理地址栏信息：location对象

– Location对象是wodow对象的子对象，包含了窗口对象的网页地址内容，即URL。例如：

• window.location=“http://www.sohu.com”;//跳转到页面

• window.loaction.href=“http://www.sohu.com”;//同上

• window.location.reload();//刷新页面

• Window.location.replace(url);//用url刷新当前网页

Location 对象属性

名称

说明

host

设置或检索位置或 URL 的主机名和端口号

hostname

设置或检索位置或 URL 的主机名部分

href

设置或检索完整的 URL 字符串

方法

名称

说明

assign("url")

加载 URL 指定的新的 HTML 文档。

reload()

重新加载当前页

replace("url")

通过加载 URL 指定的文档来替换当前文档

历史记录（history）对象

• 历史记录对象是窗口对象下的一个子对象。它实际上是一个对象数组，包含了一系列的用户访问过的url地址，用于浏览器工具栏中的“前进”和“后退”按钮。

• 常用属性和方法

– history.length：历史对象的个数

– history.back();显示浏览器历史列表中后退一个网址的网页

– history.go(n)或者history.go(网址)：显示浏览器的历史列表中第n个网址的网页，n>0 前进 n<0 后退

– history.forward()；//显示浏览器历史列表中前进一个网址的网页

注意：如果参数n超过了历史列表中的网址个数，或者参数网址不在浏览器的历史列表中，这时不会出现任何错误，只是当前网页没有发生变化。

Document对象

• document文档对象是window对象的一个主要部分，它包含了网页显示的各个元素对象。

– document.write(str);//输出一行

– document.writeln(str);//输出一行，并回车

• 常用属性

名称

说明

alinkColor

设置或检索文档中所有活动链接的颜色

bgColor

设置或检索 Document 对象的背景色

body

指定文档正文的开始和结束

linkColor

设置或检索文档链接的颜色

location

包含关于当前 URL 的信息

title

包含文档的标题

url

设置或检索当前文档的 URL

vlinkColor

设置或检索用户访问过的链接的颜色

常用方法

名称

说明

clear ( )

清除当前文档

close ( )

关闭输出流并强制显示发送的数据

write ("text")

将文本写入文档

课堂重点

• JavaScript 程序是事件驱动程序

• onFocus获得焦点事件，表示获得鼠标光标， onBlur失去焦点事件，刚好与之相反

• 浏览器对象是一个分层次的结构，window是顶层根对象

• 打开窗口使用window对象的open( )方法

• 设置定时器，使用window对象的setTimeout()方法

• history对象的back( )和forward( )方法等同于前进、后退按钮

Form对象及其元素对象

• Form对象：是文档对象的一个主要元素。Form对象中包含有许多用于收集用户输入内容的元素对象，例如，文本框、按钮等，通过这些元素对象，form将用户输入的数据传递到服务器端进行处理。

• 引用form对象

– 使用form标记中的name属性值
document.form1 document.form2

– 使用forms数组对象
document.forms[0] document.forms[1]
document.forms[“form1”]

• Form对象的常用属性、方法和事件

JavaScript 事件

事件名

说明

onClick

鼠标单击

onChange

文本内容或下拉菜单中的选项发生改变

onFocus

获得焦点，表示文本框等获得鼠标光标。

onBlur

失去焦点，表示文本框等失去鼠标光标。

onMouseOver

鼠标悬停，即鼠标停留在图片等的上方

onMouseOut

鼠标移出，即离开图片等所在的区域

onMouseMove

鼠标移动，表示在<DIV>层等上方移动

onLoad

网页文档加载事件

onSubmit

表单提交事件

onMouseDown

鼠标按下

onMouseUp

鼠标弹起

文本框对象

• 文本框元素用于在表单中输入字、词或一系列数字

• 可以通过将 HTML 的 INPUT 标签中的 type 设置为“text”，以创建文本框元素

文

本

框

事件

onBlur

文本框失去焦点

onChange

文本框的值被修改

onFocus

光标进入文本框中

方法

focus( )

获得焦点，即获得鼠标光标

select( )

选中文本内容，突出显示输入区域

属性

readOnly

只读，文本框中的内容不能修改

按钮 - 事件处理程序

表单元素

事件处理程序

说明

命令按钮

onSubmit

表单提交事件，单击“提交”按钮时产生，此事件属于<FORM>元素，不属于提交按钮

onClick

按钮单击事件

复选框 - 事件处理程序

复选框

事件

onBlur

复选框失去焦点

onFocus

复选框获得焦点

onClick

复选框被选定或取消选定

属性

checked

复选框是否被选中，选中为true，未选中为false。您可以使用此属性查看复选框的状态或设置复选框是否被选中

value

设置或获取复选框的值

单选按钮 - 事件和属性

单选按钮

事件

onBlur

单选按钮失去焦点

onFocus

单选按钮获得焦点

onClick

单选按钮被选定或取消选定

属性

checked

单选按钮是否被选中，选中为true，未选中为false。您可以使用此属性查看单选按钮的状态或设置单选按钮是否被选中

value

设置或获取单选按钮的值

下拉列表框-事件和属性

下拉列表框

事件

onBlur

下拉列表框失去焦点

onChange

当选项发生改变时产生

onFocus

下拉列表框获得焦点

属性

value

下拉列表框中，被选选项的值

options

所有的选项组成一个数组，options表示整个选项数组，第一个选项即为options[0]，第二个即为options[1]，其他以此类推

selectedIndex

返回被选择的选项的索引号，如果选中第一个返回0，第二个返回1，其他类推

课堂重点

• OnBlur、onChange 和 OnFocus 是一些与表单对象相关的事件处理程序

• 在浏览器窗口中，如果文本框获得焦点，则会调用 onFocus 事件处理程序

• 当对象失去焦点或光标退出对象时，将执行 onBlur 事件处理程序

• 当修改文本框内容或改写下拉列表框的选项时，则会调用 onChange 事件处理程序

• JavaScript的主要功能之一是用于表单验证