《JavaScript动态网页编程》课件.ppt
《《JavaScript动态网页编程》课件.ppt》由会员分享,可在线阅读,更多相关《《JavaScript动态网页编程》课件.ppt(190页珍藏版)》请在淘文阁 - 分享文档赚钱的网站上搜索。
1、JavaScript动态网页编程目录第1章 JavaScript入门第2章 HTML语言第3章 CSS样式表第4章 JavaScript语言基础第5章 流程控制语句第6章 面向对象编程第7章 浏览器对象模型第8章 文档对象模型第9章 事件处理第10章 表单与表单域第11章 XMLHttpRequest对象2 2第1章 JavaScript入门 1.1 JavaScript概述 1.2 编写JavaScript代码3 31.1 JavaScript概述第1章目录1.1.1 JavaScript是什么JavaScript是一种基于对象和事件驱动并具有安全性能的脚本语言,它是通过嵌入或导入到标准的H
2、TML文档中实现的。JavaScript脚本语言与HTML、CSS结合起来,可以在一个网页中链接多个对象,实现与网络客户的交互作用。JavaScript与Java的区别n它们分别是两个公司开发的不同产品。JavaScript是Netscape公司的产品,其设计目的旨在扩展Netscape Navigator浏览器的功能,是一种可以嵌入网页中的基于对象和事件驱动的解释性语言;而Java则是Sun公司推出的新一代面向对象的程序设计语言,特别适合于Internet应用程序开发。nJavaScript是一种基于对象的脚本语言,它可以嵌入HTML文档中,用来实现用户与浏览器的交互以及浏览器与服务器的异步
3、通信。Java则是一种真正的面向对象的程序设计语言,即使是开发简单的程序,也必须基于类来创建对象。4 41.1 JavaScript概述1.1.2 JavaScript的特点n简单性。JavaScript是一种脚本编写语言,它采用小程序段的方式实现程序设计。JavaScript是一种解释性语言,在程序运行过程中一边解释一边执行。JavaScript与HTML、CSS结合在一起,可以实现用户的交互式操作。JavaScript脚本语句的解释执行由Web浏览器负责,不需要额外的开发环境。n动态性。JavaScript是动态的,它可以直接对用户操作做出响应,不需要经过Web服务器程序处理。n跨平台性。
4、JavaScript语言依赖于Web浏览器本身,而与操作环境无关,只要在计算机上能运行支持JavaScript的浏览器,就可以正确地执行JavaScript程序。n基于对象。在JavaScript脚本代码中,可以调用其自身提供的对象或其他语言创建的对象,并采用面向对象的编程方法来设置对象的属性、调用对象的方法,以完成所需功能。n事件驱动。JavaScript对用户操作的响应是采用以事件驱动的方式进行的。所谓事件,通常是指在网页中执行了某种操作所产生的动作,例如单击鼠标、移动窗口、选择菜单等都可以视为事件。当事件发生后,可能会引起事件响应,响应的具体内容则需要通过编写事件处理程序来实现。n节省与
5、服务器端的交互时间。第1章目录5 51.2 编写JavaScript代码1.2.1 设置脚本语言编写HTML网页时,可以使用script标记提供一个容器,用于包含使用任何可由浏览器解释的脚本语言编写的代码行,以创建一个脚本代码块,语法如下。nn 一个或多个脚本语句n其中language属性指定script标记内代码行所使用的脚本语言,常用的值有javascript、jscript和vbscript。对于javascript,还可以指定脚本语言的版本,例如javascript1.1、javascript1.2、javascript1.3、javascript1.4、javascript1.5。l
6、anguage属性不再是HTML 4规范的一部分,如果编写JavaScript代码时需要进行W3C验证,则在HTML 4.01或XHTML 1.0中不验证此属性。type指定脚本语句的内容类型,以通知浏览器使用哪个脚本引擎来解释脚本语句。type属性值为不区分大小写的MIME类型,常用值有:text/javascript、text/jscript、text/vbscript。当定义编写脚本语句所使用的脚本语言时,type属性最终将代替language属性。由于早期浏览器忽略type属性,为了向前和向后兼容,建议同时包含language属性和type属性。第1章目录6 61.2 编写JavaSc
7、ript代码1.2.2 绑定对象事件使用Internet Explorer浏览器的事件模型时,允许通过script标记的event和for属性把某个对象与指定事件起来,语法如下。nn 事件处理程序代码n其中for属性的值为某个页面元素的ID,event属性的值则是该元素的事件名称,该元素必须支持event属性指定的事件。当加载页面时,浏览器注册每个script标记并将其event属性指定的事件与for属性指定的页面元素绑定起来。因此,当页面元素产生该事件时,将执行script标记中的脚本语句,不必对该对象编写事件处理程序,或者把脚本语句包括在函数定义中。第1章目录7 71.2 编写JavaSc
8、ript代码1.2.3 调用外部脚本库通过把script标记的src属性设置为一个扩展名为.js的外部脚本文件(称为脚本库)的路径,可以从外部文件中导入脚本语句。语法如下:nn其中src属性指定外部JavaScript脚本文件的URL。一旦加载外部语句,浏览器便对这些语句进行处理,就像把它们嵌入到HTML文档中一样。在实际开发中,常常把一些通用功能编写为JavaScript函数,并且保存为扩展名为.js的脚本库,然后在各个HTML文档顶部的head元素中导入该脚本库。当需要修改所有HTML文档中的函数定义时,对脚本库进行修改即可。这样十分便于实现网站的模块化设计。注意:在JavaScript脚
9、本文件中,可以直接编写JavaScript语句,不需要把这些语句包含在script标记中。此外,当script标记包含src属性时,不要其他脚本语句放在首尾标记之间。第1章目录8 81.2 编写JavaScript代码1.2.4 通过属性调用脚本JavaScript对标准HTML进行了扩展,为HTML标记增加了各种事件属性,通过设置这些事件属性可以调用JavaScript脚本。例如,对于表单元素,可以将其onclick属性设置为一段JavaScript代码,例如一个函数调用或一些JavaScript语句。当用户单击该按钮时,浏览器将解释执行由onclick属性指定的JavaScript代码。若
10、要通过a标记的href属性调用JavaScript代码,则必须在用作URL的JavaScript代码之前添加“javascript:”。也可以将href属性设置为“#”,而在事件属性onclick中设置要执行的JavaScript代码,此时不需要在代码之前添加“javascript:”,通过在JavaScript代码中添加一个“return false;”语句,则可以取消这个超链接的跳转作用。第1章目录9 91.2 编写JavaScript代码1.2.5 处理不支持脚本的情况某些浏览器不能很好地支持JavaScript,会把JavaScript代码与网页中的其他HTML内容一起显示在浏览器窗口
11、中。在这种场合,可以使用HTML注释标记()把脚本块中的JavaScript语句括起来,以避免显示这些脚本代码,语法如下:支持script标记的浏览器将忽略包含与之间的HTML注释标记,而不会影响脚本语句的解释执行。对于不支持或禁止运行JavaScript脚本的浏览器,可以使用noscript标记指定要显示的HTML内容,语法如下:要显示的HTML内容第1章目录1010第2章 HTML语言 2.1 HTML语言概述 2.2 设置文本格式 2.3 使用图像 2.4 添加媒体效果 2.5 创建表格 2.6 用框架分割窗口 2.7 用超链接实现导航 2.8 用表单实现交互11112.1 HTML语言
12、概述第2章目录2.1.1 HTML工作原理HTML标记有以下两种格式:n要控制的内容n在HTML语言中,所有标记都必须用一对尖括号括起来,这对尖括号由小于号“”组成,它们是HTML语言的定界符。例如,、等都是HTML标记。大多数HTML标记都包含一个开始标记和一个结束标记,用于定义该标记所影响的范围,例如,和、和等。也有一些HTML标记只要求单一标记,通常应当在这些标记的大于号之前放置一个斜线符号“/”,例如、水平线标记、换行标记就是这样。通过HTML标记可以定义一个页面元素,称为HTML元素。大多数HTML元素都拥有一个属性集,通过这些属性可以对该元素进行更多的控制。在HTML语言中,所有属
13、性都放置在开始标记的尖括号内。大多数HTML元素都具有以下通用属性。nid:为HTML元素指定一个独一无二的标识符。nclass:把一个元素指定为一个或多个类的成员。nstyle:为一个单独出现的元素指定CSS样式。ntitle:为元素指定一个标题,通常以工具提示形式显示出来。12122.1 HTML语言概述第2章目录2.1.2 HTML网页基本结构n基本结构nnnn网页标题nnn在这里添加网页的内容,包括文本、图像、声音、视频以及动画等。nnn顶级元素。nhtml元素。.称为文档标记,可以视为是全部HTML文档内容的容器,html元素包含HTML文档。nhead元素。.称为文档首部标记,用于
14、提供与文档有关的各种信息。nbody元素。.称为文档主体标记,指明文档主体的开始和结束,用于定义HTML文档的主要部分,给出要在网页上显示的内容及其显示格式。13132.1 HTML语言概述第2章目录2.1.2 HTML网页基本结构nbody元素的常用属性nbgcolor:指定网页的背景颜色。颜色值用16进制的#RRGGBB格式表示,其中RR、GG和BB分别表示红、绿、蓝三基色的值。例如,红色用#FF0000表示,蓝色用#0000FF表示。ntext:指定网页中的默认文本颜色。nlink:指定超链接文本的颜色。nalink:指定活动链接文本的颜色。nvlink:指定已访问过的链接文本的颜色。n
15、background:指定网页的背景图像,该属性值为图像文件的路径。nleftmargin:指定网页的左边距,取值为整数。ntopmargin:指定网页的上边距,取值为整数。14142.1 HTML语言概述第2章目录2.1.3 添加注释内容注释是网页设计者自己看的、不希望在浏览器中显示的内容。在HTML文档中,可以通过以下语法格式来添加注释内容:适当的注释可以帮助人们更好地了解网页的内容和各模块的划分,也有助于以后对网页代码的检查和维护。当在Web浏览器加载网页时,注释将被忽略,其内容不会呈现出来。15152.2 设置文本格式第2章目录2.2.1 分段与换行在HTML语言中,段落是用标记来定义
16、的。p元素是一个块级元素,在不同段落的文本之间会以一个空行来分隔。标记的语法格式如下:段落文本内容除了通用属性之外,p元素具有align属性,用于设置段落的对齐方式,取值可以是left(默认值)、center、right或justify,分别表示左对齐、居中对齐、右对齐和两端对齐。如果只是想让文本换到下一行显示,而不希望在网页中产生新的段落,可通过添加一个换行标记来插入一个换行符,语法格式如下:文本内容在HTML中,标记没有结束标记;在XHTML中,标记必须被正确地关闭,应写成。16162.2 设置文本格式第2章目录2.2.2 div与span标记ndiv标记指定一个呈现HTML内容的通用块级
17、容器,呈现时另起一行,其内容可以是内嵌元素和块级元素。语法如下:nn要控制的文档内容(文本、段落、表格或图像等)nnspan标记用于定义一个内嵌的文本容器,语法如下:nn文档内容n17172.2 设置文本格式第2章目录2.2.3 设置字体、字号和颜色在HTML中,使用font标记来设置文本的字体、字号和颜色,语法如下:文本内容其中nface:指定一种字体或一个字体列表,字体名称之间用半角逗号分隔,浏览器将使用用户计算机系统上安装的字体组合中的第一种字体;如果该字体未安装,则使用第二种字体,以此类推;如果用户计算机上未安装字体列表中的任何一种,则会使用系统默认字体。nsize:指定字体的大小,取
18、值从1到7,数值越大,字体越大;也可以使用“+”或“”来指定相对大小。ncolor:指定文本的颜色,可以使用颜色名称或十六进制颜色值。18182.2 设置文本格式第2章目录2.2.4 设置字符样式19192.2 设置文本格式第2章目录2.2.5 插入特殊字符20202.2 设置文本格式第2章目录2.2.6 设置标题格式在HTML语言中,可以使用h1h6标记在页面中设置各级标题,语法如下:n标题文本n标题文本nn标题文本h1标记定义最大的标题,h6标记定义最小的标题。h1h6元素均为块级元素。除了通用属性之外,它们都有一个align属性,用于指定标题的对齐方式,属性值与p标记中相同。默认情况下标
19、题总是用粗体字来显示。21212.2 设置文本格式第2章目录2.2.7 设置列表格式n有序列表用ol和li标记定义,语法如下:nn 条目1n 条目2n .n其中type属性指定序号的类型,有以下取值:“1”表示数字(默认值),“A”表示大写字母,“a”表示小写字母,“I”表示大写罗马数字,“i”表示小写罗马数字;start属性的值是一个整数,用于指定列表条目的起始序号。n无序列表用ul和li标记定义,语法如下:nn 条目1n 条目2n nul元素的type属性,用于指定项目符号的类型,有以下取值:“disc”表示实心圆(),“circle”表示空心圆(),“square”表示方块()。n定义列
20、表用dl、dt和dd标记创建,语法如下:nn 术语1n 定义1n 术语2n 定义2n22222.3 使用图像第2章目录2.3.1 在网页中插入图像n在HTML语言中,标记用于在网页中插入一个图像文件,语法如下:nimg元素的属性nsrc:指定图像文件的URL,图像可以是JPEG、GIF或PNG格式。nalt:指定替代图像的文本信息,在浏览器不能显示图像或图像加载时间过长时先显示出来。当鼠标指针悬停在图像上时,也会显示文本信息。nheight和width:分别指定图像的高度和宽度,以像素或百分比(基于父元素的高度或宽度)为单位。若只给出高度或宽度,则图像将按比例进行缩放。nborder:指定图像
21、的边框宽度,以像素为单位。若将该属性设置为0,则不显示边框。nhspace和vspace:分别指定图像与文本之间的在水平方向和垂直方向上的间距,以像素为单位。nalign:指定图像与文本的对齐方式或绕排方式。有以下取值:“left”表示图像居左、文本居右,“center”表示图像居中,“right”表示图像居右、文本居左,“top”表示图像顶部与文本对齐,“middle”表示图像中央与文本对齐,“bottom”表示图像底部与文本对齐。23232.3 使用图像第2章目录2.3.2 播放视频n在HTML语言中,标记通常用于在网页中插入一幅内嵌图像。不过,也可以利用该标记在网页中播放视频,为此把其d
22、ynsrc属性设置为视频文件的URL即可,语法如下:n设置属性ndynsrc:设置视频来源的URL,视频文件可以是AVI(.avi)、MOV(.mov)或MPEG(.mpg、.mpeg)格式。nloop:设置视频激活后的循环次数,有以下三个取值:1表示无限循环,0表示仅播放一次,正整数表示循环指定的次数。nstart:指定何时播放视频文件,其值是一个字符串,有以下两个取值:fileopen(默认值)表示加载后立即播放,mouseover 表示用户用鼠标指向视频时开始播放。24242.3 使用图像第2章目录2.3.3 插入水平分隔线n在HTML语言中,可以使用标记在网页中插入一条水平分隔线,并使
23、后面的文本在此处换行,从而可以起到分隔文档内容的作用。标记的语法格式如下:nhr元素为块级元素,该元素具有以下属性。nalign:指定水平线的对齐方式,取值可以是left、center或right,分别表示左对齐、居中对齐和右对齐。默认值为center。nsize:指定水平线的粗细(以像素为单位),默认值为2。nwidth:指定水平线的宽度,单位为像素或百分比(相对于当前窗口),默认值为100%。ncolor:指定水平线的颜色,默认值为灰色。nnoshade:为可选项,用于取消水平线的阴影效果。默认情况下水平线显示阴影。25252.4 添加媒体效果第2章目录2.4.1 插入滚动字幕n语法nn要
24、滚动显示的内容(可以是文本、表格、图像等)nnmarquee元素的属性nalign:指定字幕与周围文本的对齐方式,其值可以是top、middle或bottom。nbehavior:指定字幕中的文本如何滚动,其值是一个字符串,可以是scroll、slide和alternate。scroll表示字幕沿direction属性指定的方向滚动,文本在末端离去,然后从起点处开始;slide表示字幕沿direction属性指定的方向滚动,文本滚动到末端即停止;alternate表示字幕到达容器边缘时反转其滚动方向。默认值为scroll。nbgcolor:指定字幕的背景颜色。ndirection:指定文本的移
25、动方向,其值是一个字符串,可以是down、left、right和up,分别表示向下、向左、向右和向上。默认值为left。nheight:指定字幕的高度,以像素或百分比为单位。nhspace:指定字幕的外部边缘与浏览器窗口之间的左右边距,以像素为单位。nloop:指定字幕的滚动次数,其取值是一个整数,0或1表示无限循环,正整数表示循环次数。nscrollamount:指定字幕文本每次移动的距离,以像素为单位。ncrolldealy:指定与前段字幕文本延迟多少毫秒后重新开始移动文本,可用于设置字幕移动的速度。nvspace:指定字幕的外边缘与浏览器窗口之间的上下边距,以像素为单位。26262.4
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- JavaScript动态网页编程 JavaScript 动态 网页 编程 课件
限制150内