图 2-2 带Form的HTML页面
Form（表单）是HTML用于接收用户输入的控件集合，正是因为form的出现，HTML才能真正实现与用户的交互。
图 2-2出现了form中的一些基本控件，首先是第8行出现“form”标签，直到第20行结束标签为止，中间的内容就是一个表单。注意form标签带了一些参数，分别是：参数名称叫做“name”，它的值是“f1”，参数“method”，值为“post”，参数“action”，值为“f1.asp”。这些参数名称是有规定的，取值则任意，如参数“name”表示给这个表单起个名字，因为一个HTML页面中可以出现多个form，必要时需要用名字来区分。下面是form中的若干控件，相信大家在网页上已经多次见到了，但未必知道它们的写法。一般控件，包括文本输入框、密码输入框、单选按钮、提交按钮、重置按钮等，写法相似，都是“input”标签，但参数值不同，参数名称是“type”，取值分别为“text”、“password”、“radio”、“submit”和“reset”。本例中还出现了下拉列表框，写法如第15行，不再赘述。读者可进一步参考其他HTML语法资料。
2.2 CSS
HTML控制的页面显示，与传统图形用户界面（Graphic User Interface，GUI）程序相比，显得不够漂亮，于是出现了对HTML显示内容进行更有效控制的手段：层叠样式表（Cascading Style Sheet，CSS）。利用这种方法可以实现对HTML文件页面元素更精确、更优美的显示控制，在当前页面文件中使用广泛，成为页面设计人员控制页面显示的利器。图 2-3显示了一个CSS的例子，请读者自行参考。值得一提的是，微软曾提出过DHTML的概念，这并非是一个全新语言，只是HTML结合CSS进行页面显示控制，加上JavaScript客户端编程实现页面动态效果。
图 2-3 CSS示例
5
2.3 XML
HTML是一种标记语言，同样属于这个语言领域的还有近年来风头十足的“扩展标识语言”（eXtended Markup Language，XML）。其实HTML和XML都是“标准通用标识语言”（Standard Generialized Markup Language，SGML）的子集，而XML与HTML的最大区别是XML可以自定义标签，而HTML的标签是预先定义好的。
HTML发展至今，出现了很多不规范写法，而主流浏览器对这些错误写法采取很宽容的态度，也使得这种不规范愈演愈烈。W3C曾经作出努力，借助XML的严格语法规定来规范HTML写法，搞出了一个XHTML的语言，标签还是HTML的，但写法必须严格遵循XML的规范，包括标签必须有结束标签、标签之间不能交叉等等，但无奈HTML已经深入人心，肯使用XHTML的页面设计人员凤毛麟角，也就只好随它去了。
图 2-4是目前新兴的RSS服务的文件内容，采用的就是XML标记，请自行参考。
图 2-4 使用XML标签的RSS
6
3 JavaScript
3.1 概述
Javascript是当前网站开发客户端编程使用最多的语言，也是本课程主要介绍的语言。 Javascript属于脚本编程语言（Scripting Language），其主要特点是：
解释执行：与C/C++语言不同，使用脚本编程语言编写程序文件后无需编译，直接在解释器中逐句
执行，如果其中有错误，执行到该句时会终止报错。Basic语言就是解释型编程语言的典型代表。所有脚本语言都是解释执行的，用作网站开发时，解释器就在Web浏览器中。
弱类型： 语言本身没有明确的变量类型，使用变量前不强制声明。
字符处理：以上两个特点并非脚本语言独有的（比如Basic就具有上述两个特点而本身不是脚本语
言），而这个特点才是它区别其他语言的重要特征。脚本语言主要被设计用来进行大量字符处理，不能开发图形用户界面，没有控制图形显示的语句或函数。如果使用这种语言编程，只能编写基于命令行的程序。而这个特点正适合它们用于网站编程，图形显示的部分由HTML负责，而网页上与用户交互的数据都是以文本方式传输的，很适合脚本语言处理。
Javascript是典型的脚本语言，最初由Netscape公司设计，在该公司的浏览器产品Navigator上内置了Javascript的解释器，可以处理网页中内嵌的Javascript代码，实现很多动态内容。该语言也被包括微软IE浏览器在内的所有主流浏览器软件所支持，是进行客户端编程的首选语言。
3.2 示例：输入为空的验证
3.2.1 示例说明
网站页面与用户交互时经常需要输入文本，如用户名、密码、检索字符串等，应确保输入项不为空（未输入或输入全部空格）；对于有实际内容的输入项，需截去两端的空格。该示例普遍用于有输入项的页面，对不良数据展开第一层拦截。 本例涉及以下Javascript语法： ? 变量定义
? 条件语句 循环语句 ? 自定义函数 ? 字符串处理 ? 内置对象
3.2.2 解决方案
首先编写包含两个输入项的一个页面文件，如清单 3-1所示。 1.
... ... 2.3.
8.
清单 3-1 包含输入项的HTML文件
这个页面文件包含一个叫做“login”的form，其中包括一个文本输入框、一个密码输入框（与文本输入框大体相同，只是输入内容不显示）、提交按钮和重置按钮。按下提交按钮会提交这个表单，第3行的“onSubmit”表示表单提交时先执行等号后面的操作，在此为调用Javascript的自定义函数“check()”，根据它的返回值决定是否提交表单。这种写法很常见，主要目的就是在表单提交之前对用户的输入项进行检查。
下面就是在页面文件中加入Javascript代码了，应该加在哪里呢？如果不是必要，一般加在“head”部分，可以有以下两种写法：
1. 2. 这两种写法都可以，任选一种即可。
7
文件编写完成后可以用IE打开，在Windows XP及后续操作系统、IE 6.0及其以上版本，对于在本机打开含有客户端编码的HTML文件默认是不执行客户端代码的，如图 3-1所示，在工具栏下面出现一个提示，表明当前IE已经限制了客户端编码的执行。为测试本例，可在提示上单击鼠标左键，在弹出的如图 3-2所示的菜单上选择“允许阻止的内容”即可。
图 3-1 IE限制本机含客户端编码的HTML文件
图 3-2 允许IE运行客户端编码
下面先来看看表单提交时调用的Javascript函数，如清单 3-2。 1. function check() 2. { 3. var val = trimspace(document.login.username.value); 4. if(val == '') 5. { 6. window.alert(\用户名不可为空！\7. return false; 8. } 9. else 10. { 11. window.alert(\用户名:\12. return true; 13. } 14. }
清单 3-2 提交表单调用的函数
首先看看Javascript自定义函数的写法（第1行），由于Javascript是弱类型语言，所以即使函数有返回值，也不知具体返回哪种类型，所以返回类型一律不写。自定义函数不需声明，直接像这样写函数体就可以。“function”是关键字，后面的“check”是自定义函数的名称，后面要有括号，如果需要参数可在括号中写（同样，因为是弱类型，参数不写类型，只写形式参数的名称）。整个函数用“{}”括起来。
第3行的“var”是变量声明，也可不声明直接使用。后面的“document”是Javascript的内置对象，可以粗略地认为该对象指代HTML文档。由于“form”是文档的一个对象，可以用“document.login”（“login”是本例“form”的名称，见清单 3-1），在“login”表单中，所有控件都是这个表单的对象，包括输入用户名的文本框“username”，它又包括一个属性“value”，引用该文本框中的值，所以，“document.login.username.value”就是用户在叫做“username”的文本框中输入的值，将这个值作为参数调用另一个自定义函数“trimspace”，把该函数的返回值赋值给变量“val”。 第4行到13行是Javascript的一种条件判断语句的写法，“if”后面的括号包含一个判断式，其结果如果为“真”，或者叫“true”，则执行下面大括号中的内容，否则执行“else”下面的内容。注意第4行“val = = ''”的写法。Javascript规定，“=”表示赋值，两个等号（“= =”）表示是否“等于”，所以作条件判断时要用两个等号。在此判断变量“val”是否等于“空”，含义是该变量没有赋值，是一个“零长度”字符串。后面会讲到，“trimspace”函数会把用户输入的内容的前后空格都截去，所以变量“val”如果等于空，就意味着用户在文本框中要么什么都没有填，要么填了若干空格，这两种情况都是要禁止的。所以下面调用了Javascript的一个内置函数“window.alert”，首先说“window”也是Javascript的内置对象，比“document”级别还高，可以认为指代浏览器的显示界面。“alert”函数是该对象的一个方法，作用是弹出一个信息对话框，参数的内容就是对话框要显示的内容。弹出后“return false;”，退出函数，返回值为“false”。表单在接到这个返回值后该表单就不会提交。
8
如果变量“val”不等于“空”，则执行“else”下面的内容，这里把用户输入的信息与其他字符串进行了拼接，并弹出信息框，最后“return true;”，表示表单可以提交了。在本例中，并没有指定表单提交到的程序，则默认调用自身。
下面讨论截去空格的程序。这可以归结为对于给定字符串，将该串开始部分和结尾部分的若干空格截去，中间的空格要保留。如给定字符串“##ab#cd###”（这里以“#”代表一个空格），经处理后变为“ab#cd”。
对于这个问题，可以如下处理：编程从字符串左侧开始，判断左侧第一个字符是否为空格，“是”则删去这个空格，然后继续判断第二个字符，直到找到一个非空格的字符。然后从字符串右侧重复这一过程。清单 3-3给出了实现这种算法的一个参考程序。 1. function trimspace(str) 2. { 3. var b = true; 4. do 5. { 6. if(str.indexOf(' ') == -1) 7. b = false; 8. if(str.indexOf(' ') > 0 && str.lastIndexOf(' ') < str.length - 1) 9. b = false; 10. if(str.indexOf(' ') == 0) 11. str = str.substring(1, str.length); 12. if(str.lastIndexOf(' ') == str.length - 1) 13. str = str.substring(0, str.length - 1); 14. } 15. while(b); 16. 17. return str; 18. }
清单 3-3 截去空格的函数
第1行的自定义函数“trimspace”接收一个形式参数“str”。第4行到15行是Javascript的一种循环语句，基本含义是当“while”括号中的条件为“true”时继续循环，为“false”时退出循环。第3行定义了一个变量“b”，它的值为“true”，在循环中当字符串的前后空格都截去后将该变量赋值为“false”，执行到第15行时就会退出“while”循环了。 下面看几个Javascript常用的处理字符串的内置函数，包括在字符串中搜索指定子串的函数“indexOf”和“lastIndexOf”，以及取子串操作“substring”。第6行，“str.indexOf(' ')”表示在字符串“str”中从左到右搜索一个空格，找到后返回该字符第一次出现的位置，Javascript规定，字符位置从“0”开始计数，即第一个字符位置是“0”，第二个位置是“1”，以此类推。如果找不到，则返回“-1”。那么第6行的条件句就是说“如果字符串str里面一个空格都找不到，就把b赋值为false”。既然一个空格也没有，自然也就不用再截了，退出循环就是了。再看第10句，意思是“如果找到了空格，而且位置是0，也就是说第一个字符就是空格，就用第11句的取子串函数截去空格”。这个函数需要两个参数，第一个是截取子串的起始位置，此处为“1”，表示从第二个字符开始；第二个参数是子串的结束位置，但不包含该位置。就此处来讲，从第二个字符一直取到整个字符串的结尾，最终位置应该是整个字符串的长度“str.length”（字符串的属性）。下面的第12句出现的“lastIndexOf”与“indexOf”相似，只是前者是对字符串从右到左搜索，如果在最右侧找到空格，其返回值就等于“str.length - 1”，所以下面将最右侧的空格截去。截去后的字符串仍赋值给“str”。
现在应该能够理解第8句的含义了。中间出现的“&&”表示“逻辑与”操作，就是前后两个条件必须同时成立。这一句前面的条件表示找到了空格，该空格不是左侧第一个字符，后面的条件表示从右向左也找到了空格，且不是最右侧的字符，这就说明虽然字符串包含空格，但不在字符串的两端，所以不应该作任何处理。
图 3-3 输入若干空格
9