北京理工大学珠海学院实验报告
ZHUHAI CAMPAUS OF BEIJING INSTITUTE OF TECHNOLOGY
班级 计算机6班 学号12345668900 姓名 xxx 指导教师 xxx 成绩
实验题目 javascript编程实验（一） 实验地点及时间 2015.1.13
说明：报告须包括目的、环境、过程、源程序、结果、总结等内容。如实记录，签名手写。
一、实验目的
熟练使用javascript编程
二、实验环境
1、硬件环境：
2、软件环境
（1）操作系统：windows XP
（2）开发环境：Dreamweaver CS5
三、实验内容
利用javascript +css+div 实现如下网页效果
点击tab的标签切换时,显示不同的内容.
四、实验过程
新建HTML文档，首先将每个DIV排版起来，每个要显示的内容也排版好，然后就用JS将另外两个隐藏起来，对每个标签设置点击事件，点击相应的标签显示相应的内容。
五、源程序清单
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type=text/css>
body {
font-size: 14px;
font-family: "宋体"
}
ol li {
margin: 8px
}
#con {
font-size: 12px;
margin: 0px auto;
width: 600px;
}
#tags {
padding: 0px;
margin: 0px 0px 0px 10px;
width: 400px;
height: 23px
}
#tags li{
background: #aecbd4;
float: left;
margin-right: 1px;
list-style-type: none;
height: 23px;
}
#tags li a{
padding-right: 10px;
padding-left: 10px;
background: #0aa;
float: left;
padding-bottom: 0px;
color: #23c;
line-height: 23px;
padding-top: 0px;
height: 23px;
text-decoration: none
}
#tags li.emptyTag {
background: none transparent scroll repeat 0% 0%;
width: 4px
}
#tags li.selectTag {
background-position: left top;
margin-bottom: -2px;
position: relative;
height: 25px
}
#tags li.selectTag a {
background-position: right top;
color: #000;
line-height: 25px;
height: 25px;
}
#tagContent {
padding-right: 1px;
border: #aecbd4 1px solid;
padding-left: 1px;
padding-bottom: 1px;
padding-top: 1px;
background-color: #fff;
}
.tagContent {
padding-right: 10px;
display: none;
padding-left: 10px;
padding-bottom: 10px;
width: 576px;
color: #474747;
padding-top: 10px;
height: 250px;
}
#tagContent div.selectTag {
display: block;
}
</style>
</head>
<body>
<DIV id=con>
<UL id=tags>
<LI class=selectTag><A onMouseover="selectTag('tagContent0',this)" href="javascript:void(0)">标签一</A> </LI>
<LI><A onMouseover="selectTag('tagContent1',this)" href="javascript:void(0)">标签二</A> </LI>
<LI><A onMouseover="selectTag('tagContent2',this)" href="javascript:void(0)">自适应宽度的标签</A> </LI>
</UL>
<DIV id=tagContent>
<DIV class=tagContent id=tagContent0>第一个标签的内容</DIV>
<DIV class="tagContent selectTag" id=tagContent1>第二个标签的内容</DIV>
<DIV class=tagContent id=tagContent2>第三个标签的内容</DIV>
</DIV>
</DIV>
<script type=text/javascript>
function selectTag(showContent,selfObj){
// 操作标签
var tag = document.getElementById("tags").getElementsByTagName("li");
var taglength = tag.length;
for(i=0; i<taglength; i++){
tag[i].className = "";
}
selfObj.parentNode.className = "selectTag";
// 操作内容
for(i=0; j=document.getElementById("tagContent"+i); i++){
j.style.display = "none";
}
document.getElementById(showContent).style.display = "block";
}
</script>
</body>
</html>
五、总结体会
通过此次实验我学会了用利用javascript ，css，div 实现运用在网页中实现网页的功能。
第二篇：Javascript编程实验大纲
《JavaScript编程课程》实验
教学大纲
(课程编号： )
本大纲由数学与计算机学院计算机应用教研室全体教师讨论制订，数学与计算机学院教学工作委员会审定，实验教学及实验室建设管理处、教务处共同审核批准。
一、课程性质：专业基础课
二、课程类别：单列
三、实验学时：32
四、实验学分：2
五、课程实验教学目的要求
通过实验教学，学生掌握JavaScript动态网页编程技术，学会脚本编程技巧和编程步骤，逐步建立起编程思想，能够根据实际需要制作出的动态网页效果，拓展自己的整体语言设计知识和基本技能。综合设计性实验可以培养学生综合运用所学知识进行创造性设计能力，要求小组协同完成，从而培养团队协作精神。具体要求如下：
1．掌握JavaScript语言的基本语法、控制结构和常用内置对象。
2．掌握JavaScript事件处理技术。
3．掌握使用JavaScript内置文档对象操作页面元素。
4．掌握JavaScript内置窗口对象。
5．掌握使用JavaScript操作XML文档。
6．掌握AJAX技术。
7．培养综合运用所学课程知识进行动态网页设计能力。
8．培养团队协作能力。
六、课程实验项目简表
七、课程实验项目简述
实验一 JavaScript语言基础
（一）目的要求
通过本实验教学，强化学生掌握JavaScript基本语法，主要包括数据类型、常量及变量、表达式与运算符、控制结构、函数，以及数学、时间、字符串和数组等对象。
通过本实验教学，提高学生对基本语法的理解和综合运用，掌握构建复杂程序的结构化编程能力，为课程后续内容的学习打下基础。
（二）实验内容
产生二个整数数组，一个从表单输入，另一个用random函数进行赋值，将它们分别用冒泡法进行排序，然后归并为一个数组，在页面上输出排序前和归并后的3个数组。
实验二 事件处理技术
（一）目的要求
通过本实验教学，强化学生掌握JavaScript事件处理技术，主要包括鼠标和键盘事件、页面事件、表单事件、字幕滚动事件和编辑事件等。
通过本实验教学，提高学生对事件处理技术的理解和运用，具备事件处理能力。
（二）实验内容
1、制作由下向上的滚动字幕，字幕内容要求包含网站超级链接和图片超级链接，使用鼠标移动事件控制字幕运动和停止。
2、在下拉列表框中设置五种以上颜色，选择颜色后，滚动字幕背景色改变成相应颜色。
实验三 文档对象应用技术
（一）目的要求
通过本实验教学，强化学生掌握JavaScript文档对象的应用，能够应用文档对象获取页面元素和编辑页面。
（二）实验内容
使用文档对象在页面上创建学生信息表。信息表包括学号、姓名、性别、电子邮件、联系电话、个人主页和联系地址，信息表内容通过表单输入，提交前先使用正则表达式进行验证，联系地址不能超过20个字符，每输入一名学生的信息，提交后，表格增加一行，表格不能被选择、复制。
实验四 窗口对象使用
（一）目的要求
通过本实验教学，强化学生掌握JavaScript窗口对象使用方法，掌握使用窗口对象获取屏幕、游览器、当前网页的网址和历史记录等信息，以及操作窗口。
（二）实验内容
1．设计一个窗口，在页面上显示屏幕的长和高、游览器名称和版本、操作系统，在页面状态栏上显示当前页面的地址。
2．设置窗口的位置和尺寸，位置和尺寸数据从提示对话框输入。
实验五 XML文档操作
（一）目的要求
通过本实验教学，强化学生掌握JavaScript操作XML文档，要求能够对XML文档进行读取、输出、添加和删除等操作，并能够对XML文档进行分页显示。
（二）实验内容
实现XML文档内容（学生信息表：学号、姓名、性别、籍贯、电话号码）的读取、输出、添加和删除，要求学生信息分页显示。
实验六 AJAX技术
（一）目的要求
通过本实验教学，强化学生掌握AJAX应用技术，要求能够向服务器发送请求，获取服务器响应的文档，并读取文档内容，然后插入到网页中。
（二）实验内容
应用AJAX读取服务器中的学生信息文档，解析文档并显示在页面中。
实验七 综合设计
（一）目的要求
通过本实验教学，强化学生对本课程主要知识点的理解和综合应用能力，综合设计以6至7人一组，协同完成，培养团队协作能力，以及运用所学知识进行创新设计的能力。
（二）实验内容
网页计算器设计、网页飘浮广告、设计贪吃蛇游戏设计、网页相册设计
八、教材（讲义、指导书）及参考书
1.JavaScript程序设计，邹天思，人民邮电出版社，2012.5
2.JavaScript高级编程，Nicholas C. Zakas著，曹力、张欣译，人民邮电出版社，2006.11
3. JavaScript网页编程案例教程，屈鹏飞，，清华大学出版社,2012.6
4. JavaScript入门经典（第4版）,刘海平,清华大学出版社.2008.7
九、考核方式及成绩评定办法
实验教学不进行期末笔试考试。主要根据学生平时实验及实验报告和综合设计进行评分。
学生在实验前应该认真准备实验，根据实验要求进行实验准备，然后进行实验并完成实验报告，最后教师评出实验成绩，平时实验采用10分制。综合设计以6~7人为一组，团队协作完成，采用100分制。学期实验成绩评分细则为：
1．完成所有实验及实验报告 40分
2．综合设计 60分
十、其它说明
