JavaScript1.docx

《JavaScript1.docx》由会员分享，可在线阅读，更多相关《JavaScript1.docx（18页珍藏版）》请在冰豆网上搜索。

JavaScript1

JavaScript（简称：

JS）

一、JavaScript概述

JavaScript是一种基于对象的脚本语言，可以开发Internet客户端的应用程序。

JavaScript在HTML页面中以语句形式出现，可以执行控制页面元素的操作。

脚本语言的特点是：

解释执行方式；而Java、C++等程序设计语言是编译执行方式。

基于对象的脚本语言可以用来制作与网络无关的、与用户交互的程序。

虽然JavaScript与Java有紧密的联系，但却是两个公司开发的不同的两个产品。

Java是SUN公司的；JavaScript是Netscape公司的。

二、JavaScript程序

JavaScript程序由JavaScript语句组成。

JavaScript语句由一个或多个表达式、关键字和“；”组成。

JavaScript语句是大小写有别的。

JavaScript程序用标签括起。

在开始标签

或者：

......

JavaScript程序可以放在HTML页面代码中的任何地方：

段中任何位置；段中任何位置；与段之间；或者之后；甚至之外。

页面执行的顺序是从上到下的，JavaScript程序放在不同的位置，决定它被执行的先后次序。

一个典型的JavaScript程序如下：

例1-1.html

varname=prompt（"请输入姓名：

",""）;

window.document.write（"欢迎来到故事会！

"）;

alert（name+"，你好！

"）;

body中的文字

注：

代码中的

（1）prompt（"请输入姓名：

"）;//弹出一个输入框，等待用户输入，返回输入值。

（2）window.document.write（"…..."）;在浏览器窗口的文档区域输出信息（“window.”可以省略）。

（3）alert（"……"）;弹出一个提示框，显示提示信息。

三、数据类型与变量

1、数值：

数值包括整数和浮点数，和一个“NaN”特殊数（表示“NotaNumber”，即：

非正常数值）。

2、字符串：

由单引号或双引号括起来的一个字符序列。

3、布尔值：

布尔数据类型用“true”和“false”表示。

4、变量

JavaScript的变量是无类型的，变量用关键字“var”声明，可以存放任何类型的数值。

JavaScript的变量声明不是必须的，变量可以不用声明，而直接赋值使用。

变量分：

局部变量和全局变量。

在函数体内声明和使用的变量是局部变量；作用范围是函数体内。

在函数体外声明和使用的变量是全局变量，作用范围是整个HTML文档。

虽然变量声明时是无类型的，但是赋给变量的值却是有类型的，如：

布尔型、字符串、数组等，因此，JavaScript的变量有时根据需要可以进行类型转换。

有以下几种转换方法：

String（）：

将数据转换为字符型数据；

Number（）：

将数据字串转换为数值型数据；

Boolean（）：

将数据转换为布尔型数据；

Object（）：

将数据转换为对象型数据；

parseInt（）：

将字符串中的整数部分取出；

parseFloat（）：

将字符串中的浮点数部分取出；

5、空值和未定义值

空值：

null，表示什么也没有；

未定义值：

undefined；

当使用了未声明的变量，或声明了但未赋值的变量时，就返回“undefined”值。

四、运算符

1、赋值：

“=”

2、加减乘除等：

+-*/%

3、复合赋值运算符：

运算符

示例

等价于

加法

+=

a+=3

a=a+3

减法

-=

a-=3

a=a-3

乘法

*=

a*=3

a=a*3

除法

/=

a/=3

a=a/3

取模

%=

a%=3

a=a%3

4、加加、减减：

++、--

5、逻辑运算符：

非（！

），与（&&），或（||）

6、关系运算符：

>，<，==，>=，>=，!

=

7、严格相等：

===

对于null和undefined：

null==undefined//返回true

null===undefined//返回false

8、new运算符：

创建对象。

五、语句

1、if语句

if（条件表达式）

{

语句1；

语句2；

……

语句n；

}

2、if…elseif…else…语句

if（条件表达式1）

{

语句块1；

}elseif（条件表达式2）

{

语句块2；

}

……

}elseif（条件表达式n）

{

语句块n；

}

3、switch语句

switch（整数或字符型表达式）

{

case表达式1：

语句块1；

break；

case表达式2：

语句块2；

break；

……

case表达式n：

语句块n；

break；

default：

语句块n+1；

break；

}

4、while语句

while（循环条件表达式）

{

循环体语句；

}

5、do…while循环

do

{

循环体语句；

}

while（表达式）

6、for循环

for（初值表达式；循环条件表达式；循环变量更新表达式）

{

循环体语句；

}

7、for…in语句

JavaScript提供了一种特别的循环方式来遍历一个对象的所有属性，或者一个数组的所有元素。

for（循环变量in数组或对象）

{

循环体语句；

}

对于数组，首先将数组首元素的下标赋值给循环变量，执行循环体语句一次；再将数组下一元素的下标赋值给循环变量，执行循环体语句一次；……，以此类推。

对于对象，将对象的一个成员属性名赋值给循环变量，执行循环体语句一次；再将对象的另一个成员属性名赋值给循环变量，执行循环体语句一次；……，以此类推。

遍历数组的顺序是数组元素下标的次序，而遍历对象则无法控制遍历的次序。

在循环体中，可以引用循环变量。

8、break、continue语句：

与Java相同。

9、try…catch…finall语句、throw语句：

与Java相同。

10、空语句：

；//只有一个分号

例1-2.html（for…in举例）

vararr=newArray（1,34,54,65,23）;

for（ainarr）

{

document.write（"数组元素arr["+a+"]为"+arr[a]）;

document.write（"
"）;

}

六、函数

1、JavaScript函数定义：

function函数名（型参数1，型参数2，……）

{

语句；

[return语句；]

}

2、函数调用：

函数名（实参数1，实参数2，……）

3、在表达式中定义函数：

var变量名=function（实参数1，实参数2，……）

{

语句；

[return语句；]

}

这种方式直接将函数的返回值赋给一个变量。

此时，函数没有函数名，称为匿名函数。

七、内部对象（内置对象）

内部对象是JavaScript已经定义的，可以直接使用。

JavaScript的内部对象主要有：

●Array（数组对象）

●String对象（字符串）；

●Math对象（基本数学函数）；

●Data对象（日期时间）；

●Number对象（数值处理）；

●Blloean对象（布尔数据处理）；

●Object对象（所有对象的根）

●Error对象（异常信息）；

●Function对象（函数对象）；

●Global对象（全局对象）

●等

关于这些对象的详细情况，请同法学们自学、自练。

八、数组

在JavaScript中，数组是一种内部对象。

由于JavaScript是一种弱类型的语言，所以，一个数组中的元素可以为任意类型。

即：

同一数组中的的不同元素可以具有相同或者不同的类型，也可以是其他数组、对象、或者函数。

1、创建数组的语法为：

var数组名=newArray（元素1,元素2,…,元素n）;

由于Array是JavaScript中的一种内置对象，所以，数组也具有对象的特性。

Array对象有三种构造函数，所以，创建数组有三种方式：

●无参数创建：

var数组名=newArray（）;

创建一个空数组，在使用数组时再添加数组元素；

●指定长度创建：

var数组名=newArray（n）;

创建一个长度为n的数组，数组元素的初值为“undefined”；

●直接写出元素值创建：

var数组名=newArray（元素值1，元素值2，…，元素值n）;

2、数组下标：

数组下标用[n]表示，如：

array[0]，array[1]，array[2]，array[3]，……，分别代表数组中的元素。

数组的下标也可以用名字代替序号，如：

例1-3.html

varclient=newArray（）;

client["name"]="tom";

client["age"]="24";

client["sex"]="man";

for（varageinclient）

{

document.write（age）;

document.write（"
"）;

document.write（client[age]）;

document.write（"
"）;

varvalue=client["age"];

}

document.write（"
"）;

document.write（value）;

输出为：

name

tom

age

24

Ssx

man

24

3、多维数组：

一维数组：

数组名[下标]

二维数组：

数组名[下标][下标]

三维数组：

数组名[下标][下标][下标]

4、数组的长度

所有数组有一个特殊的属性length，表示数组的长度，就是元素的个数。

数组的length属性是会自动更新，length的值随数组元素个数的变化而变化。

也可以人为改变length的值，如果length的值改大了，则自动在数组的尾部添加新的、undefined的元素；如果length的值改小了，则长度之外的尾部元素被丢弃。

改变length属性的值：

数组名.length="value";

5、数组反转：

数组对象的reverse（）方法将一个数组中的元素进行位置反转，即：

元素[0]与元素[n]换位，元素[1]与元素[n-1]换位，……。

反转后的结果仍在原数组中。

6、数组排序：

数组对象的sort（）方法可以把数组元素排序，排序后的结果仍在原数组中。

●数组名.sort（）;//将元素按ASCII字符顺序升序排序

●数组名.sort（sortfunction）;//将元素按排序函数sortfunction排序

例1-4.html（反转）

vara=newArray（5）;

for（i=0;i

{

a[i]=parseFloat（prompt（"请输入下标为"+i+"的数组元素",0））;

}

document.write（"数组为：

"+a+"
"）;//不用循环，可直接输出数组a

a.reverse（）;

document.write（"反转后的数组为：

"+a+"
"）;//输出反转后的数组a

例1-5.html（排序）

vara=newArray（4）;

for（i=0;i

{

a[i]=prompt（"请输入字符串","String"）;

}

document.write（"排序前为:

"+a）;

document.write（"
"）;

a.sort（）;

document.write（"排序后为:

"+a）;

document.write（"
"）;

九、BOM（浏览器对象模型）

window对象

window对象是BOM的顶层，它是包含文档（document）的窗口容器，一个浏览器窗口就是一个window对象的界面表现。

只要打开一个窗口，window对象就存在了。

由于window是顶层对象，也是缺省的对象，所以调用其方法时可以省略对象名“window”。

window对象的方法

方法名及参数

含义

window.open（“参数1”,“参数2”,“参数3”,）

等价于：

open（“参数1”,“参数2”,“参数3”,）

打开（创建）一个新窗口

参数1是要显示的URL资源；

参数2是窗口名；

参数3是窗口属性（见下表,窗口属性）

close（）

关闭窗口

moveTo（x,y）

将窗口移动到（x,y）处，绝对移动

（x,y）是窗口左上角坐标

moveBy（dx,dy）

将窗口移动相对偏移位置（dx,dy）

resizeTo（widt,height）

绝对改变窗口大小为（widt,height），像素单位

resizeBy（widt,height）

相对改变窗口大小（widt,height）像素

alert（“提示信息”）

创建一个只有“确定”按钮的对话框，显示“提示信息”

confirm（“提示信息”）

创建一个有“确定”和“取消”按钮的对话框，显示“提示信息”，返回“true”或“false”

prompt（“提示信息”，默认值）

创建一个有“确定”和“取消”按钮的输入对话框，显示“提示信息”，返回输入值，或默认值

setTimeout（待执行的方法或函数,定时时间ms）

或：

定时器名=setTimeout（待执行的方法或函数,定时时间ms）

设定一个定时器，时间到时才执行

clearTimeout（定时器名）

取消定时器的定时

setInterval（待间隔执行的方法或函数,间隔时间ms）

设定一个间隔时间，每间隔时间到，重复执行

窗口属性：

参数3

设定值

含义

toolbar

yes/no

建立或不建立标准工具条

loction

yes/no

建立或不建立位置输入字段

directions

yes/no

建立或不建立标准按钮

status

yes/no

建立或不建立状态条

menubar

yes/no

建立或不建立菜单条

scrollbar

yes/no

建立或不建立滚动条

reviable

yes/no

能否改变窗口大小

width

确定窗口的宽度

height

确定窗口的高度

window对象的事件

事件

描述

onload

加载，发生在浏览器加载完页面后

onunload

卸载，发生在用户关闭页面后

onbeforeunload

卸载，发生在用户关闭页面之前

onclick

单击，发生在鼠标左键单击窗口中某HTML元素时

onmousemove

鼠标移到，发生在鼠标移到窗口中某HTML元素的边界时

onmourseover

鼠标移过，发生在鼠标在窗口中某HTML元素上移过时

onmourseout

鼠标移出，发生在鼠标移出窗口中某HTML元素的边界时

onmoursedown

鼠标键按下，发生在鼠标任何按键按下时

onmourseup

鼠标键抬起，发生在鼠标任何按键抬起时

onfocus

得到焦点，发生在鼠标点击选择框、文本框、文本输入区域时（当前激活的标签元素）

onblur

失去焦点，发生在上述对象失去激活时

onresize

onkeydown

键盘键按下，发生在键盘任意键按下时

onkeyup

键盘键抬起，发生在键盘任意键抬起时

onkeypress

键盘键按住，发生在onkeydown事件之后，onkeyup事件之前

onchange

内容改变，发生在文本框中的内容改变时

onerror

出错事件，发生在页面出现异常时

例1-6.html（定时）

functionsettime（）

{

timA=setTimeout（'window.close（）',5000）;//timA是局部变量

window.alert（'5秒后关闭该窗口！

'）;

returntimA

}

functioncleartime（timB）//timB是局部变量

{

clearTimeout（timB）;

alert（'定时已取消！

'）;

}

//timer是

//全局变量

例1-7.html（窗口的对话框）

functionchoose（）

{

varinput=prompt（"您要选择哪一门课程？

",""）;

if（input==""）

alert（"对不起，您选择的课程为空，请重新选择！

"）;

else

show（input）;

}

functionshow（num）

{

switch（num）

{

case"1":

alert（"数据库：

\n\nExcelSQLServeroracleAccess"）;

break;

case"2":

alert（"程序语言：

\n\nJavaC语言C#VB"）;

break;

case"3":

alert（"图片处理：

\n\nPhotoShopDreamweaverFireworks"）;

break;

case"4":

alert（"其它：

\n\n大学英语、高等数学、计算机组装与维护"）;

break;

default:

alert（"对不起，您选择的课程不存在，请重新选择！

"）;

break;

}

}