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