脚本语言分析

1、第四课：JAVASCRIPT 脚本语言,本章主要内容,HTML DOM 模型,Javascript 概述,Javascript 基础知识,JS 基于对象的概念,JavaScript 概述,什么是JavaScript JavaScript是一种基于对象和事件驱动并具有相对安全性的客户端脚本语言。同时也是一种广泛用于客户端Web开发的脚本语言，常用来给HTML网页添加动态功能，比如响应用户的各种操作 JavaScript 特点 由数行可执行计算机代码组成 是一种脚本语言（脚本语言是一种轻量级的编程语言） 是一种解释性语言（就是说，代码执行不进行预编译） 通常被直接嵌入 HTML 页面 被设计用来向

2、 HTML 页面添加交互行为,JavaScript 概述,在打开页面的时候，让用户和页面进行交互，这些静态HTML是无法完成的，只有依靠JavaScript 简称JS,JavaScript 概述,JavaScript 和 JAVA 的区别 在概念和设计方面，Java 和 JavaScript 是两种完全不同的语言 Java由太阳微系统公司开发很强大，同时也是更复杂的编程语言，就像同级别的 C 和 C+ JavaScript它不是什么java的脚本 (Script) ，跟java毫无关系，是一门独立的前端脚本语言，用来做前端HTML开发的 就比如：微软和微博有什么关系吗？,JavaScript

3、概述,JavaScript 能做什么 它为 HTML 设计师提供了一种编程工具 ，可以操作HTML 动态的给一个表格增加行、删除行 也可以操作CSS样式，动态的改变HTML中的样式 动态的给表格添加背景色 可以根据用户的要求和HTML进行交互，获取数据修改数据 动态的获取输入文本框中的数据和修改文本框中的数据,JavaScript 基础知识,JavaScript 基本语法 JS是前端脚本，那它首先要存放在文件中，它可以放在html代码的任意位置，但是为了保证执行率（在网络传输中可以导致文件没有完全传输到客户端，无法执行JS）所以一般放在html的head标签中 alert(Hello Worl

4、d!); ,JavaScript 基础知识,JavaScript 脚本的引用 放在标签中间，前面的示例就是这样 可以将脚本单独放到一个文件中，类似于CSS文件一样，推荐此种用法 将脚本直接放到html元素中，作为属性值 ,JavaScript 基础知识,开始学习JavaScript,JavaScript 基础知识,JavaScript 标识符 一切从名字开始，JavaScript 标识符就是JS中使用的名字，它可以使用数字，大小写字母，下划线，美元符号构成，标识不能以数字开头 以下为合法的标识符 user_name password _username $username 以下为非法的标识符

5、33 Hello wolrd false,JavaScript 基础知识,JavaScript 关键字,注意:关键字不能用于标识符,JavaScript 基础知识,JavaScript 类型、变量 类型：所有变量都有类型，在JS中变量是弱类型变量（由值决定），统一用var定义 变量：就是JS中标识符的值会随着用户的定义有所变化 注意事项： 可以不定义直接使用，但极不推荐 变量对大小写敏感（y 和 Y 是两个不同的变量） 变量必须以字母或下划线开始 可以不用分号结束，推荐用分号,JavaScript 基础知识,var count;,count = 5;,定义变量,赋值,var 用于声明变量的关键

6、字 count 变量名,var x, y, z = 10;,var count = 10;,同时声明和赋值变量,声明多个变量,JavaScript 基础知识,JavaScript 调试功能 JavaScript中的变量是弱类型的，它不像JAVA语言，可以通过编译查看有没有语法等错误，JS代码如果有错误在运行中才能发现，但是也找不到具体的错误，所以调试很重要，通过调试检查代码 目前很多主流的浏览器都支持JS调试，我们使用谷歌浏览器,JavaScript 基础知识,JavaScript 中的注释主要有两种 单行注释 /这是单行注释 多行注释 /*这是多行注释*/ /* 这也是多行注释 */,Jav

7、aScript 基础知识,JS 的运算符与Java几乎一样 根据所执行的运算，运算符可分为以下类别： 算术运算符： 赋值运算符： 比较运算符： 逻辑运算符： 三目运算符： 位移运算符： 运算符同样具有和Java一样的运算优先级,JavaScript 基础知识,算术运算符,JavaScript 基础知识,赋值运算符,JavaScript 基础知识,比较运算符,JavaScript 基础知识,逻辑运算符,JavaScript 基础知识,三目运算符,JavaScript 基础知识,位移运算符,JavaScript 基础知识,数据类型 虽然JS是弱类型的，但是和java中一样也有数据类型的，它只定义了

8、6种基本数据类型，任何变量或值的基本类型都可以使用typeof运算符来获取，比如typeof “hello”,注意：null=undefined和null=undefined的值？,JavaScript 基础知识,数据类型自动转换 JavaScript是一种弱类型语言，在声明变量时无须指定数据类型，同时JavaScript能够自动转换变量的数据类型,JavaScript 基础知识,表达式中的数据类型转换 在java if表达式中，首先将条件表达式转换为bool类型，表达式为真值则执行if中的逻辑，否则跳过，但是javascript返回值不一定是true或者false,下面我们来分析 “ cas

9、e 2: 执行代码块 2 break ; default: 如果n即不是1也不是2，则执行此代码 ; switch 后面的 (n) 可以是表达式，也可以（并通常）是变量。然后表达式中的值会与 case 中的数字作比较，如果与某个 case 相匹配，那么其后的代码就会被执行。break 的作用是防止代码自动执行到下一行,JavaScript 基础知识,JavaScript 循环控制 在编写代码时，你常常希望反复执行同一段代码。我们可以使用循环来完成这个功能，这样就用不着重复地写若干行相同的代码 JavaScript 有两种不同种类的循环 for 将一段代码循环执行指定的次数 while 当指定的

10、条件为 true 时循环执行代码,JavaScript 基础知识,JavaScript FOR 循环控制 基本语法 for (变量=开始值;变量=结束值;变量=变量+步进值) 需执行的代码 或者 for(变量 in 集合) 需执行的代码 注意这边的“变量” 是“集合”的“key” 要取值就要用 var value=集合变量 ,JavaScript 基础知识,JavaScript while 循环控制 while循环也有两种格式 利用 while 循环在指定条件为 true 时来循环执行代码 利用 do.while 循环在指定条件为 true 时来循环执行代码。在即使条件为 false 时，这种

11、循环也会至少执行一次。这是因为在条件被验证前，这个语句就会执行 while (变量=结束值) 需执行的代码 和 do 需执行的代码 while (变量=结束值),JavaScript 基础知识,JavaScript 同样支持continue/break关键字 break语句 ，break可以用在switch、循环语句中 ，表示跳出当前switch或循环 continue语句 ，continue只能用在循环语句中，表示在循环中执行到continue时，自动结束本次循环，然后判断条件，决定是否进行下一次循环 for (i=0;i=10;i+) if (i=3) continue;/重新循环 If(

12、i=8) break;/跳出整个循环 ,JavaScript 基础知识,JavaScript 三目运算 我们可以利用if else语句实现程序的判断，有时候为了方便，我们还可以用三目运算 true = false ? “ ” : “ ”,JavaScript 基础知识,JavaScript 异常抛出 一个健壮的程序必须要对程序作出错误处理，不能让程序发生错误系统崩溃，这个功能很实用，在一个大系统运行到一个无关紧要的错误，如果能抛出错误就能拯救整个系统 可能是语法错误，通常是程序员造成的编码错误或错别字 可能是拼写错误或语言中缺少的功能（可能由于浏览器差异） 可能是由于来自服务器或用户的错误输出

13、而导致的错误 当然，也可能是由于许多其他不可预知的因素 【语法】 try 语句测试代码块的错误、catch 语句处理错误、throw 语句创建自定义错误 try throw “自定义错误信息” catch(err) finally ,JavaScript 基础知识,JavaScript 异常抛出 【语法】 try 语句测试代码块的错误、catch 语句处理错误、throw 语句创建自定义错误 try throw “自定义错误信息” catch(err) finally ,JavaScript 基础知识,JavaScript 的函数 JS函数可分为内置函数和自定义函数，在JS代码的任何地方都可以

14、直接调用,JavaScript 基础知识,JavaScript 自定义函数 系统所提供的函数不足以完成用户特定的功能需求 JS提供了自定义函数功能 【语法】 function 函数名(参数) argumentsn 如果指定参数 return “ 返回值”; ,JavaScript 基础知识,JavaScript 自定义函数调用 我们自定义好的函数，怎么去调用 可以在脚本中直接调用 函数名(参数) 还可以在HTML事件中调用 onclick=“函数名(参数),JavaScript 基础知识,JavaScript 匿名函数 之前我们学了JS的自定义函数，并且有函数名称，其实还有一种自定义函数，叫做

15、匿名函数，类似于JAVA中的匿名类 基本语法是 var funName=function(参数) 我们定义了一个函数，这个函数没有名称，并且把这个函数指定给funName 调用的基本语法 funName(参数); .,JS 基于对象的概念,JavaScript 面向对象 JS对象可以分为内置对象和自定义对象，内置对象类似于JAVA中的JDK类 从传统意义上来说，js 并不真正具有类。事实上，除了说明不存在类，在 js 中根本没有出现“类”这个词 js 定义了“对象”，逻辑上等价于其他程序设计语言中的类，但是由于OOP比较符合软件开发的思路，所以我们就模拟出JS中的OOP类的概念 JS面向对象的

16、概念可以定义为JS是基于对象的脚本语言,JS 基于对象的概念,JavaScript 内置对象主要包括 基本对象：Object 、Function 常用对象：Array、 String 、Boolean、 Number、 Date 正则表达对象：RegExp 错误对象：Error 、EvalError 、RangeError 、ReferenceError、 SyntaxError TypeError、 URIError,JS 基于对象的概念,JavaScript Object 内置对象 对象是由 new 运算符加上要实例化的对象的名字创建的。例如，下面的代码创建 Object 对象的实例 va

17、r o = new Object(); Object 对象自身用处不大，不过在了解其他类之前，还是应该了解它。因为Object对象与 Java 中的 java.lang.Object 相似，JS所有对象都由这个对象继承而来，Object 对象中的所有属性和方法都会出现在其他对象中，所以理解了 Object 对象，就可以更好地理解其他对象,JS 基于对象的概念,Object 属性和方法 prototype 属性是所有对象的原型属性，所有对象中的属性或者是方法都可以用它定义 Ototype.* ;/为Object对象定义原型中的属性或者方法，会影响子对象 var o = new

18、Object();/此对象实例就可以直接调用prototype定义的属性或者方法 Object 对象中两个主要的方法：valueOf()、toString() valueOf：是获取当前对象中存的真实值 toString：是获取当前对象中值的字符串格式,JS 基于对象的概念,JavaScript Function 内置对象 Function 类可以表示开发者定义的任何函数，我们之前定义的所有函数都可以用Function这个对象定义 /一般函数的定义 function funName(参数) /用Function定义 var funName=new Function(“参数”,”函数体”);,J

19、S 基于对象的概念,Function 对象的属性和方法 length 属性 属性 length 声明了函数期望的参数个数 主要方法 Function 对象也有与所有对象共享的 valueOf() 方法和 toString() 方法。这两个方法返回的都是函数的源代码,JS 基于对象的概念,JavaScript Boolean 内置对象 Boolean 对象是 Boolean 原始类型的引用类型 【语法】 var b= new Boolean(true); /定义对象 Boolean(value); /转换函数 如果省略 value 参数，或者设置为 0、-0、null、“”、false、unde

20、fined 或 NaN，则该对象设置为 false。否则设置为 true（即使 value 参数是字符串 “false”）,JS 基于对象的概念,也可以这样使用 Boolean var b=true;或者 var b=false; 讨论 var a= new Boolean(false); var b=true; a /创建对象 var myNum=Number(value) ;/转换为数字 把 Number() 作为一个函数来调用，它将把自己的参数转换成一个原始的数值，并且返回这个值（如果转换失败，则返回 NaN） 还可以直接创建 var myNum=100;,注意：与 Boolean 对象

21、相似，Number 对象也很重要，不过应该少用这种对象，以避免潜在的问题。 只要可能，都使用数字的原始表示法。,JS 基于对象的概念,JS 基于对象的概念,JavaScript String 内置对象 String 对象是 String 原始类型的对象表示法 【语法】 var str = new String(“hello world”); /创建对象 var str String(1); /转换成字符串,JS 基于对象的概念,JS 基于对象的概念,JS 基于对象的概念,JavaScript Date 内置对象 Date 对象用于处理日期和时间 【语法】 var myDate=new Date

22、() ; Date 对象自动使用当前的日期和时间作为其初始值 给日期赋初始值 var myDate=new Date(2012/11/23 12:50:50); 还可以 var myDate=new Date(2012,12,23,12,50,50) ;,JS 基于对象的概念,JS 基于对象的概念,JS 基于对象的概念,JS 基于对象的概念,JavaScript Math 内置对象 Math 主要用在数学上的一个帮助对象，它并不像 Date 和 String 那样是对象的类，因此没有构造函数 Math()，像 Math.sin() 这样的函数只是函数，不是某个对象的方法。您无需创建它，通过把

23、Math 作为对象使用就可以调用其所有属性和方法,JS 基于对象的概念,JS 基于对象的概念,JavaScript Array 内置对象 数组对象用来在单独的变量名中存储一系列的值 我们使用关键词 new 来创建数组对象。下面的代码定义了一个名为 myArray 的数组对象 var myArray=new Array() ; 给数组赋值 var myCars=new Array(“奔驰”,“宝马”,“本田) ; 或者：var myCars=“奔驰”,“宝马”,“本田 ; 或者：var myCars=new Array(3) myCars0=奔驰 myCars1=宝马 myCars2=本田 取值

24、基本语法 我们可以通过下标取值 var car=myCars1; /取到第二辆车,JS 基于对象的概念,数组属性 属性length：数组的长度，与存放元素的数量无关 常用于数组遍历，如： for(var i=0;iarr.length;i+) ,JS 基于对象的概念,JS 基于对象的概念,JavaScript RegExp 内置对象 RegExp 对象表示正则表达式，它是对字符串执行模式匹配的强大工具 【语法】 var reg=new RegExp(pattern, attributes); var reg=/pattern/attributes /直接创建 【参数说明】 参数 pattern

25、 是一个字符串，指定了正则表达式的模式或其他正则表达式 参数 attributes 是一个可选的字符串，包含属性 g、i,JS 基于对象的概念,要使用正则表达式就要调用它的方法,JS 基于对象的概念,开始编写正则规则 使用正则表达式最重要的是怎么编写正则表达式规则，编写符合要求的规则，然后执行一下就可以了,JS 基于对象的概念,JS 基于对象的概念,JS 基于对象的概念,instanceof 运算符 在使用 typeof 运算符时采用引用类型存储值会出现一个问题，无论引用的是什么类型的对象，它都返回 “object”。JS引入了另一个 Java 运算符 instanceof 来解决这个问题 i

26、nstanceof 运算符与 typeof 运算符相似，用于识别正在处理的对象的类型。与 typeof 方法不同的是，instanceof 方法要求开发者明确地确认对象为某特定类型 var str = “hello”; var str2 = new String(“hello”); 用 typeof 查看它们的结果，一个是”string” 还一个是“object”,其实“str2 ”是一个”String” 所以为了确定它的类型，用 instanceof 【语法】 str2 instanceof String /返回是逻辑值,JS 基于对象的概念,JavaScript 自定义对象 使用内置对象只

27、是面向对象语言的能力的一部分，它真正强大之处在于能够创建自己专 用的类和对象 自定义对象有如下方式： 通过object 对象实例化 直接创建对象 通过函数模板创建对象,JS 基于对象的概念,通过 Object 实例化对象 Object 是JS 中的内置对象之一，可以利用它生成一个基本对象，由于JS是弱类型的，所以可以在object对象上加属性或者方法来模拟JS的面向对象 对象的定义 var o=new Object(); 在对象上加属性和方法 o.属性=“”; o.方法=function() . 我们还可以通过Object的prototype定义属性和方法,JS 基于对象的概念,直接创建对象

28、类似于定义一个字符串一样 var str1=“hello”; var str2=new String(“hello”); 字符串str1是一种简写形式，在我们自定义类的时候也可以用简写形式 【语法】 var o = “name”:”zhan san”,”sex”:”man”,”age”:”30”; 它的结构也是 Object ，但是这个一般只能定义属性和值，不能定义方法，它也是JSONE数据格式的基础，是网络传输的标准格式,JS 基于对象的概念,通过模板定义类 虽然可以通过Object能实现对象的概念，但是每次使用新对象的时候都要定义一番，那么我们可以先定义一个类模板，以后就可以实例化这个类模

29、板就可以了 基本语法 function myClass(参数) this.属性=参数 方法=function() 实例化对象 var 变量名称 =new myClass(参数); 自定义的对象也可以像object对象一样动态定义属性，也用prototype定义属性,注意：这里的函数只要加上new 操作符，就把这个函数当做类加载了，初始化这个函数名（构造函数）然后把这个函数（对象）给变量名称，也叫做函数指针,JS 基于对象的概念,this 的使用 js 中的 this 和 java 中的 this 含义差不多，但是也有一定的区别，它们都表示当前被调用的对象在实例化对象时，总是不能确定开发者会使用

30、什么样的变量名。使用 this，即可在任何多个地方重用同一个函数 function showColor() alert(this.color); var car1 = new Object; car1.color = red; car1.showColor = showColor; var car2 = new Object; car2.color = blue; car2.showColor = showColor; car1.showColor(); car2.showColor();,JS 基于对象的概念,JavaScript 自定义匿名函数、通过Function定义的函数以及自定义对象

31、的区别 /匿名函数定义 var funName=function (参数) /Funtion生成的函数 var funName=new Funtion(“参数”,”函数体”); /自定义对象 function funName (参数) 各自的调用 funName(参数); funName(“参数”); var objName= new funName (参数);,HTML DOM 模型,DOM 概述 DOM是Document Object Model的简称，中文名称为文档对象模型,只是一个概念，它有如下实现方式 我们之前所学的html中对它的实现，叫做HTML DOM 还有以后我们学到的XML

32、，也有对它的实现叫做XML DOM 现在我们学的就是利用JavaScript程序来操作html,HTML DOM 模型,HTML DOM 基础 HTML 文档对象模型（HTML Document Object Model）定义了访问和处理 HTML 文档的标准方法 通过 JavaScript，您可以重构整个 HTML 文档。您可以添加、移除、改变或重排页面上的项目 要改变页面的某个东西，JavaScript 就需要获得对 HTML 文档中所有元素进行访问的入口。这个入口，连同对 HTML 元素进行添加、移动、改变或移除的方法和属性，都是 通过文档对象模型来获得的（DOM）,HTML DOM 模

33、型,JavaScript 操作 DOM 对象 在JS中对象有以下几种3中 用户定义对象： 程序员自己创建的对象 内建对象： 内建在JS语言里的对象，如Array Math 宿主对象：浏览器提供的对象，也就是HTML DOM对象模型 我们可以通过JS代码直接操作以上各种对象，对宿主对象的操作就类似于JAVA语言调用它的SDK,HTML DOM 模型,BOM 对象概念 除了JS内置对象以外，还有一个对象叫浏览器对象，它存在于浏览器中，通过JS能直接调用它,HTML DOM 模型,Window 对象 Window 对象表示浏览器中打开的窗口 如果文档包含框架（frame 或 iframe 标签），浏

34、览器会为 HTML 文档创建一个 window 对象，并为每个框架创建一个额外的 window 对象 Window 对象集合 frames,HTML DOM 模型,Window 对象属性 Screen ：对象包含有关客户端显示屏幕的信息 History：对 History 对象的只读引用 Navigator：对 Navigator 对象的只读引用 Location：用于窗口或框架的 Location 对象 Document：对 Document 对象的只读引用,HTML DOM 模型,Window 对象方法,HTML DOM 模型,Screen 对象 Screen 对象包含有关客户端显示屏幕的

35、信息，每个 Window 对象的 screen 属性都引用一个 Screen 对象，包括下面即将讲到的其它对象。Screen 对象中存放着有关显示浏览器屏幕的信息，JavaScript 程序将利用这些信息来优化它们的输出，以达到用户的显示要求。例如，一个程序可以根据显示器的尺寸选择使用大图像还是使用小图像,HTML DOM 模型,Screen 对象属性,HTML DOM 模型,Navigator 对象 Navigator 对象包含有关浏览器的信息,HTML DOM 模型,History 对象 History 对象包含用户（在浏览器窗口中）访问过的 URL,HTML DOM 模型,Locatio

36、n 对象 Location 对象包含有关当前 URL 的信息,HTML DOM 模型,Location 对象方法 它的href 属性存放的是文档的完整 URL，其他属性则分别描述了 URL 的各个部分。它还能控制浏览器显示的文档的位置。如果把一个含有 URL 的字符串赋予 Location 对象或它的 href 属性，浏览器就会把新的 URL 所指的文档装载进来，并显示出来,HTML DOM 模型,Document 对象 每个载入浏览器的 HTML 文档都会成为 Document 对象 , 使我们可以从脚本中对 HTML 页面中的所有元素进行访问,HTML DOM 模型,Document 对象

37、集合,HTML DOM 模型,Document 对象属性,HTML DOM 模型,Document 对象方法,HTML DOM 模型,Anchor 对象 Anchor 对象表示 HTML 超链接 ，在 HTML 文档中 标签每出现一次，就会创建 一个Anchor 对象,HTML DOM 模型,Button 对象 Button 对象代表 HTML 文档中的一个按钮 ，也是input中的一个按钮， 标签每出现一次，一个 Button 对象 就会被创建,HTML DOM 模型,Select 对象 Select 对象代表 HTML 表单中的一个下拉列表,HTML DOM 模型,Select 对象属性,

38、HTML DOM 模型,Select 对象方法,HTML DOM 模型,Checkbox 、Radio 对象,HTML DOM 模型,Text 对象,HTML DOM 模型,Form 对象 Form 对象代表一个 HTML 表单,HTML DOM 模型,Form 对象属性,HTML DOM 模型,Form 对象方法 表单的其中一个方法就是数据提交功能，在我们开发中尤其重要，其实一个提交按钮就是调用了表单的提交方法，我们也可以使用普通按钮提交数据,HTML DOM 模型,Table 对象,HTML DOM 模型,Table 对象属性,HTML DOM 模型,Table 对象方法,HTML DOM 模型,TableCell 对象,HTML DOM 模型,TableRow 对象,HTML DOM 模型,Style 对象 Style 对象代表一个单独的样式声明。可从应用样式的文档或元素访问 Style 对象 【语法】 document.getElementById(id).perty=值,HTML DOM 模型,Background 属性,HTML DOM 模型,Border 和 Margin 属性,HTML DOM 模型,Text 属性,HTML DOM