javascript基础教程.ppt

JavaScript,了解什么是脚本程序和JavaScript JavaScript的基本语法 运算符 程序的流程控制 函数 对象 JavaScript的内部对象 专门用于对象的语句 数组,ECMAScript,ECMAScript与WEB浏览器没有任何关系，是其他语言的宿主环境。提供：语法、类型、关键字、语句、保留字、操作符、对象。,JAVASCRIPT简介,Javascript诞生于1995年，主要负责一些输入验证操作。 1992年Nombas开发了C-minus-minus(Cmm)与C相似，后改名为ScriptEase,后开发出可嵌入网页中的CEnvi版本，这是万维网首次使用脚本语言的标志。,JavaScript,NetScape Navigator 2开发了LiveScript脚本可以在浏览器与服务器中使用，服务器中命名为LiveWire。为了赶在发布日期前完成LiveScript与sun建立联盟，为了炒作临时将LiveScript改名为JavaScript,JScript,1996年8月微软发布IE3同时发布了基于NetScape的javascript1.0开发的JScript(这种命名主要是避开与NetScape的授权问题),ECMAScript,至此出现了3种JAVASCRIPT版本，javascript、Jscript、 CEnvi版本。 1997年以JavaScript1.1为蓝本的建议提交给了欧洲计算机制造商协会(ECMA),39号技术委员会(Netscape,微软,Sun等公司程序员组成)制定了ECMA-262标准即ECMAScript标准。,什么是JavaScript,一万元整,Jeny Smiss,10,000/-,Jeny Smiss,A/c No. 010077,瑞士银行,Jeny 想在银行存钱,验证 Jeny 帐户详细信息,余额,帐号,签名,帐户验证完毕,什么是JavaScript,同样，,Jeny,Jeny 想创建一个电子邮件帐户,J * 24 US,帐户 Id： 密码： 年龄： 国家：,*,这样，JavaScript 将验证数据并给出错误信息（如有）,JavaScript简介,JavaScript简介 前身叫作LiveScript，是一种基于对象（Object）和事件驱动（EventDriven)、并具有安全性能的脚本语言。 JavaScript与Java 是两个公司开发的两个不同的产品，作用与用途大不一样，但两者语法上有很多多相似之处，JavaScript并不是Java的子集。 JavaScript、Jscript与ECMAScript /scripting,什么是JavaScript,JavaScript 是一种脚本语言 alert(new Date(); 提供用户交互 动态更改内容 数据验证,将JavaScript嵌入网页,可以将 JavaScript 语句插入 HTML 文档，方式 如下： 使用 标签将语句嵌入文档 将 JavaScript 源文件链接到 HTML 文档中,使用 Script 标签,JavaScript 代码, document.write(“欢迎来到 JavaScript 世界“); 尽情享受学习的快乐! ,脚本代码,设置语言,脚本代码的位置,JavaScript代码可以放置在HTML任何位置 var x = 3; 这是一个HTML段落 alert(x); ,这是一个HTML段落 var x = 3; alert(x); ,将脚本程序代码作为属性值,javascript ,使用外部 JS 文件,外部 JavaScript 文件（*.js）可以链接到 HTML 文档中 SCRIPT 标签的 SRC（源文件）属性可用于包括此外部文件,使用外部 JS 文件,JavaScript 代码 (test.htm), 使用外部文件 以上文本是通过访问外部 JavaScript 文件显示的 ,JavaScript的基本语法,JavaScript中的标识符 标识符是指JavaScript中定义的符号，例如， 变量名，函数名，数组名等。标识符可以由任意顺序的大小写字母、数字、下划线（_）和美元符号（$）组成，但标识符不能以数字开头，不能是JavaScript中的保留关键字。 合法的标识符举例：indentifler、username、user_name、_userName、$username 非法的标识符举例：int、98.3、Hello World JavaScript严格区分大小写 computer和Computer是两个完全不同的符号 JavaScript程序代码的格式 每条功能执行语句的最后必须用分号（;）结束，每个词之间用空格、制表符、换行符或大括号、小括号这样的分隔符隔开。 JavaScript程序的注释 /*.*/中可以嵌套“/”注释，但不能嵌套“/*.*/”,JavaScript中保留的关键字,abstract,boolean,break,byte,case,catch,char,class,continue,default,if,for,float,finally,final,false,extends,else,double,do,implements,import,instance,int,interface,long,native,new,null,backage,this,synchronized,switch,super,static,short,return,public,protected,private,throw,throws,transient,true,try,void,volatile,while,基本数据类型与常量,整型常量 十六进制以0x或0X开头， 例如0x8a。 八进制必须以0开头，例如：0123。 十进制的第一位不能是0（数字0除外），例如：123。 实型常量 12.32、 192.98、 5E7、4e5等。 布尔值 true和false. null常量 undefined常量 字符串型常量 “this is JavaScript ppt”、abc、“a”、“”。 字符串中的特殊字符，需要以反斜杠（）后跟一个普通字符来表示，例如：r、n、 t、 b、 、 ”、 .,声明变量,var a; “var” 用于声明变量的关键字 “a” 变量名,同时声明和初始化变量 var a= 10;,a = 10;,声明变量,声明多个变量 var x, y, z = 10;,赋值,声明变量, 使用变量 var x; x=prompt(“淘宝网竟拍，请出一口价“,1) ; document.write(“拍卖价格“+x+“) / “+“用来连接多个字符串 document.write(“恭喜您，您以最高价拍卖成功！“); alert(“欢迎下次光临！“); ,定义变量,赋 值,输 出,prompt(“提示信息”,”默认值”) 将弹出提示对话框，接受用户的输入。点击确定返回输入的字符串，点击取消反馈空字符串。,运算符,算术运算符 赋值运算符 比较运算符 逻辑运算符 位运算符,算术运算符,+ 加法运算符或正值运算符，例如： x+5， 6。 “+”还能实现多个字符串的相加，也能将字符串与其它的数据类型连成一个新的字符串，条件是该表达式中至少有一个字符串，例如：“x”+123的结果是“x123”. - 减法运算符或负值运算符，例如： 7 3, -8. * 乘法运算符，例如： 3*6. / 除法运算符，例如，9/4. % 求模运算符（也就算术中的求余）5/2. + 将变量值加1后再将结果赋给这个变量。 “”有两种用法：+x, x+. 1。前者是变量在参与其它运算之前先将自己加1后再用新的 值参与其它的运算。例如：b= +a是a先自增，即a的值 加1后，才赋值给b; 2。后者是先用原值参与其它运算后，再将自己加1，例如： b=a+是先将a赋值给b后，a再自增。 - 将变量值减1后再将结果赋给这个变量，与+的用法一样。, var x=100; var y; var z; document.write(“竞拍SONY数码相机 600万像素“ +x+“$起价“); y=prompt(“加多少银子？“,“1“); z=x+y; alert(“您最终的出价n“+z+“$“); /”n”用于换行显示 ,Prompt函数返回输入的字符串,10020 ? bug,+字符串相连：100+”200”,200, 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),赋值运算符,赋值运算符的作用是将一个值赋给一个变量，最常用的赋值运算符是“=”。还可以由“=”赋值运算符和其它一些运算符组合产生一些新的赋值运算符，例如，“+=”,”*=”等。 = 将一个值或表达式的结果赋给变量 例如： x = 3; += 将变量与所赋的值相加后的结果再赋给该变量 例如：x += 3 等价于x = x + 3; -= 将变量与所赋的值相减后的结果再赋给该变量 例如：x -= 3 等价于x = x 3; *= 将变量与所赋的值相乘后的结果再赋给该变量 例如：x *= 3 等价于x = x * 3; /= 将变量与所赋的值相除后的结果再赋给该变量 例如：x /= 3 等价于x = x / 3; %= 将变量与所赋的值求模后的结果再赋给该变量 例如：x %= 3 等价于x = x % 3;,比较运算符, 当左边操作数大于右边操作数时返回true,否则返回false. = 当左边操作数大于等于右边操作数时返回true,否则返回false. = 当左边操作数小于等于右边操作数时返回true,否则返回false. = 当左边操作数等于右边操作数时返回true,否则返回false. != 当左边操作数不等于右边操作数时返回true,否则返回false. 注意：不要将比较运算符“”误写成“”。,逻辑运算符,& 逻辑与，当左右两边操作数都为true时，返回true, 否则返回false. | 逻辑或，当左右两边操作数都为false时，返回false,否则返回true. ! 逻辑非，当操作数为true时返回false, 否则返回true.,位运算符,任何信息在计算机中都是以二进制的形式保存的，位运算用于对操作数中的每一个二进制位进行运算，包括位逻辑运算符和位移运算符。 & 只有参加运算的两位都为1, 运算的结果才为1, 否则为0. | 只有参加运算的两位都为0, 运算的结果才为0, 否则为1. 只有参加运算的两位不同, 运算的结果才为1, 否则为0. 将左边的操作数在内存中的二进制数据右移右边操作数指定的位数，左边移空的部分，补上左边操作数原来的最高位的二进制位值。 将左边操作 数在内存中的二进制数据右移右边操作 数指定的位数，左边移空的部分补0。,程序的流程控制,顺序结构 if条件选择语句 switch选择语句 while循环语句 do while语句 for循环语句 break与continue语句,if条件选择语句,1、 if(条件语句) 执行语句; if(x = null) 或if(typeof(x) =“undefined”) 可以简写成if(!x). 2、if(条件语句） 执行语句块1; else 执行语句2; 三目运算符： 变量 布尔表达式? 语句1：语句2; 例如： y = x 0 ? x : -x; 举例：如果购买金额大于1000，将给与95折的折扣,if条件选择语句,3、if(条件语句1) 执行语句1; else if(条件语句2) 执行语句2; else if(条件语句n) 执行语句n; else 执行语句n+1; ,if语句的嵌套,if(x10) if(y = 1) alert(“ x 10, y = 1”); else alert(“ x 10, y !=1”); ,if练习,制作一个考试成绩自动分级程序 输入学生考试成绩 90分以上，评定为“优” 75到90分，评定为“良” 60到75分，评定为“中” 60分以下，评定为“差” Prompt(“提示内容”,”初始值”),switch选择语句,switch(表达式) case 取值1： 语句块1; break; case 取值2： 语句块2; break; . case 取值n： 语句块n; break; defaule： 语句块n+1; break; ,var x = 2; switch(x) case1: alert(“monday”); break; case 2: alert(“Tuesday”); break; case 3: alert(“wendnesday”); break; default: alert(“sorry, I dont know”); ,case 1: case 2: case 3: case 4: case 5: alert(“working day ”); break; default: alert(“off day”);,switch练习,获取指定月份的天数 根据用户输入月份返回当月天数 例如输入1月 给用户返回1月为31天,while循环语句,while(条件表达式语句) 执行语句块; var x = 1; while(x 3) / 如果这里加上分号会怎样呢？ alert(“x = ”+x); x+; ,do while 语句,do 执行语句块; while(条件表达式语句）; /注意这里的分号, .myfont font-size:150; color:#c99c96; font-family:Webdings /产生埃及图像的特殊字体 document.write(“每个字符都对应一个漂亮的埃及图像“); do var c = prompt(“输入一个字符，输入N 或n停止“,“A“) ; document.write (“+c+“); while (c !=“N“ ,while和dowhile循环,先执行，后判断循环条件,输入一个字符，直到N停止，用哪个循环,font-family:Webdings,for循环语句,for(初始化表达式; 循环条件表达式; 循环后的操作表达式) 执行语句块; var output =“”; for(var x= 1; x , For 循环演示 document.write(“打印金字塔直线“); for (var i= 0; i“); ,for 循环,如何实现,当i=5 时，,break与continue语句,break语句： st: while(true) while(true) break st; ,continue语句： var output= “”; for(var x=1; x10; x+) if(x%2 = 0) continue; output= output +” x = ”+x; alert(output);,练习,制作一个猜数游戏 问题描述： 猜数游戏。要求猜一个介于120之间的数字，根据用户猜测的数与标准值进行对比，并给出提示，以便下次猜测能接近标准值，直到猜中为止。,函数,函数的作用与定义 全局变量与局部变量 参数个数可变的函数 创建动态函数 JavaScript中的系统函数,函数的作用,。 。 函数1 。 。 函数2 。 。 函数1 。 。,主程序,。 函数3 。 。,函数1,。 。 。,函数2,。 。 。,函数3,函数的定义与调用,定义一个函数的格式如下： function 函数名（参数列表） 程序代码： return 表达式; 对函数进行调用的几种方式： 1.函数名（传递给函数的参数1, 传递给函数的参数2, ） 2.变量 函数名（传递给函数的参数1, 传递给函数的参数2, ） 3.对于有返回值的函数调用，也可以在程序中直接使用返回的结果，例如：alert(“sum = ”+square(2, 3);,变量 a、b 和 c 只能 在其各自的函数中 被访问,变量的作用域,脚本,函数function1 局部变量a,函数function2 局部变量b,函数function3 局部变量c,可由函数 1、函数 2 和函数 3 访问,全局变量 gg,全局变量不需要以 var 关键字进行声明，但局部变量则必须 以此关键字来声明,全局变量与局部变量的比较, var msg = “全局变量”; function show() /var msg; msg = “局部变量”; show(); alert(msg); 结果是什么？, var msg=“全局变量”; function square(x, y) var sum; sum = x*x + y*y; return sum; function show() var msg = “局部变量”; alert(msg); /var sum; alert(“sum”+sum); sum = square(2, 3); alert(“sum = ”+sum); show(); ,参数个数可变的函数, function testparams() var params = “”; for(var i=0; i 在函数内部使用arguments对象来访问调用程序传递的所有参数,创建动态函数,创建动态函数的基本语法格式： var varName = new Function(argument1, . , lastArgument); 说明： 所有的参数都必须是字符串型的，最后参数必须是这个动态函数的功能代码。 例子： var square = new Function(“x”, “y”, “var sum; sum = x*x+y*y; return sum;”); alert(square(3, 2); ,JavaScript 函数,内置函数 eval 函数： 用于计算字符串表达式的值 isNaN 函数：用于验证参数是否为 NaN（非数字）,对象,对象与对象实例 构造方法与this关键字的作用 在对象函数中变量作用域的问题 JavaScript的内部对象,JavaScript 对象简介,对象是属性和/方法的组合 属性是对象所拥有的一组外观特征，一般为名词 方法是对象可以执行的功能，一般为动词 例如：汽车,对象：汽车,属性：型号：法拉利 颜色：绿色,方法：前进、刹车、倒车,对象与对象实例,对象中所包含的 变量就是对象的属性； 对属性进行操作的函数就是对象的方法； 对象的属性和方法都叫对象的成员。 对象是对某一类事物的描述，是抽象上的概念; 而对象实例是一类事物中的具体个例。 能够被用来创建对象实例的函数就叫对象的构造函数，只要定义了一个对象的构造函数就等于定义了一个对象，使用new关键字和对象的构造函数就可以创建对象实例，语法格式如下： var objInstance = new ObjName(传递给该对象的实际参数列表);,JavaScript 对象简介,三类对象,浏览器对象,内部对象,HTML 对象,浏览器窗口window 文档 document url地址等,String字符串对象 Date日期对象 Math数学对象等,各种HTML标签: 段落 图片 超链接等, function Person() /构造函数 var person1 = new Person(); /对象实例 person1.age=18; /属性 = “zxx”; /可以为对象实例无限制的添加新成员 /alert(+”+person1.age); function sayFunc() /用“对象实例名.成员名”的格式访问， /也可以使用（对象实例“成员变量名”）的格式。 alert(+”+person1.age); person1.say=sayFunc; person1.say(); ,构造方法与this关键字,为一个对象实例新增加的属性和方法，不会增加到同一个对象所产生的其它对象实例上。 所有的实例对象在创建后都会自动调用构造函数，在构造函数中增加的属性和方法会被增加到每个对象实例上。 对象实例是用new关键字创建的，在构造方法中不要有返回结果的return语句。 调用对象的成员方法时，需要使用“对象实例.成员方法”的形式，很显然，用作成员方法的函数被调用时，一定伴随有某个对象实例。this关键字代表某个成员方法执行时，引用该方法的当前对象实例，所以，this关键字一般只在用作对象方法的函数中出现。, function Person(name, age) this.age = age; = name; this.say = sayFunc; function sayFunc() alert(+” : ”+this.age); var person1 = new Person(“张三”， 18); person1.say(); var person2 = new Person(“李四”，20); person2.say(); ,参数传递问题,将基本数据类型的变量作为函数参数传递的情况： function changeValue(x) x=5; var x = 3; changeValue(x); alert(x); 此外的x值是多少？,参数传递的问题,将对象类型变量作为函数参数传递的情况： function Person(name, age) this.age = age; = name; this.say = sayFunc; function sayFunc() alert( + “ : ”+ this.age); function change(p1) = “李四”; var person1 = new Person(“张三”， 18); change(person1); person1.say(); ,JavaScript的内部对象,动态对象 使用“对象实例名.成员”的格式来访问其属性和方法 静态对象 直接使用“对象名.成员”的格式来访问其属性和方法。 Object对象 String对象 Math对象 Date对象 toString方法,Object对象,Object对象提供了一种创建自定义对象的简单方式，不需要程序员再定义构造函数。 function getAttributeValue(attr) alert(personattr); var person = new Object(); =“zs”; person.age = 18; getAttributeValue(“name”); getAttributeValue(“age”); ,String 对象,创建字符串有两种不同方法 ： 使用 var 语句 var newstr = “这是我的字符串”； 创建 String 对象 var newstr = new String(“这是我的字符串”),String 对象,语法： indexOf(“查找的子字符串”，查找的起始位置) 返回子字符串所在的位置，如果没找到，返回 1 例如： var x var y=“abcdefg”; x=y.indexOf(“c” , 0 ); /返回结果为2，起始位置是0,String对象,charAt方法：返回指定位置的字符 注意：一个字符串的第一个字符的索引位置为0，依次类推。 charCodeAt方法：返回指定位置字符的Unicode编码 lastIndexOf方法：从右向左执行 match、search方法：使用正则表达式搜索 replace方法：使用正则表达式替换 split方法：按照指定分隔符拆分字符串 slice方法：返回两个指定位置的子字符串 说明：str1.slice(0)和str1.slice(0, -1)都是返回整个字符串。 substr、substring方法：返回指定位置和长度的子字符串 注意：substring方法返回的内容不包含结束位置的字符。,Math对象,Math对象是一个静态对象， 不能使用new关键字创建对象实例，应直接使用“对象名。成员”的格式访问其属性或方法，例如： var num = Math.random();,Math 对象,Math.random( ) ：产生01的随机小数 Math.round( )：四舍五入取整，如9.34 取整为9, 自动刷新 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) 产生1-9的数字,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( ),Date 对象,Data 方法的分组：,Date 对象,用作 Date 方法的参数的整数：,Date 对象,Set 方法：,Date 对象,Get 方法：,Date 对象,To 方法：,Parse 方法和 UTC 方法, var now= new Date( ); var hour = now.getHours( ); if (hour=0 ,Date对象,如何实现,获得当前日期和时间,获得小时，即当前是几点,判断上午、下午还是晚上,月份数字011，注意1,Date对象,setTimeout的用法： setTimeout（“调用的函数”,”定时的时间”） 例： var myTimesetTimeout（”disptime( )”,1000）; clearTimeout（myTime）;,隔1000毫秒调用函数disptime( )执行,关闭定时器,本例的时间可以采用定时显示，使用定时器函数，隔1秒调用disptime( )函数显示时间,Date 对象,var myTime = setTimeout(“disptime( )“,1000); 设置定时器隔1秒（1000毫秒），调用函数disptime( )执行，刷新时钟显示,Date 对象,toString方法,toString方法是JavaScript中的所有内部对象的一个成员方法，它的主要作用就是将对象中的数据转换成某种格式的字符串来表示，具体的转换方式取决于对象的类型。 举例： var x = 328; alert(“hes=” + x.toString(16)+ ”bin=”+x.toString(2); ,对象专用语句,1、with语句： with(对象名称) 执行语句块 2、forin语句： for(变量in对象) 执行语句 ,with举例, var current_time = new Date(); with(current_time) var strDate = getYear()+”年”; strDate += getMonth()+”月”; strDate += getDate() + “日”; strDate += getHours()