《JAVASCRIPT脚本编程》实验指导书

重庆正大软件职业技术
学院
《网页编程》课实验指
导书
作者：陈欣
时间：2009年
版本：V1.0
目录
实验名称：html语言基础（一） (3)
实验名称：html语言基础（二）：文字编排及美化 (4)
实验名称：html高级部分（一） (6)
实验名称：html高级部分（二）.........................................................................错误！未定义书签。

实验名称：html高级部分（三）：超链接应用. (8)
实验名称：dreamweaver8网页制作（一） (11)
实验名称：dreamweaver8网页制作（二） (15)
实验名称：初识CSS（一） (16)
实验名称：CSS（二）..........................................................................................错误！未定义书签。

实验名称：javascript语法（一）. (26)
实验名称：javascript语法（二） (27)
实验名称：javascript语法（三） (29)
实验名称：DOM编程（一） (31)
实验名称：DOM编程（二）.................................................................................错误！未定义书签。

实验名称：DOM编程（三） (33)
实验名称：html语言基础（一）
实验目的：
掌握使用“记事本”编辑HTML的操作；掌握使用IE测试HTML文件的操作；掌握HTML 构架标签和格式标签的使用
课时：2
实验环境：pc一台，dreamweaver8.0
预备知识：“记事本”编辑HTML；用IE测试HTML文件；构架标签和格式标签
实验内容（步骤）：
编写本书第2章2.1-2.3中出现的所有HTML源文件。

完成下面指定的网页特效。

2.1文件名为test1.html
2.2文件名为test2.html
2.3文件名为姓名+学号后2位.html(如：你叫张三，学号为01则命名为张三01.html)，在网页中输入自己的自我介绍，并实现从上到下和从下到上的交替移动。

注意：格式清晰、美观。

考核内容：本次实验要求学生在2课时时间内完成。

完成3道题为优，完成2道以上为良；完成1道题为合格，否则为不合格
实验名称：html语言基础（二）实验目的：
掌握格式标签的使用和属性的设置
掌握列表标签的使用方法
课时：2
实验环境：pc一台，dreamweaver8.0
预备知识：“记事本”编辑HTML；用IE测试HTML文件；构架标签和格式标签实验内容（步骤）：
编写本书第3章3.1-3.2中出现的所有HTML源文件。

完成下面指定的网页特效。

2.1文件名为test1.html
2.2文件名为test2.html
2.3文件名为test
3.html
考核内容：本次实验要求学生在2课时时间内完成。

完成4道题为优，完成3道以上为良；完成2道题为合格，否则为不合格。

实验名称：html语言基础（三）
实验目的：
掌握文本标签的使用
掌握图像标签的使用
课时：2
实验环境：pc一台，dreamweaver8.0
预备知识：“记事本”编辑HTML；用IE测试HTML文件；构架标签和格式标签
实验内容（步骤）：
要求：
效果图中所涉及到的均放在图片在（学号后4位+image）文件夹中，要求所以的html文档都必须放在文件夹为html中。

所需要的图片可在教师提供的images文件夹中查找。

完成以下效果图，命名为test1.html
完成以下效果图，命名为test2.html
完成以下效果图，命名为test3.html
考核内容：本次实验要求学生在2课时时间内完成。

完成3道题为优，完成2道以上为良；完成1道题为合格，否则为不合格。

实验名称：超链接应用
实验目的：
掌握锚点超链接应用
掌握文件超链接的使用
课时：2
实验环境：pc一台，dreamweaver8.0
预备知识：文本标签；超链接标签；图像标签；客户端图像地图
实验内容（步骤）：
要求：
效果图中所涉及到的均放在图片在（学号后4位+image）文件夹中，要求所以的html文档都必须放在文件夹为html中。

所需要的图片可在教师提供的images文件夹中查找。

1、用记事本完成以下效果图，命名为test1.html
2、用记事本完成以下效果图，利用以下文字做锚点连接，命名为test2.html
文字：
春夜喜雨
好雨知时节，当春乃发生。

随风潜入夜，润物细无声。

春望
国破山河在，城春草木深。

感时花溅泪，恨别鸟惊心。

烽火连三月，家书抵万金。

白头搔更短，浑欲不胜簪。

春晓
春眠不觉晓，
处处闻啼鸟。

夜来风雨声，
花落知多少？
静夜思
床前明月光，
疑是地上霜。

举头望明月，
低头思故乡。

关山月
明月出天山，苍茫云海间。

长风几万里，吹度玉门关。

汉下白登道，胡窥青海湾。

由来征战地，不见有人还。

戌客望边色，思归多苦颜。

高楼当此夜，叹息未应闲。

3、用记事本完成以下效果图，命名为test3.html
4、用记事本完成以下效果图，命名为test5.html。

要求三张图片分别超链接到前三道题的网页文
档。

5、思考：锚点链接是否可以建立在不同的网页中。

考核内容：本次实验要求学生在2课时时间内完成。

完成4道题为优，完成3道以上为良；完成2道为合格，否则为不合格。

实验名称：dreamweaver使用
实验目的：
了解dreamweaver工具的使用
掌握文本格式工具的使用
掌握图片和超链接工具的使用
课时：2
实验环境：pc一台，dreamweaver8.0
预备知识：dreamweaver8.0的基本操作
实验内容：
要求：
效果图中所涉及到的均放在图片在（学号后4位+image）文件夹中，要求所以的html文档都必须放在文件夹为html中。

所需要的图片可在教师提供的images文件夹中查找。

1、用Dreamweaver完成以下效果图，锚点链接效果图如下：命名为rizhi.html
1:军训感言
军训是大学的第一堂课，在这堂课上有严明的纪律、有紧张、有欢笑......火热的阳光炙烤着大地和我们的身躯，这几天对我来说就像是几个世纪一样的难熬，好想为自己找一个逃避的理由。

教官教诲我们：“想尽一切办法，克服一切困难，完成一切任务，争取一切荣誉。

”我的思想开始转变，考入大学并不意味着一劳永逸，人生中有好多的关口要过，有好多的责任等我们去抗，又有好多的义务等我们去尽。

大学只是万里长征中的第一步，那种“船到码头车到站，兵器入库马放南山”的思想对当代大学生的成长都是不建康的。

军训不仅仅是对我们的身体的考验，更多的是对我们的意志的磨练，同时提高我们的思想水平和团队精神，“宝剑锋从磨砺出，梅花香自苦寒来”人是在不断的磨练中长大的，就像一棵小树一样经历风雨后才能变成参天大树，军人的气质和钢铁般的意志给我很深刻的印象，正如一首军歌歌词描写的一样：“还硬比钢还强”。

在我们军训中我们军人、学生一家人，了解不少的军中生活，体会到了军人的艰辛，感受到了军人的豪迈气概，他们肩负着保卫国家的重任，苦中的乐，教官说：“当兵后悔二年，不当兵会后悔一辈子”。

军人的奉献精神和大公无私深深的打动我们每个人，我们的新生班主任给我们讲解生活中要注意的事项，为我们今后的学习生活做准备，辅导员
教师像大哥哥一样照看着我们。

在这里有酸楚的泪水，有苦咸的汗水，有飘扬的歌声，有欢乐的笑声，这些就像不灭的音符跳动不已，我们是充实的，我们是快乐的，苦与累已化作美与甜，军训——我们不后悔
军训已过去三天，这三天中我的感触很深。

感觉到我比以前坚强多了，总觉得自己全身都是力量，叠被子是我在军训三天中觉得最难的，因为以前没有叠过被子，叠起来就头大，怎么也叠不好，尽管教官一而再的教，可我还是叠不好，使我都觉得我没有喝方面的天赋，呵呵，经过不懈的努力，我最终还是会叠了，军训中还有很多很多的感慨，它们都会影响我的一生。

感谢军训，它教会了我很多以前没学到的东西。

2:大学生活
幸福的大学生活开始了,但是好景不常,兴奋和激动过后，我才发现大学并不是天堂.
期末要面对挂科的危险，面对某些人物丑恶的嘴脸，毕业后社会的凶险，是工作还是考研......大学生越来越不值钱(学士满街走，硕士多如狗，博士才能抖一抖),单调无意义的课程，变态的某些"叫兽"，还有就是难以打发的时间,郁闷成为了大家的口头禅----郁闷啊,郁闷.不在动乱中变坏,就在郁闷中变态.琐碎的生活永远是生命的主题,我们开始不满现实，成为传说中的愤青,为了不让自己内分泌失调,我们把上网当成自己的职业,嬉笑怒骂,直抒胸臆,侃侃而谈,换上网络外衣,我们就是蜘蛛侠,啥也不"汗".大学一半的时间我们用在了睡觉上,因此有了"大学万睡万睡万万睡"的诗赋:
觉是要睡的，梦是要做的.一觉醒来，明天的太阳一样温暖！青春万岁！大学万睡万睡万万睡!!!还有一点不得不提的就是,大学时代的恋情.
大学是恋爱的温床，无数懵懂的少男少女在这里第一次体会到爱情的美妙，不过时代发展了，社会进步了，节奏变快了，无数情侣瞬间完成了由吻关系到性关系然后没关系的过程，结束之快，效率之高，遵循比特时代的摩尔定律。

......
经过一番折腾，我找到大学的真谛，大学就是一个经历，人生是个过程，为什么不好好珍惜呢,所有的郁闷都是庸人自扰.大学生活也许没有我们想像中的那么激情澎湃,但却让我们多了一分理智和稳重.它把我们的生活浓缩得只有两件事，上课，玩耍。

这样的生活单纯的近乎完美，每天可以一门心思的听老师上课,随心所欲地参加各种各样的社团活动，随时约上三五个好友聊天，逛街，甚至连考试时节的紧张，都可以被我们当作一种快乐,大学本身就已存在了它的价值!所以,我们应该积极地活着,好好过每一天才是硬道理!!!
3:工作体会
从接受湖南日报发行有限公司在汝城文明这块区域的工作到现在，已经月余时间了，我的成绩虽不理想，但通过在工作中的学习、思考、摸索，我认为我的收获亦不少。

一：从工作之初的畏首畏尾、犹豫不决，到现在思想上明确了要积极进取、努力突破，这是一种事业心的确立，这是对一项工作肩负起责任的态度。

精神和态度是工作的必需因素。

没有这样的因素，我们对工作谈何热爱、谈何拼搏？工作于人之目的，不仅要谋取生计之所需，亦要激发生命之情义。

只有这样，我们才能真正体会到——劳动是快乐的；只有这样，我们才能目标向上——劳以养存，理以养性！这份工作让我精神一新了。

二：这份工作远比我现在所为之事有意义、有前景。

有意义的工作让我开拓和升华。

这份工作让我又把工作和学习结合在了一起。

工作和学习是人生进取和进步的最基本、最实在的要素。

工作推进学习；学习辅导工作。

这样，我们才不会有片面的工作之累、学习何用之感叹！时光箭去，人生老去，何妨？只要心灵丰富了！我们人生的知识、经验，不是天生于我，而是在成长中、在实践中努力学习，勤于思考，细心探索，用心积累而成的。

三：这份工作让我对责任有了新的认识。

责任不应在肩上似泰山之重压，而应在心中如精神之明灯。

责任之根，是自发自己之心。

责任之立，不应是累你我之身心，而应是你我工作进取之导向。

四：我们谋事，是为求其所成。

这是我们做任何一项工作所应有的目标。

但我们不能有一步登天之妄想。

我们必须一步步的去做好细节、过程工作，在这个阶段，我们种下去的是诚信、务实、勤奋等种子，让它们到人们的心中去发芽、去感召。

人们的口碑，远比我们自我宣传百次、千次有效。

五：我们不能让情绪左右着我们工作的方向。

在实际工作中，我为我的工作进展缓慢怀疑着自身的能力，生出退缩之意。

“一口吃不出胖子。

只要你将此项工作当作了你的事业，只要你下定了决心执着的干下去，你就会在工作中不断的成长，而你的成长就会将你的工作推向成熟、成就。

”我在QQ上与我们的袁军军站长哀叹时，袁站长这样劝导着我，鼓励着我。

在《家园》里，我读到了胡元清老师的《经验、年轻、精神》：“发行是个极富实践性的工作，不是单纯依靠任何理论或言语就能解决的。

发行工作就是要靠脚踏实地的实干精神……”。

成绩不是一下子就能突显出来的，我们不能为一时的得失而怀疑着整条道路。

六：这份工作加深了我对市场的认识。

商品会饱和于市场，但市场永远接受崭新有意的事物。

我们不仅要将已有的东西推向市场，我们还要更新、创造，我们才能在市场中立足，发展。

我们才能引导人脉主动的、积极的向我们靠拢。

我们不去思考市场，我们只想用我们的主观意愿去掌控市场，这是不会太如意的。

总之，真理早就存在，就看我们什么时候让她苏醒。

一切困难都阻挡不了真理普照世间。

真理握在了我们手中，我们就会是一个光圈，吸引住人们的目光，打动人们的心灵！那时，广阔的市场就会呈现在我们的面前。

2、效果图见下图(也可见效果图.jpg)，命名为index.html。

要求：“先来个自我介绍吧”的黄色区域采用左右交替移动。

在导航栏中的我的日志链接到上题的rizhi.html,在我的日志列表中分别链接到日志中的三篇文章（提示：该处链接到rizhi.html的锚点处）
考核内容：本次实验要求学生在2课时时间内完成。

要求学生必须完成两个页面的制作，否则为不合格。

实验名称：表格的使用（一）
实验目的：
掌握dreamweaver工具的使用
掌握表格的基本属性
课时：2
实验环境：pc一台，dreamweaver8.0
预备知识：dreamweaver8.0的基本操作，dreamweaver8.0表格布局网页
实验内容（步骤）：
要求：
效果图中所涉及到的均放在图片在（学号后4位+image）文件夹中，要求所以的html文档都必须放在文件夹为html中。

所需要的图片可在教师提供的images文件夹中查找。

1、效果图见下图(也可见效果图.jpg)，命名为index.html。

要求：“先来个自我介绍吧”的黄色区域采用左右交替移动。

在导航栏中的我的日志链接到上题的rizhi.html,在我的日志列表中分别链接到日志中的三篇文章（提示：该处链接到rizhi.html的锚点处）
考核内容：本次实验要求学生在2课时时间内完成。

完成整个主页面制作为优，若有部分图片不能正常显示为良；只完成表格框架为合格，否则为不合格。

实验名称：表格的使用（二）
实验目的：
掌握dreamweaver工具的使用
掌握表格的综合应用
课时：2
实验环境：pc一台，dreamweaver8.0
预备知识：dreamweaver8.0的基本操作，dreamweaver8.0表格布局网页
实验内容（步骤）：
要求：
效果图中所涉及到的均放在图片在（学号后4位+image）文件夹中，要求所以的html文档都必须放在文件夹为html中。

所需要的图片可在教师提供的images文件夹中查找。

1、效果图见下图(也可见效果图.jpg)。

命名为blog.html
考核内容：本次实验要求学生在2课时时间内完成。

完成整个主页面制作为优，若有部分图片不能正常显示为良；只完成表格框架为合格，否则为不合格。

实验名称：框架的使用
实验目的：
掌握dreamweaver工具中框架的使用
掌握框架的应用
课时：2
实验环境：pc一台，dreamweaver8.0
预备知识：dreamweaver8.0的基本操作，dreamweaver8.0表格布局网页
实验内容：
要求：效果图中所涉及到的均放在图片在（学号后4位+image）文件夹中，要求所以的html文档都必须放在文件夹为html中。

所需要的图片可在教师提供的images文件夹中查找。

1、效果图见下图(也可见效果图.jpg)。

命名为index.html
2、在框架网页中完成浮动框架的设计，参考如下图：
考核内容：本次实验要求学生在2课时时间内完成。

完成整个主页面制作为优，若有部分图片不能正常显示为良；只完成表格框架为合格，否则为不合格。

实验名称：CSS基础（一）
实验目的：
了解CSS的作用
掌握4种样式表的设置方式
熟习常见的样式规则选择器
课时：2
实验环境：pc一台，dreamweaver8.0
预备知识：css的基本操作
实验内容（步骤）：
要求：
效果图中所涉及到的均放在图片在（学号后4位+image）文件夹中，要求所以的html文档都必须放在文件夹为html中。

所需要的图片可在教师提供的images文件夹中查找。

1、效果图见下图(也可见效果图.jpg)。

命名为index.htmli
考核内容：本次实验要求学生在2课时时间内完成。

完成css效果制作的为优，完成主页面制作为良；只完成基本布局且有图片能正常显示为合格，否则为不合格。

实验名称：CSS基础（二）
实验目的：
掌握样式表的边框属性
熟悉样式表中的方框属性
课时：4
实验环境：pc一台，dreamweaver8.0
预备知识：css的基本操作
实验内容（步骤）：
要求：效果图中所涉及到的均放在图片在（学号后4位+image）文件夹中，要求所以的html文档都必须放在文件夹为html中。

所需要的图片可在教师提供的images文件夹中查找。

效果图见下图(也可见效果图.jpg)。

命名为index.html
考核内容：本次实验要求学生在4课时时间内完成。

完成css导航效果制作的为优，完成主页面制作为良；只完成基本布局且有图片能正常显示为合格，否则为不合格。

实验名称：CSS菜单制作
实验目的：
掌握样式表的行内元素和块元素的含义
利用display属性和超链接属性制作菜单
课时：2
实验环境：pc一台，dreamweaver8.0
预备知识：css的基本操作
实验内容（步骤）：
要求：
效果图中所涉及到的均放在图片在（学号后4位+image）文件夹中，要求所以的html文档都必须放在文件夹为html中。

所需要的图片可在教师提供的images文件夹中查找。

1、效果图见下图(也可见效果图.jpg)。

命名为menu.html
2、效果图见下图(也可见效果图.jpg)。

3、效果图见下图(也可见效果图.jpg)。

考核内容：本次实验要求学生在2课时时间内完成。

完成css导航效果制作的为优，完成主页面制作为良；只完成基本布局且有图片能正常显示为合格，否则为不合格。

实验名称：css应用-表单对象
实验目的：
掌握表单对象的使用
利用css属性对表达对象进行美化
课时：2
实验环境：pc一台，dreamweaver8.0
预备知识：css的基本操作
实验内容（步骤）：
要求：效果图中所涉及到的均放在图片在（学号后4位+image）文件夹中，要求所以的html文档都必须放在文件夹为html中。

所需要的图片可在教师提供的images文件夹中查找。

1、效果图见下图(也可见效果图.jpg)。

命名为login.html
2、效果图见下图(也可见效果图.jpg)。

命名为index.html
考核内容：本次实验要求学生在2课时时间内完成。

完成css表单制作的为优，完成主页面制作为良；只完成基本布局且有图片能正常显示为合格，否则为不合格。

实验名称：css应用-布局（一）
实验目的：
掌握css中的定位属性
能够区分相对定位和绝对定位的区别
掌握典型的121布局法
课时：2
实验环境：pc一台，dreamweaver8.0
预备知识：css的基本操作
实验内容：
要求：
效果图中所涉及到的均放在图片在（学号后4位+image）文件夹中，要求所以的html文档都必须放在文件夹为html中。

所需要的图片可在教师提供的images文件夹中查找。

效果图见下图(也可见效果图.jpg)。

命名为position.html
考核内容：本次实验要求学生在2课时时间内完成。

完成css主界面布局效果制作的为优，完成主页面制作为良；只完成基本布局且有图片能正常显示为合格，否则为不合格。

实验名称：css应用-布局（二）
实验目的：
掌握css中的定位属性
能够区分相对定位和绝对定位的区别
掌握典型的131布局法
课时：2
实验环境：pc一台，dreamweaver8.0
预备知识：css的基本操作
实验内容：
要求：
效果图中所涉及到的均放在图片在（学号后4位+image）文件夹中，要求所以的html文档都必须放在文件夹为html中。

所需要的图片可在教师提供的images文件夹中查找。

4、效果图见下图(也可见效果图.jpg)。

命名为position.html
5、效果图见下图(也可见效果图.jpg)。

命名为index.html
考核内容：本次实验要求学生在2课时时间内完成。

完成2个css131布局效果制作的为优，完成第一个页面制作为良；只完成基本布局且有图片能正常显示为合格，否则为不合格。

实验名称：css应用-综合练习
实验目的：
熟练掌握css的样式生成器
学会将css文件保存在独立的文件中
熟练掌握css的各种属性
课时：4
实验环境：pc一台，dreamweaver8.0
预备知识：css的基本操作
实验内容：
要求：
效果图中所涉及到的均放在图片在（学号后4位+image）文件夹中，要求所以的html文档都必须放在文件夹为html中。

所需要的图片可在教师提供的images文件夹中查找。

6、效果图见下图(也可见效果图.jpg)。

命名为blog_css.html
考核内容：本次实验要求学生在4课时时间内完成。

完成2个css131布局效果制作的为优，完成第一个页面制作为良；只完成基本布局且有图片能正常显示为合格，否则为不合格。

实验名称：javascript语法基础
实验目的：
掌握javascript的变量的定义和使用
掌握javascript的数据类型的相互转换
掌握javascript的三种消息框的使用
课时：2
实验环境：pc一台，dreamweaver8.0
预备知识：编写javascript脚本代码的3个位置；简单的javascript程序；
实验内容：每小题命名规则为：学号后2位+name+题号。

如：张三学号65，则第一题的命名为65zhangsan01.html.若采用独立的js文件则命名为65zhangsan01.js
1、声明变量x，依次发赋给x数值型、字符型和布尔型的数据，输出x的显示结果。

2、声明两个变量x和y，将x赋予整数型数值2000，将x加上46后将值赋给y，输出表达式
x+y的结果。

3、声明三个变量x、y和z，使x等于字符串hello，使y等于数值2008，当x+y等于hello2008
且x不等于y的时候，z等于welcome to china！，否则等于we are still waiting！
4、使用去确认对话框提问“你是否来过重庆？”，如果点击“确认”，用警告对话框输出“你也
认为重庆很美丽吧！”；如果点击“取消”，用警告对话框输出“欢迎你到重庆来旅游！”，5、通过提示消息框输入任意一个整数xxx，当输入的是奇数时，向页面输出“你输入的数字xxx
是奇数！”；当输入的是偶数时，向页面输出“你输入的数字xxx是偶数！”；否则输出“你的输入不满足要求！”
6、通过体提示消息框输入任意一个整数xxx，求该整数的阶乘，并将结果通过警告对话框显示
出来。

提示：对输入的数要进行判断。

（可参考javascript完全手册中的函数parseInt）
思考题：
在文本框分别输入两个数，实现两个数的+、-、*、/运算，点击“=按钮将”结果显示在文本框中。

界面设计可参考下图。

注意对文本框输入的数据是否是数字要进行判断。

考核内容：本次实验要求学生在2课时时间内完成。

完成6道题为优，完成4道以上为良；完成3道题为合格，否则为不合格。

实验名称：javascript对象与事件
实验目的：
学会使用常用的内部函数
掌握函数的创建和使用
学会自定义对象的创建
课时：4
实验环境：pc一台，dreamweaver8.0
预备知识：javascript的函数的定义和使用；javascript的对象的定义和使用
实验内容（步骤）：
1、在文本框输入任意一个整数，求该整数的阶乘。

通过按钮的单击事件，并将结果显示在结果文本框中。

2、在前两个文本框内容改变的时候对输入进行判断，在最后一个文本框获得光标的时候得到计算结果。

3、对导航条动态改变背景和字体。

默认情况下是红底白字，鼠标移动时变成绿底黄字效果图如下：（要求采用js方法）
4、在文本框分别输入两个数，实现两个数的+、-、*、/运算，点击“=按钮将”结果显示在文本框中。

界面设计可参考下图。

注意对文本框输入的数据是否是数字要进行判断。

考核内容：本次实验要求学生在4课时时间内完成。

完成4道题为优，完成3道以上为良；完成2道题为合格，否则为不合格。

实验名称：javascript内置对象（string）
实验目的：
掌握内部对象String的方法应用
实验环境：pc一台，dreamweaver8.0
预备知识：javascript的函数的定义和使用；javascript的对象的定义和使用
实验内容（步骤）：
每小题命名规则为：学号后2位+name+题号。

如：张三学号65，则第一题的命名为65zhangsan01.html.若采用独立的js文件则命名为65zhangsan01.js
1、判断用户名和密码文本框不能为空，同时要求密码在4到8位之间。

2、把文本框中前后的空格去掉，并把去掉后的字符通过警告对话框显示出来。

参考如下：
3、要求文本框中只能输入字母，参考如下：。