下载文档原格式
![实验5 JavaScript 面向对象程序设计_JavaScript前端开发实用技术教程_[共2页]](https://img.taocdn.com/s1/m/e9a03a309b89680202d82515.png)
282（4）参照【例3-19】练习使用函数的返回值。
3．使用JavaScript函数库参照下面的步骤练习使用JavaScript函数库。
（1）参照【例2-20】练习定义函数库。
（2）参照【例2-21】练习引用函数库。
实验5 JavaScript面向对象程序设计目的和要求（1）了解DOM对象的概念。
（2）学习JavaScript内置对象的使用方法。
（3）学习DOM编程的方法。
（4）学习BOM编程的方法。
实验准备了解面向对象编程是JavaScript采用的基本编程思想，它可以将属性和代码集成在一起，定义为类，从而使程序设计更加简单、规范、有条理。
Date是JavaScript的日期类，用于管理和操作日期和时间数据。
String是JavaScript的字符串类，用于管理和操作字符串数据。
Array类用于定义和管理数组。
可以使用Math对象处理一些常用的数学运算。
了解HTML DOM 定义了访问和操作HTML文档的标准方法。
它把HTML文档表现为带有元素、属性和文本的树结构（节点树）。
了解HTML BOM对象模型类结构由一组浏览器对象组成。
实验内容本实验主要包含以下内容。
（1）练习使用JavaScript内置对象。
（2）练习DOM编程。
（3）练习BOM编程。
1．使用JavaScript内置对象参照下面的步骤练习使用JavaScript内置对象。
（1）参照【例4-1】练习使用Date类。
（2）参照【例4-2】练习使用String类的length属性返回字符串的长度。
（3）参照【例4-3】练习使用String类的anchor()方法创建HTML锚。
（4）参照【例4-4】练习使用String类的link()方法创建超链接。
（5）参照【例4-5】练习使用String类的big()方法放大字体。
（6）参照【例4-6】练习使用String类的charAt()方法。
JavaScript表达式和逻辑控制语句的使用实验一一．实验目的掌握JavaScript的变量；掌握JavaScript的数据类型；掌握JavaScript的运算符；掌握JavaScript的逻辑控制语句。
二．实验内容1、声明一个变量str，为其赋值"Hello World!"，显示该值；改变该变量值为"Hello China!"，然后再显示该值。
2、将1~10之间的奇偶数分开，页面呈现方式如下：3、任意输入一个年份，判断是否为闰年。
实验二函数部分一．实验目的掌握JavaScript的常用函数；二．实验内容编写一个函数，在页面上输出1~1000之间所有能同时被3，5，7整除的证书，并要求每行显示6个这样的数。
ex050303.htm<html><head><script language=javascript><!--function IsThatNumber(x){return x%3==0 && x%5==0 && x%7==0;}//--></script></head><body><pre><script language=javascript><!--var n,nb=0;for(n=1;n<1000;n++){if (IsThatNumber(n)){if (nb%6 > 0) document.write(",");nb++;document.write(n);if (nb%6 == 0) document.write("\n");}}document.write("\n\n");document.write("共有"+nb+"个数");//--></script></pre></body></html>实验三实验目的：常用函数的使用。
国开电大 JavaScript程序设计实训五：实现动态交互功能一、实训目标本实训的主要目标是通过学习和实践，掌握JavaScript中实现动态交互功能的方法和技巧。
通过本实训，你将能够运用JavaScript编写具有交互性的网页，提升用户体验。
二、实训内容本实训将涉及以下内容：1. JavaScript的事件处理：学习如何通过JavaScript监听和响应网页上的事件，如点击、鼠标移动等。
2. DOM操作：学习如何使用JavaScript来动态修改网页的内容、样式和结构，实现动态交互功能。
3. 表单验证：学习如何使用JavaScript对用户输入的表单数据进行验证，确保数据的合法性。
4. Ajax技术：学习如何使用JavaScript中的Ajax技术，实现网页的异步加载和数据交互，提升用户体验。
三、实践任务本次实训的实践任务如下：1. 实现一个简单的网页计算器：通过JavaScript实现一个网页上的计算器，用户可以输入两个数字，选择运算符进行计算，并在网页上展示结果。
2. 实现一个简单的表单验证：通过JavaScript对一个表单进行验证，验证表单中的必填项是否为空，并给出相应的提示。
3. 实现一个简单的图片轮播：通过JavaScript实现一个图片轮播的功能，用户可以通过点击按钮或自动播放切换图片。
四、实训要求1. 学员需按照实践任务要求，使用JavaScript编写相应的代码，并将代码嵌入到网页中进行测试和演示。
2. 学员需提交实践任务的代码和相应的实践报告，包括代码的详细说明、测试过程和结果分析等。
3. 学员可在实践过程中参考相关资料和教材，但需保证独立完成实践任务，不得抄袭他人代码。
4. 学员可在实践过程中遇到问题时，通过在线学习平台进行讨论和求助，但需独立思考并解决问题。
五、实训总结通过本次实训，你将掌握JavaScript中实现动态交互功能的方法和技巧。
你将能够运用JavaScript编写具有交互性的网页，提升用户体验。
长江职业学院Javascript语言程序设计实验指导书专业：学号：姓名：班级：指导老师：软件教研室编实验一JavaScript基本操作一、实验目的熟练掌握在HTML文件中编写JavaScript程序的基本操作，及在Microsoft Internet Explorer浏览器和Netscape的Nevigator浏览器中调试JavaScript的基本操作。
二、实验内容1、用NotePad创建一个简单的.htm文件，在Microsoft Internet Explorer浏览器中浏览效果。
2、编写第1章中的实例源文件，并在Microsoft Internet Explorer浏览器中进行测试。
3、调试一段JavaScript程序，找出其中的错误。
三、实验步骤1、通过windows的文件管理器，在c盘下新建一个文件夹jsp_ex,用于保存实验中的文件，如图1-1所示。
2、在windows中打开“记事本”，（也可以用其他编辑html文件的工具软件，如Microsoft frontpage,Macromedia Dreamweaver等，编写例1-1的ch1_01.htm程序，然后将文件保存在C:\jsp_ex文件夹中。
3、用下述任意一种方法，在浏览器中显示ch_01.htm，如图1-2。
A．在图1-1中双击“ch1_01.htm”文件名。
B．在图1-1中用鼠标右键单击“ch1_01.htm”，在打开的菜单列表中，如果有所需浏览器名就可以直接点击浏览器名。
C．现在windows中打开所需浏览器，然后按【ctrl】+【o】，在打开的对话框中找到ch_01.htm文件。
4、再次编辑ch1_01.htm文件，将第21行中的“document.write”改写为“Document.write”然后按第3步的操作，得到如图1-3的效果，不能显示“上一次网页更新日期”，这时，通过浏览器的调试工具查找出出错的位置，修改后再次测试。
项目5：使用JavaScriptJavaScript的速度和威力正呈几何数量增长。
所有现代的浏览器，包括谷歌的Chrome，Mozilla的火狐，苹果的Safari和微软的IE，都能以接近机器码级的水平执行JavaScript脚本。
加之，像W3C和WASP这样的标准化组织的推广，确保了JavaScript能一致地运行在各种浏览器上。
Ajax库是演示JavaScript有效地运行于各浏览器的极好例子。
在最后的项目中，你将学习扩展一个流行的Ajax库，jQuery，用它创建一个简单的Lightbox效果的产品照片库。
使用jQuery有许多用来快速扩展网站的Ajax库。
这个项目需要在站点上下载文件。
你会看到在下载文件包里有两个Ajax库：jQuery和Spry。
这两个库都是开源的。
第一个库jQuery，可以说是最流行的Ajax库。
你能从签出它，从而得到详细的关于怎样使用这个库的信息。
第二个库Spry，是由Adobe开发并管理的一个开源项目（图 5.1Proj）。
Adobe的Web开发工具，Dreamweaver，现已原生支持Spry。
由于jQuery核心脚本允许被扩展，所以有成百的jQuery扩展被开发并被提供。
使用JavaScript开发的jQuery扩展代码是难以保护的。
因此，你会发现大多数jQuery扩展是作为开源项目被管理的。
242 项目 5：使用JavaScript图 5.1Proj 在Adobe网站上的Ajax框架Spry。
开发一个Lightbox式的图片管理工具Lightbox效果增强了屏幕操作。
传统上，如果在网页上有个图片，你要么提供完整的图片，要么提供一个链到大图片的链接。
Lightbox效果添加一个缩略图到页面（图 5.2Proj）。
当你选定缩略图时，主页面变暗并加载大图片（图 5.3Proj）。
导航按钮使你可以依次查看图库中的图片。
关键在于，你永远不用离开你所在的页面。
整个Lightbox的创建，需要用到图片组合，jQuery库，定制J的avaScript脚本，CSS和HTML。
一、实验目的1．练习使用HTML中最基本的一些标签，如定义标题、段落及标记文字的显示方式等。
1．熟练掌握在HTML文件中编写JavaScript程序的基本操作，以及在Google Chrome 中调试JavaScript的基本操作。
2．熟练掌握JavaScript的基本编程概念和编程技术。
3．熟练掌握JavaScript程序语言的数据类型、表达式、运算符及基本控制语句，并学习基本的对象概念和时间处理程序。
二、主要仪器设备微型计算机、Windows操作系统，MyEclipse软件。
三、实验原理与方法1．在MyEclipse环境下编写HTML文件，制作一个简单的网页能够在浏览器上运行；2．基本掌握了JavaScript的语法格式及应用方法后，编写一个js文件；3．在MyEclipse环境下编写好HTML文件中添加JavaScript，实现网页的动态效果；四、实验主要内容1.使用HTML搭建页面结构和内容，CSS美化页面，JS给页面添加动态效果和内容，制作一个网页。
2．编写一个简单的form表单，用来判断人体的BMI值是否正常。
3．通过几种方法在HTML中引入JS。
4．通过实例来验证JS里面的运算符和JA V A中的异同。
五、实验主要步骤与实验结果1、实验主要操作过程（1）新建一个HTML文件，实现人体BMI值的判断首先在WebRoot根目录下面新建一个HTML文件，命名为HelloWeb1.html，找到该文件的<body></body>部分，在其中添加代码；然后使用HTML语言里面新建一个form表单，在该表单中编写两个文本框和一个按钮，实现用户在里面输入数据；最后在HelloWeb.java文件中编写判断条件，用户输入身高和体重，单击“提交”按钮就可知道自己的BMI值是否正常。
（2）使用JS给页面添加动态效果和内容首先在WebRoot根目录下面先新建一个first.js文件，然后再新建一个HTML文件，命名为demo01..html，找到该文件的<body></body>部分，在其中添加以下代码：<scripttype="text/javascript"src="first.js"></script><script type="text/javascript">alert("study is happy!")</script></head><body><input type="button"value="can you try?"onclick="alert('try is try!')" /></body>在HTML文件中引入JS有三种方式，该文件中使用的是内部方式，即在head标签里面添加Script标签，在标签中写JS代码。
《JavaScript动态网页设计》实训方案一、实训目的JavaScript程序设计综合实训是《JavaScript动态网页设计》课程教学中最重要实践教学环节。
旨在培养学生综合应用JavaScript技术所涉及的知识，系统地进行动态网页的设计与制作，由静态网页向动态网页开发计划、确定网页制作流程、编写页面程序、编写后台程序、等步骤，完成网页制作与开发的重要过程，为缩短上岗适应期奠定工程实践基础。
二、实训要求通过验证或设计一些JavaScript页面，学会利用JavaScript 技术创建交互式的动态网页。
（1）能够应用HTML和CSS语言构建基础页面；（2）能够应用JavaScript脚本语言实现基本动态功能；（3）能够应用BOM对象模型进行动态功能模块设计；（4）能够应用DOM对象进行动态网站功能的开发与设计；（5）能够应用正则表达式到登录信息验证；（6）能够应用JavaScript与CSS之间动态的交互；（7）能够应用事件进行动态网站项目的设计与开发。
三、实训安排实训一、制作静态网页-我的博客【实训目的】：1．学会使用DW；2．学会html制作网页的结构；3．学会CSS初步美化网页。
【实训内容】：1．制作静态网页2．初步美化网页。
3．制作一行五列的表格。
4．在表格中输入不同的内容实训二、两种方法来创建和引用.JS文件【实训目的】：1掌握何时使用定时器2掌握怎么设置定时器3掌握何时清除定时器【实训内容】：1. 编写一个网页,在其HEAD部分编写一段脚本代码，当项目一（我的博客）页面被加载时显示一个当前年月日时分秒。
2. 编写一个网页,显示若干个数字，点击按钮时开启数字的滚动，点击另一个按钮时停止数字的滚动.提示:”显示结果”后是选中的数字号码.实训三、项目四、购物车【实训目的】：1.复习表格2.利用函数和事件来显示购物记录和统计结果【实训内容】：1．制作显示购物记录的页面实训四、DOM编程【实训目的】：1.学会节点的创建和各种操作2.学会表格对象的组成部分的操作【实训内容】：1. 编写一个网页，动态的添加，删除，修改节点对象（对应的三个按钮）。
九个HTML5和JavaScript实验设计案例
Google的 Chrome实验室收集了很多让人难以置信的基于 HTML5 Canvas 和 JavaScript 的实验项目，里面的例子都很独特，让人惊叹。
我从未想过结合 HTML 和 JavaScript 能实现这么强大的效果。
AD：
今天，本文与大家分享其中9个很棒的例子，为了有更好的效果，建议在Chrome浏览器中浏览。
1. Untangle
拖动蓝点，让所有线都不相交，看看你多久能解开? :)
2. Z Type
一款太空射击游戏，基于ImpactJS游戏库开发。
3. Cube Out
模仿经典的益智游戏Blockout(三维俄罗斯方块)，移动和旋转方块填补空白，完成一层后会自动消隐。
4. Bounce
一款javascript游戏，点击和控制蓝色的盒子，让黄色的点击不要碰到红色的点。
5. Sketch 3D
一款非常棒的素描工具，这里可看别人的作品。
6. Conductor
Conductor转换纽约地铁系统为一个互动的弦乐器，使用真实的地铁时刻表来模拟。
7. Bacterium
模仿水族馆，您可以创建丰富多彩，充满活力的运动模式。
8.Ultra Neuron Pong
这是模仿经典的Pong游戏开发的一款基于HTML5技术的游戏。
9. Tank World
一款让人惊叹的三维射击游戏。
实验五JA V ASCRIPT实验内容1.JA V ASCRIPT基础语法2.JA V ASCRIPT实现日历3.JA V ASCRIPT控制COOKIE4.运行2个JA V ASCRIPT程序首先确认在本地计算机是否安装了网页编辑软件，如DreamWeaver。
若无，则安装，序列号在”安装密码.txt”文件中。
内容一：JA V ASCRIPT概念Javascript是一种由Netscape的LiveScript发展而来的原型化继承的面向对象的动态类型的区分大小写的客户端脚本语言，主要目的是为了解决服务器端语言，比如Perl，遗留的速度问题，为客户提供更流畅的浏览效果。
当时服务端需要对数据进行验证，由于网络速度相当缓慢，只有28.8kbps，验证步骤浪费的时间太多。
于是Netscape的浏览器Navigator加入了Javascript，提供了数据验证的基本功能。
变量常用类型Object：对象Array：数组Number：数Boolean：布尔值，只有true和false两个值，是所有类型中占用内存最少的null：一个空值，唯一的值是null，表空引用undefined：没有定义或赋值的变量NaN：非数字类型命名形式一般形式是：var <变量名表>;其中，var是javascript的保留字，表面接下来是变量说明，变量名表是用户自定义标识符，变量之间用逗号分开。
和C++等程序不同，在javascript中，变量说明不需要给出变量的数据类型。
此外，变量也可以不说明而直接使用。
事件用户与网页交互时产生的操作，称为事件。
事件可以由用户引发，也可能是页面发生改变，甚至还有你看不见的事件（如Ajax的交互进度改变）。
绝大部分事件都由用户的动作所引发，如：用户按鼠标的按键，就产生click事件，若鼠标的指针在链接上移动，就产生mouseover事件等等。
在JavaScript中，事件往往与事件处理程序配套使用。
实验五HTML文档JavaScript对象程序设计
1．实验目的：学习编在HTML页面嵌入、设计JavaScript对象程序的方法
2．实验方法：应用HTML语言和JavaScript语言设计页面并运行
3．实验仪器：1台计算机或2台连网的计算机
4．实验操作方法：
（1）应用Date对象，完成一个简单页面，其中XX月XX日是当天的月、日。
今天是2007年XX月XX日
（2）设计页面，在文本输入框中分别输入A、B数值，应用
Math对象方法完成以下计算，
在文本输入框C输出计算结果：
2
2B
A
C+
=
回答问题：
（1）列出2个运行结果的屏幕截图。
（2）说明HTML页面JavaScript程序中，Date对象定义与使用方法和特点。
（3）用程序语句说明表单（Form）上文本框中数据读出和写入方法。
（4）用程序语句说明如何在JavaScript自定义函数中应用Math对象方法完成计算。
程序如下：
<html>
<head>
<title>这是一个日历</title>
</head>
<body>
今天的日期是：
<script language=JavaScript>
var d=new Date()
var x,yer,mon,day
day=d.getDate()
mon=d.getMonth()+1
yer=d.getY ear()
x=yer+"年"+mon+"月"+day+"日" document.write(x)
</script>
</body>
</html>
<html>
<head>
<title>这是一个表单学习程序</title> <script language=javascript>
function calcu(x,y){
var a1= form1.a.value
var b1= form1.b.value
form1.c.value=Math.sqrt(a1*a1+b1*b1)
}
</script>
</head>
<body>
<form name="form1">
<p>A：<input type=text name="a">
<p>B：<input type=text name="b">
<p>C：<input type=text name="c">
<p>单击:<input type=button value="计算" onclick=calcu(form1.a.value,form1.b.value)> </form>
</body>
</html>
（2）常用方法: 对象. 方法名
特点：日期对象Date用于处理日期和时间,使用时先用new创建一个Date对象实例,例如：var d=new Date()
（3）读出方法：b=form1.a.value
写入方法：<input type=text size=10 name="user" value=”XX”>
(4)Math.方法（函数表达式）。
