因特网技术基础第四章.ppt

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