您好,欢迎来到华佗小知识。
搜索
您的当前位置:首页第4章 JavaScript 编程基础实验

第4章 JavaScript 编程基础实验

来源:华佗小知识
第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()方法访问

元素,利用其 innerHTML 属性显示提示信息。

(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 在浏览器中打开网页,查看效果。

实验三 客户端表单基本验证

因篇幅问题不能全部显示,请点此查看更多更全内容

Copyright © 2019- huatuo0.cn 版权所有 湘ICP备2023017654号-2

违法及侵权请联系:TEL:199 18 7713 E-MAIL:2724546146@qq.com

本站由北京市万商天勤律师事务所王兴未律师提供法律服务