HTML和JavaScript实验报告

一、实验目的

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，找到该文件的部分，在其中添加代码；

然后使用HTML语言里面新建一个form表单，在该表单中编写两个文本框和一个按钮，实现用户在里面输入数据；

最后在HelloWeb.java文件中编写判断条件，用户输入身高和体重，单击“提交”

按钮就可知道自己的BMI值是否正常。

（2）使用JS给页面添加动态效果和内容

首先在WebRoot根目录下面先新建一个first.js文件，然后再新建一个HTML文件，命名为demo01..html，找到该文件的部分，在其中添加以下代码：

type="text/javascript"

src="first.js">

value="can you try?"

onclick="alert('try is try!')" />

在HTML文件中引入JS有三种方式，该文件中使用的是内部方式，即在head标签里面添加Script标签，在标签中写JS代码。

然后在浏览器上就可查看到效果。

（3）通过实例来验证JS里面的运算符和JA V A中的异同。

首先在WebRoot根目录下面新建一个demo01.html，并且在标签里添加如下代码：

保存该文件并执行，就可看到效果。

（4）通过实例来验证JS里面的运算符“==”和“===”的用法。

首先在WebRoot根目录下面新建一个demo02.html，并且在标签里添加如下代码：

然后保存并执行，就可看到效果。

2、提交文档：

实验2

3、结果模型

4、结果分析

（1）从以上的实验中我们可以得知：JS属于脚本语言，不需要编译可直接解析执行；JS可以嵌入HTML中，由浏览器直接运行，它属于弱类型语言（数据类型可以忽略的

语言，一个变量可以赋不同的数据类型的值叫弱类型语言）

JS基于面向对象，而且在HTML中引入JS有三种方式。

（2）JS里面的运算符和java大体相同，但也存在着一定的差异性。

六、实验小结

1．从本次制作网页的过程中体会到制作网页和做其他事情一样，要多做多试，积累经验。还要学习相关的程序，只有这样才能制作出既华又实、能第一时间给大家留下印象的网页。

2．在这次实验中，我跟着老师做了几个案例，让我更明白了JS的一些特点，这比从书本的获得的要多。