JavaScript教程

keaide · 发表于 2006-8-1 22:51

第十一页：函数
函数是编程需学的最后一个基本组成。所有的程序语言都是
函数。函数是一些角次可调用的、无须重写的东西。

如果你想教会自己快速阅读并且用一个一旦点击可告诉你当前
时间的长文本链接。

例如…时间!

看源码：

<a href="#" onClick="

var the_date = new Date();

var the_hour = the_date.getHours();

var the_minute = the_date.getMinutes();

var the_second = the_date.getSeconds();

var the_time = the_hour + ':' + the_minute + ':' + the_second;

alert('The time is now: ' + the_time);">time!</a>

在这里这段JavaScript的工作细节并不重要；一会我们再回来
复习一下。

重要的是它太长了。若这些时间链接再有10个，你须每次剪贴
这段程序。这使你的HTML既长且难看。另外，若你想改变这段
程序，就必须在10个不同地方改变。

你可以写一个函数来执行而不用作10次拷贝程序。这里的函数
使用变的即容易编辑又容易阅读。

请看如何写一段计时函数。

keaide · 发表于 2006-8-1 22:51

第十二页：无参数函数
该HTML页含有一个叫做announceTime的函数。从一个链接调用
annoumnceTime：

<a href="#" onClick="announceTime();">time!</a>

就象这样：

下行看起来就象第二课：

<a href="#" onClick="alert('Hello!');">Hello!</a>

这称为从一个链接调用警告对话框。函数就象一种方法，唯一不
同的是，方法依附于一个对象。在这个警告的例子中，这个对象
是一个窗口对象。

让我们回到函数本身。如果你看看源码，你将看到函数位于HTML
文件的头部中。

<html>

<head>

<title>Function with No Parameters</title>

<script langauge="JavaScript">



</script>

</head>

<body>

...

</body>

</html>

好，让我们逐行复习这个函数。首先，所有函数来自于该种格式：

function functionName(parameter list)

{

statements ...

}

函数的命名规则于变量差不多。第一个字符必须是字母或一标准符
号。其余字符可为数字或一横线。但必须保证函数不于已定义的变
量同名。否则将出现很糟糕的结果。我是用内部大写的方式命名函
数以保证它们不与字符碰巧重名。

函数名后是一组参数。本例是无参数的函数，下一例中我们再举例
描述。

参数后是函数的主体。这是一组当函数调用后是想运行的语句。在
下面几个例子中，我打算利用这个报时器，所以让我描述一下它是
怎样工作的。

第一行：

var the_date = new Date();

取得一个新的日期对象。就象你在用数组时取得一个新的数组一
样，在你要找出即时是什么时间时你需要先取得一个日期对象。
当找到了一个新的日期对象，它自动重置到当前的日期和时间。
为了在对象以外得到这个信息，你必须使用这种对象方法：

这些方法从日期对象上取得了合适的数字。

var the_hour = the_date.getHours();

var the_minute = the_date.getMinutes();

var the_second = the_date.getSeconds();

你可能疑惑：我怎样能假定日期对象知道何种方式？甚或我如何
知道有这样一件事可作为日期对象？这些缘由应从Javascript
库中获取，我将尽我所能解释内置Javascript对象，但不一定能
彻底的使你清楚。

函数的其他部分就很清楚了。它以这种方式调用返回数字，把它
们变成字符串，并且调用警告方式以弹出一个字符串对话框。注
意你可以在函数内部调用一个方式和函数。我们将详尽讨论。

现在如果你也玩透了时间链接，你可能注意到了有些什么不对的
事。你每次可能会得到这样的反馈：“12:12:04”，这是
getSecond()将返回值为“4”。那么当你合成为时间时，你看到
的就是the_minute+“:”+the_second得到14:4而非是我们想要
的。解决它是个容易的事，需要个新的函数来修补分、秒合成值。

请看参数及返回值。

keaide · 发表于 2006-8-1 22:51

第十三页：参数及返回值
尽管无参数的函数在减少写源码工作量，HTML源码可读性上很
有用，但有参数的函数会更为有用。

上一例中，当返回的分、秒值小于10时会有问题发生。我们想
要看到的秒值是04而非4。我们可以这样做：

var the_minute = the_date.getMinutes();

if (the_minute < 10)

{

the_minute = "0" + the_minute;

}

var the_second = the_date.getSeconds();

if (the_second < 10)

{

the_second = "0" + the_second;

}

它会非常有效。但是注意，同样的源码你写了两次：若某件
东西小于10，则前面加“0”。所以要考虑当用同一代码要多
次重写时，用函数来做。本例中我写了一个叫fixNumber的函数：

function fixNumber(the_number)

{

if (the_number < 10)

{

the_number = "0" + the_number;

}

return the_number;

}

fixNumber的参数是the_number。一个参数也是一个变量，当该
函数被调用时，其参数值也被设置。在本例中，我们这样调用
函数：

var fixed_variable = fixNumber(4);

参数the_number在函数中设置为4。到现在你应该对fixNumber
的主体有了一定的了解。它的意思是：如果变量the_number小
于10，则在它的前面加一个0。这里面新的内容是return指令：
返回the_number的值。在下面的情况中就会用到return指令：

var some_variable = someFunction();

变量some_variable的值是函数someFunction() 的返回值。
在fixNumber中，我加入: return the_number，则退出函数并
将返回the_number的值返回给任何一个等待被设置的变量。
所以，我这样书写代码：

var fixed_variable = fixNumber(4);

the_number的初始值将通过函数调用被设置为4，然后由于4小
于10，所以the_number将被改为"04"。然后the_number值被
返回，而且变量fixed_variable将被设置为"04" 。

为了将fixNumber包括在原始函数announceTime()中，我添加了
如下内容：

function announceTime()

{

//get the date, the hour, minutes, and seconds

var the_date = new Date();

var the_hour = the_date.getHours();

var the_minute = the_date.getMinutes();

var fixed_minute = fixNumber(the_minute);

var the_second = the_date.getSeconds();

var fixed_second = fixNumber(the_second);

//put together the string and alert with it

var the_time = the_hour + ":" + fixed_minute + ":" + fixed_second;

alert("The time is now: " +the_time);

}

假定时间链接被点击时，时间为12:04:05。用new Date()获得
日期，用getHours()获得小时，用前面所属方法获得分钟，分
钟在本例中应该是4, 然后调用fixNumber，其参数为the_minute:

var fixed_minute = fixNumber(the_minute);

当fixNumber()被调用时，参数the_number被设置为the_minute。
在本例中由于the_minute是4，所以the_number将被设置为4。
设置完参数后，我们进入函数主体。由于4小于10，the_number
被改变为"04"，然后the_number值用return指令返回。当"04"
被fixNumber返回后，本例fixed_minute就等于"04"。

我们一步一步来研究该过程。假定时间为12:04:05。

我们从函数announceTime()开始
the_minute = the_date.getMinutes();则the_minute = 4
fixed_minute = fixNumber(the_minute);等于函
数fixNumber()并将其值返回给fixed_minute
现在进入函数fixNumber()
函数fixNumber(the_number)fixNumber()用the_minute的
值调用，the_minute值是4，所以现在the_number = 4
如果(the_number < 10) {the_number = "0" +
the_number;}由于4小于10，所以the_number现在等于"04"
返回the_number值，退出该函数并返回值"04"
现在已经退出函数fixTime()，所以现在我们回
到announceTime()

该函数返回值为"04"，所以fixed_minute 现在等于"04"
该例用了一个只有一个参数的函数。实际上你可以为函数
设置多个参数。例如该函数输入两个数组并返回一个元素
列表。

keaide · 发表于 2006-8-1 22:51

第十四页：多于一个参数的函数
这是我定义的一个数组：

var monkeys = new Array("mattmarg","wendy",
"kristin","tim","aaron", "luke"

;

var kittyphile = new Array("wendy", "ruby",
"roscoe", "tim"

;

var discophile = new Array("mattmarg",
"john travolta", "wendy"

;

var happy = new Array("tim", "wendy",
"stimpy", "aaron"

;

var cranky = new Array("ren", "mattmarg","luke"

;

　

随着这些数组的定义，arrayIntersect函数给出，我们可轻
而易举的发现那些网猴酷爱迪斯科：爱跳舞的网猴

注意到尽管John Travolta喜爱迪斯科，但他不在monkeys请
单中，则他就不是只爱跳舞的网猴为调用该函数值，可这么来：

<a href="#" onClick="arrayIntersect('dancing
monkeys',monkeys,discophile);">dancing monkeys</a>

　

这是个具有3个参数的函数：一个代表交叉的姓名，第一个数组，
及第二个数组。这也很容易发现爱猫的网猴名爱猫的网猴。

看一下源码：

<a href="#" onClick="arrayIntersect('monkeys who love
cats',monkeys,kittyphile);">cat-loving monkeys</a>

让我们看看arrayIntersect函数本身：

function arrayIntersect(intersect_name, array_1, array_2)

{

var the_list = "";

for (loop_1 = 0; loop_1 < array_1.length; loop_1++)

{

for (loop_2 = 0; loop_2 < array_2.length; loop_2++)

{

if (array_1[loop_1] == array_2[loop_2])

{

the_list = the_list + array_1[loop_1] + " ";

}

}

}

alert("the " + intersect_name + " are: "+ the_list);

}

看看你是否已经弄懂本例中的循环。关键是函数第一行：

function arrayIntersect(intersect_name, array_1, array_2)

这里定义了一个叫arrayIntersect的函数，它有3个参数。就象上
例，每个参数就象一个变量，当函数调用时赋值。因此，当函数被调
用时：

arrayIntersect('dancing monkeys',monkeys,discophile);

　

下列分配：

intersect_name = 'dancing monkeys'
array_1 = monkeys
array_2 = discophile
唯一需注意的是，你必须以正确的参数数目来调用函数。如果你一旦
象这样调用arrayIntersect：

arrayIntersect(monkeys,discophile);

　

将会出错。试一下看会发生什么错误。

在任一标准的Javascript程序中，函数都是基本的部件。因此理解其
工作原理极其重要。这里是一个测试你对这项工作理解多少的练习。
再综合地做一下本课中其它练习，再在你自己的浏览器中应用。

keaide · 发表于 2006-8-1 22:52

第一页：第五课课程介绍
现在你已经了解了计算机编程的基本知识。我们接下来继续研
究一下文件对象模块（Document Object Model－DOM）。DOM的
点击关系起始于窗口对象在每个窗口对象中是一个文件对象
（Document object）。我们将重点谈谈文件对象，看看如何利
用它从你的用户获得各项信息，并且动态显示新的信息。

我们已经看国文件对象的一个属性－图象数组（Images
array）。在第3课中，文件中第1个图象可以通过改变其src属
性被修改。

例：

window.document.images[0].src='some_new_picture.gif';

该命令将把文件中的第1个图象该到一个名为
some_new_picture.gif的新图象。在DOM中，图象数组中的每个
图象也是对象。所以images[0].src指令象对对象那样发挥作用，
它的意思就是：从Image数组中调用Image的中的对象image[0]，
并设定其src属性。将其翻译过来即：从该窗口中调用文件
（document）属性，从该文件的图象数组中调用第1幅图象，并
将其src属性该为图象some_new_picture.gif。

Image对象还有其它很多有趣的属性，例如，你可以让JavaScript
在作其它事之前检查一幅图象是否已经完全载入。但是，我们
只能在以后的课程中谈到这些属性。今天，我们将谈谈反馈表单
及如何在JavaScript中应用反馈表单。

keaide · 发表于 2006-8-1 22:52

第二页：介绍反馈表单
　

反馈表单是HTML 1.0规范的一部分。许多人对其并不很了解。
很多人只以为它只能由于用户端CGI编程。其实，即使你不是
CGI程序员，反馈表单也会为你提供许多功能。而JavaScript
可被用来为反馈表单添加各种功能。而且无须用户端CGI的辅助。

如果你不了解反馈表单如何工作，请学习HTML入门中的有关课
程。然后在开始学习本课。

首先，在javascript中，反馈表单也被存储在一个对象数组中。
你可以通过window.document.images[0]调用图象数组中的第一
幅图象，你也可以用window.document.forms[0]调用反馈表单
数组中的第1项表单。你可以为图象命名，页可以以类似的方式
为反馈表单命名。例如，如果该反馈表单

的编程如下：

<form name="first_form">

<input type="text" name="first_text" size="40"
value="Power to the primates!">

</form>

你可以用以下两种方式之一引用该表单：

var the_form = window.document.forms[0];

var the_same_form = window.document.first_form;

更多的时候，你需要引用到表单内的元素，例如上例中的文字域。>>

keaide · 发表于 2006-8-1 22:52

第三页：控制文字域的值
将鼠标滑过该链接看看会发式什么事情。


Yes, and I know it.  No!

通过改变文字域的值就可实现这种奇妙的变换。

<form name="first_form">

<input type="text" name="first_text"
value="Are you happy?">

</form>

改变文字域的链接为：

<a href="#"
onMouseOver="window.document.first_form.first_text.value='Clap clap!';">
Yes, and I know it.</a>

<a href="#"
onMouseOver="window.document.first_form.first_text.value='Sour puss!';">
No!</a>

意思是说，表单调用第1个表单，并将其值设为 'Clap clap!'第
2行作用相似。这同改变图象的src非常相似。只不过文字域改变
的是值。

对textareas也可以采用类似的方法改变值:

Mouse over below to see the first verse of
The Webmonkey song, adapted from
"I Wanna Be Like You" (The Monkey Song)
from Walt Disney's The Jungle Book
written by Richard M. Sherman and Robert B. Sherman


Part 1  Part 2

表单编码：

<form name="form_two">

<textarea name="the_textarea" rows=10 cols=60>

Mouse over below to see the first verse of

The Webmonkey song, adapted from

"I Wanna Be Like You" (The Monkey Song)

from Walt Disney's The Jungle Book

written by Richard M. Sherman and Robert B. Sherman

</textarea>

</form>

注意该表单有一个名字：form_two,，并且文字区也有一个名字：
the_textarea。

其链接和文字域的设定方法基本相同：

<a href="#"
onMouseOver="window.document.form_two.the_textarea.value=first_part;">
Part 1</a>

<a href="#"
onMouseOver="window.document.form_two.the_textarea.value=second_part;">
Part 2</a>

唯一的不同之处在于将一个变量赋值给textareas，而不
是将字符串赋值给它。该变量在HTML首部已经做了定义。
以下是变量的字符串赋值：

var first_part = "Now I'm the king of the swingers\nOh,
the jungle VIP\nI've reached the top and had to stop\nAnd
that's what botherin' me";

　

注意"\n"是换行符。如果你在一个<pre> 并且或在一个
textarea中写字，"\n" 换行符非常方便。

除了改变表单元素的值，JavaScript还可以让你检测在表
单中进行的事件。

<a href="#"
onMouseOver="window.document.form_two.the_textarea.value=first_part;">
Part 1</a>

<a href="#"
onMouseOver="window.document.form_two.the_textarea.value=second_part;">
Part 2</a>

唯一的不同之处在于将一个变量赋值给textareas，
而不是将字符串赋值给它。该变量在HTML首部已经做
了定义。以下是变量的字符串赋值：

var first_part = "Now I'm the king of the swingers\nOh,
the jungle VIP\nI've reached the top and had to stop\nAnd
that's what botherin' me";

　

注意"\n"是换行符。如果你在一个<pre> 并且或在一个
textarea中写字，"\n" 换行符非常方便。

除了改变表单元素的值，JavaScript还可以让你检测在
表单中进行的事件。>>

keaide · 发表于 2006-8-1 22:52

第四页：文字域事件
　

文字域可以链接onBlur、onFocus、和onChange事件。当有
人点击文字域的里边时则发生onFocus事件。而如果点击文
字域的外面或按了tab键时则发生onblur事件。如果有人改
变了文字域内的内容然后转到文字域外部的区域时则发生
onChange事件。
试着做这些事情看下面的文字域会发生什么情况。

以下是编制方法：文字域的编码：

<input type="text" name="first_text"

onFocus="writeIt('focus');"

onBlur="writeIt('blur');"

onChange="writeIt('change');">

每一个事件处理器调用函数writeIt()，该函数在
首部中已作了定义。首部中的编码如下：

<head>

<title>Text Field Events</title>

<script language="JavaScript">



</script>

</head>

前几行是典型的JavaScript预定义。主体中的第1
行

var word_with_return = the_word + "\n";

将一个变量word_with_return进行初始化为函数处
理后的字符串并加上换行符"\n".。注意"\n" 是标
准的计算机指令。
下一行

window.document.first_form.the_textarea.value += word_with_return;

将文字区域的值设置为其原值加新变量。其作用相
当于

window.document.first_form.the_textarea.value =

window.document.first_form.the_textarea.value + word_with_return;

目前我们已经学习了文字域和文字区域（值）的属性，接下
来我们学习文字域和文字区域处理所用的方法：blur()、
focus()、和select()。
下面的链接显示了focus() 和()如何工作。注意他们工作一
次后可能会终止功能。

Mouseover to focus  Mouseover to select

以下为表单和链接的编码：

<form name="method_form">

<input type="text" name="method_text" size=40 value=
"Hey, hey, we're the monkeys">

</form>

<a href="#" onMouseOver=
"window.document.method_form.method_text.focus();">
Mouseover to focus</a>

<a href="#" onMouseOver=
"window.document.method_form.method_text.select();">
Mouseover to select</a>

其使用方法和调用任何对象方法的做法是一样的：
object_name.method(). 该文字域的名称是
window.document.form_name.text_field_name，
所以用下列语句就可调用文字域的focus()方法。

window.document.method_form.method_text.focus();

>>

keaide · 发表于 2006-8-1 22:53

第五页：反馈表单处理器
　

表单也是对象；他们有自己的方法、属性、及事件
处理器。其中有一项就是onSubmit。
onSubmit的调用有以下两种情形：如果用户点击递
交（Submit）按钮，或用户在文字域内按了回车
键。试着点击下面的Submit按钮看会发生什么情
况。

在Netscape中，点击一个没有结果事件处理的
Submit按钮通常会导致刷新原有的页面。为了避免
这种情况，你可以这样做：

<form onSubmit="return false;">

<input type="submit" value="Submit">

</form>

试着点击下面的按钮:

Javascript用return false阻止浏览器刷新页面。
另一个例子是阻止一个href转向赋值的URL 。例
如：链接

<a href="http://www.mattmarg.com/"
onClick="return false;">mattmarg!</a>

不会转向任何URL，因为你给onClick赋值为return
false。
以下是一个从用户获取信息的表单。在文字域中输入一些
内容然后点击Return:

Who does the monkey love:

以下是表单的编码：

<form name="text_entry_form"
onSubmit="monkeyLove(); return false;">

<b>Who does the monkey love: </b>

<input type="text" name="monkey_love" size="40">

</form>

当你点击文字域中的Return时，onSubmit处理器被
调用执行函数monkeyLove()，该函数将改变文字域
内的值。
如果onsubmit处理器中没有return false语句的
话，执行函数monkeyLove()会改变文字域内容，但
由于同时网页内容会被刷新，从而又会将文字域的
内容返回到原有的内容。为了阻止这种现象，就必
须在onSubmit中加入return false.

以下是monkeyLove() 函数的内容：

function monkeyLove()

{

var who_it_is =
window.document.text_entry_form.monkey_love.value;

who_it_is =
'The monkey loves ' + who_it_is;

window.document.text_entry_form.monkey_love.value =
who_it_is;

}

下面这个例子中没有加入return false，你将看到会发生
什么情况：
Who does the monkey love:

>>

keaide · 发表于 2006-8-1 22:53

第六页：文字域的练习
　

该练习扩展了我们在第4课中所学的东西。它使文字区域的功能就
象是浏览器的地址框（Location box）。如果你在其中输入http:
//www.mattmarg.com/ 或www.mattmarg.com，它将打开一个窗口显
示Mattmarg.com网站：

试着自己编写代码实现该功能。>>