原版Javascript程序设计实验指导书Word文档格式.docx
《原版Javascript程序设计实验指导书Word文档格式.docx》由会员分享，可在线阅读，更多相关《原版Javascript程序设计实验指导书Word文档格式.docx（31页珍藏版）》请在冰豆网上搜索。
推荐Firefox，googlechrome，世界之窗，InternetExplorer等。
实验一Javascript基本页面操作
实验目的
1.JS页面基本结构。
2.JS中变量基本格式。
3.变量与字符串相连接并显示结果。
4.使用按钮与function一一对应来实现代码功能。
实验内容
1.在C盘下创建文件夹1.1。
在文件夹内创建一个txt文档，并命名为xx.1.html。
xx是你学号后两位。
然后把课本P10的程序1.1输入该文档，并把<
title>
内容改为你自己的名字。
<
alert>
内容改为你的名字加欢迎标语。
后面是P9的最后一行，但是把"
"
里面的内容换成你自己的名字。
保存该文档，并用google浏览器查看效果。
2.请将课本P10倒数第四行代码中的alert换成document.write并保存。
你可以把任务01答案.html中的代码直接进行修改。
然后用google浏览器打开这个页面看效果。
想想alert和write的功能各是什么。
3.请看课本P12的1.11练习，将任务01的页面代码的<
script>
中增加alert（document.title）。
保存后用google浏览器打开看效果。
4.我们一般建议在body中完成页面的布局设计，而将script代码放在head中。
我们为了能够确保让程序执行结果显示在我们指定的位置，一个最简单的方法是：
在body中创建一个div，然后让它来显示程序执行的结果。
因为我们可以控制div出现的位置，所以就等于可以控制程序执行结果出现的位置。
我们一般在body中这样放置一个id唯一的div
divid="
d1"
>
/div>
然后再在script中通过如下代码来使该div显示指定内容document.getElementById（"
）.innerHTML="
欢迎您访问我的页面"
;
5.我们现在来学习js代码的两个基本概念。
一个是书写规范，这个在P15有介绍，我们建议使用每一行都加分号并回车换行的方式。
另一个是变量。
这个很有趣，以后每节课都会用。
请新建xx.2.html，复制第一个页面的基本代码，然后把script标签内的代码换成
varx=Date（）;
document.write（x）;
然后保存后打开xx.2.html看效果。
这里的x是一个自定义的变量。
6.新建一个页面xx.3.html。
在里面定义一个变量，变量内容为你的姓名。
然后让页面显示这个变量与Date（）函数相连接的结果。
比如你的变量名为x
那么请让你的页面显示x+Date（）的内容
比如是x="
张三为您报时，现在是"
请显示x+Date（）的内容。
7.新建一个页面xx.4.html。
要求网页打开的时候显示以下内容。
XXX的网页欢迎你。
现在是几点几分。
xxx是你自己的名字。
几点几分由下面的代码结合而成。
由于这个时间是从电脑主机时间获得的，而我们机房的电脑时间可能不准确，所以这个题目你的时间显示错误时没关系的。
只要它能显示，然后每次F5刷新的时候它可以更新。
就可以了。
下面是一些扩展的知识点，给大家作为参考。
varmyDate=newDate（）;
//将当前日期时间赋值给变量myDate
myDate.getYear（）;
//获取当前年份（2位）
myDate.getFullYear（）;
//获取完整的年份（4位,1970-?
?
）
myDate.getMonth（）;
//获取当前月份（0-11,0代表1月）
myDate.getDate（）;
//获取当前日（1-31）
myDate.getDay（）;
//获取当前星期X（0-6,0代表星期天）
myDate.getTime（）;
//获取当前时间（从1970.1.1开始的毫秒数）
myDate.getHours（）;
//获取当前小时数（0-23）
myDate.getMinutes（）;
//获取当前分钟数（0-59）
myDate.getSeconds（）;
//获取当前秒数（0-59）
myDate.getMilliseconds（）;
//获取当前毫秒数（0-999）
myDate.toLocaleDateString（）;
//获取当前日期
varmytime=myDate.toLocaleTimeString（）;
//获取当前时间
myDate.toLocaleString（）;
//获取日期与时间
8.新建一个页面xx.5.html。
在script中输入如下内容
varx=5;
vary=5;
y+=x;
document.write（y）;
请问y的值是多少？
每次单击F5键刷新的时候，y的值都是一样的么？
相关知识参考课本P17
9.请自己完成课本P20页程序清单2.3的内容。
自己输入其代码，然后在google浏览器中观察效果。
然后把alert（）内的文字部分改为中文，比如"
，把value="
"
的引号内部分也改成中文，比如你的名字，然后再保存后观察其变化。
请在完成这个页面之后，把你的代码和《任务08扩展解读.html》的代码做个比对，看看他们的代码和功能有什么不同。
10.请打开并编辑《任务9素材JS页面+button.html》。
使得它实现功能为：
单击button按钮的时候，显示现在的日期时间。
另外现在按钮的标题是“郭峰的按钮”，请把这个标题改为你的按钮。
用你自己的名字。
实验二Javascript基本功能控件练习
1.理解html网页内的body中有button，当click它时会调用function，而function中代码运行的结果会放在一个变量里，显示在一个div的innerHTML中。
2.熟悉我们页面的三个基本部分是button，function，div。
3.掌握三个基本部分的功能：
button触发条件，function运行代码，div显示结果。
这里面最重要的是function。
我们今后一段时间学习的就是通过function来实现各种功能。
1.创建页面，使其实现功能为：
单击页面内的按钮时，页面上显示“xx欢迎你的访问！
”。
2.创建页面，要求实现功能为：
单击左边的按钮，页面内显示
xx为你报时，现在是****
报时的时间通过Date（）来显示。
单击右边的按钮，则清空页面刚才显示的内容。
3.创建一个页面（其实你可以在刚才的页面基础上进行修改）
页面内有3个按钮。
按钮上分别显示“姓名”“班级”“辅导员”
当你单击某个按钮的时候，页面内就会显示该按钮对应的内容。
比如你单击姓名，页面内就显示出你的姓名。
4.创建一个页面，该页面中呈现出以下的心理测试题目。
当用户单击A,B,C,D选项对应的按钮时，用户将看到自己的选项对应的测试答案。
你属于哪一种上班族？
当你流落荒岛时，饥寒交迫，你会以哪种捕食方式快速喂饱自己
A、设计抓山鸡
B、采椰子
C、在岸边捕鱼
D、捕猎野猪
结果分析：
选择A：
你是“打拼型”上班族。
选择B：
你是“梦想型”上班族。
选择C：
你是“聪明型”上班族。
选择D：
你是“脱线型”上班族。
5.创建页面完成课本第一章的课后习题要求的程序功能
实验三文本框与函数参数传递练习
1.学习txt文本框和它对应的value属性的应用
2.掌握function函数传递参数的技术
3.通过按钮button的click事件，来调用function函数，并将其结果显示在页面上
1.创建页面实现功能：
鼠标经过图片的时候会弹出一句话。
用JS的术语来说，当一个img对象发生了onMouseOver事件的时候，则触发一个alert事件。
2.请先浏览页面。
然后把onmouseover改成onclick，保存后刷新页面，点击该图片，体会一下改变的效果。
3.请以它和img文件夹中的图片为基础，学习P22的程序2.5的代码，修改guofeng.1.html，使得鼠标经过图片的时候，图片会变成另外一张，而鼠标离开的时候，会换成原来的图片。
并将title改为你自己的名字。
请把以下代码
imgsrc="
01.jpg"
onmouseover="
alert（'
youenteredtheimage!
你的鼠标经过了这幅画'
）"
更换为
this.src='
02.jpg'
onmouseout="
01.jpg'
这句代码的功能是当鼠标经过则图片换为02，鼠标离开时图片换回01。
4.参考P22程序2.5创建一个页面，页面内有一个button按钮，按钮的value为“你点我啊”。
要求实现效果为：
当单击该按钮后，该按钮上的文字会显示为“谁让你点我的？
！
”
思路：
按钮上显示的文字就是button的value值。
要改变一个按钮自己的value值就是让它onclick的时候，使得this.value变成你想要的值。
建议：
不必照搬课本上的代码，任务1的页面中有可以利用的代码你尽可以复制粘贴过来，以节省时间。
5.其实onclick事件也是一个可以普遍应用的事件，比如你对img对象就可以设置onclick，就是当你单击图片的时候，它会发生什么事。
请修改guofeng.1.html，现在实现的效果是，该图片原始引用图片p1，鼠标经过这个图片和单击这个图片会弹出提示。
我要求你改效果为：
当鼠标经过该图片时，图片改为p2，也就是让this.src改为p2，当鼠标单击该图片时，图片改为p3。
6.要求创建的页面上有两个按钮，单击按钮1出第一个图片，单击按钮2出第二个图片。
我要求你增加按钮3和按钮4，并且单击相应按钮出相应图片。
实验四HTML页面交互设计练习
1.html交互页面的基本结构。
2.义html常见空间的基本属性。
3.对页面控件的一些基本操作和具体的函数定义。
1.创建网页。
使其实现功能为：
当点击按钮，文本框内出现一句话：
xx欢迎你访问本网页<
br>
xx是你自己的名字。
2.创建网页。
要求实现如下功能：
页面内共有三个文本框。
第一个文本框前写“请在此输入您的姓名”，第二个文本框前写“请在此输入‘先生’或者‘女士’”，然后是一个“确定”按钮。
用户单击确定按钮之后，第三个文本框会出现“XX先生/女士，您好！
”的字样。
xx是第一个文本框中输入的名字，先生/女士取决于用户在第二个文本框输入的内容。
3.创建页面使其点击按钮时在div和文本框text中同时出现你自己的姓名，班级或辅导员名字。
本页面我特别想讲解的一点是，在script中，div对象后面跟的应该是innerHTML,而文本框text后面跟的应该是value。
两者各有所长。
div对象内可以显示图片，控件等各种内容，不限于文字。
而text的优点则在于它不仅仅可以输出显示内容，也可以让用户在文本框里输入内容，以供提取。
4.创建页面，使得用户在前三项文本框中输入姓名，籍贯，性别后，单击按钮，则最后一个文本框中出现一句话，内容为“xx你好，你来自***，你是个男生/女生”其中xx，***，性别内容要取决于用户输入的内容。
5.创建页面，使其点击按钮时在div和文本框text中同时出现你自己的姓名，班级或辅导员名字。
6.以下代码目前功能是点击按钮会在div中出现对应答案。
请修改页面代码使其实现功能为，点击按钮的时候，文本框text会和div一起显示对应答案。
<
html>
head>
郭峰<
/title>
functiona（x）{
document.getElementById（"
c"
）.innerHTML=x;
}
/script>
/head>
body>
/br>
当你流落荒岛时，饥寒交迫，你会以哪种捕食方式快速喂饱自己<
inputtype="
button"
onclick="
a（'
'
value="
A"
设计抓山鸡<
id="
a（this.id）"
B"
采椰子 <
C"
在岸边捕鱼 <
D"
捕猎野猪 <
text"
b"
size="
80"
/body>
/html>
实验五Javascript中text控件的设计练习
1.熟悉text控件的基本代码。
2.掌握javascript中text与其他控件的组合用法。
3.掌握text与function组合使用的常见用法。
1.请设计一个页面，包括一个文本框，四个按钮。
四个按钮的value分别是“我的姓名”“我的性别”“我的爱好”“我的家乡”。
点击按钮，则在文本框中会显示相应信息。
注意：
我要求你本题中四个按钮要使用同一个function。
换句话说，这个题目必须用传递参数技术来完成。
2.创建一个包含一个文本框和四个按钮的页面。
要求点击按钮的时候在文本框中出现对应文字。
而且要求本题目四个按钮必须使用同一个function，也就是说必须使用参数传递技术。
四个按钮点击后在文本框中出现的对应文字为：
俞敏洪推荐语：
开卷不读薛氏书，纵谈教育也枉然。
小巫推荐语：
他是要您懂得培养孩子之道，人生成长之道。
徐小平推荐语：
他的文字与思想已经并将继续对中国社会产生重要影响。
《南方人物周刊》推荐语：
助你自信充盈，找到正确的出口。
唯有青春，不可辜负！
3.请参考并输入课本p32程序清单3.3的全部代码，观察运行结果。
注意//右侧的注释性代码不必输入。
4.完成课本p33的练习3.9.这个题目中必须用到parseInt（）函数。
因为我们经常用到文本框，而文本框中的默认类型为字符型，而有时候我们需要将其作为数值进行运算，那么我们就必须将其通过<
spanclass="
STYLE1"
parseInt（）<
/span>
函数<
STYLE3"
转为数值型<
后再运行代码。
假设现在是X摄氏度，那么转换为华氏度的公式为（（x*9）/5）+32
那么怎么让第一个文本框的值为x呢？
常见做法是
varx=document.getElementById（"
t1"
）.value;
那么怎么把它转为数值型呢？
只要加上函数即可。
（（parseInt（x）*9）/5）+32
5.下面页面主要介绍了parseInt（）函数。
它的功能是让字符串转为数值型。
你可以看上面的两个按钮，代码完全一样，唯一的区别是一个加了parseInt（）函数而另外一个没有。
接下来请在本页面内作出修改，实现如下功能：
请增加2个button，其value值分别为相减，相乘；
而这两个按钮的功能分别是点击之后，在其后的文本框中出现文本框t1，t2相减、相乘的结果。
functionf2（）{
varx=document.getElementById（'
t1'
vary=document.getElementById（'
t2'
document.getElementById（'
t4'
）.value=parseInt（x）+parseInt（y）;
functionf1（）{
t3'
）.value=（x）+（y）;
bodyalign="
center"
id='
+
f1（）"
相连"
f2（）"
相加"
实验六Javascript中函数的简单应用
1熟悉javascript语言的函数基本结构。
2会定义函数及其参数变量。
3熟悉对函数的一些基本操作和具体的函数定义。
1.设计一个页面，要求页面内有三个文本框，4个按钮。
四个按钮上分别是＋、－、×
、÷
而点击某个按钮之后，则会将前两个文本框中的数字进行相应的数学运算，把答案显示在第三个文本框中。
2.设计一个页面，要求实现功能为：
a.点击对应按钮，则在其后的文本框中出现对应答案。
考察点是parseInt（）函数的应用。
b.给每个算式等号左边的文本框中设置一个默认值。
就是要求每个text都要在代码中先设一个value。
c.小提示:
我只给出了加法的按钮对应的代码，我建议你复制粘贴这段代码来实现功能，但是要注意让按钮和function，以及各个文本框之间的对应关系。
3.设计一个页面，要求单击左边文本框对应按钮，则左边文本框中会出现对应文字。
比如依次单击6,5,7，则出现657。
右边文本框及对应按钮的功能也类似。
palign="
在输入数字完毕后，单击=按钮，则第三个文本框中会出现左边两个文本框中的相加之和。
本题目是一个简化的计算器。
我给出的提示是，本题中建议只采用三个function。
左边文本框对应数字按钮都用一个function足矣，右边的则用另外一个按钮function，=等号单独用一个function。
4.设计一个网页，其上的文字为
“测试你俩的缘分
三分测试你俩的缘分
三分钟就知道谁是你最爱得人?
（98%的准确率）”
然后下面有这样两句
您的名字是？
后面设计个文本框。
然后下面是这一句
写下一个异性的名子.
后面再一个文本框
然后后面是个按钮，"
开始测试"
点击开始测试之后，页面会有这样的提示：
哈哈，某某，我已经知道你喜欢的人是某某啦。
赶快贿赂贿赂我，让我帮你保密吧！
这个题目主要是复习button的onclick与alert结合的一个题目。
5.请创建页面输入如下代码，本题目我已经给出了前三个按钮的代码，请为第四个按钮增添代码，使得单击第四个按钮的时候，第二个文本框中出现1+3+数值型t1的值的结果。
!
DOCTYPEhtmlPUBLIC"
-//W3C//DTDXHTML1.0Transitional//EN"
http:
//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
htmlxmlns="
//www.w3.org/1999/xhtml"
metahttp-equiv="
Content-Type"
content="
text/html;
charset=utf-8"
/>
functionf1（x,y）{
document.getElementById（"
t2"
）.value=document.getElementById（"
）.value+x+y;
functionf2（x,y）{
）.value=1+x+y;
p>
初始值t1
in
升级会员 