1、第2章 Web编程技术,2,内容提要,本章首先介绍HTML的发展历史然后介绍HTML的基本框架详细介绍了HTML的各种常用标记：文字标记、图片标记、超级链接标记，等等介绍CSS的基本使用方法，如何让CSS与HTML协同工作介绍JavaScript中的变量、数组、表达式、运算符、流程控制语句JavaScript的函数、内置对象、浏览器对象的层次和DOM模型的建立和使用,HTML编程技术,要把信息发布到全球，就必须要使用能够被大众接受的语言，也就是使用一种大多数计算机能够识别的语言。在Internet上，通常使用的发布语言是HTML,HTML概述,在20世纪90年代Web网络的迅速兴起，使得HTM
2、L空前繁荣。当时，HTML被发展成了许多不同的版本。出于解决这种混乱局面的考虑，迫切需要制定一个公认的HTML语言规范。1995年11月，Internet Engineering Task Force（IETF）整理了以前的各种版本，倡导并主持开发HTML2.0规范，同年推出HTML3.0技术规范。1996年，World Wide Web Consortium（W3C）的HTML Working Group开始组织编写新的规范，于1997年1月推出了HTML3.2。在HTML3.2中做了许多重要改动。到1999年下半年推出到现在依然使用的HTML4.0,HTML概述,案例名称：HTML网页框架
3、程序名称：2-01.htm,HEAD头元素,案例名称：HTML网页框架程序名称：2-02.htm我的第一页面,HTML的常用标记,HTML的常用标记有一些共同特点：都放在BODY标记里面。常用的标记有字体标记、图片标记、超级链接、列表、表格和表单等,字体标记,案例名称：使用字体标记程序名称：2-03.htm本书的特色是以案例为主，全书有30个完整的案例。 ,图片标记,案例名称：使用图片标记程序名称：2-04.htm,超级链接,案例名称：使用超级链接程序名称：2-05.htm其他文件上一个页面位于北京的清华大学,列表,案例名称：使用有序列表程序名称：2-06.htm有序列表 热爱祖国 热爱人民无
4、序列表 热爱祖国 热爱党,1.基本表格,是表格的基本标记。代表表格的行，代表表格的列。,案例名称：基本表格程序名称：2-07.htm 第一行第一列第一行第二列 第二行第一列第二行第二列 第三行第一列第三行第二列 ,表格的灵活应用,案例名称：跨行和跨列程序名称：2-08.htm 跨两行 跨两列 1000 1000 3000 2000 4000 ,Cellpadding和Cellspacing属性,Cellpading的意思是单元格的边距，指的是字与单元格边框的距离。Cellspacing的意思是单元格间距，指的是单元格之间的距离。,案例2-1：表格的样式,案例名称：表格的样式程序名称：Style
5、Table.htm序号大学师资评分学生评分设备评分1清华大学1001001002北京大学10010097,表单,表单的功能是收集用户信息实现系统与用户交互。比如E-mail信箱的注册页面就是一个十分典型的表单页面。表单信息的处理过程如下：当单击表单中的提交按钮时，表单中的信息就会上传到服务器中，然后由服务器端的应用程序（例如CGI，ASP，PHP，JSP等）进行处理，处理后将用户提交的信息存储在服务器端的数据库中，或者将有关信息返回到客户端浏览器上。,表单头及其属性,案例名称：表单的基本使用方法程序名称：2-10.htm用户名： 密码： ,表单中常用控件,在常用的表单制作过程中，经常遇到的是按
6、钮制作、输入元素的制作等。常见的表单控件包括文本框、文本域、密码框、多选框、单选框和下拉列表框，等等。,块级元素,案例名称：使用块级元素程序名称：2-12.htmI am a layer!I am a Span!,预排版标记,包含在预排版标记中的字符会按照HTML原码的格式输出到浏览器上。HTML文件中的英文空格一般不起作用，但是在预排版标记中空格可以显示出来。,设计网页框架,案例名称：上下框架程序名称：2-14.htm ,使用框架,一般在工程应用中，都是由三个页面组成的框架组合，分成上框架，右框架和左框架,CSS编程技术,CSS（Cascading Style Sheets）中文翻译为层叠样
7、式表单，简称样式单，是近几年才发展起来的新技术1998年5月12日，CSS level 2才成为W3C 的标准，它是一组样式，样式中的属性在HTML元素中依次出现，并显示在浏览器中。样式可以定义在HTML文档的标志里，也可以在外部附加文档作为外加文档。CSS的功能无比强大，W3C也极力向世界推广这一先进技术。,CSS概述,简单来说，HTML是一种标记语言，而CSS是这种标记的一种重要扩展，可以进一步美化页面。换句话说，CSS是一种用来装饰HTML的标记集合。CSS样式规则组成为：选择符 属性: 值 ，单一选择符的复合样式声明应该用分号隔开，如：选择符 属性1: 值1; 属性2: 值2 。,使用
8、CSS,案例名称：使用CSS程序名称：2-16.htmH1 FONT-SIZE: X-LARGE; COLOR: RED H2 FONT-SIZE: LARGE; COLOR: BLUE 中国，我的祖国！H1显示的中国，我的祖国！H2显示的,加载CSS样式的三种方式,使用CSS来格式化网页，共有三种方式：在HEAD中引用在BODY中引用作为文件来引用,HEAD内引用,案例名称：HEAD内引用程序名称：2-17.htm H1 COLOR:GREEN;FONT-SIZE:37PX; P BACKGROUND:YELLOW; 北京大学，清华大学南京大学，复旦大学 ,BODY内引用,案例名称：BODY
9、内引用程序名称：2-18.htm 北京大学，清华大学南京大学，复旦大学 ,文件外引用,案例名称：样式表文件程序名称：mystyle.cssH1 COLOR:GREEN;FONT-SIZE:37PX;P BACKGROUND:YELLOW;,案例名称：链接CSS文件程序名称：2-19.htm 北京大学，清华大学南京大学，复旦大学 ,文件外导入,案例名称：导入CSS文件程序名称：2-20.htm IMPORT URL(MYSTYLE.CSS); 北京大学，清华大学南京大学，复旦大学 ,CSS与标记对应的三种方式,标记选择符任何HTML元素都可以是一个CSS的选择符。上面所有的样式表都是采用标记选择
10、符引入的。例如：P BACKGROUND:YELLOW;，这里用的标记选择符是P。,类选择符,在STYLE标记定义一个“.类名”，然后在HTML标记中使用CLASS=“类名”就可以引入该样式,案例名称：类选择符程序名称：2-21.htm.LITTLEREDCOLOR:RED;FONT-SIZE:18px.LITTLEGREENCOLOR:GREEN;FONT-SIZE:18px 这是红色，而且比较小！这是绿色，而且比较小！,ID选择符,定义ID选择符时，在样式名之前加“#名字”，引用的时候使用“ID=名字”。,案例名称：ID选择符程序名称：2-22.htm#SZG COLOR:RED 这是ID
11、选择符号！,定义超级链接样式,可以指定A标记以不同的方式显示。一个超级链接有几种不同的状态：未被访问链接（Link）已访问链接（Visited）鼠标移动过（Hover）可以定义超级链接文字的颜色，可以定义字体的大小，一般超级链接都有下划线，可以利用“TEXT-DECORATION:NONE”将超级链接的下划线去掉。,定义超级链接样式,案例名称：定义超级链接样式程序名称：2-23.htmA:LINKCOLOR:RED ;FONT-SIZE:9PT;TEXT-DECORATION:NONEA:VISITEDCOLOR:BLUE;FONT-SIZE:9PT;TEXT-DECORATION:NONEA
12、:HOVERCOLOR:GREEN;FONT-SIZE:15PT;TEXT-DECORATION:UNDERLINE这是超级链接,JavaScript编程技术,JavaScript是一种Script脚本语言，所谓的脚本语言就是可以和HTML语言混合使用的语言。VBScript也是Script语言中的一种，但是VBScript只有微软的浏览器Internet Explore（IE）才能完全支持。而JavaScript则不管是什么浏览器都可以运行，这也是JavaScript的一个优点。JavaScript是一种高级的脚本描述性语言，并不需要依赖于特定的机器和操作系统，所以说它是独立于操作平台的。J
13、avaScript 1.0最初是在Netscape Navigator 2.0及Netscape LiveWire 1.0上实现的，目前JavaScript的版本是JavaScript 1.2。,从本质上说JavaScript和Java没有什么联系，但是同时作为语言，可以从三个角度来区别。（1）JavaScript是解释型的语言，当程序执行的时候，浏览器一边解释一边执行。而Java是编译型的语言，必须经过编译才能执行。（2）代码格式不一样，Java代码经过编译后成为二进制文件，而JavaScript是纯文本的文件。（3）在HTML中的嵌入方式不一样。Java可以通过小应用程序嵌入HTML文件，
14、而JavaScript可直接写入一个文本文件或HTML文件中。,网页中引入JavaScript,案例名称：第一个JavaScript程序程序名称：2-24.htmdocument.write(这是以JavaScript输出的!),变量与数组,变量和数组是JavaScript的基础，JavaScript和C语言属于同一语系，许多基本语法一样。不管是在JavaScript中还是在其他程序语言中，最基本的概念是变量。JavaScript定义变量只有一个关键字“var”，在JavaScript中定义一个用户名变量的语法为：“var strUserName;”。,变量,案例名称：使用变量程序名称：2-2
15、5.htmvar strWelcome = 欢迎您！;var iCounter = 10;iCounter = iCounter + 1;document.write(strWelcome);document.write(iCounter);,变量命名需要遵守以下六个规则,（1）变量命名必须以一个英文字母或是下划线为开头，也就是变量名第一个字符必须是A到Z或是a到z之间的字母或是“_”。（2）变量名长度在0255字符之间。（3）除了首字符，其他字符可以使用任何字符、数字及下划线，但是不可以使用空格。（4）不可以使用JavaScript的运算符号，例如：+，等。（5）不可以使用JavaScrip
16、t用到的保留字，例如：sqrt（开方），parseInt（转换成整型）等。（6）在JavaScript中，变量名大小写是有所区别的，例如：变量s12和S12是不同的两个变量。,声明数组,用new和Array关键字，new代表建立一个新的对象，Array是JavaScript内置的一个对象由于JavaScript区分大小写，所以Array的首字母必须是大写。,使用数组,案例名称：使用数组程序名称：2-26.htmvar arrUserName = new Array(2);arrUserName0 = Bill;arrUserName1 = Bob;document.write(arrUserN
17、ame0);document.write();document.write(arrUserName1);document.write();,表达式与运算符,程序主要功能是运算，例如加、减、乘、除等基本操作。算术运算符主要提供加、减、乘、除等操作，计算机中没有通常的乘号，用“*”代替。取余操作用“%”，,案例名称：算术运算符程序名称：2-27.htm document.write(3*2); document.write(); document.write(3/2); document.write(); document.write(3%2);/取余数,逻辑运算符,逻辑运算符包括：与运算符“&”
18、、或运算符“|”和取反运算符“！”,案例名称：逻辑运算符程序名称：2-28.htm document.write(true,字符串运算符的使用方法,案例名称：字符串运算符程序名称：2-29.htmvar strHello = 网页编程;var strResult = 你好，;strResult += strHello;/等价于：strResult = strResult + strHello;document.write(strResult);,条件表达式,案例名称：条件表达式程序名称：2-30.htm a = (43) ? 5 : 7; b = (4); document.write(b);
19、,控制语句之条件语句,JavaScript提供的语句可以分为以下4大类。（1）条件和分支语句：Ifelse语句，switch语句。（2）循环语句：for语句，dowhile语句，break语句和continue语句。（3）对象操作语句：new，this和with。（4）注释语句：“/”或“/* */”。,if语句,案例名称：if语句程序名称：2-31.htmvar iHour = 13;if (iHour ,switch语句,案例名称：switch语句程序名称：2-32.htmvar val = ;var i = 5;switch(i)case 3:val = 三;break;case 4:v
20、al = 四;break;case 5:val = 五;break;default:val = 不知道; document.write(val);,流控制语句之循环语句,循环语句包括：for语句、while语句，循环控制转移语句continue和break语句。for语句的基本语法如下。for (初始化部分；条件部分；更新部分)语句块,for 语句,案例名称：for 语句程序名称：2-33.htmvar iSum = 0;for(var i = 0; i ,while 语句,案例名称：while 语句程序名称：2-34.htmvar iSum = 0;var i = 0;while( i,br
21、eak语句,案例名称：break语句程序名称：2-35.htmfor(i = 1; i );,continue语句,案例名称：continue语句程序名称：2-36.htmfor(i = 1; i );,JavaScript函数,函数在定义时并没有被执行，只有函数被调用时，其中的代码才真正被执行。为了实现函数的定义和调用，JavaScript语句提供了两个关键字：function和return。JavaScript函数的基本语法如下：function 函数名称（参数表）语句块;,函数定义和调用,案例名称：函数定义和调用程序名称：2-37.htmfunction getSqrt(iNum)var
22、 iTemp = iNum * iNum;document.write(iTemp);getSqrt(8);,函数的返回值,案例名称：函数的返回值程序名称：2-38.htmfunction f(y) var x = y * y; return x; for(x = 0; x );,事件的概念,JavaScript事件主要包括三大类的事件：超级连接事件，浏览器事件和界面事件。界面事件包括：Click（单击）MouseOut（鼠标移出）MouseOver（鼠标移过）MouseDown（鼠标按下）等。,单击事件,案例名称：单击事件程序名称：2-39.htm,下拉列表,下拉列表是常用的一种网页元素，一
23、般利用ONCHANGE事件来处理。,案例名称：处理下拉列表程序名称：2-40.htm 北京上海广州 function func() alert(你选择了 + selAddr.value); ,动态按钮,当鼠标移动到按钮上的时候，按钮就会凸起来。这通过JavaScript的事件实现起来非常方便。首先必须准备两张图片，当鼠标移上去的时候，自动切换成另一张图片就可以了,动态按钮,案例名称：动态按钮程序名称：hoverbutton.htmfunction DoOver(oimg)var imgSRC;imgSRC = Edit_ + oimg.name + _Over.gif;oimg.src = i
24、mages/ + imgSRC;function DoOut(oimg)var imgSRC;imgSRC = Edit_ + oimg.name + .gif;oimg.src = images/ + imgSRC;,对象处理语句,案例名称：this语句程序名称：2-41.htmfunction imgclick(oimg)alert(图片名称是： + oimg.name+rn图片地址是： + oimg.src ); ,forin语句,案例名称：forin语句程序名称：2-42.htm var arr = new Array(3); arr0 = Jack; arr1 = Mike; arr
25、2 = Rose; for(i in arr) document.write(第 + i + 个为： + arri); ,with语句,案例名称：with语句程序名称：2-43.htm with(document) write(你好世界); write(你好中国); write(再见); ,JavaScript内置对象,内置对象都有自己的方法和属性，访问属性的语法是：“对象名.属性名称”。访问方法的语法是：“对象名.方法名称（参数表）”。所谓的方法就是一个普通的函数被封装到一个对象中,使用时间对象,案例名称：使用时间对象程序名称：2-44.htmvar curr=new Date();docu
26、ment.write(今天是);switch(curr.getDay()case 0:document.write(周日,休息了！);break;case 1:document.write(周一,需要工作！);break;case 2:document.write(周二,需要工作！);break;case 3:document.write(周三,需要工作！);break;case 4:document.write(周四,需要工作！);break;case 5:document.write(周五,需要工作！);break;case 6:document.write(周六,休息了！);break;
27、,网页时钟,Math对象,案例名称：使用Math对象程序名称：2-45.htmvar a = Math.sin(1);document.write(a),String对象,一般利用String对象提供的函数来处理字符串。String对字符串的处理主要提供了下列方法。（1）charAt(idx)：第一个字符位置是“0”，返回指定位置处的字符。（2）indexOf(Chr)：返回指定子字符串的位置，从左到右，找不到返回1。（3）lastIndexOf(chr)：返回指定子字符串的位置，从右到左。找不到返回1。（4）toLowerCase()：将字符串中的字符全部转化成小写。（5）toUpperCa
28、se()：将字符串中的字符全部转化成大写。,String对象,案例名称：使用字符串处理函数程序名称：2-46.htmvar str = I am a boy, I like programming!;a = str.charAt(7);b = str.indexOf(a);c = str.lastIndexOf(a);d = str.toUpperCase();document.write(a + );document.write(b + )document.write(c + )document.write(d + ),案例2-5：字符串扫描统计,案例名称：使用字符串处理函数程序名称：str
29、ing.htmvar str = I am a girl, I like catvar iCount = 0;for( i = 0; i ,JavaScript的常用函数,介绍几个常用的函数：eval()函数parseInt()函数parseFloat函数。,使用eval()函数,案例名称：使用eval()函数程序名称：2-47.htm var str = 1+2+3;document.write(eval(str);,parseInt()函数和parseFloat()函数,parseInt()函数功能是从一个字符串中提出一个整数，如果遇到字符串中除了数字以外的字符，parseInt()就停止
30、转换，返回已有的结果。如果第一个字符不是数字，parseInt()就返回“NaN”值。ParseFloat()函数和parseInt()函数相似，区别parseFloat()可以提取小数。,parseInt函数和parseFloat函数,案例名称：使用parseInt函数和parseFloat函数程序名称：2-48.htmvar a = parseInt(123China);var b = parseFloat(123.12China);document.write (a + );document.write (b);,对象层次及DOM模型,DOM,DOM（Document Object Mo
31、del）是文档对象模型的缩写，文档对象模型提供了文档的定位模型。,function do_Copy()var str = frm1.txtBox1.value;frm2.txtBox2.value= str;,使用window对象,function new_win()window.open(new.htm,my,toolbar=no, left=150, top=200, menubar=no, width=150,height=150);,使用location属性,案例名称：使用location属性程序名称：2-51.htm function test_location() window.l
32、ocation=new.htm; ,History对象,案例名称：使用History对象程序名称：2-52.htm function goforward() history.go(1); function goback() history.go(-1) ,Web应用经典案例研究,在Web应用开发中有一些关键的动态编程技术，下面六种最常用的关键技术：动态表格常用的网页对话框动态网页框架表单验证程序控制Form表单在页面中执行客户端的可执行文件,动态表格彻底研究,对表格单元格的添加删除修改并对其进行移动以及拷贝等操作，是目前应用开发中常用的技术。,表格的动态选中,三种网页对话框,在Web应用开发中
33、，有三种形式的网页对话框：1、使用window.open打开的网页2、使用Web模式对话框3、使用Web非模式对话框,动态网页框架彻底研究,可以象对普通Windows窗口一样操作网页框架，可以最大化窗口页可以最小化窗口，,表单验证,常用的表单验证有两种方式第一种是利用onsubmit事件实现验证第二种是利用普通按钮实现验证,程序控制Form表单,执行客户端的可执行文件,案例名称：程序控制Form表单程序名称：2-62.htmvar Shell = new ActiveXObject(WScript.Shell) ;/try var cmd=mspaint.exe ;/ var aa = She
34、ll.Run(cmd,1, true) ;/catch(e) alert (目录不存在文件！); ,小结,本章首先介绍HTML的发展历史然后介绍HTML的基本框架详细介绍了HTML的各种常用标记：文字标记、图片标记、超级链接标记，等等介绍CSS的基本使用方法，如何让CSS与HTML协同工作介绍JavaScript中的变量、数组、表达式、运算符、流程控制语句JavaScript的函数、内置对象、浏览器对象的层次和DOM模型的建立和使用,本章习题,2-1. 如何在网页中设置字体？有哪些字体可以使用？2-2. 如何引入一张图片？如何给图片加上边框？2-3. 如何使用超级链接？如何将超级链接的下划线去
35、掉？2-4. 如何定义跨行的表格？如何将表格的字体和边框的距离加大？2-5. 框架有几种基本形式？如何使用？2-6. 加载CSS样式的方式有哪些？如何使用？2-7. 编写E-mail注册的表单。（上机练习）2-8. 编写程序统计1到50中所有偶数的和。（分别用for和while语句实现）2-9. 编写程序实现：取系统时间，如果时间在6:0012:00之间，输出“早上好”；如果时间在12:0018:00，输出“下午好”；如果时间在18:0024:00之间，输出“晚上好”；如果时间在0:006:00，输出“凌晨好”。2-10. 在字符串“I am a girl, I like dancing!”的每个字符之间加上一个字符“#”，输出字符为：“I# #a#m# #a# #girl#,# #I# #like# #d#a#n#c#i#n#g#!”，并统计“#”的个数。,
