Java Web 开发实战经典 基础篇（1）

第2章 HTML、JavaScript简介

本章主要内容：

（1）掌握HTML的基本语法

（2）掌握HTML表单的编写操作

（3）掌握JavaScript的基本语法、主要事件、主要对象的使用

（4）可以使用JavaScript完成表单的交互程序的开发

2.1 服务器与浏览器

用户通过Web浏览器发送一个基于HTTP协议的请求到Web服务器上，Web服务器会根据用户的请求要求从文件系统中读取并把内容通过HTTP协议返回给客户端，最后在客户端浏览器上显示。

2.2 HTML简介

2.2.1 HTML元素概览

2.2.2 创建显示Web页

2.2.3 创建表单Web页

各个表单标记的作用如下：

2.3 JavaScript简介

2.3.1 JavaScript的基本语法

JavaScript的语法就是包含了一些变量及函数的声明操作，所有的JavaScript代码是在HTML中编写的，使用<script>标记完成。

例：

<script lanuage="JavaScript">

         alert("Hello World")

</script>

可以考虑将一些JavaScript代码单独定义成一个*.js文件，然后在需要的页面导入即可。

例：

<script lanuage="JavaScript" src="hello.js"> </script>

在JavaScript中也可以定义变量，定义变量的语法很容易，直接使用var声明变量即可。变量的类型会根据其所赋予的具体内容来决定。如果将一个字符串赋给变量，则此变量就表示字符串类型。

例：

<script lanuage="JavaScript">

            var num=30;

            var info= "www.MLDNJAVA.cn";

            alert("");

</script>

在JavaScript中的程序也分为以下3种结构：

（1）顺序结构

（2）分支结构

（3）循环结构

、

在JavaScript中最重要的部分就是函数。函数的定义语法如下：

JavaScript中数组的使用语法。数组的定义分为静态初始化和动态初始化两种方式。

如果没有为数组每个元素赋值，所有元素的内容都是“undefined”

静态初始化方法如下：

】

2.3.2 事件处理

JavaScript中有几个常用的事件：

onLoad：表示网页加载时要触发的事件

onUnLoad：表示关闭页面时要触发的事件

onClick：单击某个控件时触发的事件

将事件与表单结合起来

<form>元素使用了onSubmit事件在表单提交前进行验证，用return来接收validate()函数的返回值，如果此函数返回true，表明一切正常，可以提交。反之，同样。在validate()函数中编写的this表示当前的元素，由于此事件是在<form>元素中调用的，所以this表示当前的<form>表单。

validate()函数——正则验证

使用JavaScript不仅可以取得文本的输入内容，也可以取得单选按钮或复选框的输入内容。需要注意的是，如果现在表单中的内容是单选按钮或复选框，由于控件名称出现了同名的情况，所以采用数组的方式进行操作。

、

对于下拉列表框，可以使用onChange()事件来处理选项的变化操作。下面通过下拉列表框选择城市，然后在文本框中显示选择的结果。

2.3.3  window对象

JavaScript是基于对象的语言，所以在浏览器中已经提供了许多的可用对象。例如之前的alert()函数，实际上是window对象所定义的函数。