web第三次.docx

web第三次.docx

《web第三次.docx》由会员分享，可在线阅读，更多相关《web第三次.docx（17页珍藏版）》请在冰豆网上搜索。

web第三次

南京信息工程大学Web技术实验（实习）报告

实验（实习）名称Javascript编程实验（实习）日期2017.11.27得分指导老师

系专业班级姓名学号

一、实验目的

1、掌握基本的JavaScript语法。

2、掌握将JavaScript脚本嵌入HTML文件的方法

3、掌握使用JavaScript脚本语言设计应用程序的过程

二、实验内容与步骤

1、对象和事件

（1）在文本编辑器中输入如下代码程序，请仔细阅读下列程序语句，理解每条语句的作用。

源程序清单如下：

functionmyfunction（）{

alert（"HELLO"）;

}

Bypressingthebutton,afunctionwillbecalled.Thefunctionwillalertamessage.

将页面中在标记间的JS代码改成.js文件的使用格式，改写Html文件中包含.js文件代码。

Hello.js文件代码:

functionmyfunction（）{

alert（"HELLO"）;

}

HTML文件代码：

Bypressingthebutton,afunctionwillbecalled.Thefunctionwillalertamessage.

运行结果：

（2）创建一个网页，在文本框分别输入两个数，实现两个数的+、-、*、/运算，点击“=”按钮将结果显示在文本框中。

界面设计可参考下图。

注意在前两个文本框内容改变的时候对输入的数据是否是数字要进行判断，在最后一个文本框获得光标的时候得到计算结果。

代码：

function$（id）{returndocument.getElementById（id）;}

window.onload=function（）{

$（"btn"）.onclick=function（）{

varn1=$（"num1"）.value;

varn2=$（"num2"）.value;

if（$（"fun1"）.value=="+"）

$（"result1"）.innerText=Number（n1）+Number（n2）;

if（$（"fun1"）.value=="-"）

$（"result1"）.innerText=Number（n1）-Number（n2）;

if（$（"fun1"）.value=="*"）

$（"result1"）.innerText=Number（n1）*Number（n2）;

if（$（"fun1"）.value=="/"）

$（"result1"）.innerText=Number（n1）/Number（n2）;

};

};

+

-*/

截图：

2、内置对象

（1）判断用户名和密码文本框不能为空，同时要求密码在4到8位之间。

代码：

用户名：

密码：

截图：

（2）编制一个实现能自动根据时间显示网页上不同问候语的程序hi.htm，要求：

   5点以后～8点以前显示早上好！

；

   12点以前显示：

“上午好！

”

   18点以前显示：

“下午好！

”

   21点以前显示：

“晚上好！

”

   23点以前显示：

“祝你晚安！

”

   23点～5点以前显示：

“网虫：

该休息了，明天还有课呢！

”

   说明：

显示全部使用弹出提示窗口方式实现。

代码：

截图

3．JavaScript表单处理

（1）设计一个在线调查的表单页面（含有单选、多选项），当用户单击提交按钮时将显示一个对话框显示用户的选择结果。

代码

functionshowMsg（）

{varstring1="你觉得本站：

"+（document.getElementById（"Radio1"）.checked?

"一般":

"优秀"）+"r\n\"

+"您的性别：

"+document.getElementById（"Select1"）.value+"\r\n"

+"您觉得需要添加的版块：

"+（document.getElementById（"Checkbox1"）.checked?

document.getElementById（"Checkbox1"）.value+","）:

""）

+（document.getElementById（"Checkbox2"）.checked?

document.getElementById（"Checkbox2"）.value+","）:

""）

+（document.getElementById（"Checkbox3"）.checked?

document.getElementById（"Checkbox3"）.value+","）:

""）

+（document.getElementById（"Checkbox4"）.checked?

document.getElementById（"Checkbox4"）.value+","）:

""）

+（document.getElementById（"Checkbox5"）.checked?

document.getElementById（"Checkbox5"）.value+","）:

""）;

alert（string1）;

}

你觉得本站:

一般  

优秀

您的性别:

男

女

您觉得需要添加的版块:

新闻  

娱乐  

游戏  

音乐  

视频

截图：

4、浏览器对象模型BOM

（1）设计一个用户注册页面。

注册内容包括用户名、密码及密码确认框、年龄、邮箱、一个提交按钮、一个重置按钮（清空所有文本框内容）。

对用户数据的具体要求：

密码及密码为4-12位任意字符并且两个密码框内容要相同；年龄在16和40之间；邮箱含有“@”及“.”。

①当用户点击提交按钮时需要验证数据的合法性，如果不满足以上要求，利用警告框（alert）给出相应的提示。

并且第一个不符合要求的文本框自动获得焦点，里面文本内容被选中。

②如果用户填写正确，则在新窗口中显示“注册成功！

”（新窗口没有菜单条，工具条和地址栏）。

代码：

functioncheckform（）{

if（document.login.userid.value==""）{

alert（"请输入用户名"）;

document.login.userid.focus（）;

return;

}

if（document.login.uerkey1.value==""）;{

alert（"请输入密码"）;

document.login.userkey1.focus（）;

return;

}

if（document.login.uerkey1.value!

=document.login.uerkey2.value）{

alert（"两个密码不一致"）;

document.login.userkey1.focus（）;

return;

}

if（email_str=document.login.email.value.indexof（"@"）==-1）{

alert（"电子邮件的格式不正确"）;

document.login.email.focus（）;

return;

}

alert（"验证都已通过"）;

}

用户名:

密码:

重复密码:

性别:

男

女

电子邮箱:

checkform（）"/>