JavaScript高级教程1.docx

1、JavaScript高级教程1JavaScript高级教程：一、 第一日：第一页：Javascript高级教程欢迎您继续学习Javascript高级教程。在此之前我们已经学习了Javascript5日教程。在这一阶段的学习中我们将继续学习在上次的教程中还没有来得及谈及的问题。我还将向你们展示Javascript的许多神奇功能，使你能够制作真正对多媒体应用程序。以下是我们将涉及的内容： 给变量赋值 If-then语句 For和while循环 编写你自己的函数 打开及控制窗口 读写HTML 表单 应用数组 控制图片转换 如果这些课题你听起来还比较陌生的话，我建议你先阅读一下先前的Javascrip

2、t5日教程。第二页：本教程的课程计划 在上次的JavaScript教程中我们学习了JavaScript得核心内容：一些重要得语法已经最常用得一些对象。现在我们将加深你的JavaScript知识使你成为一个真正的JavaScript大师。以下就是你成为一个真正的大师必须走过的路。 第1日： 介绍和理清头绪，并介绍几个小技巧，重点介绍一种新的if-then-else语句以及变量真正含义。 第2日： 神奇的字符串处理，保存访问过你的网站得读者的信息，并介绍一种新的数组。 第3日： 甚至网页的时间线，使不同的事件在不同的时间发生，并且介绍如何使你的JavaScript脚本在各种浏览器上都能运行。 第4

3、日： 预载图象，图象映射，及JavaScript。生成你自己的对象及使用循环快捷地找到要找的对象。 第5日： 开发和测试JavaScript的工具，以及使你的JavaScript代码迅速运行的窍门。 学习完本次的教程之后你将对JavaScript有了比较完整地了解。掌握了这门知识你就能够制作各种互联网应用程序了。第三页：一个if-then-else的快捷方式 在JavaScript中最常用得语句就是if-then-else。下面是一个奖励猴子的例子： if (monkey_behavior = good)var toy = videogames; else var toy = rocks;用通

4、俗的英语翻译上面的代码意思是说：“如果猴子表现得好，就允许他玩电子游戏，否则就扁它。”上面的例子显示了if-then-else语句的标准格式，但是对于那些喜欢投机取巧的人，还有一种快捷方式： var toy = (monkey_behavior=good) ? videogames : rocks;这个表达式和上面对语句所起的作用是完全一样的。这个条件语句有3部分：测试条件，测试为真时返回的值，以及测试为假时返回答值。在上面对例子中，测试条件是(monkey_behavior=good)。如果测试条件为真，则返回字符串videogames；如果测试条件为假，则返回分号右边的值：rock。这种快

5、捷方式在函数调用中使用时非常便利。例如，你可以用它来做下面的事情：var password = open sesame;var answer = prompt(whats the password? ,);alert(answer = password) ? welcome! : buzz off);点击这里你就可以看到代码执行的过程。根据你所输入的字符是否是规定单密码，你将受到“欢迎”的信息或者to是蜂鸣。如果没有这种条件语句，则必须这样书写代码：:var password = open sesame;var answer = prompt(whats the password? ,);if

6、 (answer = password)alert(welcome); else alert(buzz off); 显然代码长了很多，但是也更容易了解它的含义。选用何种条件语句依每个人的喜好而定。第四页：什么是变量 这里是一个应用变量的例子：var happiness = a banana split;alert(The monkeys think happiness is + happiness);这行代码声明一个叫做happiness的变量，然后在一个alert对话框中调用这个变量。如果你看过别人的JavaScript，你可能会注意到他们在声明变量时使用了var，这种用法可能会造成问题。首

7、先，可能会造成有些版本的 MSIE瘫痪，或运行不正常。这种情况在Mac机上的MSIE最有可能发生。其次，如果你编写很复杂的JavaScripts，你必须编写你自己的函数，所以你必须了解变量的含义。正如上次的JavaScript 教程: 第四天中所述，函数是被调用后执行某特定功能的JavaScript 程序代码。最好的函数具有模块化的特性，你可以控制输入的变量以及输出的结果。而且一旦编好之后你就无需担心它会出问题，而且不会和别的函数发生冲突。要使编写地函数具备这些稳定的特性，你必须确保不要轻易改变那些作为参数传递给其他函数的变量. 下面对例子显示了如果你不注意这些细节会造成什么后果。假设我们编写

8、一个程序将华氏温度转换为摄氏温度。点击华氏/摄氏来观察一下我所指的意思。如果你转换转换华氏50度，则会出现一条信息：“华氏50度相当于摄氏10度。”以下是代码：function fahrenToCelsius(fare) temp = (faren - 32) * 5/9; return temp;function convertTemp() temp = prompt(what temperature fahrenheit? ,50); celsius = fahrenToCelsius(temp); alert(temp + degrees Fahrenheit is + celsius

9、+ degrees Celsius.);这个程序很简单。一个叫做convertTemp()得函数调用另外一个叫做fahrenToCelsius()并返回结果。如果你对本程序不是很懂，你需要重新学习以下上次的javasript教程第4日。关于这个例子让人困惑之处在两个函数中都有一个叫做temp得变量，在convertTemp()函数中它的作用 是储存华氏温度Fahrenheit值 (由用户提供)。在fahrenToCelsius()函数中，它用于计算转换后灯摄氏温度值Celsius。这个不仅让我们感到困惑而且也会让这个Javascript程序感到困惑。如果你试图用变量运行这段代码就会发生下面的结

10、果：如果你希望转换华氏50度，则会显示下面的信息：10 degrees Fahrenheit is 10degrees Celsius.(华氏10度相当于摄氏10度)。为什么你输入的是华氏50度，而程序却将其理解为你输入了10度呢？我们来研究一下这个程序的执行过程。当我们调用函数convertTemp()并在提示栏中输入了50时，我们得到temp = 50;然后temp被传递给函数farenToCelsius()。在farenToCelsius()中，参数faren被设定为50，而temp 被设定为(50 - 32) x 5/9, 其结果是10。在返回结果之前，各项参数值是：faren = 5

11、0temp = 10现在farenToCelsius()将10返回给变量celsius:temp = 10celsius = 10现在我们得到一个错误的语句： 10 degrees Fahrenheit is 10degrees Celsius。如果你仔细一些，不要将两个函数中等变量起同样的名称就可以避免这些问题。但这也不是最佳解决方案。当你不断加入更多的函数时，很难确保你不会将函数中的变量重名。而且如果你重复使用许多变量名例如loop,index,count, 和the_name时，使用不同的名称实在是一个很令人头疼的事。最好的解决办法是让JavaScript明白在fahrenToCelsi

12、us()函数中用到达变量temp和在convertTemp() 函数中用到的变量temp是两码事。如果每个函数都有只应用于本函数内部的变量temp你就无需担心不同函数中的同名变量会搅成一团。而var就是用于这个目的。第五页：变量的使用方法 要使JavaScript中各种同名变量不会发生混淆，你可以在声明变量时在变量前面加上var。在一个函数内用var声明后灯的变量叫做局部变量，它只存在于该函数内部。通常情况下你应该尽量使用局部变量。这里是用var声明后的正确的JavaScript代码：function fahrenToCelsius(faren) var temp = (faren - 32)

13、 * 5 / 9; return temp;function convertTemp() var temp = prompt(what temperature Fahrenheit? ,50); var celsius = badFahrenToCelsius(temp); alert(temp + degrees Fahrenheit is + celsius + degrees Celsius.);现在当我们输入50时，(在convertTemp函数内部) temp = 50temp被传递到函数fahrenToCelsius()，在函数fahrenToCelsius()内部，参数faren

14、现在被设定为50，然后temp 用以下代码设定：var temp = (faren - 32) * 5 / 9;由于这个temp变量前面用var做了声明，所以该变量筒其他函数中叫做temp的变量不同。执行完fahrenToCelsius()时，该函数种的temp即告消失。所以在fahrenToCelsius()返回数值前，faren = 50(inside fahrenToCelsius) temp = 10(inside convertTemp) temp = 50fahrenToCelsius()然后返回它的变量temp值10。一旦我们从fahrenToCelsius()函数中出来，该函数

15、中等temp变量的作用即告终止。当fahrenToCelsius() 返回时，它将变量的值设置为10:(在convertTemp内部) temp = 50(在convertTemp内部) celsius = 10现在显示的信息将是我们所希望的50 degrees Fahrenheit is10 degrees Celsius。二、 第二日：第一页：Javascript高级教程-第2日 今天我们将学习一项很有用而且很有趣的内容：cookies - 这是用来记录访问过你的网页的人的信息。利用Cookies你能记录访问者的姓名，并且在该访问者再次访问你的站点时向他发出热情的欢迎信息。你还可以利用co

16、okie记忆用户端的特点 - 如果访问者的所接入的网线的速度慢，cookie可以自动告诉你在给其发送网页的时候只发送尽可能少的图片内容。只要你在合理的范围内使用cookies(不要用它探询用户的个人隐私)，cookies还是相当实用得。所以我要向你们介绍cookies的工作原理，但是在正式开始之前，我们先谈两个JavaScript内容：有趣的字符串处理以及相关数组。第二页：神奇的字符串处理 为什么必须在开始cookies世界漫游之前必须先学习神奇的字符串处理呢？因为cookies也是字符串。要保存访问者的信息，你必须首先建立一个特殊的cookie字符串。然后在访问者又返回你的站点时读取该信息，

17、而此时你必须对该cookie字符串进行解码。要生成和解释这些字符串你必须了解JavaScript的字符串工作原理。所以我们必须先要了解字符串。如果你是一个新手，你应该先阅读一下上次的javascript教程第2日的内容，一下是一个例子：var normal_monkey = I am a monkey!;document.writeln(Normal monkey + normal_monkey);var bold_monkey = normal_monkey.bold();document.writeln(Bold monkey + bold_monkey);这里的声明：var bold_m

18、onkey = normal_monkey.bold();和下面对声明是等同的：var bold_monkey = + normal_monkey + ;第1个版本的声明看起来要简明得多。这里用到了字符串对象中的bold对象，其他的字符串对象还有indexOf, charAt,substring, 以及split, 这些方法可以深入字符串的组成结构。首先我们研究一下indexOf。indexOfindexOf用于发现一系列的字符在一个字符串中等位置并告诉你子字符串的起始位置。如果一个字符串中部包含该子字符串则indexOf返回returns -1. 这里是一个例子：var the_word =

19、 monkey;让我们从单词 monkey开始。var location_of_m = the_word.indexOf(m);location_of_m(字母m的位置)将为0，因为字母m位于该字符串的起始位置。var location_of_o = the_word.indexOf(o);location_of_o(字母o的位置)将为1。var location_of_key = the_word.indexOf(key);location_of_key(key的位置)将为3因为子字符串“key”以字母k开始，而k在单词monkey中的位置是3。var location_of_y = the

20、_word.indexOf(y);location_of_y)字母y的位置)是5。var cheeky = the_word.indexOf(q);cheeky值是-1，因为在单词“monkey”中没有字母q。indexOf更实用之处:var the_email = prompt(Whats your email address?, );var the_at_is_at = the_email.indexOf();if (the_at_is_at = -1) alert(You loser, email addresses must have signs in them.);这段代码询问用户的

21、电子邮件地址，如果用户输入的电子邮件地址中不包含字符 则 提示用户你输入的电子邮件地址无效，电子邮件的地址必须包含字符。charAtchatAt方法用于发现一个字符串中某个特定位置的字符。这里是一个例子：var the_word = monkey;var the_first_letter = the_word.charAt(0);var the_second_letter = the_word.charAt(1);var the_last_letter = the_word.charAt(the_word.length-1);the_first_letter(第1个字符)是mthe_secon

22、d_letter(第2个字符)是othe_last_letter(最后一个字符)是 y注意利用字符串的length(长度)属性你可以发现在包含多少个字符。在本例中，the_word是monkey，所以the_word.length是6。不要忘记在一个字符串中第1个字符的位置是0，所以最后一个字符的位置就是length-1。所以在最后一行中用了the_word.length-1。第三页：子字符串 子字符串（substring）和charAt有些象，不同之处在于它能够从一个单词中抓取整个的子字符串，而不只是字母，这里是其格式：var the_substring = the_string.subst

23、ring(from, to);From指的是子字符串中第个字母的位置，to有点奇特，它是该子字符串中比最后一个位置大的位置使用这种神奇的方法你可以标记子字符串的起始和结束位置，用to的位置减去from的位置就会得出该子字符串的长度：var the_string = monkey;var clergy = the_string.substring(0,4);var tool = the_string.substring(3,6);运行该段代码后变量clergy的值为monk; 变量tool的值为key。子字符串常和indexOf一起使用，将字符串分成若干块例如，你可以从一个给定的URL中抽取出其

24、域名：var the_url = prompt(Whats the URL?,);var lead_slashes = the_url.indexOf(/);var domain_start = lead_slashes + 2;var without_resource = the_url.substring(domain_start, the_url.length);var next_slash = without_resource.indexOf(/);var domain = without_resource.substring(0, next_slash);这段代码的意思是：如果你输入

25、名就是 如果这个方法对你来说有些麻烦，我将向你介绍如何使用split方法简化其执行过程但是首先我们作一些分析基本的技巧是将第个斜杠和第个斜杠之间的内容分离出来：var the_url = prompt(Whats the URL?,);这行代码向用户询问一个URL假设用户输入了var lead_slashes = the_url.indexOf(/);这行代码确定第一个双斜杠的位置在本例中lead_slashes的值是，因为双斜杠的位置从开始你可能会想，通常德URL都是以http:/开始，所以双斜杠的位置肯定是在开始，为什么还要加入indexOf这一段多余的代码呢？但是问题的关键在于你不知道用

26、户在填入URL时是否一定填入http:，他们也许会不小心多键入了一个空格，也许他们所键入的URL在一个加密服务器上，其URL是 在编程你必须预料到种种可能发生的问题所以我们必须用indexOf方法确定双斜杠的确切的起始位置var domain_start = lead_slashes + 2;这行代码用于计算该域名的第个字母的起始位置由于这里有一个双斜杠，所以域名第个字母的起始位置应该在双斜杠所在位置加的位置var without_resource = the_url.substring(domain_start, the_string.length);这段代码将域名起始位置往后的所有字符都提

27、取出来所以执行完这行代码后without_resource是var next_slash = without_resource.indexOf(/);这行代码计算出该字符串中下一个斜杠的位置，而从该字符串起始位置到这个斜杠之间的内容就是域名在本例中下一个斜杠的位置是17。var domain = without_resource.substring(0, next_slash);最后一步是提取出该字符串起始位置到下一个斜杠之间的所有内容在本例中使得域名等同于。这样做确实很麻烦，利用split方法则可以使该过程容易很多第四页：分割方法(splitting method) 你可以使用split方法

28、用限位器来分割一系列的名称，然后将其放在一个数组中例如：var my_friends =trixie,moxie,sven,guido,hermes;var friend_array =my_friends.split(,);for (loop=0; loop friend_array.length;loop+) document.writeln(friend_arrayloop + is myfriend.);这段代码将字符串my_friends分割成包含个元素的数组JavaScript可以为你自动建立一个数组，所以你无需使用new Array()将字符串分割成数组之后，我们使用了循环语句写出每一个名称我们可以利用split方法简化前面所讲到的域名提取：var the_url = prompt(Whats the URL?,);var first_split = the_url.split(/);var without_resource = first_split1;var second_split = without_resource.split(/);var domain = second_split0;这段代码简化了很多而且也更容易理解我们来分析一些这段代码：var the_url = prompt(Whats the URL?,);提