《因特网技术基础第四章.ppt》由会员分享，可在线阅读，更多相关《因特网技术基础第四章.ppt（56页珍藏版）》请在三一办公上搜索。
1、第四章 JavaScript脚本语言应用,4.1、网页的两种基本模式,1、动态网页与静态网页动态网页与静态网页之间的主要区别在于：动态网页含有服务器端脚本，因而只能在Web服务器上运行，而静态网页因为不含服务器端脚本，无需Web服务器支持，只需浏览器支持即可运行。动态网页运行在服务器端，返回HTML页面，运行机制:用户通过浏览器向Web服务器请求(.asp)文件；Web服务器接受请求，根据扩展名.asp识别出asp文件；Web服务器将asp文件转给一个类似于发动引擎的动态链接库文件ASP.dll；ASP.dll将请求的文件从头到尾进行解释处理，并根据ASP文件的脚本命令生成相应的html页面；
2、Html页面被发送给客户端浏览器并显示。,2、ASP技术含义,简单地说，ASP是微软的IIS（Internet Information Server，因特网信息服务）提供的一种基于服务器的脚本运行环境，也可以称为一种解决方案，它包括三层含义：1）使用了微软的技术（ActiveX）来编程开发的；2）运行在服务器端（Server），无需担心客户端浏览器是否支持ASP的编程语言；3）返回标准的HTML页面（Pages）。脚本是指一段能够完成某些特殊功能的程序段。编写脚本的语言称为脚本语言，脚本语言是介于HTML语言和Visual Basic、Java等高级语言之间的一种语言。它更接近高级语言，但却比
3、高级语言简单易学，当然也没有高级语言的功能那么强大。微软公司为ASP开发提供了两种标准的脚本语言：VBScript和JavaScript，系统的默认脚本语言为VBScript语言。由此可见，ASP本身并不是什么程序设计语言，也不是什么开发工具、编辑软件，它只是为嵌入Html页面中的脚本提供了运行环境。,静态网页的执行过程：,动态网页的执行过程：,例子：,动态网页与静态网页document.write(+今天是：+Date()+);&今天是：&now()&%,3、客户端脚本与服务器端脚本,服务器端脚本：在之间在标记的属性中，加RUNAT=“Server”客户端脚本：插入标记中，没有属性RUNAT
4、=“Server”,1 JavaScript的语法特性(1)JavaScript的字母区分大小写的；(2)JavaScript语句一般以分号（;）作为结束符；(3)JavaScript的注释符号包括多行注释符/*和*/和单行注释符号/；(4)分支结构、循环结构、自定义函数等程序段包含多条语句时称为语句块，应该置于一对大括号内内；,4.2 JavaScript脚本语法结构,JavaScript脚本的嵌入位置和运行方式都比较自由，既可以直接嵌入当前文档，又可以独立存放在外部文件中，运行方式既可以直接运行，也可以根据需要伴随事件运行。其基本格式如下：（1）直接嵌入，直接运行。通过标记对直接嵌入在当前
5、文件中。/JavaScript代码（2）外部引入，直接运行。将JavaScript程序以扩展名“.js”的文件单独存放，再利用标记的src属性引入外部文件，其语法格式如下：src=”*.js”,2 JavaScript脚本运行方式,（3）直接嵌入，事件触发。通过事件触发方式执行JavaScript的方法或函数主要有两种：一种是在HTML标记的属性中设置JavaScript的事件处理函数，事件被视为HTML标记的属性。如下格式所示：,JavaScript语言是一种弱类型的脚本语言，数据类型通常分为六种：数值型：即Number，由09的数字字符，正负号，小数点组成，如2.6、3.14等等。逻辑型：
6、即Boolean，只包括true（真）和false（假）两个值，在JavaScript中，整数0约定为false，非0整数约定为true。字符型：即String，是用单引号或双引号定界的字符串序列，字符包括英文、汉字、空格或数字。,4.3 JavaScript数据类型,对象型：即Object，对象是方法和属性的集合体。未定型：即Undefined，一个已经声明但还没有赋值的变量，或者表示一个对象的属性根本不存在。空值型：即Null，表示变量没有值或不是一个对象，即什么也不是。,4.3 JavaScript数据类型,根据数据类型的不同，常量可分为:数值型常量字符型常量逻辑型常量转义字符,4.4
7、JavaScript常量,对变量的声明未作强制性规定。可以不声明，而直接赋值使用；也可以先声明，后赋值使用，声明的同时还可以赋值。声明多个变量时，变量名之间用逗号（,）隔开。JavaScript用var命令声明变量，并且无须指明数据类型，其数据类型由变量值的类型决定的，变量命名必须以字母（大小写均可）、下划线(_)或美元符($)开头，变量名称不能使用Javascript语法保留的关键字。,4.5 JavaScript变量,JavaScript脚本提供了极其丰富的运算符，包括赋值、条件、算术、字符连接、关系、逻辑和位运算符。,4.6 JavaScript运算符,1、赋值运算符,2、算术运算符,3
8、、比较运算符,4、逻辑运算符,5、位运算符,6、其它运算符位,if(条件表达式)语句序列1else语句序列2,4.7 分支结构,if(条件语句1)语句序列1else if(条件语句2)语句序列2else if(条件语句3)语句序列3else语句序列n,4.7 分支结构,Switch(变量或表达式)case 值1:语句序列1;break;case 值2:语句序列2;break;case 值n:语句序列n;break;default:语句序列n+1;break;,4.7 分支结构,while(条件)语句序列,4.8 循环结构,for(;)语句序列,4.8 循环结构,：for(in)语句序列,4.8
9、 循环结构,默认情况下，循环语句将进行无休止地循环执行，除非循环条件表达式的值为假。如想提前中断或跳过循环，需在句块中添加break 或continue语句就可以了。break语句中断所有循环，而continue语句则跳过本次循环的剩余语句，然后开始下一次循环。,4.9 break和continue语句,函数定义函数的调用变量的作用域函数对象定义,4.10 function函数,function语句主要用来定义静态函数，当然也可以定义函数对象，定义静态函数的语法结构如下：function 函数名(形参1,形参2)局部变量定义函数执行部分return 表达式,函数定义,JavaScript语言的
10、典型特性就是对象，一切皆对象，甚至连数据，数据类型等等都可以当作对象。将变量和相关处理函数封装成对象，每个对象都有自己的属性和方法。属性可以访问对象的数据，方法主要用来处理数据的函数。JavaScript支持4种对象：内置对象、自定义对象、浏览器对象和ActiveX对象。JavaScript提供了11种内置对象，其中常用内置对象如图所示。,4.11 JavaScript内置对象,在JavaScript中，内置对象一般不能直接使用，需要使用new命令创建该对象的实例，然后通过对象实例间接使用该对象及其属性和方法。JavaScript对象可以视为一个数组，对象属性就是数组的元素，所以也可以使用数组
11、索引序号或者索引名（属性名）的方式访问对象属性，具体引用有下列三种方式：使用点（.）运算符university.Name=安徽省通过下标实现引用university0=安徽省通过字符串的形式实现universityName=安徽省,格式：var 对象实例名=new String(字符串);说明：建立字符串对象，使用时注意以下几点：关键字new和String可同时省略，省略关键字时，隐性建立一个string对象，可以使用string对象的方法；String对象提供了一个属性，即length，用来返回字符串的长度，其用法为：对象实例名.length；,4.12 String对象,String 对象
12、的定义可以通过两种方法创建一个字符串对象。str1=hello;str2=new String(hello);String 对象的方法第一类是关于字符串的运算。（1）charAt(位置)（2）indexOf(子字符串,起始索引)（3）substring（起始索引,结束索引）（4）toLowerCase()（5）toUpperCase()第二类是关于字符串的显示处理。,charAt()方法可返回指定位置的字符。indexOf()方法可返回某个指定的字符串值在字符串中首次出现的位置。substring()方法用于提取字符串中介于两个指定下标之间的字符。toLowerCase()方法用于把字符串转换
13、为小写。toUpperCase()方法用于把字符串转换为大写。,String对象提供了一组方法，用于对字符串的处理 JavaScript采用Unicode编码，1个汉字和1个西文字符都是算一个字符。String对象还提供了一些格式字符方法使用时注意方法名、关键字的大小写。,格式：var 数组名=new Array(数组大小|数组元素列表);说明：建立数组对象，使用时注意以下几点：数组对象提供了一个属性，即length，用于取得数组的元素个数；数组大小具有自动扩展机制，可以指定数组的大小，也可以不指定数组的大小；通过索引下标可以引用数组元素，下标起始值从0开始计数；,4.13 Array对象,数
14、组中的各元素值的类型可以各不相同；建立数组对象时，也可同时指定数组元素的值；关键字new和Array可同时省略，省略关键字时，需将数组元素列表放在一个方括号中，多元素之间用逗号隔开；不能直接建立二维或多维数组对象，不过数组元素的内容可以是数组对象，从而间接建立多维数组；,4.13 Array对象,4.14、鼠标与键盘事件,Window对象Document对象History对象Navigator对象Location对象Link对象Screen对象External对象窗体验证,4.15 浏览器对象,JavaScript将浏览器本身，网页以及网页的HTML元素等都用相应的对象来表示，这些对象及对象之
15、间的层次关系统称为DOM（Document Object Model，文档对象模型又称为浏览器对象），浏览器对象是一个上下包含关系的层次结构的对象模型，上层包含很多下层子对象，上下对象之间是一种从属关系。在这种从属关系结构模型中，Window（窗口）对象是浏览器对象层次结构中最高层，所有其他对象都可以视为Window对象的属性。浏览器对象模型如图所示。,1 浏览器对象,window（窗口）对象是浏览器对象层次结构中最高层，window对象代表浏览器的整个窗口。每个窗口都是window对象的实例，引用实例可以通过以下名称表示：window或self：表示当前窗口；top：代表最顶层窗口；pare
16、nt：代表当前窗口的父窗口；opener：由open打开的窗口。各从属对象可采用如下方式进行访问：window.子对象1.子对象2.属性名或方法名,2 Window对象,1)window对象的方法如图所示：2)window对象的属性name属性：用于指定窗口的名称，可以使用a标记的target属性指定窗口的名称，也可以使用open方法打开一个指定名称的新窗口。defaultstatus属性：用于设置或读取浏览器窗口状态栏中的默认显示信息。例如，可以在window对象的onload事件过程中编写以下语句：status属性：用于设置或读取浏览器窗口状态栏中显示的临时信息。例如，可以在某张图片的on
17、mouseover事件过程中编写以下代码：window.status=这是一张图片。screenLeft属性：传回左边界的坐标。screenTop属性：传回上边界的坐标,2 Window对象,2 Window对象,document对象表示在浏览器窗口或其中一个框架中显示的HTML文档，通过该对象的属性和方法可以控制页面的外观和内容。1).document对象方法write writeln:输出getElementById()：可返回对拥有指定 ID 的第一个对象的引用。getElementsByName()：可返回带有指定名称的对象的集合 2).document对象属性3).Document下
18、的对象如：Document.form1,3 Document对象,Document对象的属性(1)LinkColor属性：用来设置或返回文档中超链接的颜色。(2)aLinkColor属性：用来设置或返回文档中活动链接的颜色。(3)vLinkColor属性：用来设置或返回已经访问过的超链接的颜色。(4)bgColor属性：用来设置或返回文档的背景颜色。(5)fgColor属性：用来设置或返回文档中文本的颜色。(6)Anchor属性：这是一个对象属性，用来表示文档中的锚点。(7)Title属性：用来返回当前文档的标题，在运行期间不能改变。(8)Location属性：用来设置或返回文档的URL。(9
19、)Link属性：这是一个对象属性，用来表示文档中的超链接。(10)LastModified属性：返回当前文档的最后修改日期。(11)Referrer属性：用于返回链接到当前页面的那个页面的URL。,history对象包含用户已经浏览过的url集合，提供了浏览器的导航按钮功能，可以通过文档的历史记录来浏览文档。history对象拥有以下主要属性和方法。length属性：返回历史记录表中的url数目。back方法：从历史记录表中返回上一页。forward方法：从历史记录表中返回下一页。go(num)方法：在历史记录表中跳转到指定的页，num小于0为上一页，反之下一页。,4 History对象,na
20、vigator对象是存储浏览器信息的对象，该对象没有提供方法，只提供了属性，书写注意大小写。常见属性如图所示,5 Navigator对象,location对象包含当前url的信息，常见属性如图所示。location对象只有2个方法，即reload方法和replace(url)，前者用于重新加载当前文档，后者用于转向到指定的URL网址，功能上类似于href属性。,6 Location对象,link对象表示文档中的超链接，通过该对象的一些属性可以得到链接目标。link对象的基本属性是length，它返回文档中链接的数目。每个链接都是links数组中的一个元素，可以通过索引值来访问。例如，第一个链接
21、是links(0)，第二个链接是links(1)，最后一个链接是links(links.length-1)。,7 Link对象,获取屏幕的相关信息，screen对象常见属性如表图所示,8 Screen对象,External对象只有1个方法，即addfavorite，用于将网址:添加到收藏夹里,9 External对象,窗体验证不仅发生在发送数据时，也可以发生输入数据后发生，通常通过3个事件进行个别字段的验证，如下：onblur：输入数据后，移到其他字段时就会触发事件；onchange：修改字段内容就会触发此事件；onsubmit：单击submit按钮发送数据时，进行最后一次字段验证。,4.16
22、 窗体验证,而取消事件触发也有三种形式：将事件的属性设置为null，如下所示：=null;使用自定义的事件处理函数，使得函数传回false，如下所示：return false;在IE浏览器还可以使用event对象的属性returnValue将属性设置false时就可以取消事件，如下所示：onclick=event.returnValue=false;,4.17 Id与name属性,id 属性规定 HTML 元素的唯一的 id。id 在 HTML 文档中必须是唯一的。JavaScript 可以利用 id 属性通过 HTML DOM 来改变带有指定 id 的 HTML 元素的样式，CSS 也可以利用 id 定义相关元素的样式。name是用来提交数据的，提供给表单用，可以重复；id则针对文档操作时候用，不能重复如：document.getElementById()；,JavaScript是客户端编程常用的脚本语言，使用JavaScript的目的是控制页面内容，增强网页的动态交互性。这种交互性主要体现在用户与本地计算机之交互，如客户端数值计算，验证输入数据的合法性和构建动感的视觉效果。,小结,
