分享
 
 
 

JavaScript 基础教程 第二课

王朝asp·作者佚名  2006-01-09
窄屏简体版  字體: |||超大  

第二页:变量介绍

如果你学过代数,你一定见过变量。如果没学过也不要紧。变

量是JavaScript存储信息的简单方式。例如,当你写:

"x=2," "x"是一个变量,它存储值为2。如果而后你又说"y=x+3,"

"y"将具有值“5”

这里是一个使用变量的JavaScript例子。

在本例中我们一步一步浏览源码 你将看到:

<script language="JavaScript">

<!-- hide me

开始的这两行我们已经见过。这是任何JavaScript程序都必须

的序曲。

// load up some variables

var secs_per_min = 60;

var mins_per_hour = 60;

var hours_per_day = 24;

var days_per_year = 365;

第一行是一个注释。含义很明确。

下几行是变量申明,有几样事情需注意:

当首次用一变量时,应以“var”申明。

尽管以var 作为变量申明严格说并不必要,但这是一个好

习惯。当我们讨论接下来的两课时,我们将知道为什么。

变量必须以字母或强调性字符起始。

第一个字符后,变量须有数字。因此monkey_23即是合法的

变量名。

变量名多数是大小写敏感的,但对不同版本的JavaScript也不

尽然。

这意味着变量Loop和loop在有些浏览器中是不同的。一般

情况下,建议坚持使用一种命名习惯并保持不变。我本人

习惯使用变量间加下划线。其他人有喜欢变量间首字大

写的,如secsPerMin。

变量应描述其目的。

象 x, y, 或hack_hack_hack对想要了解你的语言的人来

说没有什么用。别使变量名太长以致敲起来费劲,但要长

到有一定的描述力。

在定义变量时就可赋于其一个值,也可今后在给出。

在该例中每个变量开始定义时就被赋于了值。不一定非

如此,今后的例子中我们将看到即使我们不知道其值,我

们也可很好的定义它。

语句以半括弧结束。

语句是JavaScript的表达句,半括弧是结束标志。空格和

空行是可被JavaScript编译器忽略的,他们仅是为人们读

起来方便,该例可被写成长长的一行,但即使加上注释,

看起来也会极其吃力。

结束前我要提一下有时半括弧是不必须的,你可能也注意

到有的人编的语句没有半括弧作为结束。但加上它是个好

习惯,这不仅是由于你的程序的可读性会好的多,这也可

减少空行,这些空行会塞满你的程序Webmonkey的习惯是

在每一语句后加上半括弧作为结束。

// do some calculations

var secs_per_day = secs_per_min * mins_per_hour * hours_per_day;

var secs_per_year = secs_per_day * days_per_year;

这里我们看到了一些基本的算术。每当JavaScript执行了该

语句,变量secs_per_year将是无论得到的什么数乘以60, 60,

24, 和 365。以后,无论何时遇到变量secs_per_year,它

将以这些巨大的数字替代。

// end hiding -->

</script>

这里没什么新鲜的,是一个JavaScript片的结束。

这是该例中头文件中JavaScript的全部,当JavaScript执行这

些代码时,上述变量将被定义。但此时这些变量尚未做任何

事,这是在该例主体中要完成的事。

第三页:首个变量例子的程序主体

现在我们已经定义了变量,让我们用它来做一些事。

<script language="JavaScript">

<!-- hide me

这里介绍如何用JavaScript写变量和网页。

// here's how to use JavaScript to write out HTML

document.writeln("<b>The monkey dances ");

document.writeln(secs_per_year);

document.writeln(" seconds per year.</b><p>");

这里是关于这三行的兴趣点:

document.writeln() 对于网页写入插入词。

在document.writeln()中可作大量细节之事,但到此为止

你只需记住你是在<script>和</script>标签之间,必须

用document.writeln("blah!")在网页中写HTML

引号中的字符显现出来;引号外的字符被认为是变量。

注意在第一和第三行中,引号中的是我们想要显现的,

而secs_per_year无引号。因此JavaScript认为它是变量

并交换成变量值。幸好,在头文件中我们定义

了secs_per_year是一大数,因此可被显现,否

则JavaScript将报错。

引号中的任何字都被称为字符串,JavaScript不编译它。

本例中使用的是双引号("),也可使用单引号('),二者可

互换。若第二行中的是

document.writeln("secs_per_year"),JavaScript

将直接将secs_per_year显现,而不是31,536,000.

本例和字符的区别很重要,因此在我们继续下去之前,保

证你已读懂了这段。

你可以用document.writeln() 写HTML语言。

注意第一和第三行的<b> 和 </b> 标签。

这即是该例的概要。我们常见的一个问题是:“通常什么出现

在头文件中,什么出现在主体文件中?”

一般这关系不大。好的习惯是把大多数JavaScript放在页面的

头上。这是因为比主体要先读到,所以出现在主体中的变量

(如secs_per_min)都在头中定义了。当secs_per_min

在JavaScript试图执行document.writeln(secs_per_min)命令

后定义则JavaScript会报错。

好,现在我们准备作一个关于变量的练习,但首先再注意一下

字符串

第四页:字符串的魔力

如前一节所提,引号间的字符都称为字符串,无论单双引号。

就如变量可为数字一样,它也可为字符串。因此可说:

var nice_monkey = "The monkey smiles at you and recites Shakespeare.";

var bad_monkey = "The monkey scowls at you and burps.";

申报变量时即给变量赋值,使它等于这些字符串,于是当你想

写这些字符串时,你可写:

document.writeln(nice_monkey);

这里是可用字符串做事的例子。

仔细看一看源码,你将常会发现一些新鲜,有趣的事。

看以下新鲜之处:

var monkey = prompt("What's the monkey's name?", "The monkey");

这里我们称为用户反馈提示方式,当它被调用时,启动一个对

话框请求用户输入信息。用户完成后敲OK返回信息。在上行中

返回信息放入其变量中。

注意该提示方式有两个变量,且都是字符串。第一个在对话框

输入区上面显示,本例中它是:“What's the monkey's

name?”。本例中第二个参数"The monkey",放置输入框的缺

省值。如果你不想要缺省值,则在第二个参数加上引号,就象

这样:

var monkey = prompt("What's the monkey's name?", "");

下一行是直接变量分配,就象此前我们看到的:

var techy_monkey = monkey + demanding + tech;

该行介绍了一个字符串操作器:累加标记。当两个字符串间出

现累加标记时,则这两个变量出现在同一字符串中,这称为

连锁”。于是上行创造了一个新的变量称为techy_monkey

含有包含上述三个变量的字符串。换一句话说,其结果即是

"The monkey" + "demands, no, insists upon receiving" +

"a computer that won't crash, and a homemade browser!"

var techy_monkey = monkey + demanding + tech;

于是也可说:

var techy_monkey = "The monkey demands, no, insists upon

receiving a computer

that won't crash, and a homemade browser!";

下面一段显示更多的使用字符串的诀窍。其工作原理是相同

的,我们只看三行:

var italic_hippy = hippy_monkey.italics();

var shouting_hippy= hippy_monkey.toUpperCase();

var red_bold_tech = bold_tech.fontcolor('red');

第一行是说:“使该字符串包含变量以斜体显示”,这实际上

即是:

var italic_hippy = "<i>" + hippy_monkey + "</i>";

但看起来要好的多!今后在JavaScript写document.writeln

(italic_hippy)时,你得到的是斜体显示的字符。

下一行讲述的技巧是在HTML中实现不了的,它使得hippy_monkey

中所有字符以大写显示

第三行显示改变字符串属性的例子。。所有的字符具有颜色,

你可用string.fontcolor('new color');命令改变其颜色。也

可这样作:

var red_bold_tech = "<font color='red'>" + bold_tech + "</font>";

但它阅读起来不如这样容易:

var red_bold_tech = bold_tech.fontcolor('red');

本例中除本行外你还可看到其他的应用:

document.writeln(bold_tech + "<br>");

它除替代显示一字符串外,还连接两个字符串然后显示结果。

也可写成两行,象这样:

var broken_bold = bold_tech + "<br>";

document.writeln(broken_bold);

但这要创建另一个变量,并不必要的写另一行。

现在我们已学习了所有的关于变量和字符串知识,请做一个练习

第五页:变量练习

请不要用HTML在<body> and </body>标签间写一个mad-lib。

当你完成该工作后,该开始if-then子句练习了。

第六页:if-then子句

"if-then"子句的应用可以使得程序根据用户输入的值作出不同

的反应。例如你可以写一段程序使得它对你与对其他人反应

不同。这里是它的基本格式:

if (some condition is true)

{

do something;

do something;

do something;

}

本结构的重要部分:

以单词 "if"开始 (if 必须小写).

圆括弧中是条件:非真即伪。

如果条件为真的话执行花括弧中的语句。

记住:空格是唯一保持程序可读性的东西。当然你可以将整

个if-then语句写在一行中,但它读起来就费劲了。

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

第七页: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 练习中来!

第八页:if-then练习

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

第九页:链结事件

一旦用户点击一个链结,或将鼠标移到其上,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。

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

第十页:图片交换

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() 工作细节一样,本

例我也没有告诉图片交换的工作原理。你将在下一讲关于“目

标导向编程”及“文件目标模块”中详述。

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

现在,该作今天的家庭作业了

第十一页:练习2

欢迎你!

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

你的家庭作业是写一个象这样的程序。这需要一些技巧,多花

些时间没关系。完成后,看一下本例的源码对比一下,然后到

第二讲的复习

第十二页:复习

现在来复习一下今天所学到的。

变量

变量值可为数字或字符串。命名变量时它有一些限制和规

律需记住。

语句

语句以半圆括号结束。

字符串

字符串是引号标记中的做法序列,引号可是单引号,也可

是双引号。可用字符串作许多奇妙之事。你可用”+“来

连接两个字符串。

document.writeln()

可用document.writeln() 来写文本和网页中的HTML。

prompt

你可用prompt来得到用户的输入反馈。

if-then-else

可用if-then-else子句使你的JavaScript依不同的用户反

应给予不同的表现。

链接事件

在一个href中的onClick和onMouseOver可基于用户反应运

行JavaScript。

图片变换

图片命名后,可用JavaScript改变所显示的图片。

如果你感到你已经全部掌握了上面我们所讲的,那么祝贺你!

还有许多东西要学。下一次,我们要切入JavaScript的心脏:

文件目标模块,我们也将学到如何打开并操作窗口和frames ,

并开始建造我们自己的新的浏览器。

 
 
 
免责声明:本文为网络用户发布,其观点仅代表作者个人观点,与本站无关,本站仅提供信息存储服务。文中陈述内容未经本站证实,其真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
2023年上半年GDP全球前十五强
 百态   2023-10-24
美众议院议长启动对拜登的弹劾调查
 百态   2023-09-13
上海、济南、武汉等多地出现不明坠落物
 探索   2023-09-06
印度或要将国名改为“巴拉特”
 百态   2023-09-06
男子为女友送行,买票不登机被捕
 百态   2023-08-20
手机地震预警功能怎么开?
 干货   2023-08-06
女子4年卖2套房花700多万做美容:不但没变美脸,面部还出现变形
 百态   2023-08-04
住户一楼被水淹 还冲来8头猪
 百态   2023-07-31
女子体内爬出大量瓜子状活虫
 百态   2023-07-25
地球连续35年收到神秘规律性信号,网友:不要回答!
 探索   2023-07-21
全球镓价格本周大涨27%
 探索   2023-07-09
钱都流向了那些不缺钱的人,苦都留给了能吃苦的人
 探索   2023-07-02
倩女手游刀客魅者强控制(强混乱强眩晕强睡眠)和对应控制抗性的关系
 百态   2020-08-20
美国5月9日最新疫情:美国确诊人数突破131万
 百态   2020-05-09
荷兰政府宣布将集体辞职
 干货   2020-04-30
倩女幽魂手游师徒任务情义春秋猜成语答案逍遥观:鹏程万里
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案神机营:射石饮羽
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案昆仑山:拔刀相助
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案天工阁:鬼斧神工
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案丝路古道:单枪匹马
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:与虎谋皮
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:李代桃僵
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:指鹿为马
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案金陵:小鸟依人
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案金陵:千金买邻
 干货   2019-11-12
 
推荐阅读
 
 
 
>>返回首頁<<
 
靜靜地坐在廢墟上,四周的荒凉一望無際,忽然覺得,淒涼也很美
© 2005- 王朝網路 版權所有