《原版Javascript程序的设计实验报告》由会员分享，可在线阅读，更多相关《原版Javascript程序的设计实验报告（50页珍藏版）》请在金锄头文库上搜索。
1、下载可编辑20 20 学年 第 学期Javascript程序设计实验报告系别：专业：班级：姓名：学号：指导教师：教务处制.专业 .整理 .下载可编辑实验项目： javascript基础实验实验要求1. 请认真阅读下面的项目描述。2. 按照课程要求， 每个班级分成若干个项目小组， 每组人数大约 23 名同学，每个小组选出一名负责的同学。请负责同学做好小组分工。项目描述1. 实验项目是围绕 javascript 综合实验平台展开，涉及到平台的外围设备。2. 要求熟练掌握 javascript 编程的基本流程。3. 要求熟练使用 javascript 编程软件平台。4. 项目实验容由简单到复杂， 采
2、用循环渐进的引导方式， 使学生在轻松的氛围中掌握 javascript 开发及软件的使用。.专业 .整理 .下载可编辑实验一Javascript基本页面操作实验目的1.JS 页面基本结构。2.JS 中变量基本格式。3. 变量与字符串相连接并显示结果。4. 使用按钮与 function 一一对应来实现代码功能。实验容1. 在 C 盘下创建文件夹 1.1 。在文件夹创建一个 txt 文档，并命名为。 xx 是你学号后两位。然后把课本 P10 的程序 1.1 输入该文档，并把 容改为你自己的名字。 容改为你的名字加欢迎标语。后面是 P9 的最后一行，但是把 里面的容换成你自己的名字。保存该文档，并用
3、google 浏览器查看效果。2. 请将课本P10 倒数第四行代码中的alert换成 document.write并保存。你可以把任务 01 答案 .html中的代码直接进行修改。然后用google 浏览器打开这个页面看效果。想想 alert 和 write 的功能各是什么。3. 请看课本 P12 的 1.11 练习，将任务 01 的页面代码的 中增加alert(document.title)。保存后用google 浏览器打开看效果。4. 我们一般建议在body 中完成页面的布局设计，而将script代码放在head 中。我们为了能够确保让程序执行结果显示在我们指定的位置，一个最简单的方法是：
4、在body中创建一个div ，然后让它来显示程序执行的结果。因为我们可以控制div 出现的位置，所以就等于可以控制程序执行结果出现的位置。我们一般在body 中这样放置一个id 唯一的 div然后再在script中通过如下代码来使该div 显示指定容document.getElementById(d1).innerHTML=欢迎您访问我的页面;5. 我们现在来学习 js 代码的两个基本概念。一个是书写规，这个在P15 有介绍，我们建议使用每一行都加分号并回车换行的方式。另一个是变量。这个很有趣，以后每节课都会用。请新建 xx.2.html，复制第一个页面的基本代码，然后把script标签的代码
5、换成var x=Date();document.write(x);然后保存后打开xx.2.html 看效果。这里的 x 是一个自定义的变量。6. 新建一个页面xx.3.html 。在里面定义一个变量，变量容为你的。然后让页面显示这个变量与Date（）函数相连接的结果。比如你的变量名为x那么请让你的页面显示x+Date() 的容比如是 x= 三为您报时，现在是 请显示 x+Date()的容。7. 新建一个页面。要求网页打开的时候显示以下容。XXX的网页欢迎你。现在是几点几分。xxx 是你自己的名字。几点几分由下面的代码结合而成。.专业 .整理 .下载可编辑由于这个时间是从电脑主机时间获得的，而我
6、们机房的电脑时间可能不准确，所以这个题目你的时间显示错误时没关系的。只要它能显示，然后每次 F5 刷新的时候它可以更新。就可以了。下面是一些扩展的知识点，给大家作为参考。var myDate = new Date(); /将当前日期时间赋值给变量myDatemyDate.getYear();/获取当前年份 (2 位 )myDate.getFullYear();/获取完整的年份 (4 位 ,1970-?)myDate.getMonth();/获取当前月份 (0-11,0代表 1月)myDate.getDate();/获取当前日 (1-31)myDate.getDay();/获取当前星期 X(0-
7、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();/获取当前日期var mytime=myDate.toLocaleTimeString();/获取当前时间myDate.toLocaleStrin
8、g( );/获取日期与时间8. 新建一个页面 xx.5.html。在 script中输入如下容var x=5;var y=5;y+=x;document.write(y);请问 y 的值是多少？每次单击F5 键刷新的时候，y 的值都是一样的么？实验步骤1. 创建网页文档文件；2. 在编辑器中打开文档，输入代码；3. 在浏览器中观看代码效果；4. 根据运行情况进行调试；5. 根据最终结果记录程序，总结经验。实验数据记录及分析（或程序及运行结果）.专业 .整理 .下载可编辑评语：分数：教师签字：日期：年月日.专业 .整理 .下载可编辑实验二Javascript基本功能控件练习实验目的1. 理解 h
9、tml 网页的body 中有 button ，当 click它时会调用function，而 function中代码运行的结果会放在一个变量里，显示在一个div 的 innerHTML 中。2. 熟悉我们页面的三个基本部分是button ，function， div 。3. 掌握三个基本部分的功能： button 触发条件， function 运行代码， div 显示结果。这里面最重要的是function。我们今后一段时间学习的就是通过function来实现各种功能。实验容1.创建页面，使其实现功能为：单击页面的按钮时，页面上显示“xx 欢迎你的访问！ ”。2. 创建页面，要求实现功能为：单击左
10、边的按钮，页面显示xx 为你报时，现在是 *报时的时间通过Date（）来显示。单击右边的按钮，则清空页面刚才显示的容。3. 创建一个页面（其实你可以在刚才的页面基础上进行修改）页面有 3 个按钮。按钮上分别显示“” “班级”“辅导员”当你单击某个按钮的时候， 页面就会显示该按钮对应的容。 比如你单击， 页面就显示出你的。4. 创建一个页面，该页面中呈现出以下的心理测试题目。当用户单击 A,B,C,D 选项对应的按钮时，用户将看到自己的选项对应的测试答案。你属于哪一种上班族？当你流落荒岛时，饥寒交迫，你会以哪种捕食方式快速喂饱自己A、设计抓山鸡B 、采椰子C、在岸边捕鱼D、捕猎野猪结果分析：选择 A：你是“打拼型”上班族。选择 B：你是“梦想型”上班族。选择 C：你是“聪明型”上班族。选择 D：你是“脱线型”上班族。5. 创建页面完成课本第一章的课后习题要求的程序功能实验步骤1. 创建网页文档文件；2. 在编辑器中打开文档，输入代码；3. 在浏览器中观看代码效果；4. 根据运行情况进行调试；5. 根据最终结果记录程序，总结经验。实验数据记录及分析（或程序及运行结果）.专业 .整理 .下载可编辑评语：分数：教师签字：日期：年月日.专业 .整理 .下载可编辑实验三文本框与函数参数传递练习实验目的
