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;
}