第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对象所定义的函数。