WEB脚本实验指导书Word格式.docx
- 文档编号:22458529
- 上传时间:2023-02-04
- 格式:DOCX
- 页数:12
- 大小:121.01KB
WEB脚本实验指导书Word格式.docx
《WEB脚本实验指导书Word格式.docx》由会员分享,可在线阅读,更多相关《WEB脚本实验指导书Word格式.docx(12页珍藏版)》请在冰豆网上搜索。
1、使用脚本编写工具或常用网页制作工具,设计合适的网页界面,编写相关脚本,实现实验内容所示的脚本设计目的;
2、脚本编写应符合JavaScript代码规范,有适当的缩进和注释、标识符的命名。
通过在IE中预览不存在任何脚本错误;
3、认真撰写实训报告。
三、实验任务
(一)数据表示、常用函数、流程控制
1.目的要求:
熟悉JavaScript客户端的数据表示、常用函数、程序流程控制结构及数组的运用
2.实验内容
完成下列程序的编写:
(1)在下面的HTML文档中,编写函数test(),实现如下功能:
A.当多行文本框中的字符数超过20个,截取至20个
B.在id为number的td中显示文本框的字符个数
(2)在网页上通过表格输出10个随机数的从大到小的排列结果。
(3)在下面的HTML文档中,编写函数test(),实现如下功能:
A.文本框失去焦点时,验证用户输入是否为电话号码,要求当用户输入为空,或输入中有非“013246789-”字符,判定其不是电话号码,此时显示div层
B.文本框得到焦点时,隐藏div层
(二)熟悉客户端脚本语言的内置对象的应用,熟练运用浏览器对象体系中常用对象的作用、方法、属性.
(1)编写一个状态栏的跑马灯(运用字符串对象);
(2)在状态栏上即时显示当前日期、星期、时间。
四、实验报告要求
1.独立完成实验内容;
2.保存制作的网页;
3.记录实验过程存在的问题,书写实验报告。
实验二Javascript事件处理
复习DOM事件模型、鼠标、页面和表单相关事件。
一、实验目的
1.了解JS事件处理的基本概念。
2.理解JS事件处理模型.
3.掌握JS常用事件及处理
二、实验要求
1、使用脚本编写工具或常用网页制作工具,设计合适的网页界面,编写相关脚本,实现实训内容所列示的脚本设计目的;
三、实验内容
1.运用第九章的知识完成下面的网页功能
2.完成下拉列表的动态添加
分别用
1-document.的对象和方法完成
2-文档对象模型的方法完成
1.你怎么理解event
2.写出在实验中遇到的问题和解决的方法
实验三文档对象模型的使用
复习文档对象的常用属性、方法与事件;
document对象的应用。
1.使学生掌握在JavaScript脚本中DOM控制HTML表单及表单元素的方法。
包括表单的引用、表单元素的引用与值的处理、使用JavaScript脚本处理表单。
通过实训,学生应具备利用脚本熟练处理表单数据、输出表单以及表单提交时数据合法性验证的能力。
2.掌握DOM的使用,达到动态的修改网页。
1、使用脚本编写工具或常用网页制作工具,设计合适的网页界面,编写相关脚本,实现实验内容所列示的脚本设计目的;
(一)访问表单及表单元素
1)设计下图所示表单,
2)输出所填及所选内容
3)
文本框在获得焦点时应清除内容
(二)用DOM动态的修改网页
1.初始网页效果如图一
2.在输入姓名、性别和班级后单击“add”按钮可以把数据添加至表格最后一行
3.选中删除列的多选框后点击“del”按钮可以删除所选行信息
4.完成下面网页的功能
5.发挥你的想象,完善此输入网页的用户友好性。
实验四Javascript其他窗口对象
复习window对象的属性、方法与事件。
使学生掌握window对象常用的属性、方法、事件等。
通过实训,应该达到对这些对象的灵活运用。
项目一、在打开网页后弹出一个有宽200,高300的窗口,且在该网页关闭后,弹出的窗口也关闭。
项目二、设计弹出式菜单。
项目三、在状态栏上显示当前时间。
项目四、在一个窗口中输入内容,显示在另一个窗口中。
四、实验要求
3.记录实习过程存在的问题,书写实验报告。
实验5DOM解析XML文档
复习XML文件的创建与载入;
通过javascript获取XML文档数据。
1、创建并加载XML文档
2、通过DOM访问XML文档的元素与属性
3、学会使用常用的DOM对象
三、实验内容及步骤
创建一个新的子目录以存放新编写的XML文件。
1、新建一个XML文档,输入以下代码,将文件存为lxr.xml。
<
?
xmlversion="
1.0"
encoding="
gb2312"
>
参赛人列表>
<
联系人性别="
男"
<
姓名>
张小三<
/姓名>
ID>
001<
/ID>
班级>
201301<
/班级>
成绩>
93<
/成绩>
/联系人>
女"
姓名>
郑燕红<
008<
201302<
85<
李小红<
009<
60<
010<
83<
/参赛人列表>
2、编写自定义函数readXML()读取xml文档显示在页面中
functionreadXML(){
varurl="
lxr.xml"
;
if(window.ActiveXObject){//IE
varxmldoc=newActiveXObject("
Microsoft.XMLDOM"
);
xmldoc.onreadystatechange=function(){
if(xmldoc.readyState==4)createTable(xmldoc);
}
xmldoc.load(url);
}
elseif(document.implementation&
&
document.implementation.createDocument){//Mozilla......
varxmldoc=document.implementation.createDocument("
"
"
null);
xmldoc.onload=function(){
xmldoc.onload=createTable(xmldoc);
}
3、通过body的onload事件,调用自定义的readxml()方法,建立DOM树同XML文档之间的关联。
读取xml文件,显示在页面中
4、编写自定义函数createTable(xmldoc),用于将载入的dom中的xml取出以表格的形式显示在页面中,参数xmldoc指定载入到dom中的xml。
表格形式如下:
姓名
性别
Id
班级
成绩
五、实验要求
实验六AJAX中利用DOM解析xml文件
复习XMLHttpRequest对象的使用。
一、实验目的
1.认识Ajax的作用。
2.能够利用Ajax创建简单的web页面。
3.掌握javaScript的基本语法并能够利用javaScript实现DOM解析xml文件。
4.掌握基本的XMLHttpRequest();
应用Ajax技术实现无刷新的级联下拉列表,在”所属大类”下拉列表框中选择“家居日用”列表项后,在“所属小类”下拉列表框中将显示属于该类别下的全部子类。
四、实验体会
1.写出使用ajax主要操作步骤
实验七JQuery获取form表单元素的值
复习jquery的下载、配置、插件、选择器、控制页面、事件处理等
一、实验目的
1.了解jQuery核心库及使用原理;
2.初步掌握jQuery基本语法,认识ready方法;
3.熟练掌握并使用jQuery选择器;
4.理解jQuery对象的结构;
5.熟练的掌握对jQuery对象的处理。
jquery取得text,areatext,radio,checkbox,select的值,以及其他一些操作
a)html部分
b)
编写JS文档部分
其操作要求过程如下:
1,jQuery获取object对象,如下拉框select对象,单选框radio对象,复选框checkbox对象,文本框text对象;
2,获取对象值,对于值唯一的元素,如select,radio,text通过get()方法获取value值,对于数据元素,如checkbox通过each循环获取value值
3,把以上获得的值,添加到一个p标记中,要求黑体,16号字,每项内容独立一行
4,把以上获得的值,添加到一个表格中,每项内容作为一列,可添加多行,每行带删除按钮,可做行删除
实验八JavaScript+Ajax+jQuery网站开发
复习JavaScript、Ajax、jQuery技术的使用。
一、实验目的:
1、掌握网页开发前如何拟定系统目标及功能结构
2、使用javascript制作导航菜单、浮动菜单等技术
3、使用jQuery技术实现广告循环播放的网页特效
4、使用Ajax技术实现信息滚动显示效果
二、实验任务:
自主设计一个站点要能体现实验目的中所要求掌握的技能。
三、实验报告要求
1.描述程序功能及结构,
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- WEB 脚本 实验 指导书