第4章 JAVASCRIPT 编程基础实验
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
第4章JavaScript编程基础
实验1猜数字游戏
实验说明：
这是一个经典的小游戏，由计算机随机生成一个1到100的数字，然后由玩家去猜，计算机给出提示。若玩家可以10次以内猜中，算玩家赢（图4-1）。
图4-1猜数字游戏
实验目的：
1.学会编写JavaScript程序。
2.掌握访问网页中特定元素的方法。
实验准备：
一台安装好Visual Web Developer的计算机
实验步骤：
1.使用Visual Web Developer创建一个网站，向网站中添加一个
GuessNumber.htm网页。
2.根据图4-2设计网页，其内容如下：
注意两个设定了id的HTML元素“”和“
3.请在网页的
元素内编写JavaScript函数Guess()，实现游戏功能，整个代码框架如下：
要点提示：
（1）整个游戏的判断逻辑需使用条件语句实现。
（2）可以使用document.getElementById()方法访问文本框元素，通过其value属性取出用户所输入的数。
（3）使用document.getElementById()方法访问
（4）使用浏览器对象location.Reload()方法重新刷新网页，以便重新开始游戏。
4.设置“对不对”按钮的单击事件响应函数为Guess()：
实验2动态样式设定
实验说明：
本实验将设计一个网页，网页上提供一个文字段落和四个单选钮，分别表示四种样式。用户点击选择一种样式，网页动态显示出样式应用于文字段落的效果（图4-2）。
实验目的：
1.掌握给指定HTML元素动态设定样式的方法。
2.能应用盒子模型正确地布局网页。
3.掌握为HTML控件编写事件响应函数的方法。
实验准备：
1安装好Visual Web Developer的一台计算机.
2阅读 4.7.3节，了解如何编程动态设置HTML元素的样式类。
实验步骤：
1使用Visual Web Developer创建一个新网站，向网站中添加一个新网页：
DynamicChangeStyleClass.htm。
2根据示例网页定出网页逻辑结构和主体元素：
请按照图4-2的显示将上述代码中“①”和“②”所代表的样式表规则填上，其中：①：填写的样式规则要使div盒子宽度合适（指大小刚好可以将段落文字分为多行）并在浏览器窗口中居中显示，由细实线边框包围。
②：填写的样式规则要使盒子中的四个单选钮在浏览器窗口中居中显示。
3给页面添加以下样式类，这些样式类将被动态地应用于文字段落。
4完成以下的JavaScript函数：
要点提示：
（1）使用document.getElementById()获取对文本段落的引用，然后通过此引用设置其className属性，就可以将指定的样式类应用于文字段落。
（2）要恢复默认的样式，只需将文字段落的className属性设为null。
5将changestyle()函数与四个单选钮的onclick事件挂接上（注意函数参数值的设定），一个示例如下：
6在浏览器中打开网页，查看效果。
实验三客户端表单基本验证