web技术应用基础d06

《web技术应用基础d06》由会员分享，可在线阅读，更多相关《web技术应用基础d06（87页珍藏版）》请在金锄头文库上搜索。

1、1,第6章 JavaScript,JavaScript,2,JavaScript,了解JavaScript作用、工作机制和特点； 了解Window对象构成、属性和方法 掌握Window对象基本使用方法 学会JavaScript的基本语法规则 熟练掌握JavaScript编程技巧,脚本（Script)应用知识点与技术要求：,Script是一种介于HTML与高级编程语言(如：Java、VB和C+等)之间的特殊语言，是由一组可以在Web服务器或客户端浏览器运行的命令的组合。脚本把网页对象和浏览器对象集成并组装起来，使网页具有动态效果和交互功能 。,3,6.1 JavaScript概述,6.1.1 J

2、JavaScript运行机制 脚本是一种能够完成某些功能的小程序段。这些程序段在程序运行过程中被逐行解释执行，脚本语言可嵌入HTML页面，并被浏览器解释执行。 服务器端脚本： 在服务器上运行的脚本程序 客户端脚本：在客户机上运行的脚本程序,JavaScript,4,JavaScript是一种嵌入HTML文档中的、跨平台、基于对象和事件驱动的脚本语言，它即可以在客户端运行也可以运行在服务器上。,JavaScript,5,6.1.2 JavaScript特点 1. JavaScript是一种脚本语言 2.基于对象 3.事件驱动 4.动态 5. 安全 6.与平台无关,JavaScript,6,6.1

3、.3 JavaScript应用示例,图像互换位置,JavaScript,7,1.任务要求 要求页面上有两幅图像及有关图像的说明的文字，当用户用鼠标左键单击页面时，图像交换位置。,例6.1,JavaScript,8,ex6-01.html代码清单 JavaScript应用案例 function ChangeImage() var dog_top=dog.style.top var dog_left=dog.style.left dog.style.top=cat.style.top dog.style.left=cat.style.left cat.style.top=dog_top cat.s

4、tyle.left=dog_left ,JavaScript,9, 请单击页面 cat dog ,JavaScript,10,代码说明 (1) 第16至19行： 和是块容器标记，之间可以容纳多个不同的HTML标记和语言元素。 id=“cat“，指定该块容器的id值是cat。 (2) 第3至12行：当用户单击页面时，由使用JavaScript脚本语言编写的ChangeImage()函数完成事件的处理，即图像交换位置的动作。,JavaScript,11,标记位于和标记之间，在标记中的脚本段将在页面主体(即在标记中的内容)被浏览器载入之前解释执行。 标记位于和标记之间时,这一段脚本程序将在HTML文

5、档被浏览器载入过程中被解释执行 属性language是script标记的必须指定的基本属性。一般被指定为JavaScript或VBScript。 runat=Server表示该段脚本在服务器端执行，如果省略，则表示该段脚本将发送到客户端运行。 脚本代码放在HTML的注释标记之间，这样做既不影响支持脚本的浏览器正确解释执行脚本程序；也可以使不支持脚本的浏览器把这段程序当作注释而旁路掉。,JavaScript,12,6.2 JavaScript基本语法 JavaScript是一种跨平台、基于对象(Object) 、事件驱动(Event Driven) 脚本语言，可以在于浏览器上运行,也可以运行在服

6、务器上。JavaScript由JavaScript核心语言、JavaScript客户端扩展和JavaScript服务器端扩展三部分组成。核心语言部分包括JavaScript的基本语法和JavaScript的内置对象，在客户端和服务器端均可运行。,作用：与HTML超文本标记语言、 Java小程序 一起在一个Web页面中链接多个对象，与Web客户交互 。,JavaScript,13,6.2.1 在HTML文档中调入或嵌入JavaScript 1.JavaScript嵌入HTML文件 语法规则： language 默认值：JavaScript,JavaScript,例6.2,14,例6.2 Java

7、Script嵌入HTML document.write(“Hello World!“) ,JavaScript,15,2.将JavaScript调入HTML文件 将JavaScript代码以扩展名“.js”单独存放 语法: ,JavaScript,16,6.2.2 JavaScript书写格式 区分大小写 可以没有可见行结束标志，换行符作为行终止符。 也可以用(;)作为一行终止符。 C语言、C和Java语言中，使用分号(;)作一行的结束标志 如果需要把几行代码写在一行，使用分号(;) 分开。 var a=3 var b=6 var c=0 var a=3; b=6; c=0,JavaScrip

8、t,17,为了使程序清晰易读，采用缩进格式来书写。 可以用两种方法进行注释。注释方法与C相同。 /：从注释标记“/”起直到行尾的字符都被忽略。 /* */：在“/*”与“*/”之间的字符都被忽略。,JavaScript,18,6.2.3 基本数据类型 1. 数据类型 数值型(整数和浮点数) 字符型 布尔型(取值为true 或false ) 空值 2. 常量 值保持不变的量,JavaScript,19,3. 变量 关键字“var” 声明变量并分配存储空间，var 为可选项 var a=3 /声明变量，并赋初值 a=3 /省略关键字var var a /声明变量后,赋值 a=6 三种方法等效，但不

9、能既不用关键字“var” 也不赋初置。 变量名必须以字母或下划线“_”开始，后面的字符可以是字母、数字或下划线例：abc、a_12、myvar、MyVar,JavaScript,20,JavaScript内部定义的保留字不能用作变量名。JavaScript 区分大小写的，变量Num与变量num是两个不同的变量。 JavaScript的变量采用了弱类型(Loosely typed)表达方式,变量在声明时不必显式说明它的类型，而是在使用时根据数据的类型来确定变量的类型。 在函数体外声明为全局变量 JavaScript提供四种类型变量： 数值型： 36，3.1415926，-3.1E12等 字符串型

10、： “Hello!” 逻辑型： true，false 空值型：null,JavaScript,21,4. 表达式 表达式是由变量、常量和运算符按一定规则组成的集合，表达式的值可以是数字、字符串或布尔量。JavaScript有三种表达式:算术表达式、串表达式和逻辑表达式。,JavaScript,22,5. 运算符 .对象访问、数组下标、()括号； +增、-减、-取负、位逻辑非、！逻辑非； delete、new、Typeof、this； *乘、/除、%取模、+加、-减； 移位、大于、=大于等于、= =等于、!=不等于； &位或、位异或、|位与、&与、|逻辑或； =赋值；(Jscript是弱变量型的

11、，可以重复赋值) ?:条件运算。 优先次序从前到后！,JavaScript,23,6.3 JavaScript控制结构和函数 6.3.1 JavaScript控制结构 1. ifelse if(条件) /如果条件为true，进行处理。 else /如果条件为false，进行处理。 如果不需要处理false 情况，可不写else语句段，例如： if(条件) /如果条件为true，进行处理。 ,JavaScript,24,2.switch 语句 switch(表达式) case 值1： 语句集1 break case 值2： 语句集2 break default: 语句集 break ,JavaS

12、cript,25,3. for for循环语句设置了一个计数器计算循环次数，达到循环次数后结束循环。 for(初始化表达式；条件；增量表达式) 语句集 ,JavaScript,26,4.循环语句 while while循环语句不直接指明循环次数，具体循环次数由运行时情况决定，满足循环条件执行循环体语句，不满足循环条件退出循环体。 语法规则 ： while(条件) 语句段 break语句：根据条件终止循环。 continue语句：根据条件，跳过循环体内剩余语句，进入下一次循环。,JavaScript,27,6.3.2 函数 函数必须先定义，后使用。 浏览器先执行HTML文档中的模块， JavaS

13、cript中常把自定义函数放在模块中，在HTML文档主体 中调用函数。 函数定义的规则如下： function 函数名(参数列表) 函数体 function：关键字，使解释程序知道后面定义函数 函数名：可以是任何合法的标识符 参数列表：函数的参数列表，多个参数用逗号分开 函数体： 函数执行的运算,JavaScript,28,6.3.3 JavaScript基本语法的应用案例,例6.3,例6.3,JavaScript,29,例6.3 JavaScript基本语法应用案例 /脚本语言是JavaScript function MyArray(n) /定义函数MyArray this.length=n

14、 for(i in 4) thisi=0 ,JavaScript,30,MyArray=new Array(4) MyArray1=“Web“ MyArray2=“技术“ MyArray3=“应用“ MyArray4=“基础！“ document.open() for(var n=1;n ,JavaScript,31,6.4 JavaScript对象 6.4.1 JavaScript对象概述 对象具有: 属性(properties) 方法(methods) 3种对象: JavaScript内建对象 浏览器环境提供的对象 自定义对象,JavaScript,32,6.4.2 自定义对象 语法： f

15、unction 对象名称(属性列表) this.属性1=参数1 this.属性2=参数2 this.方法1=函数名1 this.方法2=函数名2 ,JavaScript,33,创建对象实例 语法： 对象实例名=new 对象名称(属性值列表),JavaScript,34,function student(id,name,url) this.id=id this.name=name this.url=url this.display=student_display ,JavaScript,MyStudent=new student(“000001“,“林琳“, “http:/“),定义学生对象,学生对象实例,35,6.4.3 对象属性和方法的引用,JavaScript,1.对象属性的引用 语法： 对象实例名.属性成员名 例, MyStudent.name=“林琳“。,36,语法： 对象实例名n 例, MyStudent0= “000001“ MyStudent1= “林琳“ MyStudent2= http:/ 或： MyStudent“id“= “000001“ MyStudent“name“=