第二章javascript介绍.ppt

《第二章javascript介绍.ppt》由会员分享，可在线阅读，更多相关《第二章javascript介绍.ppt（59页珍藏版）》请在三一文库上搜索。

1、第2章,JavaScript基础,叶晓鸣 ,2019/8/26,2,主要内容,JavaScript简介 *.js文件 变量与作用域 数据类型 运算符 数组与函数 控制语句,2019/8/26,3,什么是JavaScript -1,一万元整,Jeny Smiss,10,000,Jeny Smiss,A/c No. 010077,瑞士银行,Jeny 想在银行存钱,验证 Jeny 帐户详细信息,余额,帐号,签名,帐户验证完毕,2019/8/26,4,什么是JavaScript -2,同样，,Jeny,Jeny 想创建一个电子邮件帐户,J * 24 US,帐户 Id： 密码： 年龄： 国家：,*,这样

2、，JavaScript 将验证数据并给出错误信息,2019/8/26,5,什么是JavaScript,JavaScript 是一种脚本语言 提供用户交互 动态更改内容 数据验证,2019/8/26,6,JavaScript的概念以及特点,JavaScript是一种基于对象(Object)和事件驱动(Event Driven)并具有安全性能的脚本语言。 它是通过嵌入或调入在标准的HTML语言中实现的。它的出现弥补了HTML语言的缺陷，可以开发客户端的应用程序。,2019/8/26,7,JavaScript的概念以及特点,JavaScript具有以下几个基本特点： 是一种脚本编写语言 基于对象的语

3、言，提供面向对象支持 简单性 动态性 跨平台性 典型应用： 客户端交互 数据验证 广告显示 网页特效,2019/8/26,8,将JavaScript嵌入网页,可以将 JavaScript 语句插入 HTML 文档，方式 如下： 使用 标签将语句嵌入文档 将 JavaScript 源文件链接到 HTML 文档中,2019/8/26,9,使用 Script 标签,JavaScript 代码, document.write(“欢迎来到 JavaScript 世界“); 尽情享受学习的快乐! ,脚本代码,设置语言,2019/8/26,10,语句-简单语句,JavaScript的代码语句由一行中的一个或

4、多个项和符号组成。 每行开始一条新的语句，不过显式地终止语句是一个好方法。可以用分号（;）来实现，分号是 JavaScript的终止字符。,var name = “Robin“; var today = new Date();,2019/8/26,11,语句-复合语句,用大括号括起来的一组 语句称为复 合语句。 if (xy) t=x; x=y; 由三个简单语句构成一个复合语句 y=t; ,2019/8/26,12,JavaScript的标识和说明语句,2019/8/26,13,使用外部 JS 文件,外部 JavaScript 文件可以链接到 HTML 文档中 SCRIPT 标签的 SRC（源

5、文件）属性可用于包括此外部文件,2019/8/26,14,使用外部 JS 文件,JavaScript 代码 (test.htm), 使用外部文件 以上文本是通过访问外部 JavaScript 文件显示的 ,2019/8/26,15,JavaScript有许多保留关键字。这些关键字可分为三种类型： JavaScript保留关键字 将来的保留字 应避免的单词.,JavaScript的保留关键字,2019/8/26,16,JavaScript的保留关键字,2019/8/26,17,JavaScript的数据类型,变量,2019/8/26,18,JavaScript中采用弱类型变量，变量可以不做声明和

6、不做类型说明，而在使用或赋值时确定类型。 但为了形成良好的编程风格，变量应该采取先定义再使用的方法。JavaScript中变量的定义用关键字var来实现。,变量,2019/8/26,19,变量,变量名不能与保留字冲突。 变量名必须以字母或者下划线（_）开头，不能用数字或者其他非字母字符作为变量名开头。 变量名中不能包含空格。 JavaScript是区分大小写的，所以给变量命名时要考虑大小写的问题。 myVar、 myVAR 、myvar,2019/8/26,20,声明变量,var a; “var” 用于声明变量的关键字 “a” 变量名,同时声明和初始化变量 var a= 10;,a = 10;

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

8、被访问,变量的作用域,脚本,函数function1 局部变量a,函数function2 局部变量b,函数function3 局部变量c,可由函数 1、函数 2 和函数 3 访问,全局变量 gg,2019/8/26,23,常量,整型 浮点型 字符串型,2019/8/26,24,数据类型,JavaScript有6种数据类型。主要的类型有Number、String、Object以及Boolean，其他两种类型为Null和Undefined。,2019/8/26,25,数据类型,2019/8/26,26,字符串是用单引号或双引号来说明的 （使用单引号来输入包含引号的字符串）。 一个字符串也是JavaS

9、cript中的一个对象，不过是个特殊情形，有专门的属性。下面是字符串的示例： “The cow jumped over the moon.“ “Avast, ye lubbers!“ roared the technician. “42“,String数据类型,2019/8/26,27,Boolean类型 可能的Boolean值有true和false。这是两个特殊值，不能用作1和0。 Undefined数据类型 一个为undefined的值就是指在变量被创建后，未给该变量赋以前所具有的值。 Null数据类型 null值就是没有任何值，什么也不表示。,其他类型,2019/8/26,28, var

10、 x=100; var y; var z; document.write(“竞拍SONY数码相机 600万像素“ +x+“$起价“); y=prompt(“加多少银子？“,“1“); z=x+y; alert(“您最终的出价n“+z+“$“); /”n”用于换行显示 ,Prompt函数返回输入的字符串,“+”号的用法,100200 ? bug,+字符串相连：100+”200”,200,2019/8/26,29, var x=100; var y; var z; document.write(“竞拍SONY数码相机 600万像素“ +x+“$起价“); y=prompt(“加多少银子？“,“1“

11、); z=x+parseFloat( y ); alert(“您最终的出价n“+z+“$“); /”n”用于换行显示 ,parseFloat( )函数将字符串转换为float数据 parseInt( )函数将字符串转换为int数据 如果转换失败，返回NaN值(not a number),“+”号的用法,2019/8/26,30,运算符,运算符对一个或多个变量或值（操作数）进行运算，并返回一个新值 根据所执行的运算，运算符可分为以下类别： 算术运算符 比较运算符 逻辑运算符,2019/8/26,31,算术运算符,2019/8/26,32,算术运算符,实现步骤： 1.设计页面 2.指定各个文本框的

12、名称 3.编写脚本代码 4.浏览并调试,2019/8/26,33, function calcu( ) var numb1= document.calc.num1.value; var numb2= document.getElementById(“num2“).value; var total=parseFloat(numb1)*parseFloat(numb2); document.calc.result.value=total; ,计算总价并显示, ,添加单击事件，单击按钮时调用“calcu()” 函数,算术运算符,获取表单中输入的数据： document.表单名.表单元素名.value

13、,定义calcu( )计算函数,实现两个数相乘的功能.定义函数的语法： function 函数名(参数列表) /JavaScript语句； ,2019/8/26,34,比较运算符,2019/8/26,35, 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(“购买

14、总价超过500n支付时将赠送超级Q币2枚！“); .其他代码略，同上例,比较运算符,购买总价超过500， 赠送超级Q币2枚！,2019/8/26,36,逻辑运算符,逻辑运算符,2019/8/26,37, 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) .其他代码略，同上例,

15、逻辑运算符,5001000 之间，赠送超级Q币两枚； 10002000之间，赠送IBM智能鼠标一只； 2000以上，直接与贵宾台联系。,2019/8/26,38,JavaScript 的 事 件,JavaScript事件主要包括超级连接事件、浏览器事件和界面事件三大类。界面事件包括Click（单击）、Mouse（鼠标移出）、MouseOver（鼠标移过）和MouseDown（鼠标按下）等。,2019/8/26,39,数组,常用属性 length ：返回数组中元素的个数 常用方法,2019/8/26,40, var emp = new Array(3); emp0 = “Ryan Dias“;

16、emp1 = “Graham Browne“; emp2 = “David Greene“; emp.sort( ); document.write(“排序结果是：“); document.write(emp0+“); document.write(emp1+“); document.write(emp2+“); ,数组排序,2019/8/26,41,JavaScript 函数,内置函数 eval 函数： 用于计算字符串表达式的值 isNaN 函数：用于验证参数是否为 NaN（非数字）,2019/8/26,42,JavaScript内置对象 -时间,时间对象是JavaScript的内置对象，使

17、用前必须先申明。 语法：var curr=new Date(); 注意Date()的首字母必须大写。,2019/8/26,43, var curr=new Date(); document.write(“今天是“); switch(curr.getDay() case 0:document.write(“周日,休息了！“);break; case 1:document.write(“周一,需要工作！“);break; case 2:document.write(“周二,需要工作！“);break; case 3:document.write(“周三,需要工作！“);break; case 4:

18、document.write(“周四,需要工作！“);break; case 5:document.write(“周五,需要工作！“);break; case 6:document.write(“周六,休息了！“);break; ,JavaScript内置对象 -时间,2019/8/26,44,JavaScript内置对象 -时间,2019/8/26,45,Math对象可以用来处理种种数学运算。 Math对象的内置方法定义了各种数学运算和可以直接调用的Math对象的方法 语法：Math.数学函数（参数）,JavaScript内置对象 - Math,Math.abs(number) Math.s

19、in(number) Math.cos(number),2019/8/26,46, function rnd() var a = Math.random(1); alert(“0-1的随机数为：“+a); ,2019/8/26,47,一般利用String对象提供的函数来处理字符串。String对字符串的处理主要提供了下列方法。 charAt(idx) indexOf(chr) lastIndexOf(chr) toLowerCase() toUpperCase(),JavaScript内置对象 - String,2019/8/26,48, var str = “I AM A CHINESE,

20、I LIKE CHINA!“; a = str.charAt(7); b = str.indexOf(“a“); c = str.lastIndexOf(“A“); d = str.toUpperCase(); document.write(a + “); document.write(b + “) document.write(c + “) document.write(d + “) ,JavaScript内置对象 - String,2019/8/26,49,自定义函数,定义函数： function 函数名( 参数1,参数2， ) 语句; 调用函数： 函数调用一般和表单元素的事件一起使用，调

21、用格式为： 事件名“函数名” ;,function sum ( one, two) var result = one + two; return result; ,表示单击此按钮时，调用函数sum( )执行,2019/8/26,50,函数的应用,num1,num2,result,2019/8/26,51,定义函数,定义函数compute( )，完成计算的功能。op参数代表运算符号,2019/8/26,52,调用函数, 第一个数 第二个数 计算结果 ,2019/8/26,53,If语句,分支结构：,2019/8/26,54,switch语句,分支结构：,2019/8/26,55, For 循环演

22、示 document.write(“打印金字塔直线“); for (var i= 0; i“); ,for循环 例： var i; for (i=0; i10; i+) / 语句; ,for 循环,如何实现,当i=5 时，,2019/8/26,56, document.write(“每个字符都对应一个漂亮的埃及图像“); do var c = prompt(“输入一个字符，输入N 或n停止“,“A“) ; document.write (“+c+“); while (c !=“N“ ,while循环 while(循环条件) /语句； dowhile循环 do /语句； while(循环条件);

23、,while和dowhile循环,先执行，后判断循环条件,输入一个字符，直到N停止，用哪个循环,2019/8/26,57,总结,变量与作用域 数据类型 弱类型 JavaScript包含几种数据类型 运算符 算术运算符、比较运算符、逻辑运算符、 数组与函数 控制语句 条件 循环,2019/8/26,58,.下面哪一种不是脚本语言( )。 AJavaScript B.Java C.VBScript D.Jscript .( )元素用来在HTML中嵌入JavaScript。 A.SCRIPT B.STYLE C.OBJECT D.LINK .JavaScript提供了很多内置的对象，其中用来实现日期和时间操作的对象是( ) 。 A.Date B.Math C.String D.Array .JavaScript中具有打开或关闭浏览器窗口功能的对象是 ( )。 A.document B.window C.navigator D.history .JavaScript支持很多类型的事件，如onCfick、onLoad、 onFocus等，其中常用在按钮上的事件是( )。 A.onLoad B.onFocus C.onClick D.onMouseOver,习题,2019/8/26,59,作业,制作简单计算器,