Web技术基础第1章.ppt

第1章 JavaScript基础,JavaScript是一种小型的，轻量级的，面向对象的，跨平台的脚本语言，是目前最流行的客户端编程语言 JavaScript的作用是表单有效性的验证、动态显示内容、动态改变文本格式、动态改变元素位置等 JavaScript是一种解释性的语言，是HTML网页的一部分存在，随着网页内容的丰富，功能强大，基于浏览器的应用已经成为趋势。,JavaScript能做什么,表单数据验证 动态HTML 用户交互 数据绑定 少量数据查找 Ajax核心技术（Asynchronous JavaScript +XML),JavaScript如何实现动态效果,要实现动态效果，需要访问和控制浏览器部件和页面文档中元素的途径，使JavaScript能够访问和控制它们，需要使用BOM(Browser Object Model)和DOM(Document Object Model)和浏览器事件模型 BOM由一组对象组成，它们提供了访问浏览器各种功能部件的途径，例如浏览器窗口本身，浏览器历史等 DOM创建了一组按顺序、层次访问文档中各种元素的结构化方法。在DOM中，每个元素都成为JavaScript可以访问的对象，既可以读，也可以改变属性值,JavaScript的历史和发展,JavaScript最初称为LiveScript语言，是由NetScape公司的Brendan Erich开发的，是NetScape Navigator 2.0脚本语言，为了推广它，用了流行语言Java. Microsoft推出IE,由于没有授权，微软公司的支持的脚本是Jscript,实际是JavaScript 的克隆 1997年，JavaScript 1.1提交给ECMA(European Computer Manufacturers Association),ECMA专门成立第39技术委员会来制定JavaScript标准，并于1997年6月发表了第一个正式规范ECMA-262，由于授权问题，将其命名为ECMAScript. ECMA网站：/publications/standards/Standard.html,JavaScript与ECMAScript,ECMAScript只是一种语言规范，描述了脚本语言的语法、类型、属性、方法和对象等内容，而JavaScript则是实现 JavaScript不是唯一实现ECMAScript规范的语言，Flash中使用的ActionScript也是ECMAScript的一种实现 ECMAScript与浏览器无关,JavaScript语言的特点,1安全性：,JavaScript是一种安全性高的语言，它只能通过浏览器实现网络的访问和动态交互，可以有效地防止通过访问本地硬盘或者将数据存入到服务器，而对网络文档或者重要数据进行不正当的操作。,JavaScript语言的特点,2易用性：,JavaScript是一种脚本的编程语言，没有严格的数据类型，同时是采用小段程序的编写方式来实现编程的。,JavaScript语言的特点,3动态交互性：,在HTML中嵌入JavaScript小程序后，提高了网页的动态性。JavaScript可以直接对用户提交的信息在客户端做出回应。JavaScript的出现使用户与信息之间不再是一种浏览与显示的关系，而是一种实时、动态、可交互式的关系。,JavaScript语言的特点,4跨平台性：,它的运行环境与操作系统没有关系，它是一种依赖浏览器本身运行的编程语言，只要安装了支持JavaScript浏览器，并且能正常运行浏览器的电脑，就可以正确地执行JavaScript程序。,JavaScript常用元素,JavaScript程序,JavaScript程序,网页效果,数据类型,基本类型：数值、字符串、布尔、未定义和空 复合型：数组、对象和函数,数值型,数值型包括整数和浮点数，所有的数均被作为64位的浮点数处理。 数值可以用十进制或十六进制表示（0x) 特殊数据NaN,表示不是数字,字符串型,由单引号或双引号括起来的字符串 在双引号中使用单引号或在单引号中使用双引号时不需用转义 在双引号中使用双引号或单引号中使用单引号时需用转义 例如：”The boy is name John.” “The boy is name”John”. ” b /退格 f /换页 n /换行 r /回车 /单引号 /” /双引号 / x XX /十六进制数表示的符号 uXXXX /四位十六进制表示的二进制字符,布尔型、undefineed和null,两个可取值：true 和 false，不区分大小写 当一个对象的属性不存在或变量定义后从未赋值，则返回undefined 不能通过比较来判断是否变量是undefined,只能通过字符串来比较 例如：if(a=undefined) /error if(typeof(a)=undefined) /error if(typeof(a)=“undefined”) /right null是一个值,表示该变量没有保存有效的数值、字符串、布尔值、数组或对象，可以用其清除变量的内容,数 组,不要求数组类型相同 数组长度可以动态变化 不支持多维数组，但支持数组嵌套，即数组中的元素可以是数组,数组定义,一、通过Array构造函数定义 （1）var name=new Array(num); name0=元素1； name1=元素2； （2）var name=new Array( );/个数由赋值个数决定 (3) var name=new Array(元素1，元素2，) 二、直接赋值 var name=元素1，元素2，.;,数组元素与长度,数组中元素类型可以不同 长度可以动态变化 var arr=new Array(3); 可以赋值的个数超过3个 可以用delete删除数组中的元素，如果输出被删除的元素，则显示undefined,数组嵌套,不支持多维数组，但支持嵌套 var arr=new Array(3); arr0=xiao,3,45; arr1=4; arr2=“hi”; document.writer(arr00); var arr= xiao,3,45,4,5,6,“hi”; 嵌套可以是多层的 不支持类似于c的定义与赋值,变 量,使用var定义 一次可以定义一个或几个变量 变量名必须以字母或下划线开始 区分大小写 重复定义变量时，后面的覆盖前面的 在函数之外定义的变量为全局变量，在函数内省略var定义的变量也是全局变量 当函数中定义的局部变量与全局变量重名时，局部变量覆盖全局变量,数据类型转换,JavaScript是弱数据类型语言，可以根据赋值的类型确定数据类型 表达式中自动实现数据类型转换 布尔型转换：数值0或NaN为false,字符串空串为false,undefined,null为false,布尔值true转换为数值时为1，false 为0，转换为字符串是为”true”和”false” ParseInt()和ParseFloat()强制将字符串转换成数值，从左至右提取数值，遇到非数值为止。如果全部是非数值，则返回NaN.,函 数,定义： function function_name(参数列表） codes return; 调用函数时，如果实参数的个数少于形参数个数时，缺少的用undefined代替，如果多于形参数的个数，则忽略 参数可以通过arguments属性访问。函数定义中，关键字 arguments代表一个与当前函数对象对应的数组对象型属性，实参列表中每个参数是arguments的一个元素，定义函数时可以不制定参数名称，而在调用时用arguments访问调用时指定的各个参数,函 数,function showInfo() if(arguments.length=1) documesnt.write(“您好！”+arguments0); if(arguments.length=2) document.write(showInfo.arguemts0+”今年” +showInfo.arguments1+”岁”); showInfo(“小黑“); showInfo(“小黑“,23);,函 数,在调用函数时，如果将基本数据类型变量作为函数参数，直接将值传递给函数，函数内的操作对原变量没有影响。如果将复合类型变量作为函数参数时，传递给函数的是存储地址，将改变函数外的原变量值 例：var arrName=“Li”,”Zhang”,”Wang”; newName=“He”; function changeName(arrA,name) code; changeName(arrName,newName);,函 数,不支持函数重载，即如果定义了两个名字相同的函数，则后面的覆盖前面的。 函数作为数据使用： function getCube(num1) return num1*num1*num1； var a=getCube; var b=a(20); var arr=Array(); arr0=getCube; var c=arr0(30);,匿 名 函 数,当函数被作为数据使用时，函数定义可以直接被指定给变量，数组元素，对象属性等，而不需要指定名称 var obj=new object; obj.func=function(num) return num*num*num; var n=obj.func(20); 函数作为函数的参数,函数作为函数的参数, function getCube(num1) return num1*num1*num1; var a = getCube; var b = a(20); var arr = Array(); arr0 = getCube; var c = arr0(30); document.write(b+“,“+c); var obj = new Object; /定义一个对象 obj.func = function(num) return num*num*num;var n = obj.func(20); document.write(“+n);,函数作为函数的参数,function getMax(number_arr) var max = number_arr0; for(var i=0;i number_arri) min = number_arri; return min; ,函数作为函数的参数,function getSum(number_arr) var sum = 0; for(var i=0;inumber_arr.length;i+) sum += number_arri; return sum; function getAvg(number_arr) var sum = 0; for(var i=0;inumber_arr.length;i+) sum += number_arri; return sum/number_arr.length; ,函数作为函数的参数,function getResult(func) var number_arr = new Array(); for(var i=1;i,函数对象的属性与方法,函数对象的属性有argument,它表示函数所接受的参数，argument.length表示函数实际接受的参数个数，length表示函数定义时参数的个数 JavaScript函数对象拥有一些通用的内建方法，如value()和toString(),它们功能相同，返回函数定义代码 function showInfo(name,age) document.write(name+”今年”+age+”岁“）； alert(showInfo.toString)();,函数对象的属性与方法,call( ) 与apply( )使函数象调用其他对象的方法一样 var obj=new object(); showInfo.call(obj,”xiao”,24); 上述代码等同于： var obj=new Object(); obj.func=showInfo; obj.func(“xiao”,24); showInfo.apply(obj,“xiao”,24 );,函数对象的属性与方法,自定义属性和方法 function getsum() /定义一个函数对象 getsum.sum=0; for(var i=0;iarguments.length;i+) getsum.sum+=argumentsi; return getsum.sum; getsum(4,5,6); /函数必须先被调用，产生实体 alter(“sum”+getsum.sum);/才能对函数属性调用,函数对象的属性与方法,当将函数定义赋予函数对象的属性后，便为函数定义了方法 function hello(theName) =theName; hello.welcome=function() alert(“welcome:”+); ; hello.bye=function() alert(“Bye!”); ; hello(“xiao”); hello.welcome();,函数对象的属性与方法, function showInfo(name,age) document.write(name+“今年“+age+“岁“); alert(showInfo.toString(); var obj = new Object; showInfo.call(obj,小轩,24); function getSum() getSum.sum = 0; for(var i=0;iarguments.length;i+) getSum.sum += argumentsi; return getSum.sum; getSum(4,5,6); alert(“sum:“+getSum.sum);,函数对象的属性与方法,funct