Javascript程序设计实验指导书.docx
《Javascript程序设计实验指导书.docx》由会员分享，可在线阅读，更多相关《Javascript程序设计实验指导书.docx（19页珍藏版）》请在冰点文库上搜索。
Javascript程序设计实验指导书
实训指导书
课程名称：
Javascript程序设计
开课单位：
MB010509
教师姓名：
实训项目一：
JavaScript环境搭建
一、实训目的
1、Javascript开发环境的搭建
2、javascript代码小体验
二、实训准备
1、教师准备：
EditPlus安装源文件及IE安装源文件
2、学生准备：
PC机
3、环境设备准备：
PC机
三、实训注意事项
1、软件安装在桌面上
四、实训要点
1、安装EditPlus
2、安装IE浏览器
五、实施步骤
1、运行EditPlus软件，完成安装
2、运行IE浏览器软件，完成安装
3、新建第一个javascript源程序并输出Helloworld!
4.
--
alert（"HelloWorld!
"）
//-->
六、评价标准
能独立完成软件的安装并新建html页面文件，输入代码运行后，有相应的输出结果。
实训项目二：
打印三角形
一、实训目的
1、打印正三角形
二、实训准备
1、教师准备：
2、学生准备：
PC机
3、环境设备准备：
PC机
三、实训注意事项
1、双重循环的应用
2.空格字符的打印
3.文本居中的应用
四、实训要点
1、for循环内容的掌握，空格字符的打印
2、双重循环的应用
五、实施步骤
1、运行EditPlus软件，新建html标准网页文件
2、
vark=prompt（"请输入打印的行数：
",""）;
for（vari=1;i<=k;i++）
{
//alert（"当前循环到第"+i+"行"）;
for（varj=0;j{
document.write（"* "）;
}
document.write（"
"）;
}
六、评价标准
能独立新建html页面文件，输入代码运行后，有相应的输出结果。
实训项目三：
简易计算器
一、实训目的
1、实现一个简单计算器，能进行加减乘除四则运算
二、实训准备
1、教师准备：
2、学生准备：
PC机
3、环境设备准备：
PC机
三、实训注意事项
1、函数的参数及返回值都不需要指定数据类型
四、实训要点
1、运算符号的应用
2、函数的定义及调用
五、实施步骤
1、运行EditPlus软件，新建html标准网页文件
2、
| 购物简易计算器
| 第一个数 |
| 第二个数 |
| | | |
| 计算结果 |
六、评价标准
能独立完成软件的安装并新建html页面文件，输入代码运行后，有相应的输出结果。
实训项目四：
文字环绕图片效果
一、实训目的
1、实现一个图片左悬浮，文字环绕在右边的效果图
二、实训准备
1、教师准备：
图片及文字内容
2、学生准备：
PC机
3、环境设备准备：
PC机
三、实训注意事项
1、float有三种不同属性值，分别为none/left/right
四、实训要点
1、float属性
2、文字风格样式设计
五、实施步骤
1、运行EditPlus软件，新建html标准网页文件
2、
.pic{
float:
left;
border:
1pxsolid#cccccc;
margin-top:
80px;
margin-bottom:
40px;
margin-left:
40px;
margin-right:
40px;
}
六、评价标准
能独立完成软件的安装并新建html页面文件，输入代码运行后，有相应的输出结果。
实训项目五：
盒模型的应用
一、实训目的
1、实现一个块状元素盒模型，能进行盒模型风格样式的设计并且实现盒模型与文字的环绕效果
二、实训准备
1、教师准备：
盒模型风格样式的规定
2、学生准备：
PC机
3、环境设备准备：
PC机
三、实训注意事项
1、盒模型内边距padding,边框border及外边距margin
四、实训要点
1、盒模型概念掌握
2、盒模型页面浮动布局
五、实施步骤
1、运行EditPlus软件，新建html标准网页文件
2、
--
*{margin:
0px;padding:
0px;}
body{margin:
10px;font-size:
14px;}
#box{background-color:
#66CCFF;height:
100px;width:
300px;border:
5pxsolid#66CCCC;
padding:
5px;text-align:
center;line-height:
100px;position:
absolute;float:
left;}
-->
我现在没有浮动
center;">
六、评价标准
能独立完成软件的安装并新建html页面文件，输入代码运行后，有相应的输出结果。
实训项目七：
验证登陆悠闲网
一、实训目的
1、实现一个网站登陆功能，能自动识别用户名格式及密码长度等功能
二、实训准备
1、教师准备：
2、学生准备：
PC机
3、环境设备准备：
PC机
三、实训注意事项
1、对用户名及密码内容的判断
四、实训要点
1、文本框onchange（）事件来判断用户名格式及密码长度等
2、登录成功与否的判断
五、实施步骤
1、运行EditPlus软件，新建html标准网页文件
2、
functioncheck（）{
varmail=document.getElementById（"email"）.value;
if（mail==""）{//检测Email是否为空
alert（"Email不能为空"）;
returnfalse;
}
if（mail.indexOf（"@"）==-1）{
alert（"Email格式不正确\n必须包含@"）;
returnfalse;
}
if（mail.indexOf（"."）==-1）{
alert（"Email格式不正确\n必须包含."）;
returnfalse;
}
varpwd=document.getElementById（"pwd"）.value;
if（pwd==""）{
alert（"密码不能为空"）;
returnfalse;
}
if（pwd.length<6）{
alert（"密码长度不能小于6个字符"）;
returnfalse;
}
returntrue;
}