chap04-1javascript基本语法.ppt

动态网页脚本语言JavaScript,主要内容 概述 JavaScript数据类型和变量声明 JavaScript运算符和表达式 各种控制结构和数组 正则表达式,1,JavaScript是由Netscape公司开发的一种跨平台，面向对象(object-oriented)的网页脚本语言(Web Script Language)，是目前流行的网页特效设计语言。 JavaScript代码可直接嵌入HTML文件中，随网页一起传送到客户端浏览器，然后通过浏览器来解释执行。,JavaScript概述,2,什么是JavaScript脚本语言？ (1) 脚本语言(Scripting Language)？ 由ASCII码构成，可直接用任何的文本编辑器开发完成。是一种不必事先编译，只要利用适当的解释器(Interpreter)就可以执行的简单的解释式程序。 (2) JavaScript？ JavaScript是由Netscape公司开发的一种跨平台，纯面向对象(object-oriented)式的网页式脚本语言(Web Script Language)。JavaScript代码可直接嵌入HTML文件中，随网页一起传送到客户端浏览器，然后通过浏览器的解释器来解释执行。,JavaScript概述,3,脚本编写语言 基于对象的语言 简单性 动态性 跨平台,2. JavaScript的特点,JavaScript概述,4,制作网页特效 提供表单前端验证 窗口动态操作 动态修改HTML页面或页面元素的内容,3. JavaScript的功能,JavaScript概述,5,注：在HTML5中javascript的重要性更加明显，譬如绘图支持基本全部由javascript完成，还有本地存储，离线应用、客户端通信等功能均大量采用javascript语言。,4.JavaScript与Java的区别,JavaScript与Java完全是两个不同的产品 Java是Sun公司推出的面向对象的程序设计语言 JavaScript是Netscape公司开发的脚本语言 JavaScript与Java运行方式不一样 JavaScript是解释执行，由浏览器负责解释 Java是编译，解释执行，先编译生成字节码，然后由Java虚拟机解释执行 JavaScript不是Java的简化版本 逻辑运算符、语句结构类似 变量申明、对象调用等不同 JavaScript和Java代码格式不一样 JavaScript 采用一种文本字符格式，可以直接嵌入在html文档中 Java 采用一种与HTML无关的格式,JavaScript概述,编写工具,JavaScript的编辑工具很多，如 Notepad，Ultraedit，EditPlus Microsoft FrontPage、DreamWeaver、Microsoft Visual InterDev Eclipse,JBuilder,NetBean等IDE开发工具 针对简单的程序，我们使用文本编辑器直接书写源代码,JavaScript概述,脚本的执行原理,应用 服务器,IE,IE,解析HTML标签和JavaScript脚本,从服务器端下载含JavaScript的页面,返回响应,客户端请求含JS的页面,发送请求,1,用户输入,2,3,JavaScript概述,在HTML标记中直接写入JavaScript代码 例： 鼠标移过来 运行,5. 在HTML文档中嵌入JavaScript代码,9,JavaScript概述,将JavaScript代码放入标记符中 例如：,5. 在HTML文档中嵌入JavaScript代码,JavaScript概述,10, / JavaScript Appears here. alert(“这是第一个JavaScript例子!“); alert(“欢迎你进入JavaScript世界!“); alert(“今后我们将共同学习JavaScript知识！“); ,注：script代码可以放在之间，也可以放在内部,将代码独立存储为以 .js 为扩展名的文件，利用SRC属性将该文件调入 例如：,5. 在HTML文档中嵌入JavaScript代码,JavaScript概述,11, 使用外部文件 以上文本是通过访问外部 JavaScript 文件显示的 ,JavaScript 代码 (test.js),document.write(“喂！你好吗? “);,为避免某些浏览器不完全支持JavaScript，而造成错误，可将JavaScript代码用注释语句括起来 例如： ,4. 在HTML文档中嵌入JavaScript代码,JavaScript概述,12,1.数据类型分类,JavaScript数据类型,基本类型,特殊类型,组合类型,Number：数字 String：字符串 Boolean：布尔,Null：空 Undefined：未定义,Array：数组 Object：对象,二、JavaScript数据类型和变量声明,数值型(Number)：包含整数或浮点数。 布尔型(Logical)：取值为true或false。1,0 字符串型(String)：用单引号或双引号括起来的零个或多个的字符或数字所组成。 空类型(null)：表示某个变量的值为空，取唯一值”null”，大小写敏感。 undefined类型：表示确定一个已经创建但没有初值的变量。 注：null不能写成Null或NULL。 null既不等于“0”，也不等于“空字符串”。因为“0” 是数值，“空字符串”是字符串。,1. 数据类型,14,二、JavaScript数据类型和变量声明,数字类型,整数 在JavaScript中10进制的整数由数字的序列组成 精确表达的范围是 -9007199254740992 (-253) 到 9007199254740992 (253) 超出范围的整数，精确度将受影响 浮点数 使用小数点记录数据 例如：3.4，5.6 使用指数记录数据 例如：4.3e23 = 4.3 x 1023,二、JavaScript数据类型和变量声明,数字类型,16进制和8进制数的表达 16进制数据前面加上0x，八进制前面加0 16进制数是由0-9,A-F等16个字符组成 8进制数由0-7等8个数字组成 16进制和8进制与2进制的换算,二、JavaScript数据类型和变量声明,String数据类型,简介 是由Unicode字符、数字、标点符号组成的序列 字符串常量首尾由单引号或双引号括起 JavaScript中没有字符类型 常用特殊字符在字符串中的表达 字符串中部分特殊字符必须加上右划线 常用的转义字符,二、JavaScript数据类型和变量声明,比较两个字符串的字符序列是否相等，使用=即可,String数据类型,String数据类型的使用 特殊字符的使用方法和效果 Unicode的插入方法,/测试特殊字符的书写 var aa=“u4f60u597dn欢迎来到“JavaScript世界“ “; alert(aa);,你,好,换行,二、JavaScript数据类型和变量声明,String类包含了很多方法，下面说明match()和search()方法，它们均支持使用正则表达式作为子串，区别如下： match()返回匹配的子字符串或者null。如果包含匹配值，则返回字符串数组；否则就返回null search()返回匹配的索引值，若搜索到匹配子串，则返回子串的索引值；否则返回-1； match()方法通过使用g标志来表示全局匹配，返回所有匹配正则表达式的子串所组成的数组。 split():将某个字符串分隔成多个字符串，可以指定分隔符 slice（）返回字符串的某个子串，功能比substring更强大。,JavaScript数据类型和变量声明, var s=“cdefg“; a= s.search(/a-z+d.a-zA-Z2m/); var str=“1dfd2dfs3df5“; var b=str.match(/d/g); alert(a+“n“+b); document.write(str.match(/dfs/); ,匹配的结果返回一个数组，数组元素是目标字符串中所有数值,JavaScript数据类型和变量声明,Null和Undefined,简介 Null在程序中代表变量没有值或者不是一个对象 Undefined代表变量的值尚未指定或者对象属性根本不存在,有趣的比较,JavaScript数据类型和变量声明,自动数据类型转换 如果表达式中用（+）运算符，且其中一个操作数为字符串，另一个操作数为数值时，JavaScript自动将数值转成字符串。 例如：var x=”我今年”+18; 结果：x=“我今年18” var x=”15”+8 结果：x=158 var y=15+8; 结果：y=23 如果表达式中用了其它运算符，JavaScript自动将字符串转成数值。 例如：var x=”30”/5; 结果：x=6 var y=”15”-“8”; 结果：y=7 举例,2. 数据类型转换,22,JavaScript数据类型和变量声明,数字 + 字符串：数字转换为字符串 数字 + 布尔值：true转换为1，false转换为0 字符串 + 布尔值：布尔值转换为字符串true或false,JavaScript属于松散类型的程序语言 变量在声明的时候并不需要指定数据类型 变量只有在赋值的时候才会确定数据类型 表达式中包含不同类型数据则在计算过程中会强制进行类别转换,JavaScript数据类型和变量声明,数据类型转换函数 eval(字符串)：将字符串参数转换成相应的数值，例如： y=eval(“15”)+8; 结果：y=23 parseInt(字符串，底数)：将字符串转换成指定底数的数值。 parseFloat(字符串)：将字符串转换成浮点数值。,2. 数据类型转换,24,JavaScript数据类型和变量声明,复合类型 由多个基本数据类型组成的数据体，在JavaScript中的复合类型大致上有如下3种： Object:对象 Array：数组 Function：函数 这些到后期再一一介绍！,JavaScript数据类型和变量声明,3. 变量,变量命名 以字母或下划线开头（不能以数字开头），后面接数字、 字母或下划线。 变量名区分大小写。 不能用系统保留字和特殊符号作为变量 例： var A=“Uppercase A“; var a=“Lowercase a“; document.write(A); document.write(“); document.write(a); ,26,JavaScript数据类型和变量声明,3. 变量,变量的声明 变量声明时，不必定义类型，所有类型均由小写的 var声明。 例如： var name; （JavaScript自动给出一个未定义值） var name, sex; （JavaScript自动给出一个未定义值） var name=”张永”，sex=”女生”； (二变量均为字符串),27,JavaScript数据类型和变量声明,JavaScript中保留的关键字,abstract,boolean,break,byte,case,catch,char,class,continue,default,if,for,float,finally,final,false,extends,else,double,do,implements,import,instance,int,interface,long,native,new,null,backage,this,synchronized,switch,super,static,short,return,public,protected,private,throw,throws,transient,true,try,void,volatile,while,JavaScript数据类型和变量声明,可由函数 1、函数 2 和函数 3 访问,变量 a、b 和 c 只能 在其各自的函数中 被访问,（C)变量的作用域,函数function1 局部变量a,函数function2 局部变量b,脚本,函数function3 局部变量c,全局变量 gg,Script区域,,29,注意：与Java、C语言不同的是，JavaScript的变量没有块范围。只要在函数无论哪个块定义的变量，在此函数中具有效！, var test=“全局变量“ function fun1(o) var test=“局部变量“; var i=0; if(typeof o=“object“) var j=5; for(var k=0;k,见var.html,注意：与Java、C语言不同的是，JavaScript的变量没有块范围。只要在函数中无论哪个块定义的变量，在此函数中具有效！,JavaScript数据类型和变量声明, var scope=“全局变量“; function test() document.write(scope+“); var scope=“局部变量“; document.write(scope+“); test(); ,注：定义变量用var和不用var的区别： 如果使用var定义变量，那么程序会强制定义一个新变量 如果没有使用var定义变量，系统会优先在当前上下文中搜索是否存在该变量。只有在该变量不存在的前提下，系统才会重新定义一个新变量,var1.html,JavaScript数据类型和变量声明, var gv = “JavaScript“; / gv是全局变量 function test() var lv = “VBScript“; / lv是局部变量 document.write(“gv=“ + gv + “); document.write(“lv=“ + lv + “+ “); test(); document.write(“document的输出：“); document.write(“gv=“ + gv + “); document.write(“lv=“ + lv + “); 举例,32,var1.html,JavaScript数据类型和变量声明,4. 常量,字符串常量：（String Literals） 一般字符串常量： ， “ ” 特殊字符的字符串常量 布尔常量：（Boolean Literals）：true或false 1,0 数值型：整数常量（Integers Literals） 浮点常量（Floating-Point Literals）,33,JavaScript数据类型和变量声明,5. 运算符与表达式,JavaScript运算符和表达式,赋值运算符,x+=y 等价于 x=x+y x%=y 等价于 x=x%y,34,5. 运算符与表达式,比较运算符,35,JavaScript运算符和表达式,5. 运算符与表达式,算术运算符,36,JavaScript运算符和表达式,5. 运算符与表达式,逻辑运算符 a&b ：逻辑与 (AND)，若a,b都是ture， 则结果为ture。 a|b ： 逻辑或 (OR) ，若a,b任一是ture， 则结果为ture。 !a ： 逻辑非 (NOT) ，若a是ture，则 结果为false。,37,JavaScript运算符和表达式,5. 运算符与表达式,字符串运算符（String operators） f) 条件运算符（？） 格式：条件表达式? 值1 : 值2 如果条件表达式的结果是ture，返回值1，否则 返回值2。 var a, b; max = ab? a : b,38,JavaScript运算符和表达式,5. 运算符与表达式,g)typeof和instanceof运算符 typeof：用来判断操作数的类型 格式：typeof 操作数 或 typeof(操作数) instanceof:用来判断某个变量是否为指定类的实例，如果是，则返回true，否则返回false。,39,见typeof.html,JavaScript运算符和表达式,6. 程序控制流程,JavaScript控制流程,选择结构,if 语句 else 语句,if 语句组 else 语句组,if 语句组 else if 语句组 else 语句组 ,举例,40,6. 程序控制流程,b) Switch结构,switch ( ) case ：； break; case ：； break; default：； ,41,数据类型可以是数值类型，也可以是字符串类型,JavaScript控制流程,6. 程序控制流程,循环结构,while () 语句组, var i = 5; while ( i 0 ) document.write(“i = “ i“); i-; 例,42,JavaScript控制流程,6. 程序控制流程,循环结构, var i = 5; do document.write(“i = “ ,i ,“); i-; while ( i 0 ) 例,do 语句或语句组 while (),43,JavaScript控制流程,6. 程序控制流程,循环结构,for ( 初始值；条件；增量 ) , for ( var i = 5; i 0; i- ) document.write(“i = “ ,i ,“); ,44,JavaScript控制流程,6. 程序控制流程,循环结构,for ( i in ar ) document.write(“, ari, “); ,for ( 变量 in 对象 ) ,45,作用： 遍历数组里的所有数组元素，此时循环计数器是数组元素的索引值。 遍历JavaScript对象的所有属性，此时循环计数器是该对象的属性名。,JavaScript控制流程,对象专用语句：,.for in 循环 本质上是一种forearch循环，它主要有两个作用： 遍历数组里的所有数组元素 遍历JavaScript对象的所有属性 语法格式： for(index in object) statement , with 语句,with语句：可以避免重复书写对象： with(对象名称) 执行语句块 ,with (document) writeln(“Hello“); writeln(“World“); writeln(“JavaScript“); ,document.writeln(“Hello“); document. writeln(“World“); document.writeln(“JavaScript“);,JavaScript控制流程,8. 程序控制流程,注释语句,/ /* */ ,48,JavaScript控制流程,js中的数组是用于表示一组数据的集合，它由一对方括号 包围，数组的每个元素用逗号分隔，数组元素可以是任意类型的数据。 var a=”shunping”,123,”1.1”,4.5,true 数组可存放任意类型的数据 数组大小不必事先指定,可以动态增长 数组名可以理解为指向数组首地址的引用. 数组元素默认从0开始编号的.,JavaScript数组（array对象）,array提供对创建任何数据类型的数组的支持 arrayObj = new Array() arrayObj = new Array(size) arrayObj = new Array(element0, element1, ., elementN) arrayObj : 必选项。要赋值为 Array 对象的变量名。 Size : 可选项。数组的大小。由于数组的下标是从零开始， 创建的元素的下标将从零到 size -1。 element0,.,elementN : 可选项。要放到数组中的元素。这将创建 具有n + 1 个元素的长度为 n + 1 的数组。使用该语法时 必须有一个以上元素。,50,JavaScript数组（array对象）,声明数组 var 数组名 = new Array(数组大小); 例： var emp = new Array(3) 添加元素 emp0 = “AA“; emp1 = “BB“; emp2 = “CC“;,也可以声明数组并赋初值： 例： var emp = new Array(“AA“，“BB“，“CC“)；,51,JavaScript数组（array对象）, 使用数组 var emp = new Array(3); emp0 = “Ryan Dias“; emp1 = “Graham Browne“; emp2 = “David Greene“; document.write(“数组emp中的数据为:“); document.write(emp0+“); document.write(emp1+“); document.write(emp2+“); ,52,JavaScript数组（array对象）,常用属性 length ：返回数组中元素的个数 常用方法,53,JavaScript数组（array对象）, var emp = new Array(3); emp0 = “Ryan Dias“; emp1 = “Graham Browne“; emp2 = “David Greene“; emp.sort( ); document.write(“排序结果是：“); document.write(emp0+“); document.write(emp1+“); document.write(emp2+“); ,54,JavaScript数组（array对象）,javaScript正则表达式,在JavaScript脚本中，利用正则表达式可以很容易的实现文本字符串的检测、替换等功能。 正则表达式是字符串，它定义了一个用来搜索匹配字符串的模式。定义模式：/表达式/ JavaScript脚本语言中引入正则表达式主要作用： 验证字符串格式 查找字符串 替换文本,正则表达式的应用场合: 表单验证:验证表单中某些域是否符合某种规则 处理DOM模型:正则表达式可以操作DOM对象或者与DOM对象交互。如通过正则表达式定位DOM中的一个对象。 纯编程逻辑 在WEB开发时，常会判断一个字符串有效性，如一个字符串是否是数字、是否为合法的E-MAIL地址等。,javaScript正则表达式,如何使用正则表达式？,从指定字符串中搜索子字符串“abc”, function test1 () var mystr=document.form1.test.value; var myreg=new RegExp(“abc”); if(myreg.test(mystr); alert(“目标字符串中存在子串abc”); else alert(“目标字符串中不存在子串abc”); ,创建正则表达式,调用正则表达式 的test 方法,使用正则表达式的大致步骤： 创建正则表达式 调用相关对象的方法，得到匹配结果,RegExp对 象的创建,在 JavaScript中，正则表达式的构造可以有两种方法： 采用RegExp对象的显式构造函数构造,var reg=new RegExp(“参数”,“flags”),var reg=/参数/flags,采用RegExp对象的隐式构造函数构造,flags标志信息项,示例,显示创建正则表达式： var myregx=new RegExp(“abc”); 可以加标志信息，如忽略大小写： var myregx=new RegExp(“abc”,”i”); 隐式创建正则表达式： var myregx=/abc/; 可以加标志信息，如全文搜索且忽略大小写： var myregx=/abc/ig;,两种构造方式效果是一样的，但仍有小差别，隐式构造在脚本执行时进行编译，一般常用到这个正则表达式式时，用隐式构造法；显式构造法遇到正则表达式时才进行编译，在这个表达式使用较少下使用显式构造法。,正则表达式的操作方法,正则表达式有七种标准的操作方法 test( )方法：对字符串执行一次测试性搜索，匹配成功返回true;否则返 回false。 exec( )方法：对指定的字符串执行正则表达式的搜索，返回一个包含结 果的数组。 compile( )方法：更换RegExp对象实例所使用的表达式模式 search( )方法：用来搜索字符串中与正则表达式匹配的子字符串的位置。 match( )方法：用来执行全局查找，并把查找结果放在一个数组里。 replace( )方法：在一个字符串中通过正则表达式查找并替换相应内容。不改变原来的字符串，只是重新生成了一个新的字符串。 split( )方法：用来返回按某种分割标志符将一个字符串拆分为若干个子字 符串时所产生的子字符串数组。,如何构造正则表达式,要精确构造所需的正则表达式不是容易的事，要运用好正则表达式，则须充分了解正则表达式的构造语法。 正则表达式的语法主要是对正则表达式各个元字符功能的描述。 正则表达式分为简单模式和复杂模式。,简单模式,简单模式包括普通字符、特殊字符、字符类及量词等。 普通字符：字母、数字、汉字、下划线及没有特殊定义的 标点符号。 特殊意义的字符：* + （ ）$ .等 这些特殊意义的字符必须加上转义字符，如表示*必须用* 特殊字符：不便表示的字符，如回车、换行、制表等，表 示时也必须加上转义字符。,简单模式,简单模式包括普通字符、特殊字符、字符类及量词等。 字符类：包括简单类、反向类、范围类、组合类及预定义类 简单类：用方括号“ ”表示单个字符的“或”的关系，匹配方括号内任意一个字符。 如：/abc/可以匹配a、b、c中任意一个字符 反向类：用来匹配不在括号内的任意字符。 如：/abc/可匹配除a、b、c外的其他任意字符 范围类：0-9表示匹配从0-9任意的数字,简单模式,组合类：即简单类、反向类和范围类的组合。 如：/a-z0-9./可以匹配a-z、0-9和.中任意一个字符 预定义类：用某些特别的表示来表示某些组合类。,用户名合法性检测,如何用户名的检测,用户名以字母或数字开头, 加单词字符,并以数字结尾的子字符串？,1、RegExp对象 2、正则表达式表示为/a-z0-9wd$/,输入用户名单击 按钮检测,function test_zifulei(obj) var username=obj.username.value; var regx=/a-z0-9wd$/g /不包含规定字符，用户名无效 if(!regx.test(username) aler