JavaScript高级教程1.docx
- 文档编号:10286463
- 上传时间:2023-02-09
- 格式:DOCX
- 页数:80
- 大小:70.50KB
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"指的是子字符串中第1个字母的位置,"to"有点奇特,
它是该子字符串中比最后一个位置大1的位置.使用这种神奇
的方法你可以标记子字符串的起始和结束位置,用"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方法简化其执行过程.但是首
先我们作一些分析.
基本的技巧是将第1个斜杠和第2个斜杠之间的内容分离出来:
varthe_url=prompt("What'stheURL?
","");
这行代码向用户询问一个URL.假设用户输入了
"
varlead_slashes=the_url.indexOf("//");
这行代码确定第一个双斜杠的位置.在本例中lead_slashes
的值是5,因为双斜杠的位置从5开始.
你可能会想,通常德URL都是以http:
//开始,所以双斜杠的位
置肯定是在5开始,为什么还要加入indexOf这一段多余的代
码呢?
但是问题的关键在于你不知道用户在填入URL时是否一定
填入http:
,他们也许会不小心多键入了一个空格,也许他们所
键入的URL在一个加密服务器上,其URL是
".在编程你必须预料到种种可能
发生的问题.所以我们必须用indexOf方法确定双斜杠的确切的
起始位置.
vardomain_start=lead_slashes+2;
这行代码用于计算该域名的第1个字母的起始位置.由于这里
有一个双斜杠,所以域名第1个字母的起始位置应该在双斜杠
所在位置加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;loop loop++) { document.writeln(friend_array[loop]+"ismy friend. } 这段代码将字符串my_friends分割成包含5个元素的数组. 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? ",""); 提
");
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- JavaScript 高级 教程
![提示](https://static.bdocx.com/images/bang_tan.gif)