JavaScript教程

keaide

第六页：if-then子句
"if-then"子句的应用可以使得程序根据用户输入的值作出不同
的反应。例如你可以写一段程序使得它对你与对其他人反应
不同。这里是它的基本格式：


if (some condition is true)

{

    do something;

    do something;

    do something;       

}


本结构的重要部分:

以单词 "if"开始 (if 必须小写).
圆括弧中是条件：非真即伪。
如果条件为真的话执行花括弧中的语句。
记住：空格是唯一保持程序可读性的东西。当然你可以将整
个if-then语句写在一行中，但它读起来就费劲了。

这里是一个if-then子句的例子。

keaide

第七页：if-then语句的例子
如果你在即时对话框中键入yes，你将在看到本页其他部分前收
到一个亲切的问候。若敲入别的则没有。

这里是该语句的核心：

var monkey_love = prompt("你喜欢网猴吗？","敲入是
或否。";

if (monkey_love == "是"

{

alert("谢谢！很高兴您能来这儿！请往下读吧！";


}

第一行你见过。它唤起一个对话框并将用户的反馈调入变
量monkey_love中。但第二行就有些不同：它有个条件，即如果
变量monkey_love等于值"是" ，则运行花括号中的语句。若它
等于其他值，则不运行。

注意该条件中的两个等于标记，这是人们容易搞混的地方之
一。如果你只用一个标记，实际上是告诉JavaScript测试是
否monkey_love等于 "是"。幸运的是，多数浏览器在你运行这
些语句时会识别这些错误并警告你。但最好现在开始就注意别
犯这种错误。

其他重要的条件是：

(variable_1 > variable_2)  is true if variable_1 is greater than variable_2

(variable_1 < variable_2)  is true if variable_1 is less than variable_2

(variable_2 <= variable_2)  is true if variable_1 is less than or equal to variable_2

(variable_1 != variable_2)  is true if variable_1 does not equal variable_2

有两个方法可使你的条件更合理：

在运行花括号中的语句前如果你想要两件事为“是”，可这
样做：


if ((variable_1 > 18) && (variable_1 < 21))

{

  document.writeln("variable_1 can vote, but can't drink.";

}



注意这里的两个“&&”在JavaScript中这是“与”的意思。也
注意整个子句有两个部分，&&须在圆括号中。

若想两件事之一为真，这样做：


if ((variable_1 == "bananas" || (variable_1 == "JavaScript")

{

  document.writeln("The monkey is happy because it has " +   variable_1);

}

回到if-then 练习中来!

keaide

第八页：if-then练习
您喜欢black？ 网猴认为您很困惑。

如果这些都没问题后, 那么开始作链结事件。

keaide

第九页：链结事件
一旦用户点击一个链结，或将鼠标移到其上，JavaScript发送
一个链结事件。一种链结事件叫做onClick, 当用户点击它时才
发送。另一种叫onMouseOver，用户将鼠标移到上面时即发送。

你可用这些事件来影响用户所见。这里是一个如何使用链结事
件的例子，试一试，再瞧瞧源码，然后我们来一行一行的复习。

第一个有趣的事情是没有<script> 标签。这是因为出现在
onClick 和 onMouseOver引号中的任何事度是可为JavaScripts
编译的。事实上句末前的半括号内允许你将JavaScripts写成
一行，你可将整个JavaScripts程序放在一个onClick的引号
内，但看上去会很难看。

请看第一行：

<a href="#" onClick="alert('Ooo, do it again!');">Click on me!</a>



这就象一个正式的定位标签，但它具有神奇的onClick=""这即
说“当某人点击该链结时运行该引号中的JavaScripts”注意
在alert后有一有一中止性的半括号。

也请注意在href=""的引号中没有东西，这表明虽然有链结，但
当你点击时那儿也去不了。

下一行是：


<a href="#" onMouseOver="alert('Hee hee!');">Mouse over me!</a>



这就象第一行，只是用onMouseOver代替onClick。

现在我们学完了链结事件，请进入奇妙的图片交替！

keaide

第十页：图片交换
JavaScripts的一个主要应用是其具有使你移动鼠标时图片自动
切换功能。不幸的是，微软的IE3.0不支持这种应用。用户最好
立即更新到IE4.0或改用Netscape 3.0。

这里是一个快捷的基本的图片交换例子。

让我们一步布的剖析这个例子，

第一行是：


<img src="button_r.gif" name="the_image">

这就象一个标准的 <img src= > 标签，只是它被给了一个名
字：the_image， 名字是任意取的：my_image, a_box......
但不许有任何空格在里面。

下一行是：

<a href="#" onMouseOver="document.the_image.
src='button_d.gif';">change</a>

这是图片交换发生的地方。就象你以前见到的onMouseOver。
出现在onMouseOver的引号中JavaScript主要之处是：

document.the_image.src='button_d.gif';


该句是说：“找到叫'the_image'的图片并将其src 变为
button_d.gif." 注意整个语句使用双引号，而'button_d.gif'
使用单引号。尽管二者可互换，但注意如果一组引号存在于另
一组引号之中，别搞混了。你可写成" 'something' "
或' "something" ' ，但不可写成：" 'something" ' or "
"something" ".明白了吗？

正如我没告诉你许多document.writeln() 工作细节一样，本
例我也没有告诉图片交换的工作原理。你将在下一讲关于“目
标导向编程”及“文件目标模块”中详述。

请注意！要交换的图片须和原图片尺寸一样！否则，它变形。

现在，该作今天的家庭作业了。

keaide

第十一页：练习2
欢迎你！ stranger

移动鼠标到下图，等到一个你喜欢的图，点击它。



你的家庭作业是写一个象这样的程序。这需要一些技巧，多花
些时间没关系。完成后，看一下本例的源码对比一下，然后到
第二讲的复习。

keaide

第十二页：复习
现在来复习一下今天所学到的。

变量
变量值可为数字或字符串。命名变量时它有一些限制和规
律需记住。
　
语句
语句以半圆括号结束。
字符串
字符串是引号标记中的做法序列，引号可是单引号，也可
是双引号。可用字符串作许多奇妙之事。你可用”＋“来
连接两个字符串。
document.writeln()
可用document.writeln() 来写文本和网页中的HTML。
prompt
你可用prompt来得到用户的输入反馈。
if-then-else
可用if-then-else子句使你的JavaScript依不同的用户反
应给予不同的表现。
链接事件
在一个href中的onClick和onMouseOver可基于用户反应运
行JavaScript。
图片变换
图片命名后，可用JavaScript改变所显示的图片。
如果你感到你已经全部掌握了上面我们所讲的，那么祝贺你！
还有许多东西要学。下一次，我们要切入JavaScript的心脏:
文件目标模块，我们也将学到如何打开并操作窗口和frames ,
并开始建造我们自己的新的浏览器。

keaide

第一页：第三天课程简介
在前面的课程中，我们学习了:

如何把JavaScript 加到你的 HTML页中。
如何用对话框和变量来存储并利用用户输入。
如何用 JavaScript 写HTML
JavaScript如何用 if-then 语句作出选择。
如何使用链接事件制作依据用户行动而反应的网页。
怎样制作基本的图片交换。
至今我们已经了解了许多,但我们尚未解释其工作原理。例如上
一课中我演示的 window.document.monkey_image.src =
"happy_monkey.gif"将把名为happy_monkey.gif的图片替换为
名为monkey_image的图片。但是window.document是什么? .src
是从哪里来的? 同样, 你看到了document.writeln("monkey"。
但为什么是 document.writeln 而非 writeln?

上述答案可在文件目标模块(JavaScript Document Object
Model，简写为DOM)中解答。DOM是JavaScript网页的方式，它
是所有JavaScript编程的核心. 本讲我们主要讨论DOM，下一讲
中我们将教你电脑编程基础的剩余部分。下两课结束后你将了
解JavaScript所有主要思路和语法。剩下所需要学习的是一些
细节、技巧，以及如何避免混乱。

现在我们开始踏上DOM之路, 先学一下如何用JavaScript打开并
操作新的浏览器窗口。

keaide

第二页：窗口操作介绍
在学习如何在JavaScript中打开窗口前，你应已经知道如何
在HTML中打开它了。多数当前流行的浏览器中, 你可用一个href
语句打开一个新窗口，例如，点击本连接即可打开另一个窗口。

HTML 是这样作的:

clicking on <a
href="yer_new_window.html" target="yer_new_window">this
link</a> will open another window.


重要的是要了解目标链接打开的窗口是上面名为
"yer_new_window" 相伴的窗口。一旦你已经有了一个以
"yer_new_window"作为目标的herf,那么，请先关闭它。无论你
在URL中置入何种链接，都将打开原来的窗口。想了解外的意
思吗？点击这里，然后打开另一个HTML 页

本课的目的是调用目标名，本例中即窗口名yer_new_window。

既然我们已经简单的重温了一下href目标, 那么该开始学习在
JavaScript中打开窗口.

keaide

第三页：Javascript中的窗口操作
在HTML中打开窗口应用极为普遍，但也有一些缺陷；用户浏览
器决定窗口看起来是什么样的，你左右不了其窗口的大小及
式样。幸运的是，JavaScript给了你这种控制权。

看一看其原由:

      
window.open("URL","name","features";


本语句以你调用时采用的第一个参数URL来打开一个窗口。这里
是以URL，实际中可写成
"http: //www.hotwired.com/webmonkey/" 或其他类似的东西。

第二个参数是窗口的名字。这就象上页中我们看到的名字，如
果你打开窗口时已有一个同名窗口打开，那么URL将把open语句
送到原先已打开的窗口。

第三个参数，features，是一个窗口所具有的不同特征。这是
个可选参数，我们先做关于头两个参数的练习。

这里是一些用JavaScript打开窗口的例子。