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")
{
var toy = "videogames";
} else {
var toy = "rocks";
}
用通俗的英语翻译上面的代码意思是说：“如果猴子表现得好，就允许他玩电子游戏，否则就扁它。”上面的例子显示
了if-then-else语句的标准格式，但是对于那些喜欢投机取
巧的人，还有一种快捷方式：
var toy = (monkey_behavior=="good") ? "videogames" : "rocks"; 这个表达式和上面对语句所起的作用是完全一样的。这个条件语句有3部分：测试条件，测试为真时返回的值，以及测试为假时返回答值。在上面对例子中，测试条件是
(monkey_behavior=="good")。如果测试条件为真，则返回字
符串videogames；如果测试条件为假，则返回分号右边的值：rock。
这种快捷方式在函数调用中使用时非常便利。例如，你可以用它来做下面的事情：
var password = "open sesame";
var answer = prompt("what's the password? ","");
alert((answer == password) ? "welcome!" : "buzz off");
点击这里你就可以看到代码执行的过程。根据你所输入的字符是否是规定单密码，你将受到“欢迎”的信息或者to是蜂鸣。
如果没有这种条件语句，则必须这样书写代码：:
var password = "open sesame";
var answer = prompt("what's the password? ","");
if (answer == password)
{
alert("welcome");
} else {
alert("buzz off");
}
显然代码长了很多，但是也更容易了解它的含义。选用何种
条件语句依每个人的喜好而定。
第四页：什么是变量
这里是一个应用变量的例子：
var happiness = "a banana split";
alert("The monkeys think happiness is " + happiness);
这行代码声明一个叫做happiness的变量，然后在一个alert对
话框中调用这个变量。如果你看过别人的JavaScript，你可能
会注意到他们在声明变量时使用了var，这种用法可能会造成
问题。首先，可能会造成有些版本的MSIE瘫痪，或运行不正常。这种情况在Mac机上的MSIE最有可能发生。其次，如果你编写很复杂的JavaScripts，你必须编写你自己的函数，所以你必
须了解变量的含义。
正如上次的JavaScript 教程: 第四天中所述，函数是被调用后
执行某特定功能的JavaScript 程序代码。最好的函数具有模块
化的特性，你可以控制输入的变量以及输出的结果。而且一旦
编好之后你就无需担心它会出问题，而且不会和别的函数发生
冲突。要使编写地函数具备这些稳定的特性，你必须确保不要
轻易改变那些作为参数传递给其他函数的变量. 下面对例子显
示了如果你不注意这些细节会造成什么后果。假设我们编写一
个程序将华氏温度转换为摄氏温度。点击华氏/摄氏来观察一下
我所指的意思。如果你转换转换华氏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 + " degrees Celsius.");
}
这个程序很简单。一个叫做convertTemp()得函数调用另外一个叫做fahrenToCelsius()并返回结果。如果你对本程序不是很懂，你需要重新学习以下上次的javasript教程第4日。
关于这个例子让人困惑之处在两个函数中都有一个叫做temp得变量，在convertTemp()函数中它的作用是储存华氏温度Fahrenheit值(由用户提供)。在fahrenToCelsius()函数中，
它用于计算转换后灯摄氏温度值Celsius。这个不仅让我们感到困惑而且也会让这个Javascript程序感到困惑。如果你试图用
变量运行这段代码就会发生下面的结果：如果你希望转换华氏50度，则会显示下面的信息："10 degrees Fahrenheit is 10 degrees Celsius."(华氏10度相当于摄氏10度)。为什么你输入
的是华氏50度，而程序却将其理解为你输入了10度呢？我们来研究一下这个程序的执行过程。当我们调用函数convertTemp() 并在提示栏中输入了"50"时，我们得到temp = 50;然后"temp"
被传递给函数farenToCelsius()。在farenToCelsius()中，参
数faren被设定为50，而"temp" 被设定为(50 - 32) x 5/9, 其
结果是10。在返回结果之前，各项参数值是：
faren = 50
temp = 10
现在farenToCelsius()将10返回给变量celsius:
temp = 10
celsius = 10
现在我们得到一个错误的语句："10 degrees Fahrenheit is 10 degrees Celsius"。如果你仔细一些，不要将两个函数中等变
量起同样的名称就可以避免这些问题。但这也不是最佳解决
方案。当你不断加入更多的函数时，很难确保你不会将函数中的变量重名。而且如果你重复使用许多变量名例如loop,index, count, 和the_name时，使用不同的名称实在是一个很令人头疼的事。
最好的解决办法是让JavaScript明白在fahrenToCelsius()函数
中用到达变量temp和在convertTemp() 函数中用到的变量temp 是两码事。如果每个函数都有只应用于本函数内部的变量temp 你就无需担心不同函数中的同名变量会搅成一团。而var就是用于这个目的。
第五页：变量的使用方法
要使JavaScript中各种同名变量不会发生混淆，你可以在声明
变量时在变量前面加上var。在一个函数内用var声明后灯的变量叫做局部变量，它只存在于该函数内部。通常情况下你应该
尽量使用局部变量。
这里是用var声明后的正确的JavaScript代码：
function fahrenToCelsius(faren)
{
var temp = (faren - 32) * 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 = 50
temp被传递到函数fahrenToCelsius()，在函数fahrenToCelsius ()内部，参数faren现在被设定为50，然后temp 用以下代码
设定：
var temp = (faren - 32) * 5 / 9;
由于这个temp变量前面用var做了声明，所以该变量筒其他函数中叫做temp的变量不同。执行完fahrenToCelsius()时，该函数
种的temp即告消失。所以在fahrenToCelsius()返回数值前，faren = 50
(inside fahrenToCelsius) temp = 10
(inside convertTemp) temp = 50
fahrenToCelsius()然后返回它的变量temp值10。一旦我们
从fahrenToCelsius()函数中出来，该函数中等temp变量的作用
即告终止。当fahrenToCelsius() 返回时，它将变量的值设置
为10:
(在convertTemp内部) temp = 50
(在convertTemp内部) celsius = 10
现在显示的信息将是我们所希望的"50 degrees Fahrenheit is
10 degrees Celsius"。
二、第二日：
第一页：Javascript高级教程-第2日
今天我们将学习一项很有用而且很有趣的内容：cookies - 这
是用来记录访问过你的网页的人的信息。利用Cookies你能记录访问者的姓名，并且在该访问者再次访问你的站点时向他发出
热情的欢迎信息。你还可以利用cookie记忆用户端的特点- 如
果访问者的所接入的网线的速度慢，cookie可以自动告诉你在
给其发送网页的时候只发送尽可能少的图片内容。
只要你在合理的范围内使用cookies(不要用它探询用户的个人
隐私)，cookies还是相当实用得。所以我要向你们介绍cookies 的工作原理，但是在正式开始之前，我们先谈两个JavaScript
内容：有趣的字符串处理以及相关数组。
第二页：神奇的字符串处理
为什么必须在开始cookies世界漫游之前必须先学习神奇的字符
串处理呢？因为cookies也是字符串。要保存访问者的信息，你
必须首先建立一个特殊的cookie字符串。然后在访问者又返回
你的站点时读取该信息，而此时你必须对该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_monkey = normal_monkey.bold();
和下面对声明是等同的：
var bold_monkey = "" + normal_monkey + "";
第1个版本的声明看起来要简明得多。这里用到了字符串对象中
的bold对象，其他的字符串对象还有indexOf, charAt, substring, 以及split, 这些方法可以深入字符串的组成结构。
首先我们研究一下indexOf。
indexOf
indexOf用于发现一系列的字符在一个字符串中等位置并告诉你
子字符串的起始位置。如果一个字符串中部包含该子字符串则indexOf返回returns "-1." 这里是一个例子：
var the_word = "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_word.indexOf("y");
location_of_y)字母y的位置)是5。
var cheeky = the_word.indexOf("q");
cheeky值是-1，因为在单词“monkey”中没有字母q。
indexOf更实用之处:
var the_email = prompt("What's 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.");
}
这段代码询问用户的电子邮件地址，如果用户输入的电子邮件
地址中不包含字符则提示用户＂＠你输入的电子邮件地址
无效，电子邮件的地址必须包含字符@。＂
charAt
chatAt方法用于发现一个字符串中某个特定位置的字符。这里
是一个例子：
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个字符)是"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有些象，不同之处在于它能够
从一个单词中抓取整个的子字符串，而不只是字母，这里是其
格式：
var the_substring = the_string.substring(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中抽取出其域名：
var the_url = prompt("What's 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);
这段代码的意思是：如果你输入
"https://www.doczj.com/doc/c718628328.html,/javascript/index.html"，则域
名就是"https://www.doczj.com/doc/c718628328.html," ．如果这个方法对你来说有些麻
烦，我将向你介绍如何使用split方法简化其执行过程．但是首
先我们作一些分析．
基本的技巧是将第１个斜杠和第２个斜杠之间的内容分离出来：
var the_url = prompt("What's the URL?","");
这行代码向用户询问一个URL．假设用户输入了
"https://www.doczj.com/doc/c718628328.html,/javascript/index.html."
var lead_slashes = the_url.indexOf("//");
这行代码确定第一个双斜杠的位置．在本例中lead_slashes
的值是５，因为双斜杠的位置从５开始．
你可能会想，通常德URL都是以http://开始，所以双斜杠的位
置肯定是在５开始，为什么还要加入indexOf这一段多余的代
码呢？但是问题的关键在于你不知道用户在填入URL时是否一定
填入http:，他们也许会不小心多键入了一个空格，也许他们所
键入的URL在一个加密服务器上，其URL是
"https://https://www.doczj.com/doc/c718628328.html,/" ．在编程你必须预料到种种可能
发生的问题．所以我们必须用indexOf方法确定双斜杠的确切的
起始位置．
var domain_start = lead_slashes + 2;
这行代码用于计算该域名的第１个字母的起始位置．由于这里
有一个双斜杠，所以域名第１个字母的起始位置应该在双斜杠
所在位置加２的位置．
var without_resource = the_url.substring(domain_start, the_string.length); 这段代码将域名起始位置往后的所有字符都提取出来．所以执
行完这行代码后without_resource是
"https://www.doczj.com/doc/c718628328.html,/javascript/index.html."
var next_slash = without_resource.indexOf("/");
这行代码计算出该字符串中下一个斜杠的位置，而从该字符串
起始位置到这个斜杠之间的内容就是域名．在本例中下一个斜
杠的位置是17。
var domain = without_resource.substring(0, next_slash);
最后一步是提取出该字符串起始位置到下一个斜杠之间的所有
内容．在本例中使得域名等同于"https://www.doczj.com/doc/c718628328.html,"。
这样做确实很麻烦，利用split方法则可以使该过程容易很多．
第四页：分割方法(splitting method)
你可以使用split方法用限位器来分割一系列的名称，然后将其
放在一个数组中．例如：
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_array[loop] + " is my
friend.
");
}
这段代码将字符串my_friends分割成包含５个元素的数组．
JavaScript可以为你自动建立一个数组，所以你无需使用
new Array()．
将字符串分割成数组之后，我们使用了循环语句写出每一个
名称．我们可以利用split方法简化前面所讲到的域名提取：
var the_url = prompt("What's the URL?","");
var first_split = the_url.split("//");
var without_resource = first_split[1];
var second_split = without_resource.split("/");
var domain = second_split[0];
这段代码简化了很多而且也更容易理解．我们来分析一些这段
代码：
var the_url = prompt("What's the URL?","");
提示用户输入一个URL，假设用户输入
"https://www.doczj.com/doc/c718628328.html,/javascript/index.html" ．var first_split = the_url.split("//");
将用户输入的字符串分割成两块：first_split[0]是"http:"，
first_split[1]是
"https://www.doczj.com/doc/c718628328.html,/javascript/index.html."
var without_resource = first_split[1];
提取出数组中的第２个元素，所以现在without_resource是"https://www.doczj.com/doc/c718628328.html,/javascript/index.html."
var second_split = without_resource.split("/");
将without_resource分割成３块：https://www.doczj.com/doc/c718628328.html,, javascript, 和index.html．现在你可以看到split的用途了吧？var domain = second_split[0];
现在我们提取出新数组中的第１个元素就可得出域名．
接下来我们将学习相关数组的概念，然后我们就正式开始学习
神奇的cookie．
第五页：相关数组
数组可以使你存储各种元素的列表，而且使你能够访问图象、
表单以及表单元素．在上次的Javascript教程中我讲解了如何
生成和控制按照索引号编排的数组例如：
var an_array = new
Array("hickory","dickory");
var element_one = an_array[0];
var element_two = an_array[1];
an_array[2] = "doc";
这里生成一个新数组，并用两个字符串进行了初始化．第１个
元素可以用其索引号０进行访问，而第２个元素则可以用其索
引号１进行访问an_array[1]．你可以通过添加数组索引号加长
数组的长度．在本例中我加入了第３个元素，使其值等于"doc"．
现在该数组中包含"hickory,dickory, doc"３个元素．
相关数组和上面的数组相同，但它不使用数字做索引，而是用
单词来做索引．
var phone_book = new
Array();
phone_book["sleepy"] = "(203) 555-1234";
phone_book["happy"] = "(203) 555-2345";
这段代码生成一个电话号码簿，你输入"happy"就可以访问相应
的电话号码：
var happy_number = phone_book["happy"];
执行下一页的相关数字的例子看看它如何工作，同时再温习一
下javascript中表单的使用方法．
第六页：相关数组的一个例子
var phone_book = newArray();phone_book["happy"] = "(203) 555-1234";phone_book["sleepy"] ="(203)
555-2345";phone_book["sneezy"] =
"(203)555-4321";phone_book["sleazy"] = "(203)
555-3245";phone_book["sneery"]= "(203)
555-3213";phone_book["bleary"] =
"(203)555-2365";phone_book["tweaked"] = "(203)555-1664"; 每条记录的关键字是小矮人的名字，而每条记录的值就是该小
矮人的电话号码．假设我们需要找到某个小矮人的电话号码，
例如Sneezy的电话号码，我们这样写：
var the_number = phone_book["sneezy"];
现在我们看看这个表单：
注意表单和表单内的元素都有名称，这样以来便于我们读取和
写入表单元素．
注意select标签中的onChange处理器的用法：当所选择的选项
变化时，它就调用函数displayNumber，该函数在文件头中已做
了定义．如果我在下拉选单中选择了sneezy，则表达式
this.options [selectedIndex].value 返回"sneezy"，如果你
对该部分的内容不熟悉，请先阅读上次的javascript教程－第5日
的内容．
确定了用户所选择的选项之后，我们进入函数displayNumber：
functiondisplayNumber(phone_book, entry){ var the_number = phone_book[entry];
window.document.the_form.number_box.value =the_number;}
它使用了两个参数－一个电话号码簿和一个名称，在函数第1
行中，
var the_number =phone_book[entry];
观察一下电话号码簿上的名字，然后进入下一行，
window.document.the_form.number_box.value= the_number;
填入表单元素的数字命名为number_box．
你可以看到相关数组是将一个字符串连接到另一个字符串的好
办法．你可以利用相关数组将名字连接到电话号码，密码，生
日以及其他各种资料．在之后的课程中我将向你们介绍利用相
关数组可以做的各种有用的技巧．
第七页：介绍cookie
现在你已经掌握了先进的字符串处理和相关数组概念，该是我
们打开神奇的cookie魔瓶的时候了．cookie是记录访问你的站
点的人的信息，它其实驻留在用户的硬盘上，即使用户已经离
开你的站点，cookie在用户的硬盘上仍然存在，如果该用户再
次返回你的站点，则该cookie就会被一起发回到你的服务器中，
便于你统计和处理重复到访者的信息．
但是有一点需要注意：Cookies被引入Netscape 2.0和MSIE 3.0，但是MSIE 3.0对cookies的应用不是太完善．你可以利用cookies 在别的用户的计算机上保存和读取信息，但却不能将cookie保
存在自己的计算机上，所以给cookie的测试造成一定的困难．
所以如果你使用的是MSIE 3.0，你最好将其升级为MSIE 4.0或
者改用Netscape．
下面我们看一看一个cookie应用的典型例子，我们在一个网页
中设置cookie，然后通过别的网页读取它．在使用该例子的
时候，想想如果没有cookie，你如何做到这一点．
第八页：深入了解cookies
由于cookies牵扯到向用户的硬盘写盘和读取信息，所以就涉及
一个保密性的问题．如果你需要大量什么cookies，你应该阅读
一下Marc Slayton写的cooikies揭密以及重新考察cookies．这
些文章将告诉你cookie的实质和作用范围以及其内在的局限性．
其最重要的局限性在于：不是每个人的浏览器都欢迎cookies．
即便是用户的浏览器欢迎cookies，但用户也有可能拒绝cookies
的访问（大部分人还是欢迎的）每个域名只分配２０个cookies，
所以要节省着什么它们．Cookies不得大于4 KB，当然4,000字
节的容量是足够的了．
了解了这些局限性之后我们开始学习如何设置cookies设置一个
基本的cookie很容易．你所需做的只是在一个cookie_name=value 表单中生成一个字符串，然后设置document.cookie属性．唯一
的技巧：cookie值中不能有空格，逗号或分号．好在你无需担
心这些问题，因为有一系列的函数可以帮你对cookies属性编码
和解码：
escape()和unescape()．
下面的简单例子中将你的姓名保存为一个cookie：
function setCookie()
{
var
the_name = prompt("What's your name?","");
var the_cookie =
"wm_javascript=username:" + escape(the_name);
document.cookie =
the_cookie;
alert("Thanks, now go to the next
page.");
}
函数中间的两行是关键：
var the_cookie = "wm_javascript=username:" + escape (the_name); 如果我在提示框中输入了"dave thau"，该行代码将生成一个字
符串wm_javascript=username:dave%20thau．这就是说我将把
一个名为wm_javascript的cookie保存到硬盘．该cookie的值
是username:dave%20thau - 函数escape()将"dave" 和"thau"
之间的空格用%20做了替换．
当我们读取cookie时，我们寻找名为wm_javascript的cookie，
然后提取username:dave%20thau，将其用unescape()解码，去
掉username:．
document.cookie = the_cookie;
cookie现在就设置好了，很简单．下面我们学习如何读取
cookie．
第九页：读取cookies
一旦你在某用户的硬盘上设置了cookie，读取是件很容易的
事．下面是读取cookie范例的代码：
function readCookie()
{
var the_cookie = document.cookie;
var broken_cookie = the_cookie.split(":");
var the_name = broken_cookie[1];
var the_name = unescape(the_name);
alert("Your name is: " + the_name);
}
第１行很重要．当你的浏览器打开一个网页时，它调用任何和
该网页有关的cookie然后将其载入document.cookie属性．
读取cookie的技巧在于从中抽取出你需要的信息．注意在我们
所设置的cookie是这样的：wm_javascript=username:dave%
20thau．在该函数第１行之后的所有用于从该cookie中提取出
用户名（username）．
var broken_cookie = the_cookie.split(":");
将cookie在分号处分割成两部分．
var the_name = broken_cookie[1];
抓取分号后面的内容dave%20thau．
var the_name = unescape(the_name);
取消函数escape()的编码替换．在本例中重新用空格替换了%20．
alert("Your name is: " + the_name); 显示你的姓名．
这个例子使用的cookie只保存了很少的信息：用户名，cookie
最多可以保存多达4kb的信息。
第十页：复杂的cookies读取
如果你想让你的cookie包含更多的信息，你可以将cookie的值
设得很长．假设我们要保存某人的姓名，年龄和电话号码：
var the_cookie = "username:thau/age:older than the hills/phone:411";
document.cookie="my_happy_cookie=" + escape(the_cookie);
我用斜杠／来分割属性名称，用分号区别不同的属性名称及其
属性值．斜杠／和分号是不是绝对的选择，你可以使用任何的
字符做分割的标志：
var the_cookie = "username=thau&age=older than the hills&phone= 411";
document.cookie="my_happy_cookie=" + escape(the_cookie);
你可以自行选择限位器．只要你注意在对cookie解码时也使用
同样的限位器即可．
设置复杂的cookie时方法要复杂一些．我们建议你使用相关数
组来保存所有的信息，假设我们将该cookie保存到某人的硬
盘上：
my_happy_cookie=username:thau/age:older than the hills/phone:411 你可以将这些信息放到一个方便的相关数组中：
function readTheCookie(the_info)
{
// load the cookie into a variable and unescape it
var the_cookie = document.cookie;
var the_cookie = unescape(the_cookie);
// separate the values from the cookie name
var broken_cookie = the_cookie.split("=");
var the_values = broken_cookie[1];
// break each name:value pair into an array
var separated_values = the_values.split("/");
// loop through the list of name:values and load
// up the associate array
var property_value = "";
for (loop = 0; loop
如果在你的JavaScript中有上面这段代码，你可以这样调用它：
var cookie_information = new Array();
readTheCookie(cookie_information);
然后你就会正确设置了cookie_information["username"], cookie_information["age"], 和cookie_information["phone"]．
这些看起来可能有些难以理解，但实际上并不是很难．我们一
步步分析：
var the_cookie = document.cookie;
将cookie赋值给一个变量．
var the_cookie = unescape(the_cookie);
取消escape()的编码
var broken_cookie = the_cookie.split("=");
var the_values = broken_cookie[1];
使the_values等同于username:thau/age:older than the hills/phone:411. var separated_values = the_values.split("/");
生成一个包含３个元素名为separated_values的数组：
separated_values[0] = "username:thau"
separated_values[1] = "age:older than the hills"
separated_values[2] = "phone:411"
for (loop = 0; loop
循环调用separated_values的３个元素．
property_value = separated_values[loop];
提取当前的name:value配对，第１个配对是username:thau．
var broken_info = property_value.split(":");
将该配对分成名为broken_info的数组中的两个元素：
broken_info[0] = "username"
broken_info[1] = "thau"
var the_property = broken_info[0];
第１次经过这个循环是，the_property是"username"
var the_value = broken_info[1];
其值是"thau"
the_info[the_property] = the_value;
这里开始发回相关数组的便捷功能．它使得the_info
["username"] = "thau"，所以现在当你需要从cookie中查找
username时你只需：
var the_name = the_info["username"];
每次经过这个循环时，就在the_info中加入一个新元素．循
环到最后时，the_info["username"] = "thau", the_info
["age"] = "old as the hills" ，而the_info["phone"] = 411．
有些烦琐，但是当你需要从cookie中输出入大量信息时这是一
个很好的办法．当然还有别的办法．
第十一页：读取和编写多重cookies
上一篇中我们学习了如何将大量的学习包含在一个cookie中．
另一种方法是使用多重cookies．
保存多重cookies的方法很直观．每一个cookie都有一个名称．
上一个例子中的cookie的名称是my_happy_cookie，我们可以
这样：
var the_cookie ="my_happy_cookie=happiness_and_joy"; document.cookie =the_cookie;
要保存多重cookie，只需给每个cookie一个不同的名字．如果
你要加入一个新的cookie，设置document.cookie 时并不会删
除前面已经设置了的cookies，所以：
var the_cookie ="my_happy_cookie=happiness_and_joy"; document.cookie = the_cookie;
var another_cookie= "my_other_cookie=more_joy_more_happiness"; document.cookie = another_cookie;
现在你需要访问这两个cookies，有些复杂，所以你需要明了整
个过程．假设你执行了上面的代码，现在想访问
my_happy_cookie．如果你查看document.cookie的内容，你会
看到：
my_happy_cookie=happiness_and_joy;
my_other_cookie=more_joy_more_happiness;
这样很直观，但是如果你想访问某个特定的cookie则有些困难．
下面的代码可以帮助你找出某个特定的cookie：
function WM_readCookie(name)
{
//如果没有cookie则返回false或者取得值并返回该值
if(document.cookie == '')
return false;
else
return
unescape(WM_getCookieValue(name));
}
function WM_getCookieValue(name)
{
// Declare variables.
var firstChar,lastChar;
// Get the entire cookie string.
// (This may have other
name=value pairs in it.)
var theBigCookie = document.cookie;
// Grab
just this cookie from theBigCookie string.
// Find the start of
'name'.
firstChar = theBigCookie.indexOf(name);
// If you found it,
if(firstChar != -1)
{
// skip 'name' and '='.
firstChar +=
name.length + 1;
// Find the end of the value string (i.e. the next ';').
lastChar = theBigCookie.indexOf(';', firstChar);
if(lastChar == -1) lastChar = theBigCookie.length;
// Return the
value.
return theBigCookie.substring(firstChar, lastChar);
} else
{
// If there was no cookie, return false.
return false;
第 1 章 JavaScript 语言入门 1 为什么学习 JavaScript
提要：Javascript 是学习脚本语言的首选。她兼容性好，绝大多数浏览器均支持 Javascript，而且她功能强大，实现简单方便，入门简单，即使是程序设计新手也可以非常 快速容易地使用 JavaScript 进行简单的编程。
Javascript 是由 Netscape 公司创造的一种脚本语言。为便于推广，被定为 javascript，但 是 javascript 与 java 是两门不相干的语言， 作用也不一样。 作为一门独立的编程语言， javascript 可以做很多的事情，但它最主流的应用还是在 Web 上——创建动态网页(即网页特效)。 Javascript 在网络上应用广泛， 几乎所有的动态网页里都能找到它的身影。 目前流行的 AJAX 也是依赖于 Javascript 而存在的。 Javascript 与 Jscript 也不是一门相同的语言， Jscript 和 vbscript 是微软开发的两种脚本语 言，微软，Netscape 公司以及其他语言开发商为减少 web 开发者的兼容麻烦，所以成立 ECMA ， 该组 织 专 门制定 脚 本 语 言的 标 准 和规范 。 ECMA 制 定 的标 准脚 本 语 言 叫做 ECMAScript，Javascript 符合 ECMA 的标准，其实 Javascript 也可以叫做 ECMAScript. Jscript 也 ECMA 的标准， 但用户较少。vbscript 仅局限在微软的用户， Netscape 不支持。 概括地说，JavaScript 就是一种基于对象和事件驱动，并具有安全性能的脚本语言，脚 本语言简单理解就是在客户端的浏览器就可以互动响应处理程序的语言， 而不需要服务器的 处理和响应，当然 JavaScript 也可以做到与服务器的交互响应，而且功能也很强大。而相对 的服务器语言像 asp https://www.doczj.com/doc/c718628328.html, php jsp 等需要将命令上传服务器，由服务器处理后回传处理结 果。对象和事件是 JavaScript 的两个核心。 JavaScript 可以被嵌入到 HTML 文件中，不需要经过 Web 服务器就可以对用户操作作 出响应，使网页更好地与用户交互；在利用客户端个人电脑性能资源的同时，适当减小服务 器端的压力，并减少用户等待时间。
2 将 JavaScript 插入网页的方法
与在网页中插入 CSS 的方式相似，使用
language="javascript"表示使用 JavaScript 脚本语言，脚本语言还有 vbscript、 jsscript 等，如果没有 language 属性，表示默认使用 JavaScript 脚本。其中的...就是代 码的内容。例如：
Javascript简介 (2) Javascript简介 (2) 简单的Javascript入门示例 (4) 编写Javascript 代码 (5) 语句(Statements) (5) 语句块(Blocks) (6) 注释(Comments) (7) 表达式(Expressions) (8) 赋值和等于(Assignments and Equality) (9) Javascript常用运算符(Operators) (10) 算术运算符 (10) 逻辑运算符 (11) 赋值运算符 (12) Javascript 循环语句(Javascript Loop Statements) (12) 使用for 循环语句 (13) 使用for...in 循环语句 . (15) 使用while 和do...while 循环语句 (17) 使用break 和continue 语句 (20) Javascript写在哪里 (23) Javascript在
之间 (23)Javascript在
之间 (24) Javascript放在外部文件里 (25) Javascript变量(Javascript Variables) (26) 什么是变量？ (26) 变量的声明(Declaring Variables) (26) 变量的命名规则 (27) Javascript条件语句(Javascript Conditional Statements) (27) 单项条件结构(if条件语句) (28) 双向条件结构(if...else条件语句) (29) 多项条件结构(switch条件语句) (31) Javascript保留字(Javascript Reserved Words) (32) Javascript未来保留字(Javascript Future Reserved Words) (33) Javascript简介 Javascript简介《HTML+CSS+JavaScript网页制作案例教程》课程教学大纲 （课程英文名称） 课程编号：201509210011 学分：5学分 学时：64学时（其中：讲课学时：45 上机学时： 19 ） 先修课程：计算机基础、计算机网络、计算机应用 后续课程：UI设计、 JavaScript网页特效 适用专业：信息及其计算机相关专业 开课部门：计算机系 一、课程的性质与目标 《HTML+CSS+JavaScript网页制作案例教程)》是面向计算机相关专业的一门专业基础课，涉及网页基础、HTML标记、CSS样式、网页布局、JavaScript 编程基础与事件处理等内容。通过本课程的学习，学生能够了解HTML、CSS及JavaScript语言的发展历史及未来方向，熟悉网页制作流程、掌握常见的网页布局效果、学会制作各种企业、门户、电商类网站。 二、课程的主要内容及基本要求 第一章网页那点事（2学时） [知识点] 认识网页 常见的互联网专业术语 Web标准 HTML简介 CSS简介 JavaScript简介 常用浏览器介绍 Dreamweaver 工具的使用
使用Dreamweaver创建第一个页面 [重点] Web标准 Dreamweaver工具的使用 [难点] Web标准 Dreamweaver工具创建第一个页面 [基本要求] 了解Web标准，明确HTML、CSS及JavaScript在其中的作用。 熟悉Dreamweaver工具的基本操作，能使用Dreamweaver创建简单的网页。第二章从零开始构建HTML页面（4学时） [相关案例] 【案例1】简单的网页： 【案例2】新闻页面： 【案例3】图文混排： [知识点] HTML文档基本格式
《JavaScript项目式实例教程》课程标准 课程编号：02104 课程类型：非核心课程、一体化课程学时：72 适用对象：软件与信息服务专业二年级学生编制者：屹峰审核者： 编制日期： 2014-07-05 一、课程的性质1、课程定位 《JavaScript项目式实例教程》课程是计算机软件与信息服务专业的一门重要的专业课，定位于WEB技术开发工作岗位。它是WEB前端技术开发的必备课程，在整个课程体系中具有重要的作用。本课程的前导课程：静态网页设计、DIV+CSS布局。后续课程：网页美工、PHP 动态网页设计、C#程序设计与应用等。 2、课程任务 《JavaScript项目式实例教程》课程课程任务是培养网页设计、网页美工以及WEB综合开发的初、中级专业人才，通过本课程的学习，学生能掌握JavaScript语言的基本编程思想，并能熟练利用JavaScript控制WEB页面各级元素，实现WEB前端的验证、动态展示等任务。 二、职业活动 通过本课程的学习，使学生形成一定的学习能力、沟通与团队的协作能力，形成良好的思考问题、分析问题和解决问题的能力，养成良好的职业素养。遵守国家关于软件与信息技术的相关法律法规，形成关键性的软件开发与应用的能力。最终成为具备较全面的软件开发与信息服务的技术人才。 该课程涉及的知识是Web应用程序或前端开发人员必备的基本技能，职业活动与课程容的对应关系如下： Web前端开发岗位职业能力教学容（理实一体化课）模块化设计思想任务模块化（第1章）程序设计基本流程判断、循环结构（第2、3章）与基本对象的交互设计事件（第4章）事件高级应用（第8章）操作浏览器窗口窗口对象（第5章）操作Document 文档对象（第6章）操作DOM DOM对象（第7章）动画基础运动基础（第9章） 三、教学目标1、职业关键能力目标 （1）掌握JavaScript语言的基本语法及常用的置函数（2）掌握事件以及事件的触发机制（3）掌握BOM对象的常用属性和方法《JavaScript项目式实例教程》课程标准 3 （4）掌握文档对象的常用属性和方法（5）掌握Cookie对象的使用方法 （6）掌握DOM的概念以及利用DOM操作文档节点的方法（7）掌握事件流和事件绑定（8）掌握利用JavaScript设计缓冲运动的原理和方法2、职业专门能力目标 （1）通过完成相关的项目，掌握JavaScript语言的语法结构。 （2）通过完成相关的项目，掌握JavaScript各种置对象的使用方法和应用情境。 （3）通过完成相关的项目，寻找发现问题途径，学会解决问题的方法3、方法能力目标形成一定的学习能力、沟通与团队的协作能力，形成良好的思考问题、分析问题和解决问题的能力，养成良好的职业素养。遵守国家关于软件与信息技术的相关法律法规，形成关键性的软件开发与应用的能力。 四、课程容1、预备知识
传智播客 《HTML+CSS+JavaScript网页制作案例教程》 教学设计 课程名称：HTML+CSS+JavaScript网页制作案例教程 授课年级：2015年级 授课学期：2015学年第二学期 教师姓名：某某老师
201 年月日 课题名称第5章列表与超链接 计划 课时 6课时 内容分析通过第4章盒子模型的学习，已经很容易对网页做一个简单的结构划分。但是一个网站由多个网页构成，每个网页上都有大量的信息，要想使网页中的信息排列有序，条理清晰，并且网页与网页之间有一定的联系，就需要使用列表和超链接。本章将对列表标记、超链接标记以及CSS控制列表和超链接的样式进行详细讲解。 教学目标●掌握无序、有序及定义列表的使用，可以制作常见的网页列表模块； ●掌握超链接标记的使用，能够使用超链接定义网页元素； ●掌握CSS伪类，会使用CSS伪类实现超链接特效； 重点及措施 教学重点：无序列表、有序列表、定义列表、超链接、链接伪类、锚点链接。 措施：通过上机操作加强学习和补充案例进行巩固。 难点及措施 教学难点：有序列表、定义列表、链接伪类。 措施：通过上机操作加强学习和补充案例进行巩固。 教学方式教学采用教师课堂讲授为主，使用教学PPT讲解。 教学过程 第一课时 （制作“精美电商悬浮框”，讲解无序列表、有序列表） 复习上节课内容 在讲解本节内容前，抛出以下问题让学生回答，以复习第四章“CSS盒子模型”的相关知识。 1、一个盒子的宽（width）和高（height）均为300px，左内边距为30px， 同时盒子有3px的边框，请问这个盒子的总宽度是多少？（） A、333px B、366px C、336px D、363px
高级网页设计与制作 Advanced Web Design and Implementation 一、课程编号： 二、课程类别： 三、课程性质：选修课 四、学时： 48（讲课学时：24 实验学时：上机学时：24 课外学时：） 五、学分： 3 六、先修课程要求：无 七、适用专业：计算机相关专业 八、适用年级、学期：二年级第1学期 九、课程目的及任务： 本课程是面向计算机相关专业学生开设的一门专业选修课程，培养学生WEB 开发中的前端界面设计能力，为后续课程的学习奠定基础。 本课程的主要任务是介绍利用Dreamweaver开发工具进行网页设计，包括如何在网页上显示文字、图片、表格、表单等；利用CSS技术对网页上内容进行排版，并设置相关格式；利用JavaScript技术对网页内容进行操作，实现一些动态效果。目的是通过本课程的学习，培养学生的实际动手能力和计算机的操作能力，能够运用所学的知识进行网页设计。 十、课程内容及基本要求（重点、难点、知识掌握程度及考核要求）： 第1部分 HTML 第 1 章 HTML 概述 第 2 章 HTML 文本与图像 第 3 章 HTML 列表 第 4 章 HTML 表格 第 5 章 HTML 表单 第 6 章 HTML 5 要求：掌握HTML文档的结果，掌握标签、属性等的使用；掌握在页面上输出文字、段落，设置字体；掌握有序列表、无序列表的使用，能制作简单导航栏；掌握图片、背景与颜色的使用；掌握链接的使用，能使用超链接下载文件；掌握使用表格来表示数据和布局，用CSS对表格进行美化；掌握使用表单来与用户交互。第2部分 CSS语法基础 第 7 章 CSS 基础 第 8 章 CSS 盒子模型 第 9 章 CSS 字体与文本 第 10 章 CSS 列表与表格 第 11 章 CSS 定位 要求：掌握CSS的基本语法，掌握伪类与伪元素的使用；掌握CSS属性的使用，重点掌握定位、边距、填充属性。
HTML5+CSS3 网站设计基础教程》课程教学大 纲 （课程英文名称） 课程编号：201601210011 学分： 5 学分 学时：76 学时（其中：讲课学时：47 学时上机学时：26 学时） 先修课程：计算机基础、计算机网络、计算机应用 后续课程：UI 设计、JavaScript 网页特效 适用专业：信息技术及其计算机相关专业 开课部门：计算机系 一、课程的性质与目标 《HTML5+CSS3 网站设计基础教程》是面向计算机相关专业的一门专业基础课，涉及网页基础、HTML 标记、CSS 样式、网页布局、变形与动画等内容，通过本课程的学习，学生能够了解网页web 发展历史及其未来方向，熟悉网页设计流程、掌握网络中常见的网页布局效果及变形和动画效果，学会制作各种企业、门户、电商类网站。 二、课程设计理念与思路 课程设计理念：高职教育的集中实践教学环节需明确必要的理论知识的生化与知识层面的拓展，不能局限于单纯的技能训练。单纯的技能训练不是提高高等职业教育的理想课程。以能力的培养为重点，以就业为导向，培养学生具备职业岗位所需的职业能力，职业生涯发展所需的能力和终身学习的能力，实现一站式教学理念。 课程设计思路：基于工作过程开发课程内容，以行动为导向进行教学内容设计，以学生为主体，以案例（项目）实训为手段，设计除理论学习与技能掌握相融合的课程内容体系。教学整体设计“以职业技能培养为目标，以案例（项目）任务实现为载体、理论学习与时间操作相结合”。
三、教学条件要求 开发工具：Dreamweaver CS6 四、课程的主要内容及基本要求第一章初识HTML5 第二章HTML5 页面元素及属性
《用户登陆及密码修改》《JavaScript程序设计》课第11单元 课程单元教学设计 （2019～2020学年第1学期） 所属系部：计算机与通信工程学院 制定人： 合作人： 制定时间：2020.8 ***学院教务处制
JavaScript程序设计课程单元教学设计
单元教学进度设计（纲要）
一、情境导入 介绍本节课的教学目标 二、引入 任务：密码修改的遮罩锁屏效果三、知识点讲解 增加元素如：
遮罩样式设定： #change { width: 35px; height: 30px;line-height: 30px; cursor: pointer; } #screen1 { position: absolute; top: 0; left: 0; background: #000; z-index: 9998; filter: alpha(opacity=30); opacity: 0.3; display: none; } #login,#repass{ width: 350px; height: 250px; border: 1px solid #ccc; position: absolute; z-index: 9999; background: #fff; display:none; } #login h2,#repass h2 { height: 40px; line-height: 40px; text-align: center; font-size: 14px; letter-spacing: 1px; color: #fff; background: #044599; margin: 0; padding: 0;
《JavaScript 程序设计基础教程(第2版)》习题 答案 第一章Web 技术概述 一、单选题 1）D 2）D 3）D 4）A 5）C 6）D 7）C 8）C 9）D 10）D 11）A 12）D 13）D 14）D 15）A 二、综合题 （略） 第二章HTML/XHTML 制作 一、判断题 1）对2）错3）对4）错5）对 6）错7）错8）错9）错10）对 11）对12）对13）错14）错15）对 16）错17）对18）错19）错20）对 21）错22）错 二、单选题 1）D 2）C 3）C 4）B 5）A 6）B 7）B 8）B 9）C 10）C 11）B 12）C 13）C 14）C 15）C 16）C 17）A 三、综合题 1)ex020301.htm 2)ex020302.htm 3)ex020303.htm 4)ex020304.htm 5)ex020305.htm 6)ex020306.htm 7)ex020307.htm 8)ex020308.htm
9)ex020309.htm 10)ex020310.htm 11)略 第三章CSS 技术 一、判断题 1）错2）对3）错4）对5）错 6）错7）对8）错9）对10）错 11）对12）错13）错14）错15）错 16）错17）错18）对19）对20）错 21）错 二、单选题 1）B 2）B 3）A 4）C 5）B 6）C 7）A 8）B 9）D 10）B 11）D 12）B 13）A 14）B 15）D 16）A 17）B 18）C 19）B 20）D 21）B 22）A 23）D 24）A 三、综合题 1)ex030301.htm 2)ex030302.htm 3)ex030303.htm 4)ex030304.htm 5)ex030305.htm 6)ex030306.htm 7)ex030307.htm 8)ex030308.htm 9)ex030309.htm 10)ex030310.htm 11)ex030311.htm 12)ex030312.htm 13)ex030313.htm 14)ex030314.htm 15)ex030315.htm 16)略 第四章JavaScript 编程基础 一、判断题 1）错JavaScript 是Microsoft公司设计的脚本语言。 2）对JavaScript 既文档中可用于Web客户端应用，也可以用于Web服务器端应用。3）对在HTML文档中通过使用