下载文档原格式
《JavaScript程序设计实训》实践教学大纲课程编号：030111S0 课程归口部门：软件技术学分/学时：2 / 30 适用专业：软件技术课程类型：实训课程一、课程定位本实训课程主要配套《JavaScript程序设计》课程，提高学生使用JavaScript及框架处理Web前端应用的能力。
二、教学目标通过课程设计达到综合运用JavaScript及框架的目的，能够按照项目要求完成对页面的异步通信功能的设计。
熟练使用UI设计Web界面，能够给页面添加必要的Ajax 功能。
三、教学内容课程设计内容：课程采用一个完整的项目案例做为课程设计内容，学生自主选择项目实现。
如果没有合适的项目，则选用在线考试系统做为项目。
自主选择项目要求：⏹能够JavaScript及框架进行页面设计（页面动态布局、网页选项卡、折叠（下拉）导航菜单、表单设计校验、表格设计等）；⏹使用Ajax技术实现与服务器端的数据交互；⏹系统功能至少包括用户的登录/注册以及一组完整的增、删、改、查功能。
课程设计时间安排：四、考核方法与评价标准最终成绩评定将采取指导老师根据实训期间表现、答辩情况和课程设计报告综合考核，权重分别40%、30%、30%。
五、实践教学条件要求课程设计过程在机房完成，要求机器安装网页制作软件等。
六、其他说明要求指导教师在课程设计的整个过程中贯穿任务驱动教学法，引导学生将所学知识应用到课程设计中，培养发现问题、解决问题的能力，引导学生在程序设计过程中有意识的运用软件工程的思想，善于协作，共同完成有特色的课程设计。
修订日期：2020年9月执笔人：郑丽萍审核人：批准人：。
重庆正大软件职业技术学院《网页编程》课实验指导书作者：陈欣时间：2009年版本：V1.0目录实验名称：html语言基础（一） (3)实验名称：html语言基础（二）：文字编排及美化 (4)实验名称：html高级部分（一） (6)实验名称：html高级部分（二）.........................................................................错误！未定义书签。
实验名称：html高级部分（三）：超链接应用. (8)实验名称：dreamweaver8网页制作（一） (11)实验名称：dreamweaver8网页制作（二） (15)实验名称：初识CSS（一） (16)实验名称：CSS（二）..........................................................................................错误！未定义书签。
实验名称：javascript语法（一）. (26)实验名称：javascript语法（二） (27)实验名称：javascript语法（三） (29)实验名称：DOM编程（一） (31)实验名称：DOM编程（二）.................................................................................错误！未定义书签。
实验名称：DOM编程（三） (33)实验名称：html语言基础（一）实验目的：掌握使用“记事本”编辑HTML的操作；掌握使用IE测试HTML文件的操作；掌握HTML 构架标签和格式标签的使用课时：2实验环境：pc一台，dreamweaver8.0预备知识：“记事本”编辑HTML；用IE测试HTML文件；构架标签和格式标签实验内容（步骤）：编写本书第2章2.1-2.3中出现的所有HTML源文件。
《JavaScript脚本编程》实验指导书2实验1： javascript语法基础实验⽬的：掌握javascript的变量的定义和使⽤掌握javascript的数据类型的相互转换掌握javascript的三种消息框的使⽤课时：2实验环境：pc⼀台，dreamweaver8.0预备知识：编写javascript脚本代码的3个位置；简单的javascript程序；实验内容：每⼩题命名规则为：学号后2位+name+题号。
如：张三学号65，则第⼀题的命名为65zhangsan01.html.若采⽤独⽴的js⽂件则命名为65zhangsan01.js1、声明变量x，依次发赋给x数值型、字符型和布尔型的数据，输出x的显⽰结果。
2、声明两个变量x和y，将x赋予整数型数值2000，将x加上46后将值赋给y，输出表达式x+y的结果。
3、声明三个变量x、y和z，使x等于字符串hello，使y等于数值2008，当x+y等于hello2008且x不等于y的时候，z等于welcome to china！，否则等于we are still waiting！4、使⽤去确认对话框提问“你是否来过重庆？”，如果点击“确认”，⽤警告对话框输出“你也认为重庆很美丽吧！”；如果点击“取消”，⽤警告对话框输出“欢迎你到重庆来旅游！”，5、通过提⽰消息框输⼊任意⼀个整数xxx，当输⼊的是奇数时，向页⾯输出“你输⼊的数字xxx是奇数！”；当输⼊的是偶数时，向页⾯输出“你输⼊的数字xxx是偶数！”；否则输出“你的输⼊不满⾜要求！”6、通过体提⽰消息框输⼊任意⼀个整数xxx，求该整数的阶乘，并将结果通过警告对话框显⽰出来。
提⽰：对输⼊的数要进⾏判断。
（可参考javascript完全⼿册中的函数parseInt）思考题：在⽂本框分别输⼊两个数，实现两个数的+、-、*、/运算，点击“=按钮将”结果显⽰在⽂本框中。
界⾯设计可参考下图。
注意对⽂本框输⼊的数据是否是数字要进⾏判断。
程序设计实验指导书一、实验目的本实验旨在通过编程实践，提高学生的程序设计能力，加深对程序设计的理解。
通过完成实验任务，学生能够掌握常用的程序设计语言和工具，并能够独立完成基本的程序设计任务。
二、实验环境1. 软件：该实验使用的程序设计语言为Java，所以需要安装Java开发环境（JDK）。
2. 开发工具：推荐使用集成开发环境（IDE），如Eclipse、IntelliJ IDEA等。
3. 硬件：能够运行所需开发工具和Java程序的计算机。
三、实验内容1. 实验一：程序基础本实验主要考察学生对程序结构和基本语法的理解。
学生需要编写一个简单的Java程序，在控制台输出指定的内容。
可以选择合适的题目，如输出学生的个人信息、打印乘法口诀表等。
2. 实验二：条件语句和循环结构本实验主要考察学生在程序中正确运用条件语句和循环结构的能力。
学生需要编写一个Java程序，实现一个简单的计算器功能。
要求用户输入两个数字和运算符，程序可以根据运算符进行加、减、乘、除等运算，并输出结果。
3. 实验三：数组和函数本实验主要考察学生对数组和函数的理解和运用能力。
学生需要编写一个Java程序，实现对一个整型数组的排序功能。
要求用户输入一组数字，程序可以按照升序或降序对数组进行排序，并输出排序后的结果。
四、实验步骤1. 安装Java开发环境（JDK）：请根据实验环境中提到的软件安装要求，安装合适版本的JDK，并配置环境变量。
2. 安装集成开发环境（IDE）：根据个人喜好选择合适的IDE，并按照官方指引进行安装和配置。
3. 创建Java项目：在IDE中创建一个新的Java项目，并创建相应的源文件。
4. 编写代码：根据实验内容中的要求，在源文件中编写相应的Java 代码。
5. 编译和运行程序：使用IDE提供的功能，编译和运行程序，观察程序输出是否符合预期结果。
6. 调试和修改：如果程序出现错误或不符合预期，可以使用IDE提供的调试功能进行定位和修复。
![JavaScript前端开发程序设计项目式教程(微课版)(第2版)实训指导书-5[3页]](https://img.taocdn.com/s1/m/5a72ba080166f5335a8102d276a20029bd646380.png)
实训案例名称：
不同内容的欢迎栏信息提示栏
一、实训目的
1. 掌握prompt对话框的应用
2. 掌握BOM对象属性和方法的应用
3. 掌握BOM对象中函数和表单的综合应用
二、实训内容
1. 利用prompt对话框实现接收键盘输入的信息
2. 利用window对象的setTimeOut()方法实现延时输出
3. 实现将获取内容显示在页面中
三、实训仪器、设备
装有Dreamweaver、HBuilder等软件的电脑，网络畅通。
四、实训步骤
1. 通过提示对话框prompt，实现输入来访者的信息。
2. 创建一个可以滚动显示的函数，通过window.setTimeOut()延时执行滚动的效果。
3. 创建一个表单，实现一个不断滚动的文本框来显示欢迎信息。
4.代码演示
六、实训效果
七、实训报告要求
按照要求写出本项目的实训报告，规范、完整、表述科学，知识点和技能点
以及实训结果都应该具备。
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程序设计》（版本2）形考实训一：设计系统主页设计系统主页1. 题目设计系统主页。
2. 目的（1）熟悉Web前端项目开发环境。
（2）掌握如何建立Web前端项目，学会规划项目结构。
（3）掌握动态生成页面内容的方法。
（4）理解如何使用Flash显示图片新闻。
（5）会在应用系统中编写播放动态新闻的程序。
3. 内容建立项目结构，并设计一个系统的主页，在主页中嵌入Flash播放新闻。
4. 要求（1）建立Web前端项目，规划好程序结构。
（2）使用document.write()方法生成播放Flash的J avaScript代码。
（3）可以方便地增减播放的图片新闻数量。
（4）单击图片时能够打开对应的新闻页面。
1、让http://127.0.0.1:8000可以直接访问首页添加一条urls.py配置：urlpatterns = [.....re_path('^$', views.index), # 访问http://127.0.0.1:8000 可以直接访问首页]2、应用bootstrap快速编写index首页导航条（1）引入bootstrap核心文件和jquery<head><!-- 引入Bootstrap 核心CSS 文件--><link rel="stylesheet" href="/static/blog/bootstrap-3.3.7/css/bootstrap.css"><!-- jQuery (Bootstrap 的所有JavaScript 插件都依赖jQuery，所以必须放在前边) --><script src="/static/js/jquery-3.3.1.js"></script><!-- 引入Bootstrap 核心JavaScript 文件--><script src="/static/blog/bootstrap-3.3.7/js/bootstrap.js"></script> <!--依赖jquery--></head>（2）拷入bootstrap导航条模板代码拷贝这些代码到index页面的body标签内。
《Javascript程序设计》实验指导书一、课程性质和教学目的JavaScrip是一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。
它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在HTML（标准通用标记语言下的一个应用）网页上使用，用来给HTML网页增加动态功能。
学习Javascript必须理论联系实际，多做上机练习。
只有在上机实验过程中才能真正学会程序设计。
本实验报告主要包括学期内各个实验的实验目的、实验内容、实验记录、实验总结等，供学生学习记录，以提高学习效率。
参加实验的学生应参照本报告手册的要求，认真实验，如实填写实验数据，并对实验结果进行分析，阐述实验中所遇到的问题，提出解决问题的方法。
二、实验目的上机实验的目的不仅是为了验证教材和讲课的内容，或者验证自己所编写的程序正确与否。
学习程序设计上机实验的目的是：1.加深对讲授内容的理解，尤其是一些语法规定，课堂讲授既枯燥无味又难以记忆，但它们都很重要。
能过多次上机就能自然地、熟练地掌握。
通过上机掌握语法是行之有效的方法。
2.学会上机调试程序。
即善于发现程序中的错误，并且能很快排除这些错误，使程序能正确运行。
要真正掌握这门课程，不仅应当了解和熟悉有关理论和方法，还要求自己动手实现即会编程并上机调试通过。
故应给予充分重视。
调试程序固然可以借鉴他人的现成经验，但更重要的是通过自己的直接实践来累积经验，而且有些经验是只能意会难以言传。
调试程序的能力是每个程序设计人员应当掌握的一项基本功。
3.做实验时不要在程序通过后就认为搞定、完成任务了，而应当在己通过的程序甚而上作一些改动（例如修改一些参数、增加程序一些功能、改变输入数据的方法等），以观察和分析所出现的情况。
三、上机实验前的准备工作实验前应做好准备工作，以充分利用有限的上机时间。
准备工作至少包括：1.复习和掌握本实验有关的教学内容。
《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. 编写一个网页，动态的添加，删除，修改节点对象（对应的三个按钮）。
JavaScript 动态网页设计》实训方案一、实训目的JavaScript 程序设计综合实训是《JavaScript 动态网页设计》课程教学中最重要实践教学环节。
旨在培养学生综合应用JavaScript 技术所涉及的知识，系统地进行动态网页的设计与制作，由静态网页向动态网页开发计划、确定网页制作流程、编写页面程序、编写后台程序、等步骤，完成网页制作与开发的重要过程，为缩短上岗适应期奠定工程实践基础。
二、实训要求通过验证或设计一些JavaScript 页面，学会利用JavaScript 技术创建交互式的动态网页。
(1)能够应用HTMI和CSS语言构建基础页面；( 2)能够应用JavaScript 脚本语言实现基本动态功能；(3)能够应用BOM寸象模型进行动态功能模块设计；(4)能够应用DOM对象进行动态网站功能的开发与设计；( 5)能够应用正则表达式到登录信息验证；(6)能够应用JavaScript与CSS之间动态的交互；(7)能够应用事件进行动态网站项目的设计与开发。
三、实训安排实训一、制作静态网页-我的博客【实训目的】：1.学会使用DW2.学会html制作网页的结构;3.学会CSS初步美化网页。
【实训内容】：1．制作静态网页2．初步美化网页。
3．制作一行五列的表格。
4．在表格中输入不同的内容实训二、两种方法来创建和引用.JS 文件【实训目的】：1掌握何时使用定时器2掌握怎么设置定时器3掌握何时清除定时器【实训内容】：1.编写一个网页，在其HEAD部分编写一段脚本代码，当项目一（我的博客）页面被加载时显示一个当前年月日时分秒。
2.编写一个网页, 显示若干个数字，点击按钮时开启数字的滚动，点击另一个按钮时停止数字的滚动.提示: ”显示结果”后是选中的数字号码.实训三、项目四、购物车【实训目的】：1. 复习表格2. 利用函数和事件来显示购物记录和统计结果【实训内容】：1．制作显示购物记录的页面实训四、DOMS程【实训目的】：1.学会节点的创建和各种操作2.学会表格对象的组成部分的操作【实训内容】：1.编写一个网页，动态的添加，删除，修改节点对象（对应的三个按钮）。
《Javascript程序设计》实验指导书一、课程性质和教学目的JavaScrip是一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。
它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在HTML（标准通用标记语言下的一个应用）网页上使用，用来给HTML网页增加动态功能。
学习Javascript必须理论联系实际，多做上机练习。
只有在上机实验过程中才能真正学会程序设计。
本实验报告主要包括学期内各个实验的实验目的、实验内容、实验记录、实验总结等，供学生学习记录，以提高学习效率。
参加实验的学生应参照本报告手册的要求，认真实验，如实填写实验数据，并对实验结果进行分析，阐述实验中所遇到的问题，提出解决问题的方法。
二、实验目的上机实验的目的不仅是为了验证教材和讲课的内容，或者验证自己所编写的程序正确与否。
学习程序设计上机实验的目的是：1.加深对讲授内容的理解，尤其是一些语法规定，课堂讲授既枯燥无味又难以记忆，但它们都很重要。
能过多次上机就能自然地、熟练地掌握。
通过上机掌握语法是行之有效的方法。
2.学会上机调试程序。
即善于发现程序中的错误，并且能很快排除这些错误，使程序能正确运行。
要真正掌握这门课程，不仅应当了解和熟悉有关理论和方法，还要求自己动手实现即会编程并上机调试通过。
故应给予充分重视。
调试程序固然可以借鉴他人的现成经验，但更重要的是通过自己的直接实践来累积经验，而且有些经验是只能意会难以言传。
调试程序的能力是每个程序设计人员应当掌握的一项基本功。
3.做实验时不要在程序通过后就认为搞定、完成任务了，而应当在己通过的程序甚而上作一些改动（例如修改一些参数、增加程序一些功能、改变输入数据的方法等），以观察和分析所出现的情况。
三、上机实验前的准备工作实验前应做好准备工作，以充分利用有限的上机时间。
准备工作至少包括：1.复习和掌握本实验有关的教学内容。
2.准备好上机所需的程序。
初学者切忌不编写程序或抄别人的程序去上机，应从一开始就养成严谨的科学作风。
3.对运行上可能出现的问题应事先作出估计；对程序中自己有疑问的地方，应作上记号，以便在上机时给予注意。
4.根据实验内容认真准备实验程序及调试时所需的输入数据。
5.在上实验课之前必须写好预习报告（编程题源程序用纸写好或画好程序流程图）6.填空与改错题等题要预先做好，上机时的工作只能是输入源程序和调试修改。
7.认真完成实验内容，得出正确的实验结果。
实验结束后总结实验内容、书写实验报告。
8.遵守实验室规章制度、不缺席、按时上、下机。
四、实验环境代码编写环境：可根据机房主机条件自己决定。
推荐notepad，Dreamweaver，eclipse，hbuilder等。
页面预览环境：建议学生及早考虑和适应跨浏览器自适应问题。
推荐Firefox，google chrome，世界之窗，Internet Explorer等。
实验一 Javascript基本页面操作实验目的1.JS页面基本结构。
2.JS中变量基本格式。
3.变量与字符串相连接并显示结果。
4.使用按钮与function一一对应来实现代码功能。
实验内容1.在C盘下创建文件夹1.1。
在文件夹内创建一个txt文档，并命名为xx.1.html。
xx是你学号后两位。
然后把课本P10的程序1.1输入该文档，并把<title>内容改为你自己的名字。
<alert>内容改为你的名字加欢迎标语。
<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 <div id="d1"></div>然后再在script中通过如下代码来使该div显示指定内容document.getElementById("d1").innerHTML="欢迎您访问我的页面";5.我们现在来学习js代码的两个基本概念。
一个是书写规范，这个在P15有介绍，我们建议使用每一行都加分号并回车换行的方式。
另一个是变量。
这个很有趣，以后每节课都会用。
请新建xx.2.html，复制第一个页面的基本代码，然后把script标签内的代码换成var x=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刷新的时候它可以更新。
就可以了。
下面是一些扩展的知识点，给大家作为参考。
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-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.toLocaleString( ); //获取日期与时间8.新建一个页面xx.5.html。
在script中输入如下内容var x=5;var y=5;y+=x;document.write(y);请问y的值是多少？每次单击F5键刷新的时候，y的值都是一样的么？相关知识参考课本P179.请自己完成课本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，保存后刷新页面，点击该图片，体会一下改变的效果。
