20Javascript基础

信息管理学院刘政敏[e-mail]2本章主要内容4.1、Javascript概述4.2、Javascript基础4.3、Javascript对象4.4、DOM基础4.5、事件4.6、表单和数据完整性4.7、Javascript面向对象编程4.8、应用示例4.1、Javascript概述1、javascript产生的历史背景？在javascript出现以前，在Web页中需要进行的所有处理都必须传回服务器，由服务器进行集中处理。服务器处理完毕以后，再将处理结果通过网络传回客户端。即使只是简单的验证邮箱地址，都必需由服务器进行处理。当用户量大时，网络和服务器的负担都增加。因此，我们需要一种技术实现在客户端就可以进行处理这种需求，以减轻服务器的负担，加快网络速度，提升用户体验！-javascript应运而生！Page3学习资料Javascript概述-续2、javascript发展历史(1)由Netscape公司开发的一种脚本语言,早期叫Livescript,语法以java为基础,但更简单；(2)Netscape和Sun进行合作,改名javascript；(3)Microsoft开发自己的脚本语言Jscript,在IE3中予以支持,但只是粗糙兼容javascript1.1;(4)随着javascript版本增多和浏览器平台的不同,增加开发者工作量和困惑。Microsoft、Netscape等厂商成立国际组织ECMA,制定脚本语言标准称ECMAScript。Jscript和Javascript都基于ECMAScript进行了扩展。Page6Javascript概述-续3、Javascript特点(1)被嵌入到HTML中的；(2)解释执行的；(3)弱类型语言:使用变量前，不需先声明；(4)以对象为基础；(5)通过事件驱动执行；Page7Javascript概述-续4、使用方式(1)javascript代码直接放在文档head中的script/块内Page8htmlheadtitle/titlescript…/scriptbody/body/html可放在Html文档的任意位置但一般放在head内。使用方式-续(2)将javascript代码存为一个.js文件，再引入使用。scripttype=text/javascriptsrc=“**.js/script(3)在Html标签中直接写javascipt代码。例如：ponmouseover=“alert(‘欢迎学习’)”鼠标移上来/pPage9Javascript概述-续5、开发与调试工具开发工具:文本编辑器(editplus等);集成开发环境；调试工具:IE8开发人员工具；Firebug；Page10Javascript概述-续6、注意事项（1）Javascript不是Java简化版,和Java没有太多联系；（2）不同浏览器对javascript的支持情况不完全；（3）学会使用调试工具；（4）Javascript其实比大多数人想得要复杂,要系统学习；（5）不要乱用，尽量用在必须要用的地方，很多时候难以驾驭，容易使用不当造成问题；Page12本章主要内容4.1、Javascript概述4.2、Javascript基础4.3、Javascript对象4.4、DOM基础4.5、事件4.6、表单和数据完整性4.7、Javascript面向对象编程4.8、应用示例4.2、Javascript基础1、语法2、变量3、数据类型4、运算符与表达式5、控制语句6、函数Page134.2.1语法1、注意：区分大小写；2、变量是弱类型的-定义时只用var运算符；3、每行结尾的分号可有可无；4、注释：/*注释内容*/多行注释//单行注释5、括号表明代码块if(test1==red){test1=blue;alert(test1);}Page144.2.2变量使用var来声明所有类型的变量,而不必指定具体类型Page15vari；vari=10,name=“jim”;变量的命名注意：第一个字符必须是字母、下划线（_)、$其他字符可以包括字母、数字、下划线、$不能使用javascript的保留关键字；区分大小写；（注意和Html区别！）变量作用域变量的作用域（Scope）：作用域是指有效范围，javascript变量的作用域有全局和局部之分。全局作用域(gloal)的变量在整个程序范围都有效；局部作用域(local)作用范围仅限于变量所在函数体变量同名时，局部作用域优先于全局作用域；Page161变量范围示例与其他语言不同,javascript没有块级作用域限制:函数中声明的所有变量,无论在哪里声明,整个函数中都有定义！2没有块级作用域数组变量Page18数组的创建：1、创建一个空数组：创建时不指定数组大小varobj=newArray();varobj=[];2、创建时直接指定数组大小varobj=newArray(size);3、通过指定数组元素创建数组；varobj=newArray(元素1,元素2,元素3..);与其他程序语言不同的是，Javascript数组中各元素的数据类型可以不同！Page19vararr1=newArray(2)；arr1[0]=“10”;arr1[1]=“20”;document.write(arr1[0]);document.write(arr1[1]);1、下标从0开始2、由于区分大小写,所以Array首字母必须大写；数组的主要属性和操作主要的属性：length主要的操作：Page20操作名作用格式toString数组转换为字符串,各个数组元素用逗号连接数组.toString()join将数组组合为字符串,由分隔符隔开数组.join(分隔符)push添加若干个元素到数组末端数组.push(元素1,元素2)pop删除最后一个元素数组.pop()reverse将数组内元素的索引次序翻转数组.reverse()4.2.3数据类型Page21Javascript中的数据类型包括2种：原始类型（简单类型）：是存储在栈(stack)中的简单数据段，其值直接存储在变量访问的位置；包括：Number、String、Boolean、Null、Undefined引用类型（复杂类型）：是存储在堆（heap）中的对象，存储在变量处的值是一个指针，指向存储对象的内存处。包括：Object、Function、Array等；栈与堆Page22Javascript和C(C++)对比数字（11）布尔值true)null地址（O)字符串“test”)(对象）(对象）(对象）(对象）(对象）堆栈vari=11;inti=11;varf=true;boolf=true;varn=null;intn=NULL;varo=newObject;Objecto=newObject();vars=“test”这里和C++不同，是分配到栈上的strings=“test”;分配到堆上，这点和javascript不同栈和堆区别Page23栈（stack）—由编译器自动分配释放，存放函数的参数值，局部变量的值等。其操作方式类似于数据结构中的栈。栈空间较小，但存储速度快堆（heap）—一般由程序员分配释放，若程序员不释放，程序结束时可能由OS回收。堆空间可达4G，适用于大内存分配，存储速度慢。1、原始数据类型Page24Javascript提供5种数据类型：字符串(String)：用单引号或双引号括起来的单个或多个字符,不区分字符和字符串；数值(Number)：包含整数和浮点数；布尔值(Boolean)：true/false;空值类型(Null)：只有null一个值，表示尚未存在的对象；未定义值类型(Undefined):表示尚未定义值。当声明的变量未初始化时,默认值为undefined;注意:null不能写成NULL，Null，既不等于0,也不等于空字符串；原始数据类型Page25为变量赋值时，ECMAScript的解释程序必须判断该值是原始类型的，还是引用类型的。要实现这一点，解释程序则需尝试判断该值是否为ECMAScript的原始类型之一，即Undefined,Null,Boolean和String等。在许多语言中，字符串String都被看做引用类型,而非原始类型，ECMAScript打破了这一传统。ECMAScript提供了typeof运算符来判断一个值是否在某种类型的范围内。typeof运算符Page26typeof运算符，对变量或值调用typeof运算符，将返回下列值之一：数据类型返回值Undefined:“undefined”Boolean:“boolean”Number:“number”String:“string”引用类型：“object”DemoPage27typeof示例(1)原始类型-UndefinedPage28Undefined类型：Undefined类型只有一个值,即undefined.当用var声明的变量未赋值时,变量的默认值是undefined.注意,未定义的变量使用除typeof之外的其他运算符的话，会引起错误，因为其他运算符只能用于已声明的变量上。(2)原始类型-NullPage29Null类型:另一种只有一个值的类型是Null,它只有一个专用值null,即它的字面量。Undefined和Null区别：undefined是声明了变量但未对其初始化时赋予该变量的值,null则用于表示尚未存在的对象。(3)原始类型-Number、String、BooleanPage30Boolean类型:只有2个取值,true/false;varbflag=true;Number类型:即可表示整数,也可表示浮点数;variNum=3；varfNum=3.0;//浮点数带上小数点即可;String类型:唯一没有固定大小的原始类型;不同于其他类型语言,用双引号或单引号都可以声明。（在Java/C#中，双引号声明字符串,单引号声明单个字符）(4)关于类型转换(1)转换成字符串；所有对象都具有.toString()方法;(2)转换成数字；parseInt(“..”):逐一转换每个字符成整形;parseFloat(“..”):逐一转换每个字符成浮点数;转换失败将得到一个特殊值:NaN(notanumber)parseInt(“1234.abc”)得到?parseInt(“abc1234”）得到？(3)强制类型转换Boolean(value);Number(value);String(value);隐式数据转换：系统根据上下文自动将数据从一种类型转换成另一种类型；当字符串与数值混合运算时，会试着将数值转换为字符串。2、引用数据类型引用类型通常叫做类(class)。Page32从传统意义上讲，javascript并不真正具备类，因为大多数开发者熟悉术语“类”，因此，选择使用该名称。对象的创建由new运算符创建varo1=newObject();//创建Object类的实例自定义对象的创建与使用是重点，后续单独探讨！引用数据类型-续1、Object类2、Boolean类3、Number类4、String类String类的主要方法方法作用charAt(index)返回指定位置处的字符str1.concat(str2)将str2连接到str1上str1.indexOf(s)从头开始,确定某个字符串中是否存在某个字符;str1.lastIndexOf(s)返回String对象中子字符串最后出现的位置;str.substring(start,end)从str中获取指定位置的字符;toLowerCase()toUpperCase大小写转换4.2.4运算符与表达式1、算术运算符：+、-、*、/、%2、比较运算符：==、、=、、=、!=3、逻辑运算符：&&、||、！4、赋值运算符：=、+=、-=、*=、/=、%=x+=y等价于