JavaScript基础教程PPT课件

2020/5/17,1,Web基础之一JavaScript基础,2020/5/17,2,目标,理解什么是JavaScript如何将JavaScript嵌入到HTML中理解变量、数据类型和运算符掌握if-else和switch语句掌握函数掌握内置对象,2020/5/17,3,什么是JavaScript,脚本程序：嵌入在HTML文件中，提供了和用户进行交互的能力；常见的脚本语言：VBScript，javascriptJavaScript是NetScape公司的产品提供用户交互动态更改内容数据验证,2020/5/17,4,将JavaScript嵌入网页,可以将JavaScript语句插入HTML文档，方式如下：使用标签将语句嵌入文档将JavaScript源文件链接到HTML文档中将脚本代码作为HTML标签的属性值,2020/5/17,5,使用Script标签,JavaScript代码,document.write(欢迎来到JavaScript世界);尽情享受学习的快乐!,脚本代码,设置语言,2020/5/17,6,使用外部JS文件,外部JavaScript文件可以链接到HTML文档中SCRIPT标签的SRC（源文件）属性可用于包括此外部文件,2020/5/17,7,使用外部JS文件,JavaScript代码(test.htm),使用外部文件以上文本是通过访问外部JavaScript文件显示的,2020/5/17,8,将脚本代码作为HTML标签的属性值,在href属性中必须指明是javascript当前时间在onclick事件属性中可以不用指明是javascript,把script脚本作为属性值.html,2020/5/17,9,Javascript的基本格式,区分大小写以；作为语句结束符号(;可加可不加)以/或/*/组为注释Javascript的数据类型：基本类型：存储在栈引用类型：是存储在堆中的对象。,2020/5/17,10,Javascript是弱类型的语言,字符串,地址,null,布尔值,数字,undefined,对象,对象,对象,对象,对象,栈,堆,2020/5/17,11,Javascript的数据类型,2020/5/17,12,变量,Javascript采用弱类型的变量形式，即在声明时无需指定变量类型，在赋值的时候自动指定；变量名必须以字母或下划线（_）开头变量可以包含数字、从A至Z的大小写字母JavaScript区分大小写，即变量myVar、myVAR和myvar是不同的变量,2020/5/17,13,声明变量,vara;“var”用于声明变量的关键字“a”变量名,同时声明和初始化变量vara=10;,a=10;,声明变量,声明多个变量varx,y,z=10;,赋值,不声明变量，直接使用x=10;,2020/5/17,14,typeof运算符号,Typeof对变量的运算结果为以下之一：UndefinedBooleanNumberStringObject,typeof(null)结果为object，此为历史遗留的错误。,观察以下alert的结果variNum;alert(typeof(null);alert(typeof(iNum);iNum=10;alert(typeof(iNum);varbFlag=true;alert(typeof(bFlag);varaStu=newArray();alert(typeof(aStu);alert(typeof(hello);,2020/5/17,15,观察以下运行结果,varotemp;/varotemp2;alert(typeof(otemp);alert(typeof(otemp2);alert(otemp=undefined);alert(otemp2=undefined);/会导致错误，因为没有定义过的变量只有typeof运算符可以使用，其他运算符都会导致错误。,2020/5/17,16,声明变量,使用变量varx;x=prompt(淘宝网竟拍，请出一口价,1);document.write(拍卖价格+x+)/+用来连接多个字符串document.write(恭喜您，您以最高价拍卖成功！);alert(欢迎下次光临！);,定义变量,赋值,输出,prompt(“提示信息”,”默认值”)将弹出提示对话框，接受用户的输入。点击确定返回输入的字符串，点击取消反馈空字符串。,2020/5/17,17,变量a、b和c只能在其各自的函数中被访问,变量的作用域,脚本,函数function1局部变量a,函数function2局部变量b,函数function3局部变量c,可由函数1、函数2和函数3访问,全局变量gg,2020/5/17,18,转义字符,2020/5/17,19,varx=100;vary;varz;document.write(竞拍SONY数码相机600万像素+x+$起价);y=prompt(加多少银子？,1);z=x+y;alert(您最终的出价n+z+$);/”n”用于换行显示,Prompt函数返回输入的字符串,“+”号的用法-1,10020?bug,200,2020/5/17,20,varx=100;vary;varz;document.write(竞拍SONY数码相机600万像素+x+$起价);y=prompt(加多少银子？,1);z=x+parseFloat(y);alert(您最终的出价n+z+$);/”n”用于换行显示,parseFloat()函数将字符串转换为float数据parseInt()函数将字符串转换为int数据如果转换失败，返回NaN值(notanumber)使用isNaN(z)判断是否为NULL,“+”号的用法-2,2020/5/17,21,类型转换转换为字符串,在javascript中数字、字符串和boolean都是伪对象，因此他们都有toString方法。varsColor=red;alert(sColor.toString();varbFound=true;alert(bFound.toString();variNum1=10;variNum2=10.6;alert(iNum1);alert(iNum2);alert(iNum1.toString(2);alert(iNum1.toString(8);alert(iNum1.toString(16);alert(iNum2.toString(8);alert(iNum2.toString(16);,2020/5/17,22,类型转换转换为数字,parseInt和parseFloat：其解析方式为从位置0开始查看直到找到无法解析的字符。,variNum1=parseInt(123abc);variNum2=parseInt(0 xa);variNum3=parseInt(013);variNum4=parseInt(blue);alert(iNum1);alert(iNum2);alert(iNum3);alert(iNum4);,variNum1=parseInt(10,2);variNum2=parseInt(10,8);variNum3=parseInt(10,16);alert(iNum1);alert(iNum2);alert(iNum3);,2020/5/17,23,强制类型转换,Boolean(value)Number(value)String(value),varb1=Boolean();varb2=Boolean(hello);varb3=Boolean(100);varb4=Boolean(null);varb5=Boolean(0);varb6=Boolean(newObject();alert(b1=+b1);alert(b2=+b2);alert(b3=+b3);alert(b4=+b4);alert(b5=+b5);alert(b6=+b6);,非0、非空串、非空对象为true，其他false,2020/5/17,24,强制类型转换,Boolean(value)Number(value)String(value),alert(Number(false)=+Number(false);alert(Number(true)=+Number(true);alert(Number(undefined)=+Number(undefined);alert(Number(null)=+Number(null);alert(Number(3.6)=+Number(3.6);alert(Number(3.3.3)=+Number(3.3.3);alert(Number(newObject()=+Number(newObject();,Number转换和parseInt，parseFloat转换的不同之处在于Number要求整个值都要有效,2020/5/17,25,引用类型,Object类与java中的Object类相似具体有：constructor，prototype，tostring，valueof等方法NewObject()等价于;,2020/5/17,26,属性名,属性值,name,“zhangsan”,age,123,getName,function()alert();,从JavaScript的内部实现的角度来看问题，一个JavaScript对象就是属性集的组合。内部如何组织这些属性集的呢？使用类似于java中的Map,?为什么使用for循环遍历属性的时候，没有找到constructor属性,2020/5/17,27,引用类型,Boolean：一般不用Number为基本数字类型的包装类有用的方法,varoNum=newNumber(99);alert(oNum.toFixed(2);oNum=newNumber(999);alert(oNum.toExponential(2);oNum=newNumber(9999);alert(oNum.toPrecision(6);,2020/5/17,28,运算符,2020/5/17,29,算术运算符,运算符示例.html,2020/5/17,30,比较运算符,比较运算符2-1,2020/5/17,31,运算符,逻辑运算符,2020/5/17,32,等号运算符规则,和！在进行运算之前都会进行类型转换，规则如下：如果一个运算数是Boolean则在检查相等之前先把他转换为数字值。False转换为0，true转换为1如果一个运算数是字符串，另一个是数字，则在检查相等之前先把字符串转换为数字值。如果一个运算数是字符串，另一个是对象，则在检查相等之前先把对象调用toString方法转换为字符串。如果一个运算数是对象，另一个是数字，则在检查相等之前先把对象转换为数字值。值null和undefined相等如果两个都是对象，则比较引用值,alert(null=undefined);alert(5=5);alert(false=0);,2020/5/17,33,全等号,在作比较之前，不作类型转换,alert(null=undefined);alert(5=5);alert(false=0);,2020/5/17,34,条件语句用于测试条件。,if(条件)JavaScript代码;,语法：,if语句,如果要执行多个语句，必须将这些语句放在一对大括号()内。但如果只要执行一个语句，则可以省略大括号,2020/5/17,35,functioncalcu()varnumb1=document.calc.num1.value;varnumb2=document.calc.num2.value;if(numb1!=).其他代码略，同上例,2020/5/17,36,ifelse语句2-1,if(条件)/JavaScript代码;else/JavaScript代码;,语法：,2020/5/17,37,switch语句,switch(表达式)case常量1:JavaScript语句;break;case常量2:JavaScript语句;break;.default:JavaScript语句;,语法：,swtich示例.html,2020/5/17,38,数组,声明数组var数组名=newArray(数组大小);例：varemp=newArray(3)添加元素emp0=“AA;emp1=“BB;emp2=“CC;,emp,也可以声明数组并赋初值：例：varemp=newArray(“AA”，“BB”，“CC”)；,2020/5/17,39,使用数组varemp=newArray(3);emp0=RyanDias;emp1=GrahamBrowne;emp2=DavidGreene;document.write(数组emp中的数据为:);document.write(emp0+);document.write(emp1+);document.write(emp2+);,数组,2020/5/17,40,数组,常用属性length：返回数组中元素的个数?应该是最大下标值+1常用方法,2020/5/17,41,varemp=newArray(3);emp0=RyanDias;emp1=GrahamBrowne;emp2=DavidGreene;emp.sort();document.write(“排序结果是：);document.write(emp0+);document.write(emp1+);document.write(emp2+);varx=emp.join();document.write(x);,数组排序,2020/5/17,42,循环,for循环do-whilewhile,For循环演示.html,Do-while循环演示.html,2020/5/17,43,函数,定义函数：function函数名(参数1,参数2，)语句;调用函数：函数调用一般和表单元素的事件一起使用，调用格式为：事件名“函数名”;,functionsum(one,two)varresult=one+two;returnresult;,表示单击此按钮时，调用函数sum()执行,2020/5/17,44,JavaScript函数,内置函数eval函数：用于计算字符串表达式的值isNaN函数：用于验证参数是否为NaN（非数字）,Eval示例.html,2020/5/17,45,函数的应用,num1,num2,result,函数.html,2020/5/17,46,Javascript函数特性无重载,但在javascript中定义两个名字相同的函数不会引发错误。他将会调用后定义的函数。,functiondoAdd(iNum)alert(iNum+1000);functiondoAdd(iNum)alert(iNum+100);doAdd(100);,2020/5/17,47,Javascript函数特性利用arguments模拟重载,Javascript不会验证传递给函数的参数的个数是否等于函数定义的参数个数。开发者定义的函数在调用时可以接受任意的参数，不会引发错误。遗漏的参数以undefined传递给函数，多余的参数被忽略，但可以使用arguments数组接受。,functionsayHello()if(arguments0=exit)return;alert(arguments0);sayHello();sayHello(zhangsan);sayHello(exit);,2020/5/17,48,Javascript函数特性利用arguments模拟重载,functiondoAdd()if(arguments.length=1)alert(arguments0);elseif(arguments.length=2)alert(arguments0+arguments1);doAdd(30);doAdd(30,30);,2020/5/17,49,Function类,Varfunction_name=newFunction(arg1,arg2,argN,function_body);例：varsayHello=newFunction(sName,alert(Hello+sName);sayHello(zhangsan);,2020/5/17,50,借助Function来理解函数,vardoAdd=newFunction(iNum,alert(iNum+100);doAdd=newFunction(iNum,alert(hello+iNum);doAdd(1);由以上可见，函数名只是指向函数对象的一个引用值，同样的，我们也可以使用不同的变量指向同一个函数。,2020/5/17,51,借助Function来理解函数,vardoAdd=newFunction(iNum,alert(iNum+100);doAdd=newFunction(iNum,alert(hello+iNum);varotherAdd=doAdd;doAdd(1);otherAdd(9);,2020/5/17,52,把函数作为参数传给其他函数,varsayHello=newFunction(sName,sMessage,alert(Hello+sName+,+sMessage);functioncallOtherFunc(fnCall,vArg1,vArg2)fnCall(vArg1,vArg2);callOtherFunc(sayHello,“zhangsan”,“good”);alert(callOtherFunc.toString();,2020/5/17,53,函数：指针,functionmyFunction()alert(Old);myFunction();/输出OldmyFunction=function()alert(New);myFunction();/输出New,可见，函数的名字相当于一个指针,2020/5/17,54,函数：指针,functionmyFunction()alert(Old);varsavedFuncion=myFunction;myFunction=function()alert(New);myFunction();/输出NewsavedFuncion();/输出Old,2020/5/17,55,基于对象的Javascript,JavaScript中的对象是由属性(properties)和方法(methods)两种基本的元素的构成的。前者是对象在实施其所需要行为的过程中，实现信息的装载单位，从而与变量相关联；后者是指对象能够按照设计者的意图而被执行，从而与特定的函数相联。对象要真正地被使用，可采用以下几种方式获得：引用JavaScript内部对象；由浏览器环境中提供；创建新对象。,2020/5/17,56,Javascript的内部对象,Object、Array、Function、String、Boolean、Number、Date、RegExp、Math、Global、Error、EvalError、RangeError、ReferenceError、SyntaxError、TypeError、URIError,2020/5/17,57,对象操作语句for.in,格式如下：For（属性名in已知对象名）优点：无需知道对象中属性的个数即可进行操作。例：,FunctionshowData(object)for(varX=0;X30;X+)document.write(objecti)；,FunctionshowData(object)for(varxinobject)document.write(objecti)；,2020/5/17,58,对象操作语句with语句,在该语句体内，任何对变量的引用被认为是这个对象的属性，以节省一些代码。with(object).所有在with语句后的花括号中的语句，都是在后面object对象的作用域的。with(o)name=李四;age=100;height=12.3;,2020/5/17,59,再论数组,/定义方法1varaColors=newArray();aColors0=red;aColors1=green;aColors2=blue;for(varxinaColors)alert(aColorsx);/定义方法2varaColors2=newArray(red,green,blue);/定义方法3varaColors3=red,green,blue;,2020/5/17,60,再论数组,数组的大小是动态变化的varaColors3=red,green,blue;aColors6=gray;for(varx=0;xaColors.length;x+)alert(aColorsx);for(varxinaColors)alert(aColorsx);,2020/5/17,61,再论数组,数组的toString方法和valueOf方法varaColors3=red,green,blue;aColors10=gray;alert(aColors.toString();字符串和数组之间的转换：splitvaraColors3=red,green,blue;varsString=aColors.toString();alert(sString);varaColors4=sString.split(,);for(vari=0;iaColors4.length;i+)alert(aColors4i);,2020/5/17,62,再论数组,Javascript中，可以把数组看成是一个栈varaColors=newArray();aColors.push(red);aColors.push(green);aColors.push(blue);for(vari=0;i=0,Date对象,获得当前日期和时间,获得小时，即当前是几点,判断上午、下午还是晚上,月份数字011，注意1,日期对象1.htm,2020/5/17,76,Date对象,setTimeout的用法：setTimeout（“调用的函数”,”定时的时间”）例：varmyTimesetTimeout（”disptime()”,1000）;clearTimeout（myTime）;,本例的时间可以采用定时显示，使用定时器函数，每隔1秒调用disptime()函数显示时间,每隔1000毫秒调用函数disptime()执行,关闭定时器,2020/5/17,77,Date对象10-8,varmyTime=setTimeout(disptime(),1000);设置定时器每隔1秒（1000毫秒），调用函数disptime()执行，刷新时钟显示,2020/5/17,78,Date对象,设置样式：无边框的文本框,Onload()事件，页面加载就调用函数：disptime（显示时间）,2020/5/17,79,Date,vardDate=newDate();alert(dDate.toString();alert(dDate.toDateString();alert(dDate.toLocaleDateString();alert(dDate.toLocaleTimeString();dDate=newDate(2007,7,7);,2020/5/17,80,this,this这个词在function中有特别的意义。它指向了调用函数的那个对象。varoCar=newObject();oCar.color=red;oCar.showColor=function()alert(this.color);oCar.showColor();,2020/5/17,81,functionshowColor()alert(this.color);varoCar1=newObject();oCar1.color=red;oCar1.showColor=showColor;varoCar2=newObject();oCar2.color=blue;oCar2.showColor=showColor;oCar1.showColor();oCar2.showColor();,this这个词在function中有特别的意义。它指向了调用函数的那个对象。,2020/5/17,82,this关键字,functionEmployee(name,salary,mySupervisor)=name;this.salary=salary;this.supervisor=mySupervisor;varboss=newEmployee(John,200);varmanager=newEmployee(Joan,50,boss);varteamLeader=newEmployee(Rose,50,boss);alert(+isthesupervisorof+);alert(+ssupervisoris+);,2020/5/17,83,定义类或对象的方法工厂方法,前提：对象的属性可以在对象对象创建后动态定义。,varoCar=newObject();oCar.color=red;oCar.doors=4;oCar.mpg=20;oCar.showColor=function()alert(this.color);oCar.showColor(oCar);,functioncreateCar()varoCar=newObject();oCar.color=red;oCar.doors=4;oCar.mpg=20;oCar.showColor=function()alert(this.color);returnoCar;varoCar=createCar();oCar.showColor();,2020/5/17,84,functioncreateCar(sColor,iDoors,iMpg)varoCar=newObject();oCar.color=sColor;oCar.doors=iDoors;oCar.mpg=iMpg;oCar.showColor=function()alert(this.color);returnoCar;varoCar=createCar(black,5,30);oCar.showColor();,functionshowColor()alert(this.color);functioncreateCar(sColor,iDoors,iMpg)varoCar=newObject();oCar.color=sColor;oCar.doors=iDoors;oCar.mpg=iMpg;oCar.showColor=showColor;returnoCar;varoCar=createCar(yellow,3,6);oCar.showColor();,2020/5/17,85,函数示例6.html,函数示例7.html,2020/5/17,86,定义类或对象的方法构造函数方式,functionCar(sColor,iDoors,iMpg)this.color=sColor;this.doors=iDoors;this.mpg=iMpg;this.showColor=function()alert(this.color);varoCar1=newCar(red,5,6);varoCar2=newCar(blue,8,9);oCar1.showColor();oCar2.showColor();alert(typeofCar);alert(typeofnewCar();,当这个函数创建的时候有一个同名的对象也被创建。,2020/5/17,87,函数：原型,functionFish(name,color)=name;this.color=color;Ftotype.livesIn=water;Ftotype.price=20;,varfish1=newFish(mackarel,gray);varfish2=newFish(goldfish,orange);varfish3=newFish(salmon,white);,for(vari=1;i=3;i+)varfish=eval(fish+i);/只是取得指向这条鱼的指针alert(+,+fish.color+,+fish.livesIn+,+fish.price);,输出：mackarel,gray,water,20goldfish,orange,water,20salmon,whitewater,20,当一个对象被创建时，这个构造函数将会把它的属性prototype赋给新对象的内部属性_proto_。这个_proto_被这个对象用来查找它的属性。,2020/5/17,88,用prototype给对象添加函数,functionEmployee(name,salary)=name;this.salary=salary;Etotype.getSalary=functiongetSalaryFunction()returnthis.salary;Etotype.addSalary=functionaddSalaryFunction(addition)this.salary=this.salary+addition;,2020/5/17,89,用prototype给对象添加函数,varboss1=newEmployee(Joan,200000);varboss2=newEmployee(Kim,100000);varboss3=newEmployee(Sam,150000);输出：alert(boss1.getSalary();/输出200000alert(boss2.getSalary();/输出100000alert(boss3.getSalary();/输出150000,2020/5/17,90,定义类或对象的方法原型方式,functionCar(sName)C=sName;Ctotype.showName=function()alert();varoCar=newCar(benz);oCar.showName();varyourCar=newCar(haha);yourCar.showName();oCar.showName();/输出”haha”,每一个构造函数都有一个属性叫做原型(prototype)。这个属性非常有用：为一个特定类声明通用的变量或者函数。,原型方式的缺点：1、无法参数化的构造对象；2、修改一个引用属性会影响另一个对象,2020/5/17,91,定义类或对象的方法原型方式,functionCar();Ctotype.color=red;Ctotype.doors=4;Ctotype.mpg=23;Ctotype.drivers=newArray(mike,tom);Ctotype.showColor=function()alert(this.color);varoCar1=newCar();varoCar2=newCar();oCar1.showColor();oCar2.showColor();alert(oCar2.drivers);oCar1.drivers.push(jim);/改变oCar1.drivers,结果确把oCar2也改变了alert(oCar2.drivers);,每一个构造函数都有一个属性叫做原型(prototype)。这个属性非常有用：为一个特定类声明通用的变量或者函数。,原型方式的缺点：1、无法参数化的构造对象；2、修改一个引用属性会影响另一个对象,2020/5/17,92,定义类或对象的方法混合构造函数和原型方式,functionCar(sColor,iDoors,iMpg,aDrivers)this.color=sColor;this.doors=iDoors;this.mpg=iMpg;this.drivers=aDrivers;Ctotype.showColor=function()alert(this.color);varoCar1=newCar(red,5,3,newArray(Tom,Jack);varoCar2=newCar(blue,5,3,newArray(Mike,Jim);oCar1.showColor();oCar2.showColor();alert(oCar2.drivers);oCar1.drivers.push(Jim);alert(oCar2.drivers);,构造函数的方式定义属性；用原型方式定义方法；推荐使用！,2020/5/17,93,定义类或对象的方法动态原型方式,functionCar(sColor,iDoors,iMpg,aDrivers)this.color=sColor;this.doors=iDoors;this.mpg=iMpg;this.drivers=aDrivers;if(typeofCar._initialized=undefined)Ctotype.showColor=function()alert(this.color);Car._initialized=true;varoCar1=newCar(red,5,3,newArray(Tom,Jack);varoCar2=newCar(blue,5,3,newArray(Mike,Jim);oCar1.showColor();oCar2.showColor();alert(oCar2.drivers);oCar1.drivers.push(Jim);alert(oCar2.drivers);,2020/5/17,94,进一步认识prototype,问题：资源耗费太大varstr=hello;str+=world;因此：优点是资源耗费较小，但是语义不够清楚。vararr=newArray();arr0=hello;arr1=world;varstr1=arr.join();alert(str1);,2020/5/17,95,进一步认识prototype,functionStringBuffer()this._strings=newArray();StringBtotype.append=function(str)this._strings.push(str);StringBtotype.toString=function()returnthis._strings.join();varbuffer=newStringBuffer();buffer.append(hello);buffer.append(world);alert(buffer.toString();,2020/5/17,96,进一步认识prototype,为本地类创建新的方法Ntotype.toHexString=function()returnthis.toString(16);variNum=15;alert(iNum.toHexString();,2020/5/17,97,通过对象直接初始化,通过对象直接初始化.html,2020/5/17,98,自定义对象嵌套,自定义对象嵌套.html,2020/5/17,99,继承-对象冒充,functionClassA(sColor)this.color=sColor;/使用this关键字给属性和方法赋值this.showColor=function()alert(this.color);functionClassB(sColorr)this.newMethod=ClassA;/注意这不是把ClassA看成构造函数，而是看成了普通函数this.newMethod(sColor);/调用时，ClassA中的this实际上是ClassB的对象deletethis.newMethod;varb=newClassB(red);b.showColor();,2020/5/17,100,继承-对象冒充,functionClassA(sColor)this.color=sColor;/使用this关键字给属性和方法赋值this.showColor=function()alert(this.color);functionClassB(sColor,sName)this.newMethod=ClassA;/注意这不是把ClassA看成构造函数，而是看成了普通函数this.newMethod(sColor);/调用时，ClassA中的this实际上是ClassB的对象deletethis.newMethod;=sName;this.sayName=function()alert();varb=newClassB(red,Tom);b.showColor();b.sayName();,2020/5/17,101,练习,编写两个类：手机类，其中有颜色，品牌，价格等属性，有打电话的方法；相机类，其中有颜色，品牌，象素，价格等属性，有拍照的方法；编写一个拍照手机的类，继承以上两个类（即实现了多重继承）,2020/5/17,102,继承call方法,functionClassA(sColor)this.color=sColor;/使用this关键字给属性和方法赋值this.showColor=function()alert(this.color);functionClassB(sColor,sName)ClassA.call(this,sColor);/call方法的第一个参数this表明是ClassB的对象=sName;this.sayName=function()alert();varb=newClassB(red,Tom);b.showColor();b.sayName();,202