第04章 JavaScript基础知识

YTUWeb技术原理及应用Web系统与技术烟台大学计算机学院陈智育第4讲JavaScript基础知识烟台大学计算机学院Web原理及应用内容4.1JavaScript概述4.2面向对象和JavaScript4.3一般语法特征4.4原始数据,操作和表达式4.5屏幕输出和键盘输入4.6控制语句4.7创建和修改对象4.8数组4.9函数4.11构造函数4.14脚本中的错误烟台大学计算机学院Web原理及应用4.1JavaScript概述起源最早由Netscape开发,名为LiveScript1995,Netscape和sun联合推出JavaScipt标准ECMA-262,ISO-16262官方名称ECMAScript,微软JSciptJavaScript代码的集合称为脚本JavaScript和Java完全无关,仅语法相似JavaScript类型是动态的,为弱类型语言JavaScript对象是动态的烟台大学计算机学院Web原理及应用4.1JavaScript概述JavaScript的用途可作为Javaapplet(附录C)的替代JavaScript是Ajax的基础通过表单元素可方便与用户交互通过DOM可支持动态XHTML文档(第5,6章)大部分JavaScript脚本是事件驱动的(第5章)浏览器和XHTML/JavaScipt文档显示嵌入和隐式嵌入在头部还是主体中烟台大学计算机学院Web原理及应用4.2面向对象和JavaScriptJavaScript不是面向对象语言不支持类和继承,不支持多态性JavaScript是基于对象的语言对象是属性的集合,属性相当于Java的类成员数据属性或方法属性某些简单数据类型使用非对象类型,称为原始数据类型(Primitives)所有对象都通过引用间接访问根对象为Object,是所有对象的祖先烟台大学计算机学院Web原理及应用4.3一般语法特征显示嵌入隐式嵌入语言基础标识符规则,区分大小写25个关键字(P116表4-1)注释(与C语言近似):/**/,//scripttype=text/javaScript--JavaScriptscript–/scriptscripttype=text/javaScriptsrc=myScript.js/script烟台大学计算机学院Web原理及应用4.3一般语法特征显示嵌入时,注释JavaScript代码分号的问题行结束可能自动添加分号语句尽量完整写在一行中,并以分号结束!----JavaScriptscript–//--烟台大学计算机学院Web原理及应用4.4原始数据,操作和表达式原始数据类型5种:数值,字符串,布尔型,未定义值和空值包装[wrapper]对象:Number,String,Boolean数值和字符串表示和C类似字符串可用单引号布尔型值:true或false空类型值:null,变量未声明未定义值:undefined,变量已声明但未赋值烟台大学计算机学院Web原理及应用4.4原始数据,操作和表达式声明变量JavaScript变量类型是动态的,可存储任何值(原始值或对象引用)程序中变量的值的类型由解释器确定变量可以显式声明(推荐)或隐式声明•varindex;•index=0;烟台大学计算机学院Web原理及应用4.4原始数据,操作和表达式数值运算符++,--,+,-,*,/,%所有运算都按双精度进行优先级和结合规则与C/C++,Java近似Math对象提供floor,round,max,min和三角函数…例:Math.sin(x)烟台大学计算机学院Web原理及应用4.4原始数据,操作和表达式Number对象包含一组非常有用的常量属性(P121表4-3)例:Number.PINaN表数值运算溢出结果,可用isNaN()判断方法toString•可将数值转为串表示•原始数值类型也可调用该方法•varprice=427,str_price;•str_price=price.toString();字符串连接操作符:+烟台大学计算机学院Web原理及应用4.4原始数据,操作和表达式隐式类型转换串+数值,数值转换为串例:“August”+1997=“August1997”串“非加运算”数值,串转为数值(或NaN)例:7*”3”=21烟台大学计算机学院Web原理及应用4.4原始数据,操作和表达式显式类型转换数-串•使用String构造函数:String(value)•使用toString方法串-数•使用Number的构造函数:Number(astring)•使用运算符:astring–0•使用函数parseInt或parseFloat解析串烟台大学计算机学院Web原理及应用4.4原始数据,操作和表达式String属性和方法属性length表示串长度,str.length方法(P124表4-4)•charAt(position):返回指定位置的字符•indexOf(string):返回指定字符在串中的位置•substring(from,to):返回子串•toLowerCase():转为小写,toUpperCase:转为大写typeof操作符返回操作数类型(字符串)number,string,boolean,object,undefined例:typeof(x)烟台大学计算机学院Web原理及应用4.4原始数据,操作和表达式赋值语句(近似C):=,+=Date对象用操作符new和构造函数创建对象•创建当前时间的对象:vartoday=newDate()两种形式:本地时间和协同通用时间(UTC)方法(P125表4-5)•toLocalString:转为串•getXxx:getMonth…烟台大学计算机学院Web原理及应用4.5屏幕输出和键盘输入window对象:表示浏览器窗口document对象:表示显示的网页文档document.write向网页文档写入内容document.write(Answer:+result+br/);window对象的方法(不需包含对象引用)alert(“Hello!\n”);图4-3ret=confirm(“Doyouwanttocontinue?”);图4-4name=prompt(Whatisyourname?,);图4-5烟台大学计算机学院Web原理及应用4.5屏幕输出和键盘输入roots.htmlroots.js烟台大学计算机学院Web原理及应用4.6控制语句与C/C++/Java类似控制表达式结果是布尔类型的值(true或false)关系运算符•==,!=,,,=,=•严格等于(===)和严格不等(!==),不进行类型转换•例:“3”==3为true,“3”===3为false逻辑运算符:&&,||,!运算符的优先级和结合性烟台大学计算机学院Web原理及应用4.6控制语句if-else语句switch语句borders2.js烟台大学计算机学院Web原理及应用4.6控制语句循环语句while(表达式){}for(表达式1;表达式2;表达式3){}do{}while(表达式)for-in语句,和对象一起使用烟台大学计算机学院Web原理及应用4.7创建和修改对象使用new操作符和构造函数创建对象(另一方法)例:varmy_car=newObject();最基本的对象,空白对象无属性属性可随时添加:my_car.make=“Ford”;对象可嵌套:my_car.engine=newObject();属性可删除:deletemy_car.makefor-in循环用于列出某个对象的所有属性for(varpropinmy_car)document.wrire(prop,my_car[prop]);烟台大学计算机学院Web原理及应用4.8数组数组是一个带有很多特殊功能的对象;数组元素可是原始类型值,对象引用或其他数组;长度动态创建Array对象(另一方法)varlist1=newArray(1,2,“three”,“four”);varlist2=newArray(100);Array对象特征索引从0开始长度动态:list1[47]=2222;list1.length=48;烟台大学计算机学院Web原理及应用4.8数组例:insert_name.js烟台大学计算机学院Web原理及应用4.8数组Array方法join:将元素转为字符串并连一起reverse:将元素顺序颠倒sort:将元素转为字符串再排序concat:在数组末添加元素slice:取数组的一部分toString:类似join,逗号分隔push/pop:用数组做栈(末尾加入/删除)shift/unshift:用数组做队列(首删除/末加入)二维数组烟台大学计算机学院Web原理及应用4.9函数格式:返回值没有类型return值;其他情况返回undefined函数为对象,名称为引用,可赋值给其他变量(似函数指针)函数引用可赋值给其他对象的属性,作为其方法调用为保证调用前定义,函数定义多放在XHTML文档的头部烟台大学计算机学院Web原理及应用4.9函数局部变量函数内用var语句显示声明的变量隐式声明或函数外声明的变量为全局变量参数既可传值,也可传引用参数无类型实参和形参数目可不相等(实参多则忽略,形参多为undefinded)参数通过数组arguments传送,arguments[i]代表各参数,属性length表个数烟台大学计算机学院Web原理及应用4.9函数例params.js烟台大学计算机学院Web原理及应用4.11构造函数构造函数为特殊函数,用于对象创建和属性初始化引用变量this,表新创建的对象functionplane(newMake,newModel,newYear){this.make=newMake;this.model=newModel;this.year=newYear;}myPlane=newplane(Cessna,Centurnian,1970);烟台大学计算机学院Web原理及应用4.11构造函数定义对象方法定义方法函数构造函数添加方法调用方法:functiondisplayPlane(){document.write(Make:,this.make,br/);document.write(Model:,this.model,br/);document.write(Year:,this.year,br/);}this.display=displayPlane;myPlane.display()烟台大学计算机学院Web原理及应用4.14脚本中的错误JavaScript解释器可检测运行脚本中的错误脚本错误将导致文档无法显示,无明确错误信息在IE中打开脚本调试菜单:“工具”-”Internet选项”烟台大学计算机学院Web原理及应用4.14脚本中的错误例:insert_names.js正确:错误:烟台大学计算机学院Web原理及应用4.14脚本中的错误Firefox使用专门的控制台窗口显示脚本错误菜单:“工具”-”错误控制台”错误信息比IE更准确;错误连续记录直到清除烟台大学计算机学院Web原理及应用小结JavaScript概述:ECMAScript,Jscipt,区别Java面向对象和JavaScript:基于对象的语言一般语法特征:script,text/javascript,src属性原始数据,操作和表达式:变量定义,Math,Number…屏幕输出和键盘输入:window,document.write…控制语句:控制表达式,if-else,swi