原版Javascript程序设计实验报告
合集下载
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
myDate.toLocaleString( ); //获取日期与时间
8.新建一个页面**.5.html。在script中输入如下容
var x=5;
var y=5;
y+=x;
document.write(y);
请问y的值是多少.每次单击F5键刷新的时候，y的值都是一样的么.
实验步骤
1.创立网页文档文件；
4.创立一个页面，该页面中呈现出以下的心理测试题目。当用户单击A,B,C,D选项对应的按钮时，用户将看到自己的选项对应的测试答案。
你属于哪一种上班族.
当你流落荒岛时，饥寒交迫，你会以哪种捕食方式快速喂饱自己
A、设计抓山鸡B、采椰子C、在岸边捕鱼D、捕猎野猪
结果分析：
选择A：你是"打拼型〞上班族。 选择B：你是"梦想型〞上班族。
当你流落荒岛时，饥寒交迫，你会以哪种捕食方式快速喂饱自己</br>
<input type="button" onclick="a('选择A：你是"打拼型〞上班族。')" value="A">设计抓山鸡</br>
4.我们一般建议在body中完成页面的布局设计，而将script代码放在head中。我们为了能够确保让程序执行结果显示在我们指定的位置，一个最简单的方法是：在body中创立一个div，然后让它来显示程序执行的结果。因为我们可以控制div出现的位置，所以就等于可以控制程序执行结果出现的位置。我们一般在body中这样放置一个id唯一的div
4.创立页面，使得用户在前三项文本框中输入，籍贯，性别后，单击按钮，那么最后一个文本框中出现一句话，容为"**你好，你来自***，你是个男生/女生〞其中**，***，性别容要取决于用户输入的容。
5.创立页面，使其点击按钮时在div和文本框text中同时出现你自己的，班级或辅导员名字。
6.以下代码目前功能是点击按钮会在div中出现对应答案。请修改页面代码使其实现功能为，点击按钮的时候，文本框text会和div一起显示对应答案。
myDate.getSeconds(); //获取当前秒数(0-59)
myDate.getMilliseconds(); //获取当前毫秒数(0-999)
myDate.toLocaleDateString(); //获取当前日期
var mytime=myDate.toLocaleTimeString(); //获取当前时间
比方你的变量名为x
那么请让你的页面显示x+Date()的容
比方是x="三为您报时，现在是"
请显示x+Date()的容。
7.新建一个页面**.4.html。要求网页翻开的时候显示以下容。
**X的网页欢迎你。现在是几点几分。
**x是你自己的名字。几点几分由下面的代码结合而成。
由于这个时间是从电脑主机时间获得的，而我们机房的电脑时间可能不准确，所以这个题目你的时间显示错误时没关系的。只要它能显示，然后每次F5刷新的时候它可以更新。就可以了。
2.创立页面，要现功能为：
单击左边的按钮，页面显示
**为你报时，现在是****
报时的时间通过Date〔〕来显示。
单击右边的按钮，那么清空页面刚刚显示的容。
3.创立一个页面〔其实你可以在刚刚的页面根底上进展修改〕
页面有3个按钮。按钮上分别显示"〞"班级〞"辅导员〞
当你单击某个按钮的时候，页面就会显示该按钮对应的容。比方你单击，页面就显示出你的。
3.创立页面使其点击按钮时在div和文本框text中同时出现你自己的，班级或辅导员名字。本页面我特别想讲解的一点是，在script中，div对象后面跟的应该是innerHTML,而文本框text后面跟的应该是value。两者各有所长。
div对象可以显示图片，控件等各种容，不限于文字。而text的优点那么在于它不仅仅可以输出显示容，也可以让用户在文本框里输入容，以供提取。
2.熟悉我们页面的三个根本局部是button，function，div。
3.掌握三个根本局部的功能：button触发条件，function运行代码，div显示结果。这里面最重要的是function。我们今后一段时间学习的就是通过function来实现各种功能。
实验容
1.创立页面，使其实现功能为：单击页面的按钮时，页面上显示"**欢迎你的访问！〞。
2.请先浏览页面。然后把onmouseover改成onclick，保存后刷新页面，点击该图片，体会一下改变的效果。
3.请以它和img文件夹中的图片为根底，学习P22的程序2.5的代码，修改guofeng.1.html，使得鼠标经过图片的时候，图片会变成另外一，而鼠标离开的时候，会换成原来的图片。并将title改为你自己的名字。
20 —20学年第学期
Javascript程序设计实验报告
系别：
专业：
班级：
姓名：
学号：
指导教师：
教务处制
实验工程：javascript根底实验
实验要求
1.请认真阅读下面的工程描述。
2.按照课程要求，每个班级分成假设干个工程小组，每组人数大约2~3名同学，每个小组选出一名负责的同学。请负责同学做好小组分工。
<html>
<head>
<title>郭峰</title>
<script>
function a(x){
document.getElementById("c").innerHTML=x;
}
</script>
</head>
<body>
</br></br></br></br>
你属于哪一种上班族.</br>
选择C：你是"聪明型〞上班族。 选择D：你是"脱线型〞上班族。
5.创立页面完成课；
2.在编辑器中翻开文档，输入代码；
3.在浏览器中观看代码效果；
4.根据运行情况进展调试；
5.根据最终结果记录程序，总结经历。
实验数据记录及分析〔或程序及运行结果〕
实验一Javascript根本页面操作
实验目的
1.JS页面根本构造。
2.JS中变量根本格式。
3.变量与字符串相连接并显示结果。
4.使用按钮与function一一对应来实现代码功能。
实验容
1.在C盘下创立文件夹1.1。在文件夹创立一个txt文档，并命名为**.1.html。**是你学号后两位。然后把课本P10的程序1.1输入该文档，并把<title>容改为你自己的名字。<alert>容改为你的名字加欢迎标语。<alert>后面是P9的最后一行，但是把" "里面的容换成你自己的名字。保存该文档，并用google浏览器查看效果。
评语：
分数：教师签字：日期：年月日
实验四HTML页面交互设计练习
实验目的
1.html交互页面的根本构造。
2.义html常见空间的根本属性。
3.对页面控件的一些根本操作和具体的函数定义。
实验容
1.创立网页。使其实现功能为：当点击按钮，文本框出现一句话：
**欢迎你访问本网页<br>**是你自己的名字。
2.创立网页。要现如下功能：页面共有三个文本框。第一个文本框前写"请在此输入您的〞，第二个文本框前写"请在此输入‘先生’或者‘女士’〞，然后是一个"确定〞按钮。用户单击确定按钮之后，第三个文本框会出现"**先生/女士，您好！〞的字样。**是第一个文本框中输入的名字，先生/女士取决于用户在第二个文本框输入的容。
请把以下代码
<img src="01.jpg" onmouseover="alert('you entered the image!你的鼠标经过了这幅画')">
更换为
<img src="01.jpg" onmouseover="this.src='02.jpg'" onmouseout="this.src='01.jpg'">
2.请将课本P10倒数第四行代码中的alert换成document.write并保存。你可以把任务01答案.html中的代码直接进展修改。然后用google浏览器翻开这个页面看效果。想想alert和write的功能各是什么。
3.请看课本P12的1.11练习，将任务01的页面代码的<script>中增加alert(document.title)。保存后用google浏览器翻开看效果。
工程描述
1.实验工程是围绕javascript综合实验平台展开，涉及到平台的外围设备。
2.要求熟练掌握javascript编程的根本流程。
3.要求熟练使用javascript编程软件平台。
4.工程实验容由简单到复杂，采用循环渐进的引导方式，使学生在轻松的气氛中掌握javascript开发及软件的使用。
这句代码的功能是当鼠标经过那么图片换为02，鼠标离开时图片换回01。
4.参考程序2.5创立一个页面，页面有一个button按钮，按钮的value为"你点我啊〞。要现效果为：当单击该按钮后，该按钮上的文字会显示为"谁让你点我的.！〞
思路：按钮上显示的文字就是button的value值。要改变一个按钮自己的value值就是让它onclick的时候，使得this.value变成你想要的值。
myDate.getDate(); //获取当前日(1-31)
myDate.getDay(); //获取当前星期X(0-6,0代表星期天)
myDate.getTime(); //获取当前时间(从1970.1.1开场的毫秒数)
myDate.getHours(); //获取当前小时数(0-23)
myDate.getMinutes(); //获取当前分钟数(0-59)
评语：
分数：教师签字：日期：年月日
实验三文本框与函数参数传递练习
实验目的
1.学习txt文本框和它对应的value属性的应用
2.掌握function函数传递参数的技术
3.通过按钮button的click事件，来调用function函数，并将其结果显示在页面上
实验容
1.创立页面实现功能：鼠标经过图片的时候会弹出一句话。用JS的术语来说，当一个img对象发生了onMouseOver事件的时候，那么触发一个alert事件。
另一个是变量。这个很有趣，以后每节课都会用。
请新建**.2.html，复制第一个页面的根本代码，然后把script标签的代码换成
var x=Date();
document.write(x);
然后保存后翻开**.2.html看效果。
这里的x是一个自定义的变量。
6.新建一个页面**.3.html。
在里面定义一个变量，变量容为你的。然后让页面显示这个变量与Date〔〕函数相连接的结果。
<div id="d1"></div>然后再在script过如下代码来使该div显示指定容document.getElementById("d1").innerHTML="欢迎您访问我的页面";
5.我们现在来学习js代码的两个根本概念。
一个是书写规，这个在P15有介绍，我们建议使用每一行都加分号并回车换行的方式。
6.要求创立的页面上有两个按钮，单击按钮1出第一个图片，单击按钮2出第二个图片。我要求你增加按钮3和按钮4，并且单击相应按钮出相应图片。
实验步骤
1.创立网页文档文件；
2.在编辑器中翻开文档，输入代码；
3.在浏览器中观看代码效果；
4.根据运行情况进展调试；
5.根据最终结果记录程序，总结经历。
实验数据记录及分析〔或程序及运行结果〕
下面是一些扩展的知识点，给大家作为参考。
var myDate = new Date(); //将当前日期时间赋值给变量myDate
myDate.getYear(); //获取当前年份(2位)
myDate.getFullYear(); //获取完整的年份(4位,1970-")
myDate.getMonth(); //获取当前月份(0-11,0代表1月)
建议：不必照搬课本上的代码，任务1的页面中有可以利用的代码你尽可以复制粘贴过来，以节省时间。
5.请修改guofeng.1.html，现在实现的效果是，该图片原始引用图片p1，鼠标经过这个图片和单击这个图片会弹出提示。我要求你改效果为：当鼠标经过该图片时，图片改为p2，也就是让this.src改为p2，当鼠标单击该图片时，图片改为p3。
2.在编辑器中翻开文档，输入代码；
3.在浏览器中观看代码效果；
4.根据运行情况进展调试；
5.根据最终结果记录程序，总结经历。
实验数据记录及分析〔或程序及运行结果〕
评语：
分数：教师签字：日期：年月日
实验二Javascript根本功能控件练习
实验目的
1.理解html网页的body中有button，当click它时会调用function，而function中代码运行的结果会放在一个变量里，显示在一个div的innerHTML中。
8.新建一个页面**.5.html。在script中输入如下容
var x=5;
var y=5;
y+=x;
document.write(y);
请问y的值是多少.每次单击F5键刷新的时候，y的值都是一样的么.
实验步骤
1.创立网页文档文件；
4.创立一个页面，该页面中呈现出以下的心理测试题目。当用户单击A,B,C,D选项对应的按钮时，用户将看到自己的选项对应的测试答案。
你属于哪一种上班族.
当你流落荒岛时，饥寒交迫，你会以哪种捕食方式快速喂饱自己
A、设计抓山鸡B、采椰子C、在岸边捕鱼D、捕猎野猪
结果分析：
选择A：你是"打拼型〞上班族。 选择B：你是"梦想型〞上班族。
当你流落荒岛时，饥寒交迫，你会以哪种捕食方式快速喂饱自己</br>
<input type="button" onclick="a('选择A：你是"打拼型〞上班族。')" value="A">设计抓山鸡</br>
4.我们一般建议在body中完成页面的布局设计，而将script代码放在head中。我们为了能够确保让程序执行结果显示在我们指定的位置，一个最简单的方法是：在body中创立一个div，然后让它来显示程序执行的结果。因为我们可以控制div出现的位置，所以就等于可以控制程序执行结果出现的位置。我们一般在body中这样放置一个id唯一的div
4.创立页面，使得用户在前三项文本框中输入，籍贯，性别后，单击按钮，那么最后一个文本框中出现一句话，容为"**你好，你来自***，你是个男生/女生〞其中**，***，性别容要取决于用户输入的容。
5.创立页面，使其点击按钮时在div和文本框text中同时出现你自己的，班级或辅导员名字。
6.以下代码目前功能是点击按钮会在div中出现对应答案。请修改页面代码使其实现功能为，点击按钮的时候，文本框text会和div一起显示对应答案。
myDate.getSeconds(); //获取当前秒数(0-59)
myDate.getMilliseconds(); //获取当前毫秒数(0-999)
myDate.toLocaleDateString(); //获取当前日期
var mytime=myDate.toLocaleTimeString(); //获取当前时间
比方你的变量名为x
那么请让你的页面显示x+Date()的容
比方是x="三为您报时，现在是"
请显示x+Date()的容。
7.新建一个页面**.4.html。要求网页翻开的时候显示以下容。
**X的网页欢迎你。现在是几点几分。
**x是你自己的名字。几点几分由下面的代码结合而成。
由于这个时间是从电脑主机时间获得的，而我们机房的电脑时间可能不准确，所以这个题目你的时间显示错误时没关系的。只要它能显示，然后每次F5刷新的时候它可以更新。就可以了。
2.创立页面，要现功能为：
单击左边的按钮，页面显示
**为你报时，现在是****
报时的时间通过Date〔〕来显示。
单击右边的按钮，那么清空页面刚刚显示的容。
3.创立一个页面〔其实你可以在刚刚的页面根底上进展修改〕
页面有3个按钮。按钮上分别显示"〞"班级〞"辅导员〞
当你单击某个按钮的时候，页面就会显示该按钮对应的容。比方你单击，页面就显示出你的。
3.创立页面使其点击按钮时在div和文本框text中同时出现你自己的，班级或辅导员名字。本页面我特别想讲解的一点是，在script中，div对象后面跟的应该是innerHTML,而文本框text后面跟的应该是value。两者各有所长。
div对象可以显示图片，控件等各种容，不限于文字。而text的优点那么在于它不仅仅可以输出显示容，也可以让用户在文本框里输入容，以供提取。
2.熟悉我们页面的三个根本局部是button，function，div。
3.掌握三个根本局部的功能：button触发条件，function运行代码，div显示结果。这里面最重要的是function。我们今后一段时间学习的就是通过function来实现各种功能。
实验容
1.创立页面，使其实现功能为：单击页面的按钮时，页面上显示"**欢迎你的访问！〞。
2.请先浏览页面。然后把onmouseover改成onclick，保存后刷新页面，点击该图片，体会一下改变的效果。
3.请以它和img文件夹中的图片为根底，学习P22的程序2.5的代码，修改guofeng.1.html，使得鼠标经过图片的时候，图片会变成另外一，而鼠标离开的时候，会换成原来的图片。并将title改为你自己的名字。
20 —20学年第学期
Javascript程序设计实验报告
系别：
专业：
班级：
姓名：
学号：
指导教师：
教务处制
实验工程：javascript根底实验
实验要求
1.请认真阅读下面的工程描述。
2.按照课程要求，每个班级分成假设干个工程小组，每组人数大约2~3名同学，每个小组选出一名负责的同学。请负责同学做好小组分工。
<html>
<head>
<title>郭峰</title>
<script>
function a(x){
document.getElementById("c").innerHTML=x;
}
</script>
</head>
<body>
</br></br></br></br>
你属于哪一种上班族.</br>
选择C：你是"聪明型〞上班族。 选择D：你是"脱线型〞上班族。
5.创立页面完成课；
2.在编辑器中翻开文档，输入代码；
3.在浏览器中观看代码效果；
4.根据运行情况进展调试；
5.根据最终结果记录程序，总结经历。
实验数据记录及分析〔或程序及运行结果〕
实验一Javascript根本页面操作
实验目的
1.JS页面根本构造。
2.JS中变量根本格式。
3.变量与字符串相连接并显示结果。
4.使用按钮与function一一对应来实现代码功能。
实验容
1.在C盘下创立文件夹1.1。在文件夹创立一个txt文档，并命名为**.1.html。**是你学号后两位。然后把课本P10的程序1.1输入该文档，并把<title>容改为你自己的名字。<alert>容改为你的名字加欢迎标语。<alert>后面是P9的最后一行，但是把" "里面的容换成你自己的名字。保存该文档，并用google浏览器查看效果。
评语：
分数：教师签字：日期：年月日
实验四HTML页面交互设计练习
实验目的
1.html交互页面的根本构造。
2.义html常见空间的根本属性。
3.对页面控件的一些根本操作和具体的函数定义。
实验容
1.创立网页。使其实现功能为：当点击按钮，文本框出现一句话：
**欢迎你访问本网页<br>**是你自己的名字。
2.创立网页。要现如下功能：页面共有三个文本框。第一个文本框前写"请在此输入您的〞，第二个文本框前写"请在此输入‘先生’或者‘女士’〞，然后是一个"确定〞按钮。用户单击确定按钮之后，第三个文本框会出现"**先生/女士，您好！〞的字样。**是第一个文本框中输入的名字，先生/女士取决于用户在第二个文本框输入的容。
请把以下代码
<img src="01.jpg" onmouseover="alert('you entered the image!你的鼠标经过了这幅画')">
更换为
<img src="01.jpg" onmouseover="this.src='02.jpg'" onmouseout="this.src='01.jpg'">
2.请将课本P10倒数第四行代码中的alert换成document.write并保存。你可以把任务01答案.html中的代码直接进展修改。然后用google浏览器翻开这个页面看效果。想想alert和write的功能各是什么。
3.请看课本P12的1.11练习，将任务01的页面代码的<script>中增加alert(document.title)。保存后用google浏览器翻开看效果。
工程描述
1.实验工程是围绕javascript综合实验平台展开，涉及到平台的外围设备。
2.要求熟练掌握javascript编程的根本流程。
3.要求熟练使用javascript编程软件平台。
4.工程实验容由简单到复杂，采用循环渐进的引导方式，使学生在轻松的气氛中掌握javascript开发及软件的使用。
这句代码的功能是当鼠标经过那么图片换为02，鼠标离开时图片换回01。
4.参考程序2.5创立一个页面，页面有一个button按钮，按钮的value为"你点我啊〞。要现效果为：当单击该按钮后，该按钮上的文字会显示为"谁让你点我的.！〞
思路：按钮上显示的文字就是button的value值。要改变一个按钮自己的value值就是让它onclick的时候，使得this.value变成你想要的值。
myDate.getDate(); //获取当前日(1-31)
myDate.getDay(); //获取当前星期X(0-6,0代表星期天)
myDate.getTime(); //获取当前时间(从1970.1.1开场的毫秒数)
myDate.getHours(); //获取当前小时数(0-23)
myDate.getMinutes(); //获取当前分钟数(0-59)
评语：
分数：教师签字：日期：年月日
实验三文本框与函数参数传递练习
实验目的
1.学习txt文本框和它对应的value属性的应用
2.掌握function函数传递参数的技术
3.通过按钮button的click事件，来调用function函数，并将其结果显示在页面上
实验容
1.创立页面实现功能：鼠标经过图片的时候会弹出一句话。用JS的术语来说，当一个img对象发生了onMouseOver事件的时候，那么触发一个alert事件。
另一个是变量。这个很有趣，以后每节课都会用。
请新建**.2.html，复制第一个页面的根本代码，然后把script标签的代码换成
var x=Date();
document.write(x);
然后保存后翻开**.2.html看效果。
这里的x是一个自定义的变量。
6.新建一个页面**.3.html。
在里面定义一个变量，变量容为你的。然后让页面显示这个变量与Date〔〕函数相连接的结果。
<div id="d1"></div>然后再在script过如下代码来使该div显示指定容document.getElementById("d1").innerHTML="欢迎您访问我的页面";
5.我们现在来学习js代码的两个根本概念。
一个是书写规，这个在P15有介绍，我们建议使用每一行都加分号并回车换行的方式。
6.要求创立的页面上有两个按钮，单击按钮1出第一个图片，单击按钮2出第二个图片。我要求你增加按钮3和按钮4，并且单击相应按钮出相应图片。
实验步骤
1.创立网页文档文件；
2.在编辑器中翻开文档，输入代码；
3.在浏览器中观看代码效果；
4.根据运行情况进展调试；
5.根据最终结果记录程序，总结经历。
实验数据记录及分析〔或程序及运行结果〕
下面是一些扩展的知识点，给大家作为参考。
var myDate = new Date(); //将当前日期时间赋值给变量myDate
myDate.getYear(); //获取当前年份(2位)
myDate.getFullYear(); //获取完整的年份(4位,1970-")
myDate.getMonth(); //获取当前月份(0-11,0代表1月)
建议：不必照搬课本上的代码，任务1的页面中有可以利用的代码你尽可以复制粘贴过来，以节省时间。
5.请修改guofeng.1.html，现在实现的效果是，该图片原始引用图片p1，鼠标经过这个图片和单击这个图片会弹出提示。我要求你改效果为：当鼠标经过该图片时，图片改为p2，也就是让this.src改为p2，当鼠标单击该图片时，图片改为p3。
2.在编辑器中翻开文档，输入代码；
3.在浏览器中观看代码效果；
4.根据运行情况进展调试；
5.根据最终结果记录程序，总结经历。
实验数据记录及分析〔或程序及运行结果〕
评语：
分数：教师签字：日期：年月日
实验二Javascript根本功能控件练习
实验目的
1.理解html网页的body中有button，当click它时会调用function，而function中代码运行的结果会放在一个变量里，显示在一个div的innerHTML中。