JavaScript高级教程1.docx
《JavaScript高级教程1.docx》由会员分享，可在线阅读，更多相关《JavaScript高级教程1.docx（80页珍藏版）》请在冰豆网上搜索。
JavaScript高级教程1
JavaScript高级教程：
一、第一日：
第一页：
Javascript高级教程
欢迎您继续学习Javascript高级教程。
在此之前我们已经学习
了Javascript5日教程。
在这一阶段的学习中我们将继续学习在
上次的教程中还没有来得及谈及的问题。
我还将向你们展示
Javascript的许多神奇功能，使你能够制作真正对多媒体应用
程序。
以下是我们将涉及的内容：
∙给变量赋值
∙If-then语句
∙For和while循环
∙编写你自己的函数
∙打开及控制窗口
∙读写HTML表单
∙应用数组
∙控制图片转换
如果这些课题你听起来还比较陌生的话，我建议你先阅读一下
先前的Javascript5日教程。
第二页：
本教程的课程计划
在上次的JavaScript教程中我们学习了JavaScript得核心内
容：
一些重要得语法已经最常用得一些对象。
现在我们将加深
你的JavaScript知识使你成为一个真正的JavaScript大师。
以
下就是你成为一个真正的大师必须走过的路。
第1日：
介绍和理清头绪，并介绍几个小技巧，重点介绍一种新的
if-then-else语句以及变量真正含义。
第2日：
神奇的字符串处理，保存访问过你的网站得读者的信息，
并介绍一种新的数组。
第3日：
甚至网页的时间线，使不同的事件在不同的时间发生，并
且介绍如何使你的JavaScript脚本在各种浏览器上都能
运行。
第4日：
预载图象，图象映射，及JavaScript。
生成你自己的对象
及使用循环快捷地找到要找的对象。
第5日：
开发和测试JavaScript的工具，以及使你的JavaScript代
码迅速运行的窍门。
学习完本次的教程之后你将对JavaScript有了比较完整地了
解。
掌握了这门知识你就能够制作各种互联网应用程序了。
第三页：
一个if-then-else的快捷方式
在JavaScript中最常用得语句就是if-then-else。
下面是一
个奖励猴子的例子：
if（monkey_behavior=="good"）
{
vartoy="videogames";
}else{
vartoy="rocks";
}
用通俗的英语翻译上面的代码意思是说：
“如果猴子表现得
好，就允许他玩电子游戏，否则就扁它。
”上面的例子显示
了if-then-else语句的标准格式，但是对于那些喜欢投机取
巧的人，还有一种快捷方式：
vartoy=（monkey_behavior=="good"）?
"videogames":
"rocks";
这个表达式和上面对语句所起的作用是完全一样的。
这个条
件语句有3部分：
测试条件，测试为真时返回的值，以及测试
为假时返回答值。
在上面对例子中，测试条件是
（monkey_behavior=="good"）。
如果测试条件为真，则返回字
符串videogames；如果测试条件为假，则返回分号右边的值：
rock。
这种快捷方式在函数调用中使用时非常便利。
例如，你可以用
它来做下面的事情：
varpassword="opensesame";
varanswer=prompt（"what'sthepassword?
",""）;
alert（（answer==password）?
"welcome!
":
"buzzoff"）;
点击这里你就可以看到代码执行的过程。
根据你所输入的字符
是否是规定单密码，你将受到“欢迎”的信息或者to是蜂鸣。
如果没有这种条件语句，则必须这样书写代码：
:
varpassword="opensesame";
varanswer=prompt（"what'sthepassword?
",""）;
if（answer==password）
{
alert（"welcome"）;
}else{
alert（"buzzoff"）;
}
显然代码长了很多，但是也更容易了解它的含义。
选用何种
条件语句依每个人的喜好而定。
第四页：
什么是变量
这里是一个应用变量的例子：
varhappiness="abananasplit";
alert（"Themonkeysthinkhappinessis"+happiness）;
这行代码声明一个叫做happiness的变量，然后在一个alert对
话框中调用这个变量。
如果你看过别人的JavaScript，你可能
会注意到他们在声明变量时使用了var，这种用法可能会造成
问题。
首先，可能会造成有些版本的MSIE瘫痪，或运行不正
常。
这种情况在Mac机上的MSIE最有可能发生。
其次，如果你编
写很复杂的JavaScripts，你必须编写你自己的函数，所以你必
须了解变量的含义。
正如上次的JavaScript教程:
第四天中所述，函数是被调用后
执行某特定功能的JavaScript程序代码。
最好的函数具有模块
化的特性，你可以控制输入的变量以及输出的结果。
而且一旦
编好之后你就无需担心它会出问题，而且不会和别的函数发生
冲突。
要使编写地函数具备这些稳定的特性，你必须确保不要
轻易改变那些作为参数传递给其他函数的变量.下面对例子显
示了如果你不注意这些细节会造成什么后果。
假设我们编写一
个程序将华氏温度转换为摄氏温度。
点击华氏/摄氏来观察一下
我所指的意思。
如果你转换转换华氏50度，则会出现一条信息：
“华氏50度相当于摄氏10度。
”以下是代码：
functionfahrenToCelsius（fare）
{
temp=（faren-32）*5/9;
returntemp;
}
functionconvertTemp（）
{
temp=prompt（"whattemperaturefahrenheit?
","50"）;
celsius=fahrenToCelsius（temp）;
alert（temp+"degreesFahrenheitis"+
celsius+"degreesCelsius."）;
}
这个程序很简单。
一个叫做convertTemp（）得函数调用另外一个
叫做fahrenToCelsius（）并返回结果。
如果你对本程序不是很懂，
你需要重新学习以下上次的javasript教程第4日。
关于这个例子让人困惑之处在两个函数中都有一个叫做temp得
变量，在convertTemp（）函数中它的作用是储存华氏温度
Fahrenheit值（由用户提供）。
在fahrenToCelsius（）函数中，
它用于计算转换后灯摄氏温度值Celsius。
这个不仅让我们感到
困惑而且也会让这个Javascript程序感到困惑。
如果你试图用
变量运行这段代码就会发生下面的结果：
如果你希望转换华氏
50度，则会显示下面的信息：
"10degreesFahrenheitis10
degreesCelsius."（华氏10度相当于摄氏10度）。
为什么你输入
的是华氏50度，而程序却将其理解为你输入了10度呢？
我们来
研究一下这个程序的执行过程。
当我们调用函数convertTemp（）
并在提示栏中输入了"50"时，我们得到temp=50;然后"temp"
被传递给函数farenToCelsius（）。
在farenToCelsius（）中，参
数faren被设定为50，而"temp"被设定为（50-32）x5/9,其
结果是10。
在返回结果之前，各项参数值是：
faren=50
temp=10
现在farenToCelsius（）将10返回给变量celsius:
temp=10
celsius=10
现在我们得到一个错误的语句：
"10degreesFahrenheitis10
degreesCelsius"。
如果你仔细一些，不要将两个函数中等变
量起同样的名称就可以避免这些问题。
但这也不是最佳解决
方案。
当你不断加入更多的函数时，很难确保你不会将函数中
的变量重名。
而且如果你重复使用许多变量名例如loop,index,
count,和the_name时，使用不同的名称实在是一个很令人头疼
的事。
最好的解决办法是让JavaScript明白在fahrenToCelsius（）函数
中用到达变量temp和在convertTemp（）函数中用到的变量temp
是两码事。
如果每个函数都有只应用于本函数内部的变量temp
你就无需担心不同函数中的同名变量会搅成一团。
而var就是用
于这个目的。
第五页：
变量的使用方法
要使JavaScript中各种同名变量不会发生混淆，你可以在声明
变量时在变量前面加上var。
在一个函数内用var声明后灯的变
量叫做局部变量，它只存在于该函数内部。
通常情况下你应该
尽量使用局部变量。
这里是用var声明后的正确的JavaScript代码：
functionfahrenToCelsius（faren）
{
vartemp=（faren-32）*5/9;
returntemp;
}
functionconvertTemp（）
{
vartemp=prompt（"whattemperatureFahrenheit?
","50"）;
varcelsius=badFahrenToCelsius（temp）;
alert（temp+"degreesFahrenheitis"+
celsius+"degreesCelsius."）;
}
现在当我们输入50时，
（在convertTemp函数内部）temp=50
temp被传递到函数fahrenToCelsius（），在函数fahrenToCelsius
（）内部，参数faren现在被设定为50，然后temp用以下代码
设定：
vartemp=（faren-32）*5/9;
由于这个temp变量前面用var做了声明，所以该变量筒其他函数
中叫做temp的变量不同。
执行完fahrenToCelsius（）时，该函数
种的temp即告消失。
所以在fahrenToCelsius（）返回数值前，
faren=50
（insidefahrenToCelsius）temp=10
（insideconvertTemp）temp=50
fahrenToCelsius（）然后返回它的变量temp值10。
一旦我们
从fahrenToCelsius（）函数中出来，该函数中等temp变量的作用
即告终止。
当fahrenToCelsius（）返回时，它将变量的值设置
为10:
（在convertTemp内部）temp=50
（在convertTemp内部）celsius=10
现在显示的信息将是我们所希望的"50degreesFahrenheitis
10degreesCelsius"。
二、第二日：
第一页：
Javascript高级教程-第2日
今天我们将学习一项很有用而且很有趣的内容：
cookies-这
是用来记录访问过你的网页的人的信息。
利用Cookies你能记录
访问者的姓名，并且在该访问者再次访问你的站点时向他发出
热情的欢迎信息。
你还可以利用cookie记忆用户端的特点-如
果访问者的所接入的网线的速度慢，cookie可以自动告诉你在
给其发送网页的时候只发送尽可能少的图片内容。
只要你在合理的范围内使用cookies（不要用它探询用户的个人
隐私），cookies还是相当实用得。
所以我要向你们介绍cookies
的工作原理，但是在正式开始之前，我们先谈两个JavaScript
内容：
有趣的字符串处理以及相关数组。
第二页：
神奇的字符串处理
为什么必须在开始cookies世界漫游之前必须先学习神奇的字符
串处理呢？
因为cookies也是字符串。
要保存访问者的信息，你
必须首先建立一个特殊的cookie字符串。
然后在访问者又返回
你的站点时读取该信息，而此时你必须对该cookie字符串进行
解码。
要生成和解释这些字符串你必须了解JavaScript的字符
串工作原理。
所以我们必须先要了解字符串。
如果你是一个新
手，你应该先阅读一下上次的javascript教程第2日的内容，一
下是一个例子：
varnormal_monkey="Iamamonkey!
";
document.writeln（"Normalmonkey"+normal_monkey）;
varbold_monkey=normal_monkey.bold（）;
document.writeln（"Boldmonkey"+bold_monkey）;
这里的声明：
varbold_monkey=normal_monkey.bold（）;
和下面对声明是等同的：
varbold_monkey=""+normal_monkey+"";
第1个版本的声明看起来要简明得多。
这里用到了字符串对象中
的bold对象，其他的字符串对象还有indexOf,charAt,
substring,以及split,这些方法可以深入字符串的组成结构。
首先我们研究一下indexOf。
indexOf
indexOf用于发现一系列的字符在一个字符串中等位置并告诉你
子字符串的起始位置。
如果一个字符串中部包含该子字符串则
indexOf返回returns"-1."这里是一个例子：
varthe_word="monkey";
让我们从单词"monkey"开始。
varlocation_of_m=the_word.indexOf（"m"）;
location_of_m（字母m的位置）将为0，因为字母m位于该字符串
的起始位置。
varlocation_of_o=the_word.indexOf（"o"）;
location_of_o（字母o的位置）将为1。
varlocation_of_key=the_word.indexOf（"key"）;
location_of_key（key的位置）将为3因为子字符串“key”以字母
k开始，而k在单词monkey中的位置是3。
varlocation_of_y=the_word.indexOf（"y"）;
location_of_y）字母y的位置）是5。
varcheeky=the_word.indexOf（"q"）;
cheeky值是-1，因为在单词“monkey”中没有字母q。
indexOf更实用之处:
varthe_email=prompt（"What'syouremailaddress?
",""）;
varthe_at_is_at=the_email.indexOf（"@"）;
if（the_at_is_at==-1）
{
alert（"Youloser,emailaddressesmust
have@signsinthem."）;
}
这段代码询问用户的电子邮件地址，如果用户输入的电子邮件
地址中不包含字符则提示用户＂＠你输入的电子邮件地址
无效，电子邮件的地址必须包含字符@。
＂
charAt
chatAt方法用于发现一个字符串中某个特定位置的字符。
这里
是一个例子：
varthe_word="monkey";
varthe_first_letter=the_word.charAt（0）;
varthe_second_letter=the_word.charAt
（1）;
varthe_last_letter=the_word.charAt（the_word.length-1）;
the_first_letter（第1个字符）是"m"
the_second_letter（第2个字符）是"o"
the_last_letter（最后一个字符）是"y"
注意利用字符串的length（长度）属性你可以发现在包含多少个
字符。
在本例中，the_word是"monkey"，所以the_word.length
是6。
不要忘记在一个字符串中第1个字符的位置是0，所以最后
一个字符的位置就是length-1。
所以在最后一行中用了
the_word.length-1。
第三页：
子字符串
子字符串（substring）和charAt有些象，不同之处在于它能够
从一个单词中抓取整个的子字符串，而不只是字母，这里是其
格式：
varthe_substring=the_string.substring（from,to）;
"From"指的是子字符串中第１个字母的位置，"to"有点奇特，
它是该子字符串中比最后一个位置大１的位置．使用这种神奇
的方法你可以标记子字符串的起始和结束位置，用"to"的位置
减去"from"的位置就会得出该子字符串的长度：
varthe_string="monkey";
varclergy=the_string.substring（0,4）;
vartool=the_string.substring（3,6）;
运行该段代码后变量clergy的值为"monk";变量tool的值为
"key"。
子字符串常和indexOf一起使用，将字符串分成若干块．例如，
你可以从一个给定的URL中抽取出其域名：
varthe_url=prompt（"What'stheURL?
",""）;
varlead_slashes=the_url.indexOf（"//"）;
vardomain_start=lead_slashes+2;
varwithout_resource=the_url.substring（domain_start,the_url.length）;
varnext_slash=without_resource.indexOf（"/"）;
vardomain=without_resource.substring（0,next_slash）;
这段代码的意思是：
如果你输入
"
名就是""．如果这个方法对你来说有些麻
烦，我将向你介绍如何使用split方法简化其执行过程．但是首
先我们作一些分析．
基本的技巧是将第１个斜杠和第２个斜杠之间的内容分离出来：
varthe_url=prompt（"What'stheURL?
",""）;
这行代码向用户询问一个URL．假设用户输入了
"
varlead_slashes=the_url.indexOf（"//"）;
这行代码确定第一个双斜杠的位置．在本例中lead_slashes
的值是５，因为双斜杠的位置从５开始．
你可能会想，通常德URL都是以http:
//开始，所以双斜杠的位
置肯定是在５开始，为什么还要加入indexOf这一段多余的代
码呢？
但是问题的关键在于你不知道用户在填入URL时是否一定
填入http:
，他们也许会不小心多键入了一个空格，也许他们所
键入的URL在一个加密服务器上，其URL是
"．在编程你必须预料到种种可能
发生的问题．所以我们必须用indexOf方法确定双斜杠的确切的
起始位置．
vardomain_start=lead_slashes+2;
这行代码用于计算该域名的第１个字母的起始位置．由于这里
有一个双斜杠，所以域名第１个字母的起始位置应该在双斜杠
所在位置加２的位置．
varwithout_resource=the_url.substring（domain_start,the_string.length）;
这段代码将域名起始位置往后的所有字符都提取出来．所以执
行完这行代码后without_resource是
"
varnext_slash=without_resource.indexOf（"/"）;
这行代码计算出该字符串中下一个斜杠的位置，而从该字符串
起始位置到这个斜杠之间的内容就是域名．在本例中下一个斜
杠的位置是17。
vardomain=without_resource.substring（0,next_slash）;
最后一步是提取出该字符串起始位置到下一个斜杠之间的所有
内容．在本例中使得域名等同于""。
这样做确实很麻烦，利用split方法则可以使该过程容易很多．
第四页：
分割方法（splittingmethod）
你可以使用split方法用限位器来分割一系列的名称，然后将其
放在一个数组中．例如：
varmy_friends=
"trixie,moxie,sven,guido,hermes";
varfriend_array=
my_friends.split（","）;
for（loop=0;looploop++）
{
document.writeln（friend_array[loop]+"ismy
friend.
"）;
}
这段代码将字符串my_friends分割成包含５个元素的数组．
JavaScript可以为你自动建立一个数组，所以你无需使用
newArray（）．
将字符串分割成数组之后，我们使用了循环语句写出每一个
名称．我们可以利用split方法简化前面所讲到的域名提取：
varthe_url=prompt（"What'stheURL?
",""）;
varfirst_split=the_url.split（"//"）;
varwithout_resource=first_split[1];
varsecond_split=without_resource.split（"/"）;
vardomain=second_split[0];
这段代码简化了很多而且也更容易理解．我们来分析一些这段
代码：
varthe_url=prompt（"What'stheURL?
",""）;
提
升级会员 