JavaScript程序设计实例教程教案第13单元

《学生信息添加界面设计》《JavaScript程序设计》课第13单元
课程单元教学设计
（2019～2020学年第1学期）
所属系部：计算机与通信工程学院
制定人：
合作人：
制定时间：2020.8
***学院教务处制
JavaScript程序设计课程单元教学设计
单元教学进度设计（纲要）
一、情境导入
介绍本节课的教学目标
二、引入
任务：学生信息管理页面-界面设计
三、知识点讲解
文本框样式：
ui_input_txt02{
width: 60px;
height: 16px;
margin: 2px 2px 2px 5px;
outline: 0;
padding: 5px;
border: 1px solid;
border-color: #C0C0C0 #D9D9D9 #D9D9D9;
border-radius: 2px;
background: #FFF;
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1), 0 1px 0 rgba(255, 255, 255, 0.2);
-webkit-transition: box-shadow, border-color .5s ease-in-out;
-moz-transition: box-shadow, border-color .5s ease-in-out;
-o-transition: box-shadow, border-color .5s ease-in-out;
}
this.firstname=firstname;
stname=lastname;
this.age=age;
this.eyecolor=eyecolor;
}
动态按钮：
.ui_input_btn01 {
width: 80px;
height: 30px;
vertical-align: middle;
line-height: 30px;
text-align: center;
border-style: none;
cursor: pointer;
font-family: "Microsoft YaHei", "微软雅黑", "sans-serif";
background: url('btn.jpg') 0px -1px no-repeat;
}
.ui_input_btn01:hover {
width: 80px;
height: 30px;
vertical-align: middle;
line-height: 30px;
text-align: center;
border-style: none;
cursor: pointer;
font-family: "Microsoft YaHei", "微软雅黑", "sans-serif";
background: url('btn_hover.jpg') 0px 0px no-repeat;
color: #fff;
}
四、子页面设计与实现
功能实现
/*学生对象构造函数*/
function Student(no,name,class，zy)
{
this.no=no;
=name;
this.class=class;
this.zy=zy;
this.getNO=function() //返回学生学号{
return this.no;
}
}
/*判断输入是否符合要求*/
function check_num(num)
{
if(isNaN(num))
{
alert("输入的不是数字，请重新输入");
return false;
}
else
{
return true;
}
}
/*判断输入信息是否符合要求*/
function check()
{
var flag=true;
for(var i=0;i<7;i++)
{
if(form1.elements[i].value.length==0){
alert("输入内容不能为空！");
flag=false;
break;
}
if(i>1)
{
flag=check_num(form1.elements[i].value);
if(!flag) break;
}
else
{
continue;
}
}
return flag;
}
/*显示输入信息*/
function show()
{
if(check())
{
for(var i=0;i<7;i++)
{
with(form1.elements[i])
{
if(i<=1)
textarea.value+=" "+id+"："+value;
else
textarea.value+="\r\n"+id+"："+value;
}
}
textarea.value=textarea.value+"\r\n\r\n";
with(form1)
{
var stu=new
Student(elements[0].value,elements[1].value,elements[2].value,elements[3].value,ele ments[4].value,elements[5].value,elements[6].value);
}
}
}
</script>
五、评比
检查学生完成情况
六、总结
学生成绩管理页面-界面的设计。