JavaScript入门教程.ppt

1、2018年12月13日,1,Web基础之一JavaScript基础,刘钰峰,2018年12月13日,2,目标,理解什么是 JavaScript 如何将 JavaScript 嵌入到 HTML 中 理解变量、数据类型和运算符 掌握 if-else 和 switch 语句 掌握函数 掌握内置对象,2018年12月13日,3,什么是JavaScript,脚本程序：嵌入在HTML文件中，提供了和用户进行交互的能力；常见的脚本语言：VBScript，javascript JavaScript是NetScape公司的产品 提供用户交互 动态更改内容 数据验证,2018年12月13日,4,将JavaScri

2、pt嵌入网页,可以将 JavaScript 语句插入 HTML 文档，方式如下： 使用 标签将语句嵌入文档 将 JavaScript 源文件链接到 HTML 文档中 将脚本代码作为HTML标签的属性值,2018年12月13日,5,使用 Script 标签,JavaScript 代码,document.write(“欢迎来到 JavaScript 世界“);尽情享受学习的快乐! ,脚本代码,设置语言,2018年12月13日,6,使用外部 JS 文件,外部 JavaScript 文件可以链接到 HTML 文档中 SCRIPT 标签的 SRC（源文件）属性可用于包括此外部文件,2018年12月13日

3、,7,使用外部 JS 文件,JavaScript 代码 (test.htm),使用外部文件以上文本是通过访问外部 JavaScript 文件显示的,2018年12月13日,8,将脚本代码作为HTML标签的属性值,在href属性中必须指明是javascript 当前时间 在onclick事件属性中可以不用指明是javascript,把script脚本作为属性值.html,2018年12月13日,9,Javascript的基本格式,区分大小写 以；作为语句结束符号(;可加可不加) 以/或/* */组为注释Javascript的数据类型： 基本类型：存储在栈 引用类型：是存储在堆中的对象。,2018

4、年12月13日,10,Javascript是弱类型的语言,字符串,地址,null,布尔值,数字,undefined,对象,对象,对象,对象,对象,栈,堆,2018年12月13日,11,Javascript的数据类型,2018年12月13日,12,变量,Javascript采用弱类型的变量形式，即在声明时无需指定变量类型，在赋值的时候自动指定； 变量名必须以字母或下划线（“_“）开头 变量可以包含数字、从 A 至 Z 的大小写字母 JavaScript 区分大小写，即变量 myVar、 myVAR 和 myvar 是不同的变量,2018年12月13日,13,声明变量,var a; “var” 用

5、于声明变量的关键字“a” 变量名,同时声明和初始化变量 var a= 10;,a = 10;,声明变量,声明多个变量 var x, y, z = 10;,赋值,不声明变量，直接使用 x = 10;,2018年12月13日,14,typeof运算符号,Typeof对变量的运算结果为以下之一： Undefined Boolean Number String Object,typeof(null)结果为object，此为历史遗留的错误。,观察以下alert的结果 var iNum ; alert(typeof(null) ; alert(typeof(iNum) ; iNum = 10 ; aler

6、t(typeof(iNum) ; var bFlag = true; alert(typeof(bFlag) ; var aStu = new Array() ; alert(typeof(aStu) ; alert(typeof(“hello“) ;,2018年12月13日,15,观察以下运行结果,var otemp ; var otemp2 ; alert(typeof(otemp) ; alert(typeof(otemp2) ;alert(otemp=undefined) ; alert(otemp2=undefined) ;/会导致错误，因为没有定义过的变量只有typeof运算符可以

7、使用，其他运算符都会导致错误。,2018年12月13日,16,声明变量,使用变量var x; x=prompt(“淘宝网竟拍，请出一口价“,1) ; document.write(“拍卖价格“+x+“) / “+“用来连接多个字符串 document.write(“恭喜您，您以最高价拍卖成功！“); alert(“欢迎下次光临！“);,定义变量,赋 值,输 出,prompt(“提示信息”,”默认值”) 将弹出提示对话框，接受用户的输入。点击确定返回输入的字符串，点击取消反馈空字符串。,2018年12月13日,17,变量 a、b 和 c 只能 在其各自的函数中 被访问,变量的作用域,脚本,函数f

8、unction1 局部变量a,函数function2 局部变量b,函数function3 局部变量c,可由函数 1、函数 2 和函数 3 访问,全局变量 gg,2018年12月13日,18,转义字符,2018年12月13日,19,var x=100; var y; var z; document.write(“竞拍SONY数码相机 600万像素“ +x+“$起价“); y=prompt(“加多少银子？“,“1“); z=x+y; alert(“您最终的出价n“+z+“$“); /”n”用于换行显示,Prompt函数返回输入的字符串,“+”号的用法-1,10020 ? bug,200,2018年

9、12月13日,20,var x=100; var y; var z; document.write(“竞拍SONY数码相机 600万像素“ +x+“$起价“); y=prompt(“加多少银子？“,“1“); z=x+parseFloat( y ); alert(“您最终的出价n“+z+“$“); /”n”用于换行显示,parseFloat( )函数将字符串转换为float数据parseInt( )函数将字符串转换为int数据 如果转换失败，返回NaN值(not a number) 使用isNaN(z)判断是否为NULL,“+”号的用法-2,2018年12月13日,21,类型转换转换为字符串,

10、在javascript中数字、字符串和boolean都是伪对象，因此他们都有toString方法。var sColor = “red“ ;alert(sColor.toString() ;var bFound = true ;alert(bFound.toString() ;var iNum1 = 10 ;var iNum2 = 10.6 ;alert(iNum1) ;alert(iNum2) ; alert(iNum1.toString(2) ;alert(iNum1.toString(8) ;alert(iNum1.toString(16) ;alert(iNum2.toString(8)

11、 ;alert(iNum2.toString(16) ;,2018年12月13日,22,类型转换转换为数字,parseInt和parseFloat：其解析方式为从位置0开始查看直到找到无法解析的字符。,var iNum1 = parseInt(“123abc“) ; var iNum2 = parseInt(“0xa“) ; var iNum3 = parseInt(“013“) ; var iNum4 = parseInt(“blue“) ;alert(iNum1) ; alert(iNum2) ; alert(iNum3) ; alert(iNum4) ;,var iNum1 = pars

12、eInt(“10“,2) ; var iNum2 = parseInt(“10“,8) ; var iNum3 = parseInt(“10“,16) ;alert(iNum1) ; alert(iNum2) ; alert(iNum3) ;,2018年12月13日,23,强制类型转换,Boolean(value) Number(value) String(value),var b1 = Boolean(“) ; var b2 = Boolean(“hello“) ; var b3 = Boolean(100) ; var b4 = Boolean(null) ; var b5 = Boole

13、an(0) ; var b6 = Boolean(new Object() ;alert(“b1=“+b1) ; alert(“b2=“+b2) ; alert(“b3=“+b3) ; alert(“b4=“+b4) ; alert(“b5=“+b5) ; alert(“b6=“+b6) ;,非0、非空串、非空对象为true， 其他false,2018年12月13日,24,强制类型转换,Boolean(value) Number(value) String(value),alert(“Number(false)=“+Number(false) ; alert(“Number(true)=“+N

14、umber(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(new Object()=“+Number(new Object() ;,Number转换和parseInt，parseFloat转换的不同之处在于Number要求整个值都要有效,2018年12月13日,25,引用类型,

15、Object类 与java中的Object类相似 具体有： constructor，prototype，tostring，valueof等方法New Object() 等价于 ;,2018年12月13日,26,属性名,属性值,name,“zhangsan”,age,123,getName,function()alert(this.name) ;,从JavaScript的内部实现的角度来看问题，一个JavaScript对象就是属性集的组合。 内部如何组织这些属性集的呢？使用类似于java中的Map,?为什么使用for循环遍历属性的时候，没有找到constructor属性,2018年12月13日,

16、27,引用类型,Boolean：一般不用 Number为基本数字类型的包装类 有用的方法,var oNum = new Number(99) ; alert(oNum.toFixed(2); oNum = new Number(999) ; alert(oNum.toExponential(2) ; oNum = new Number(9999) ; alert(oNum.toPrecision(6) ;,2018年12月13日,28,运算符,2018年12月13日,29,算术运算符,运算符示例.html,2018年12月13日,30,比较运算符,比较运算符 2-1,2018年12月13日,3

17、1,运算符,逻辑运算符,2018年12月13日,32,等号运算符规则,和！在进行运算之前都会进行类型转换，规则如下： 如果一个运算数是Boolean则在检查相等之前先把他转换为数字值。False转换为0，true转换为1 如果一个运算数是字符串，另一个是数字，则在检查相等之前先把字符串转换为数字值。 如果一个运算数是字符串，另一个是对象，则在检查相等之前先把对象调用toString方法转换为字符串。 如果一个运算数是对象，另一个是数字，则在检查相等之前先把对象转换为数字值。 值null和undefined相等 如果两个都是对象，则比较引用值,alert(null = undefined) ;

18、alert(5 = “5“) ; alert(false = 0 ) ;,2018年12月13日,33,全等号,在作比较之前，不作类型转换,alert(null = undefined) ; alert(5 = “5“) ; alert(false = 0 ) ;,2018年12月13日,34,条件语句用于测试条件。,if(条件)JavaScript代码;,语法：,if 语句,如果要执行多个语句，必须将这些语句放在一对大括号 ( ) 内。但如果只要执行一个语句，则可以省略大括号,2018年12月13日,35,function calcu() var numb1= document.calc.n

19、um1.value; var numb2= document.calc.num2.value; if (numb1!=“) .其他代码略，同上例,2018年12月13日,36,if else 语句 2-1,if(条件) /JavaScript代码; else /JavaScript代码; ,语法：,2018年12月13日,37,switch 语句,switch (表达式) case 常量1 : JavaScript语句;break;case 常量2 : JavaScript语句;break;.default : JavaScript语句; ,语法：,swtich示例.html,2018年12月

20、13日,38,数组,声明数组 var 数组名 = new Array(数组大小);例： var emp = new Array(3) 添加元素 emp0 = “AA“;emp1 = “BB“;emp2 = “CC“;,emp,也可以声明数组并赋初值：例： var emp=new Array(“AA”，“BB”，“CC”)；,2018年12月13日,39,使用数组var emp = new Array(3); emp0 = “Ryan Dias“; emp1 = “Graham Browne“; emp2 = “David Greene“; document.write(“数组emp中的数据为:

21、“); document.write(emp0+“); document.write(emp1+“); document.write(emp2+“);,数组,2018年12月13日,40,数组,常用属性length ：返回数组中元素的个数 ? 应该是最大下标值+1 常用方法,2018年12月13日,41,var emp = new Array(3); emp0 = “Ryan Dias“; emp1 = “Graham Browne“; emp2 = “David Greene“; emp.sort( ); document.write(“排序结果是：“); document.write(em

22、p0+“); document.write(emp1+“); document.write(emp2+“); var x = emp.join() ; document.write(x) ;,数组排序,2018年12月13日,42,循环,for循环do-whilewhile,For 循环演示.html,Do-while循环演示.html,2018年12月13日,43,函数,定义函数： function 函数名( 参数1,参数2， ) 语句; 调用函数： 函数调用一般和表单元素的事件一起使用，调用格式为： 事件名“函数名” ;,function sum ( one, two) var resul

23、t = one + two;return result; ,表示单击此按钮时，调用函数sum( )执行,2018年12月13日,44,JavaScript 函数,内置函数 eval 函数： 用于计算字符串表达式的值 isNaN 函数：用于验证参数是否为 NaN（非数字）,Eval示例.html,2018年12月13日,45,函数的应用,num1,num2,result,函数.html,2018年12月13日,46,Javascript函数特性无重载,但在javascript中定义两个名字相同的函数不会引发错误。他将会调用后定义的函数。,function doAdd(iNum) alert(iN

24、um + 1000) ;function doAdd(iNum) alert(iNum + 100) ;doAdd(100) ;,2018年12月13日,47,Javascript函数特性 利用arguments模拟重载,Javascript不会验证传递给函数的参数的个数是否等于函数定义的参数个数。开发者定义的函数在调用时可以接受任意的参数，不会引发错误。遗漏的参数以undefined传递给函数，多余的参数被忽略，但可以使用arguments数组接受。,function sayHello() if (arguments0 = “exit“) return ;alert(arguments0)

25、; sayHello() ; sayHello(“zhangsan“) ; sayHello(“exit“) ;,2018年12月13日,48,Javascript函数特性 利用arguments模拟重载,function doAdd() if (arguments.length = 1) alert(arguments0) ;else if (arguments.length = 2 ) alert(arguments0 + arguments1) ;doAdd(30) ;doAdd(30,30) ;,2018年12月13日,49,Function类,Var function_name =

26、new Function(arg1,arg2,argN,function_body) ; 例： var sayHello = new Function(“sName“,“alert(“Hello “ + sName )“) ; sayHello(“zhangsan“) ;,2018年12月13日,50,借助Function来理解函数,var doAdd = new Function(“iNum“,“alert(iNum + 100)“) ; doAdd = new Function(“iNum“,“alert(hello + iNum)“) ; doAdd(1) ;由以上可见，函数名只是指向函

27、数对象的一个引用值，同样的，我们也可以使用不同的变量指向同一个函数。,2018年12月13日,51,借助Function来理解函数,var doAdd = new Function(“iNum“,“alert(iNum + 100)“) ; doAdd = new Function(“iNum“,“alert(hello + iNum)“) ; var otherAdd = doAdd ; doAdd(1) ; otherAdd(9) ;,2018年12月13日,52,把函数作为参数传给其他函数,var sayHello = new Function(“sName“,“sMessage“,“a

28、lert(Hello + sName +, +sMessage)“) ; function callOtherFunc(fnCall,vArg1,vArg2) fnCall(vArg1,vArg2) ; callOtherFunc(sayHello,“zhangsan ”,“ good”) ;alert(callOtherFunc.toString() ;,2018年12月13日,53,函数：指针,function myFunction() alert(“Old“); myFunction(); / 输出 “Old“ myFunction=function() alert(“New“); ;

29、myFunction(); / 输出 “New“,可见，函数的名字相当于一个指针,2018年12月13日,54,函数：指针,function myFunction() alert(“Old“); var savedFuncion=myFunction; myFunction=function() alert(“New“); ; myFunction(); / 输出 “New“ savedFuncion(); / 输出 “Old“,2018年12月13日,55,基于对象的Javascript,JavaScript中的对象是由属性(properties)和方法(methods)两种基本的元素的构成

30、的。前者是对象在实施其所需要行为的过程中，实现信息的装载单位，从而与变量相关联；后者是指对象能够按照设计者的意图而被执行，从而与特定的函数相联。 对象要真正地被使用，可采用以下几种方式获得： 引用JavaScript内部对象； 由浏览器环境中提供； 创建新对象。,2018年12月13日,56,Javascript的内部对象,Object、Array、Function、String、Boolean、Number、Date、RegExp、Math、Global、Error、EvalError、RangeError、ReferenceError、SyntaxError、TypeError、URIEr

31、ror,2018年12月13日,57,对象操作语句forin,格式如下： For（属性名 in 已知对象名） 优点：无需知道对象中属性的个数即可进行操作。 例：,Function showData(object) for (var X=0; X30;X+)document.write(objecti)； ,Function showData(object) for (var x in object)document.write(objecti)； ,2018年12月13日,58,对象操作语句 with语句,在该语句体内，任何对变量的引用被认为是这个对象的属性，以节省一些代码。 with (ob

32、ject).所有在with语句后的花括号中的语句，都是在后面object对象的作用域的。 with (o)name = “李四“ ;age = 100 ;height = 12.3 ; ,2018年12月13日,59,再论数组,/定义方法1 var aColors = new Array() ; aColors0 = “red“ ; aColors1 = “green“ ; aColors2 = “blue“ ; for (var x in aColors) alert(aColorsx) ; /定义方法2 var aColors2 = new Array(“red“,“green“,“blu

33、e“) ; /定义方法3 var aColors3 = “red“,“green“,“blue“ ;,2018年12月13日,60,再论数组,数组的大小是动态变化的 var aColors3 = “red“,“green“,“blue“ ; aColors6 = “gray“ ; for (var x = 0 ; x aColors.length ; x+) alert(aColorsx) ; for (var x in aColors) alert(aColorsx) ; ,2018年12月13日,61,再论数组,数组的toString方法和valueOf方法 var aColors3 =

34、“red“,“green“,“blue“ ; aColors10 = “gray“ ; alert(aColors.toString() ; 字符串和数组之间的转换：split var aColors3 = “red“,“green“,“blue“ ; var sString = aColors.toString() ; alert(sString) ; var aColors4 = sString.split(“,“) ; for (var i = 0 ; i aColors4.length ; i+ ) alert(aColors4i) ; ,2018年12月13日,62,再论数组,Jav

35、ascript中，可以把数组看成是一个栈 var aColors = new Array() ; aColors.push(“red“) ; aColors.push(“green“) ; aColors.push(“blue“) ;for (var i = 0 ; i aColors.length ; i+ ) alert(aColorsi) ; var sColor = aColors.pop() ; alert(“sColor:“+sColor) ;,2018年12月13日,63,再论数组,结合shift()和unshift()，以及push和pop，可以把数组看成是一个队列 Shift

36、：删除数组中的第一个元素 Unshift：把一个元素放在数组的第一个位置 var queue = “red“,“green“,“blue“ ; queue.push(“white“) ; alert(queue.toString() ; queue.shift() ; alert(queue.toString() ; queue.unshift(“yellow“) ; alert(queue.toString() ; queue.sort() ; alert(queue.toString() ; queue.reverse() ; alert(queue.toString() ;,2018年1

37、2月13日,64,String 对象,创建字符串有两种不同方法 ： 使用 var 语句 var newstr = “这是我的字符串“ 创建 String 对象 var newstr = new String (“这是我的字符串“),2018年12月13日,65,String 对象,语法： indexOf(“查找的子字符串”，查找的起始位置) 返回子字符串所在的位置，如果没找到，返回 1 例如： var x var y=“abcdefg”; x=y.indexOf(“c” , 0 ); /返回结果为2，起始位置是0,2018年12月13日,66,function checkEmail( )var

38、 e=document.myform.email.value; if (e.length=0) /检测长度是否为0，即是否为空alert(“电子邮件不能为空!“);return ;if (e.indexOf(“,0)=-1) /检测是否包含”符号alert(“电子邮件格式不正确n必须包含符号！“);return ;if (e.indexOf(“.“,0)=-1) /检测是否包含”.”符号alert(“电子邮件格式不正确n必须包含.符号！“);return ;document.write(“恭喜您！，注册成功！“); ,检查电子邮件email 是否包含“”和”.”,String 对象,返回结果-

39、1表示没找到“”字符,字符串对象.htm,2018年12月13日,67,Math 对象,Math.random( ) ：产生01的随机小数 Math.round( )：四舍五入取整，如9.34 取整为9,2018年12月13日,68,自动刷新document.write(“2秒自动刷新，随机显示图片“);var i=0;i=Math.round(Math.random( )*8+1);document.write(“);,Math 对象,假定随机产生的数字i=3，上述代码即为：显示第三幅图片（3.jpg）,如何实现,每隔2秒刷新网页,Math.round(Math.random( )*8+1)

40、 产生1-9的数字,2018年12月13日,69,Date 对象,Date 对象存储的日期为自 1970 年 1 月 1 日 00:00:00 以来的毫秒数,var 日期对象 = new Date (年、月、日等参数),例： var mydate=new Date( “July 29, 1998,10:30:00 ”) 如果没有参数，表示当前日期和时间 例： var today = new Date( ),2018年12月13日,70,Date 对象,Data 方法的分组：,2018年12月13日,71,Date 对象,用作 Date 方法的参数的整数：,2018年12月13日,72,Date

41、 对象,Set 方法：,2018年12月13日,73,Date 对象,Get 方法：,2018年12月13日,74,Date 对象,To 方法：,Parse 方法和 UTC 方法,2018年12月13日,75,var now= new Date( ); var hour = now.getHours( ); if (hour=0 ,Date对象,获得当前日期和时间,获得小时，即当前是几点,判断上午、下午还是晚上,月份数字011，注意1,日期对象 1.htm,2018年12月13日,76,Date对象,setTimeout的用法：setTimeout（“调用的函数”,”定时的时间”） 例：var

42、 myTimesetTimeout（”disptime( )”,1000）;clearTimeout（myTime）;,本例的时间可以采用定时显示，使用定时器函数，每隔1秒调用disptime( )函数显示时间,每隔1000毫秒调用函数disptime( )执行,关闭定时器,2018年12月13日,77,Date 对象10-8,var myTime = setTimeout(“disptime( )“,1000); 设置定时器每隔1秒（1000毫秒），调用函数disptime( )执行，刷新时钟显示,2018年12月13日,78,Date对象,设置样式：无边框的文本框,Onload ( ) 事

43、件，页面加载就调用函数：disptime （显示时间）,2018年12月13日,79,Date,var dDate = new Date() ; alert(dDate.toString() ; alert(dDate.toDateString() ; alert(dDate.toLocaleDateString() ; alert(dDate.toLocaleTimeString() ; dDate = new Date(2007,7,7) ;,2018年12月13日,80,this,this这个词在function中有特别的意义。它指向了调用函数的那个对象。var oCar = new O

44、bject() ; oCar.color = “red“ ; oCar.showColor = function () alert(this.color) ; ; oCar.showColor() ;,2018年12月13日,81,function showColor() alert(this.color) ; ;var oCar1 = new Object() ; oCar1.color = “red“ ; oCar1.showColor = showColor ;var oCar2 = new Object() ; oCar2.color = “blue“ ; oCar2.showColo

45、r = showColor ;oCar1.showColor() ; oCar2.showColor() ;,this这个词在function中有特别的意义。它指向了调用函数的那个对象。,2018年12月13日,82,this关键字,function Employee(name, salary, mySupervisor) this.name=name; this.salary=salary; this.supervisor=mySupervisor; var boss=new Employee(“John“, 200); var manager=new Employee(“Joan“, 50

46、, boss); var teamLeader=new Employee(“Rose“, 50, boss); alert(manager.supervisor.name+“ is the supervisor of “+manager.name); alert(manager.name+“s supervisor is “+manager.supervisor.name);,2018年12月13日,83,定义类或对象的方法工厂方法,前提：对象的属性可以在对象对象创建后动态定义。,var oCar = new Object() ; oCar.color = “red“ ; oCar.doors

47、 = 4 ; oCar.mpg = 20 ; oCar.showColor = function () alert(this.color) ; ; oCar.showColor(oCar) ;,function createCar() var oCar = new Object() ; oCar.color = “red“ ; oCar.doors = 4 ; oCar.mpg = 20 ; oCar.showColor = function () alert(this.color) ; ;return oCar ; var oCar = createCar() ; oCar.showColo

48、r() ;,2018年12月13日,84,function createCar(sColor,iDoors,iMpg) var oCar = new Object() ; oCar.color = sColor ; oCar.doors = iDoors ; oCar.mpg = iMpg ; oCar.showColor = function () alert(this.color) ; ;return oCar ; var oCar = createCar(“black“,5,30) ; oCar.showColor() ;,function showColor() alert(this.color) ; function createCar(sColor,iDoors,iMpg) var oCar = new Object() ; oCar.color = sColor ; oCar.doors = iDoors ; oCar.mpg = iMpg ; oCar.showColor = showColor ;return oCar ; var oCar = createCar(“yellow“,3,6) ; oCar.showColor() ;,