JavaScript语言.docx

setInterval（"clock（）",1000）;//每隔1000毫秒（1秒）调用clock（）事件

五、学习对话框

1）警告（alert）

JavaScript中有三种弹出框:

警告（alert）、确认（confirm）以及提问（prompt）。

在访问网站的时候，你遇到过这样的情况吗？

“咚”的一声，一个小窗口出现在你面前，上面写着一段警示性的文字，或是其它的提示信息。

如果你不点击确定，你就不能对网页做任何的操作。

没错，这个“咚”的小窗口就是alert干的。

下面的代码是一段使用alert的实例。

alert（"我是菜鸟我怕谁"）;

将上述代码插入新建的网页…之间，并另存为7-2-1.asp。

2）确认（confirm）

确认框用于让用户选择某一个问题是否符合实际情况。

来看下面的代码：

我们用confirm（"你是菜鸟吗？

"）向访客提问，变量r则保存了访客的回应，它只可能有两种取值：

true或false。

没错，它是一个布尔值。

confirm后面的语句则是我们对访客回答做出的不同回应。

varr=confirm（"你是菜鸟吗"）;

if（r==true）

{

document.write（"彼此彼此"）;

}

else

{

document.write（"佩服佩服"）;

}

将上述代码插入到7-2-1.asp的之前，并保存运行。

3）提问（prompt）

prompt和confirm类似，不过它允许访客随意输入回答。

我们来修改一下之前多重if嵌套的例子，我们根据分数来做出不同的评价，不过那段程序并不完整，它根本就没问我们分数，而是假设我得了65分。

这太不公平了。

现在我么就可以用prompt来向访客提问，用score存储用户输入的回答，其余的事情就都由后面的switch来完成了。

prompt（）方法除了可以给出提示信息外，还可以给出初始值，格式如下：

prompt（"提示信息"，"初值"）

完成并另存为7-2-2.asp。

If语句的嵌套

格式：

If（条件1）

{语句块1；}

elseif（条件2）

{语句块2}

elseif（条件3）

{语句块3}

else

{语句块4}

将上题先另存为7-2-2.asp，再改为上述方法嵌套。

4）Switch语句——自学，参考相关资料的内容（略）

六、For循环

1）for语句结构：

for（初始条件;判断条件;循环后动作）

{

循环代码

}

2）举例让我们来看一个简单的例子吧：

有十个菜鸟报数，“菜鸟1号、菜鸟2号”。

有了for循环，很少的代码就可以实现十个菜鸟的报数。

vari=1;

for（i=1;i<=10;i++）

{

document.write（"菜鸟"+i+"号
"）;

}

3）将上述代码插入新建的网页…之间，并另存为7-2-4.asp。

七、break与continue

Break可以跳出循环，Continue跳过本次循环（进入到下一次）。

（1）continue

continue的作用是仅仅跳过本次循环，而整个循环体继续执行。

格式：

for（初始条件;判断条件;循环后动作）

{

语句1；

语句n;

if（特殊情况）

continue;//注：

如果if语句的主体只有一句，可省{}

语句n+2;

其他语句；

}

例如：

将上例修改，当i=8时，不输出显示的语句，其他i的值可显示。

文件另存为7-2-5.asp。

（2）break

break语句可以让循环中途停止，直接执行后面（指循环体之后）的代码。

格式如下：

for（i=1;i=<10;i++）

{

if（特殊情况）

break;

循环代码

}

那么，当特殊情况发生的时候，循环就会立即结束。

看看下面的例子，我们的菜鸟7号到10号在寝室打游戏……

vari=1;

for（i=1;i<=10;i++）

{

if（i==8）

{

break;//如果i是8的话就退出循环。

}

document.write（"菜鸟"+i+"号
"）;

}

文件另存为7-2-6.asp。

八、while循环

while循环重复执行一段代码，直到某个条件不再满足。

（1）while循环的结构：

while（判断条件）

{

循环代码

}

其实while循环和for循环的作用都是重复执行代码，例如下面这段代码，和上一节for循环的输出结果完全没有区别。

先来读读例子的代码，下面会解释为什么这个循环会和上一节的for循环等价。

vari=0;

while（i<=10）

{

document.write（"菜鸟"+i+"号"）;

document.write（"
"）;

i=i+1;

}

看起来好像比for循环少了点东西啊，只有一个判断条件啊。

其实这个循环也是有初始条件的，只不过在之前就已经定义好了，例如上面例子中的"vari=0;"，至于变量i的增大，则是放到了循环体里面，其实这个过程和for没有什么区别，也是变量i不断变大，直到判断条件不满足，则循环结束。

（2）dowhile循环的结构

dowile结构的基本原理和while结构是基本相同的，但是它保证循环体至少被执行一次。

因为它是先执行代码，后判断条件。

例子如下：

i=0;

do

{

document.write（"Thenumberis"+i）;

document.write（"
"）;

i++;

}

while（i<=5）

九、For...In循环

Javascript中的forin循环通常用来遍历数组

首先要了解什么是数组，所谓数组，其实就是一个保存了一组类似变量的一个集合。

我们来看一个保存了爱好的数组实例：

varx;

varhobbies=newArray（）;//创建一个新的数组

hobbies[0]="JavaScript";

hobbies[1]="CSS";

hobbies[2]="篮球";

for（xinhobbies）//数组中的每一个变量

{

document.write（hobbies[x]+"
"）;

}

输出结果如下：

JavaScript

CSS

篮球

我们来分析一下上面的例子：

varhobbies=newArray（）;一句创建了一个新的数组。

hobbies[0]="JavaScript";以及之后的两句则是给hobbies数组赋值。

这与我们之前见过的变量赋值不太一样，hobbies后面多出一个"[0]"，这个是变量的索引。

我们之前已经说了，数组是变量的集合，因此我们在赋值之前需要指明给数组中的哪一个变量赋值。

在这里，"[0]"表示的是hobbies数组所包含的第一个变量，没错，数组的索引是从0开始的，开始可能有点别扭，慢慢就习惯了。

最后的forin循环就很好理解了，

for（xinhobbies）//数组中的每一个变量

{

document.write（hobbies[x]+"
"）;

}

表示遍历hobbies数组的所有变量，并且将他们逐一输出。

一十、JavaScript函数

一个函数的作用就是完成一项特定的任务。

如果没有函数时，完成一项任务可能需要五行、十行、甚至更多的代码。

每次需要完成这个任务的时候都重写一遍代码显然不是一个好主意。

这是我们就可以编写一个函数来完成这个任务，以后只要调用这个函数就可以了。

1）定义一个函数

说了这么多，那么究竟如何定义一个函数呢？

看看下面的格式：

function函数名（）

{

函数代码;

}

函数由关键字function定义，把“函数名”替换为你想要的名字，把“代码”替换为完成特定功能的代码，函数就定义好了。

了解了如何定义函数，我们就来自己编写一个实现两数相加的简单函数吧。

首先给函数起一个有意义的名字：

“add2”，它的代码如下：

functionadd2（）{

sum=1+1;

alert（sum）;

}

2）函数的调用

函数定义好了，如何调用呢？

其实可以通过很多种方法调用上面的函数，我们这里使用最简单的函数调用方式——按钮的点击事件，JavaScript事件会在后面介绍。

试着点击下面的按钮调用定义好的函数：

functionadd2（）{

sum=1+1;

alert（sum）;

}

通过button按钮的鼠标单击事件onclick调用add2（）函数。

3）带参数的函数

上述Add2（）函数不能实现任意指定两数相加。

其实，函数的定义可以是下面的格式：

function（参数1,参数2,参数3）{

部分函数代码……

……

}

按照这个格式，我们的函数应该写成：

functionadd2（x,y）{

sum=x+y;

alert（sum）;

}

x和y则是我们函数的两个参数，调用函数的时候，我们就可以通过这两个参数把两个加数传递给函数了。

例如，add2（3，4）会求3+4的和，add2（56,65）则会求出56和65的和。

“再等等！

这函数没有用啊，这里只是把结果alert出来，我想对结果做些处理怎么办啊？

”

4）带返回值的函数

好吧，我们把alert（sum）一行改成下面的代码：

returnsum;

return后面的值叫做返回值。

使用下面的语句调用函数就可以将这个返回值存储在变量中了。

result=add2（3,4）;

该语句执行后，result变量中的值为7。

值得说明的是，我们的函数中，参数和返回值都是数字，其实它们也可以是字符串等其它类型。

实例步骤一：

将6-7.asp另为7-3-2.asp；写为用javascript语言，并用三个函数checkxm（）、checkmm（）和checkyx（）实现对姓名、密码和邮箱地址的检查。

1将按钮的类型改为“提交”；

2接收处理的文件为”7-3-2B.asp”，

3接收的方式是”POST”。

4完成接收文件”7-3-2B.asp”的编写如下图

实操二：

修改7-3-2.asp为7-3-2C.asp，使之实现对未正确输入的文本框设置光标。

1多个函数合为一个函灵数check（）；

2失去焦点事件删除；通过按按钮实现函数check（）的调用；按钮的类型从“提交”改为”button”

3发现有错，使用以下语句

document.form1.email.focus（）;//设置光标在email文本框上

returnfalse;//返回函数结果，即函数结束。

4最后使用

document.form1.submit（）;//相当于提交命令

一十一、JavaScript事件

我们之前提到过函数的调用。

函数定义之后，默认是不会执行的，这时候就需要一些事件来触发这个函数的执行。

JavaScript很多有很多事件，例如鼠标的点击、移动，网页的载入和关闭。

我们先来定义一个函数，再看几个事件的实例。

统一的示例函数：

functiondisplaymessage（）

{

alert（"我是菜鸟我怕谁!

"）;

}

函数的事件很简单，只是显示一条消息。

1）点击事件

使用点击事件调用，需要给元素设置onclick属性。

示例代码如下：

onclick调用函数

由于设置了onclick="displaymessage（）"，因此点击按钮则会调用函数。

窗体顶端

2）鼠标经过、移出事件

使用鼠标经过事件调用函数的代码如下：

鼠标滑过调用函数

当鼠标经过按钮时，触发onmouseover事件，将会调用函数displaymessage（）。

使用鼠标移出事件调用函数的代码如下：

鼠标移出调用函数

把鼠标移动到这个按钮里面，当再移动出去时，触发onmouseout事件，将会调用函数displaymessage（）。

11.3更多事件

JavaScript中还有很多事件，完整的列表可以看看

下面的列表列举了可以插入HTML标签中来定义事件动作的属性，具体的用法请参考上面的网站。

属性

事件发生时机

onabort

图片下载被打断时

onblur

元素失去焦点时

onchange

框内容改变时

onclick

鼠标点击一个对象时

ondblclick

鼠标双击一个对象时

onerror

当加载文档或图片时发生错误时

onfocus

当元素获取焦点时

onkeydown

按下键盘按键时

onkeypress

按下或按住键盘按键时

onkeyup

放开键盘按键时

onload

页面或图片加载完成时

onmousedown

鼠标被按下时

onmousemove

鼠标被移动时

onmouseout

鼠标离开元素时

onmouseover

鼠标经过元素时

onmouseup

释放鼠标按键时

onreset

重新点击鼠标按键时

onresize

当窗口或框架被重