JavaScript基本.ppt

《JavaScript基本.ppt》由会员分享，可在线阅读，更多相关《JavaScript基本.ppt（65页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、JavaScript 基础,2,什么是JavaScript,JavaScript 是一种脚本语言 提供用户交互 动态更改内容 数据验证,3,将JavaScript嵌入网页,可以将 JavaScript 语句插入 HTML 文档，方式 如下： 使用 标签将语句嵌入文档 将 JavaScript 源文件链接到 HTML 文档中,4,使用 Script 标签,JavaScript 代码, document.write(欢迎来到 JavaScript 世界); 尽情享受学习的快乐! ,脚本代码,设置语言,5,使用外部 JS 文件,外部 JavaScript 文件可以链接到 HTML 文档中 SCRIP

2、T 标签的 SRC（源文件）属性可用于包括此外部文件,6,使用外部 JS 文件,JavaScript 代码 (test.htm), 使用外部文件 以上文本是通过访问外部 JavaScript 文件显示的 ,7,变量,变量名必须以字母或下划线（_）开头 变量可以包含数字、从 A 至 Z 的大小写字母 JavaScript 区分大小写，即变量 myVar、 myVAR 和 myvar 是不同的变量,8,声明变量,var a; “var” 用于声明变量的关键字 “a” 变量名,同时声明和初始化变量 var a= 10;,a = 10;,声明变量,声明多个变量 var x, y, z = 10;,赋值

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

4、量c,可由函数 1、函数 2 和函数 3 访问,全局变量 gg,全局变量不需要以 var 关键字进行声明，但局部变量则必须 以此关键字来声明,11,常量,整型 浮点型 字符串型,和C语言一样，js也有转义字符，常用的就是： “ n ”,12,数据类型,13, 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,1

5、4, 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),“+”号的用法-2,15,运算符,运算符对一个或多个变量或值（操作数）进行运算，并返 回一个新值 根据所执行的运算，运算符可分为以下类别： 算术运

6、算符 比较运算符 逻辑运算符,16,运算符,17,算术运算符-1,18, function calcu( ) var numb1= document.calc.num1.value; var numb2= document.calc.num2.value; var total=parseFloat(numb1)*parseFloat(numb2); document.calc.result.value=total; ,计算总价并显示, ,添加单击事件，单击按钮时调用“calcu()” 函数,算术运算符-2,获取表单中输入的数据： document.表单名.表单元素名.value,定义calcu

7、( )计算函数,实现两个数相乘的功能.定义函数的语法： function 函数名(参数列表) /JavaScript语句； ,19,比较运算符,比较运算符 2-1,20, function calcu() var numb1= document.calc.num1.value; var numb2= document.calc.num2.value; var total= parseFloat(numb1)*parseFloat(numb2); document.calc.result.value=total; if (total500) alert(购买总价超过500n支付时将赠送超级Q币2

8、枚！); .其他代码略，同上例,比较运算符,购买总价超过500， 赠送超级Q币2枚！,21,运算符,逻辑运算符,22, function calcu() var numb1= document.calc.num1.value; var numb2= document.calc.num2.value; var total= parseFloat(numb1)*parseFloat(numb2); document.calc.result.value=total; if (total500) .其他代码略，同上例,逻辑运算符,5001000 之间，赠送超级Q币两枚； 10002000之间，赠送IB

9、M智能鼠标一只； 2000以上，直接与贵宾台联系。,23,条件语句用于测试条件。,if(条件) JavaScript代码; ,语法：,if 语句 2-1,如果要执行多个语句，必须将这些语句放在一对大括号 ( ) 内。但如果只要执行一个语句，则可以省略大括号,24, function calcu() var numb1= document.calc.num1.value; var numb2= document.calc.num2.value; if (numb1!=) .其他代码略，同上例,If语句 2-2,如果输入框中的数据用户漏填了， 出现NaN的 bug 为什么呢?,25,if else

10、 语句 2-1,if(条件) /JavaScript代码; else /JavaScript代码; ,语法：,26, function calcu() var numb1= document.calc.num1.value; var numb2= document.calc.num2.value; if (numb1!=) ,If-else语句 2-2,提示没有填写购买数量或者竞拍价格?,27,if (条件1) if (条件2) /JavaScript代码; ,语法：,嵌套 if 语句 2-1,28, function calcu() var numb1= document.calc.num1

11、.value; var numb2= document.calc.num2.value; if (numb1!=) .,嵌套If语句 2-2,购买数量无意中输入负数，出现 bug 怎么办?,29,switch 语句 2-1,switch (表达式) case 常量1 : JavaScript语句; break; case 常量2 : JavaScript语句; break; . default : JavaScript语句; ,语法：,30,练 习,银行转帐 打6折 电话支付 打7折 邮政汇款 打8折 Q币支付 打9折,31,. var f=document.calc.pay.value; /

12、支付方式代号 var grade; /折扣率 var total= parseFloat(numb1)*parseFloat(numb2); switch(parseInt(f) case 1: grade=0.6 ; /打6折优惠 break; case 2: .同理其他方式打7折、八折 case 4: grade=0.9 ; /打9折优惠 break; default: alert(请重新选择支付方式！); return; var money=total*grade; /根据折扣率，计算实际总价 document.calc.result.value=money; alert(您享受了+gr

13、ade*10+折优惠！); .,32,数组 4-1,声明数组 var 数组名 = new Array(数组大小); 例： var emp = new Array(3) 添加元素 emp0 = “AA; emp1 = “BB; emp2 = “CC;,emp,也可以声明数组并赋初值： 例： var emp=new Array(“AA”，“BB”，“CC”)；,33, 使用数组 var emp = new Array(3); emp0 = Ryan Dias; emp1 = Graham Browne; emp2 = David Greene; document.write(数组emp中的数据为:

14、); document.write(emp0+); document.write(emp1+); document.write(emp2+); ,数组 4-2,34,数组 4-3,常用属性 length ：返回数组中元素的个数 常用方法,35, var emp = new Array(3); emp0 = Ryan Dias; emp1 = Graham Browne; emp2 = David Greene; emp.sort( ); document.write(“排序结果是：); document.write(emp0+); document.write(emp1+); document

15、.write(emp2+); ,数组排序 4-2,36,循环,for循环 do-while while,37,for循环 例： var i; for (i=0; i10; i+) / 语句; ,for 循环,如何实现？,38,for 循环, For 循环演示 document.write(打印金字塔直线); for (var i= 0; i); ,39,while循环 while(循环条件) /语句； dowhile循环 do /语句； while(循环条件);,while和dowhile循环,先执行，后判断循环条件,40,输入一个字符，直到N停止，用哪个循环,41,while和dowhile

16、循环, .myfont font-size:150; color:#c99c96; font-family:Webdings /产生埃及图像的特殊字体 document.write(每个字符都对应一个漂亮的埃及图像); do var c = prompt(输入一个字符，输入N 或n停止,A) ; document.write (+c+); while (c !=N ,42,JavaScript 函数,内置函数 eval 函数： 用于计算字符串表达式的值 isNaN 函数：用于验证参数是否为 NaN（非数字）,43,JavaScript 函数,44,自定义函数,定义函数： function 函数

17、名( 参数1,参数2， ) 语句; 调用函数：函数调用一般和表单元素的事件一起使用，调用格式为：事件名“函数名” ;,function sum ( one, two) var result = one + two; return result; ,表示单击此按钮时，调用函数sum( )执行,45,函数的应用,num1,num2,result,46,定义函数,定义函数compute( )，完成计算的功能。op参数代表运算符号,47,调用函数, 第一个数 第二个数 计算结果 ,48,JavaScript 对象简介 2-1,对象是属性和/方法的组合 属性是对象所拥有的一组外观特征，一般为名词 方法是

18、对象可以执行的功能，一般为动词 例如：汽车,对象：汽车,属性：型号：法拉利 颜色：绿色,方法：前进、刹车、倒车,49,JavaScript 对象简介2-2,三类对象,浏览器对象,脚本对象,HTML 对象,浏览器窗口window 文档 document url地址等,String字符串对象 Date日期对象 Math数学对象等,各种HTML标签: 段落 图片 超链接等,50,String 对象 3-1,创建字符串有两种不同方法 ： 使用 var 语句 var newstr = “这是我的字符串 创建 String 对象 var newstr = new String (“这是我的字符串),51,

19、String 对象 3-2,语法： indexOf(“查找的子字符串”，查找的起始位置) 返回子字符串所在的位置，如果没找到，返回 1 例如： var x var y=“abcdefg”; x=y.indexOf(“c” , 0 ); /返回结果为2，起始位置是0,52, function checkEmail( ) var e=document.myform.email.value; if (e.length=0) /检测长度是否为0，即是否为空 alert(电子邮件不能为空!); return ; if (e.indexOf(,0)=-1) /检测是否包含”符号 alert(电子邮件格式不

20、正确n必须包含符号！); return ; if (e.indexOf(.,0)=-1) /检测是否包含”.”符号 alert(电子邮件格式不正确n必须包含.符号！); return ; document.write(恭喜您！，注册成功！欢迎进入古城热线！); ,检查电子邮件email 是否包含“”和”.”,String 对象 3-3,返回结果-1表示没找到“”字符,53,Math 对象 2-1,Math.random( ) ：产生01的随机小数 Math.round( )：四舍五入取整，如9.34 取整为9,54,Math 对象 2-2,假定随机产生的数字i=3，上述代码即为： 显示第三幅图

21、片（3.jpg）,如何实现？,每隔2秒刷新网页,55,Math 对象, 自动刷新 document.write(2秒自动刷新，随机显示图片); var i=0; i=Math.round(Math.random( )*8+1); document.write(); ,56,Date 对象10-1,Date 对象存储的日期为自 1970 年 1 月 1 日 00:00:00 以来的毫秒数,var 日期对象 = new Date (年、月、日等参数),例： var mydate=new Date( “July 29, 1998,10:30:00 ”) 如果没有参数，表示当前日期和时间 例： var

22、 today = new Date( ),57,Date 对象10-2,Data 方法的分组：,58,Date 对象10-3,用作 Date 方法的参数的整数：,59,Date 对象10-4,Set 方法：,60,Date 对象10-5,Get 方法：,61,Date 对象10-6,To 方法：,Parse 方法和 UTC 方法,62, var now= new Date( ); var hour = now.getHours( ); if (hour=0 ,Date对象 10-7,获得当前日期和时间,获得小时，即当前是几点,判断上午、下午还是晚上,月份数字011，注意1,63,Date对象

23、10-8,setTimeout的用法： setTimeout（“调用的函数”,”定时的时间”） 例： var myTimesetTimeout（”disptime( )”,1000）; clearTimeout（myTime）;,本例的时间可以采用定时显示，使用定时器函数，每隔1秒调用disptime( )函数显示时间,每隔1000毫秒调用函数disptime( )执行,关闭定时器,64,Date 对象10-8,var myTime = setTimeout(disptime( ),1000); 设置定时器每隔1秒（1000毫秒），调用函数disptime( )执行，刷新时钟显示,65,Date对象 10-10, ,设置样式：无边框的文本框,Onload ( ) 事件，页面加载就调用函数：disptime （显示时间）,