《javascript介绍》PPT课件.ppt

第2章,JavaScript基础,叶晓鸣yxm555111,2019/12/5,2,主要内容,JavaScript简介*.js文件变量与作用域数据类型运算符数组与函数控制语句,2019/12/5,3,什么是JavaScript-1,一万元整,JenySmiss,10,000,JenySmiss,A/cNo.010077,瑞士银行,Jeny想在银行存钱,验证Jeny帐户详细信息,余额,帐号,签名,帐户验证完毕,2019/12/5,4,什么是JavaScript-2,同样，,Jeny,Jeny想创建一个电子邮件帐户,Jeny*24US,帐户Id：密码：年龄：国家：,*,这样，JavaScript将验证数据并给出错误信息,2019/12/5,5,什么是JavaScript,JavaScript是一种脚本语言提供用户交互动态更改内容数据验证,2019/12/5,6,JavaScript的概念以及特点,JavaScript是一种基于对象(Object)和事件驱动(EventDriven)并具有安全性能的脚本语言。它是通过嵌入或调入在标准的HTML语言中实现的。它的出现弥补了HTML语言的缺陷，可以开发客户端的应用程序。,2019/12/5,7,JavaScript的概念以及特点,JavaScript具有以下几个基本特点：是一种脚本编写语言基于对象的语言，提供面向对象支持简单性动态性跨平台性典型应用：客户端交互数据验证广告显示网页特效,2019/12/5,8,将JavaScript嵌入网页,可以将JavaScript语句插入HTML文档，方式如下：使用标签将语句嵌入文档将JavaScript源文件链接到HTML文档中,2019/12/5,9,使用Script标签,JavaScript代码,document.write(欢迎来到JavaScript世界);尽情享受学习的快乐!,脚本代码,设置语言,2019/12/5,10,语句-简单语句,JavaScript的代码语句由一行中的一个或多个项和符号组成。每行开始一条新的语句，不过显式地终止语句是一个好方法。可以用分号（;）来实现，分号是JavaScript的终止字符。,varname=Robin;vartoday=newDate();,2019/12/5,11,语句-复合语句,用大括号括起来的一组语句称为复合语句。if(xy)t=x;x=y;由三个简单语句构成一个复合语句y=t;,2019/12/5,12,JavaScript的标识和说明语句,2019/12/5,13,使用外部JS文件,外部JavaScript文件可以链接到HTML文档中SCRIPT标签的SRC（源文件）属性可用于包括此外部文件,2019/12/5,14,使用外部JS文件,JavaScript代码(test.htm),使用外部文件以上文本是通过访问外部JavaScript文件显示的,2019/12/5,15,JavaScript有许多保留关键字。这些关键字可分为三种类型：JavaScript保留关键字将来的保留字应避免的单词.,JavaScript的保留关键字,2019/12/5,16,JavaScript的保留关键字,2019/12/5,17,JavaScript的数据类型,变量,2019/12/5,18,JavaScript中采用弱类型变量，变量可以不做声明和不做类型说明，而在使用或赋值时确定类型。但为了形成良好的编程风格，变量应该采取先定义再使用的方法。JavaScript中变量的定义用关键字var来实现。,变量,2019/12/5,19,变量,变量名不能与保留字冲突。变量名必须以字母或者下划线（_）开头，不能用数字或者其他非字母字符作为变量名开头。变量名中不能包含空格。JavaScript是区分大小写的，所以给变量命名时要考虑大小写的问题。myVar、myVAR、myvar,2019/12/5,20,声明变量,vara;“var”用于声明变量的关键字“a”变量名,同时声明和初始化变量vara=10;,a=10;,声明变量,声明多个变量varx,y,z=10;,赋值,2019/12/5,21,声明变量,使用变量varx;x=prompt(淘宝网竟拍，请出一口价,1);document.write(拍卖价格+x+)/+用来连接多个字符串document.write(恭喜您，您以最高价拍卖成功！);alert(欢迎下次光临！);,定义变量,赋值,输出,prompt(“提示信息”,”默认值”)将弹出提示对话框，接受用户的输入。点击确定返回输入的字符串，点击取消返回空字符串。,2019/12/5,22,变量a、b和c只能在其各自的函数中被访问,变量的作用域,脚本,函数function1局部变量a,函数function2局部变量b,函数function3局部变量c,可由函数1、函数2和函数3访问,全局变量gg,2019/12/5,23,常量,整型浮点型字符串型,2019/12/5,24,数据类型,JavaScript有6种数据类型。主要的类型有Number、String、Object以及Boolean，其他两种类型为Null和Undefined。,2019/12/5,25,数据类型,2019/12/5,26,字符串是用单引号或双引号来说明的（使用单引号来输入包含引号的字符串）。一个字符串也是JavaScript中的一个对象，不过是个特殊情形，有专门的属性。下面是字符串的示例：Thecowjumpedoverthemoon.Avast,yelubbers!roaredthetechnician.42,String数据类型,2019/12/5,27,Boolean类型可能的Boolean值有true和false。这是两个特殊值，不能用作1和0。Undefined数据类型一个为undefined的值就是指在变量被创建后，未给该变量赋以前所具有的值。Null数据类型null值就是没有任何值，什么也不表示。,其他类型,2019/12/5,28,varx=100;vary;varz;document.write(竞拍SONY数码相机600万像素+x+$起价);y=prompt(加多少银子？,1);z=x+y;alert(您最终的出价n+z+$);/”n”用于换行显示,Prompt函数返回输入的字符串,“+”号的用法,100200?bug,+字符串相连：100+”200”,200,2019/12/5,29,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),“+”号的用法,2019/12/5,30,运算符,运算符对一个或多个变量或值（操作数）进行运算，并返回一个新值根据所执行的运算，运算符可分为以下类别：算术运算符比较运算符逻辑运算符,2019/12/5,31,算术运算符,2019/12/5,32,算术运算符,实现步骤：1.设计页面2.指定各个文本框的名称3.编写脚本代码4.浏览并调试,2019/12/5,33,functioncalcu()varnumb1=document.calc.num1.value;varnumb2=document.getElementById(num2).value;vartotal=parseFloat(numb1)*parseFloat(numb2);document.calc.result.value=total;,计算总价并显示,添加单击事件，单击按钮时调用“calcu()”函数,算术运算符,获取表单中输入的数据：document.表单名.表单元素名.value,定义calcu()计算函数,实现两个数相乘的功能.定义函数的语法：function函数名(参数列表)/JavaScript语句；,2019/12/5,34,比较运算符,2019/12/5,35,functioncalcu()varnumb1=document.calc.num1.value;varnumb2=document.calc.num2.value;vartotal=parseFloat(numb1)*parseFloat(numb2);document.calc.result.value=total;if(total500)alert(购买总价超过500n支付时将赠送超级Q币2枚！);.其他代码略，同上例,比较运算符,购买总价超过500，赠送超级Q币2枚！,2019/12/5,36,逻辑运算符,逻辑运算符,2019/12/5,37,functioncalcu()varnumb1=document.calc.num1.value;varnumb2=document.calc.num2.value;vartotal=parseFloat(numb1)*parseFloat(numb2);document.calc.result.value=total;if(total500).其他代码略，同上例,逻辑运算符,5001000之间，赠送超级Q币两枚；10002000之间，赠送IBM智能鼠标一只；2000以上，直接与贵宾台联系。,2019/12/5,38,JavaScript的事件,JavaScript事件主要包括超级连接事件、浏览器事件和界面事件三大类。界面事件包括Click（单击）、Mouse（鼠标移出）、MouseOver（鼠标移过）和MouseDown（鼠标按下）等。,2019/12/5,39,数组,常用属性length：返回数组中元素的个数常用方法,2019/12/5,40,varemp=newArray(3);emp0=RyanDias;emp1=GrahamBrowne;emp2=DavidGreene;emp.sort();document.write(“排序结果是：);document.write(emp0+);document.write(emp1+);document.write(emp2+);,数组排序,2019/12/5,41,JavaScript函数,内置函数eval函数：用于计算字符串表达式的值isNaN函数：用于验证参数是否为NaN（非数字）,2019/12/5,42,JavaScript内置对象-时间,时间对象是JavaScript的内置对象，使用前必须先申明。语法：varcurr=newDate();注意Date()的首字母必须大写。,2019/12/5,43,varcurr=newDate();document.write(今天是);switch(curr.getDay()case0:document.write(周日,休息了！);break;case1:document.write(周一,需要工作！);break;case2:document.write(周二,需要工作！);break;case3:document.write(周三,需要工作！);break;case4:document.write(周四,需要工作！);break;case5:document.write(周五,需要工作！);break;case6:document.write(周六,休息了！);break;,JavaScript内置对象-时间,2019/12/5,44,JavaScript内置对象-时间,2019/12/5,45,Math对象可以用来处理种种数学运算。Math对象的内置方法定义了各种数学运算和可以直接调用的Math对象的方法语法：Math.数学函数（参数）,JavaScript内置对象-Math,Math.abs(number)Math.sin(number)Math.cos(number),2019/12/5,46,functionrnd()vara=Math.random(1);alert(0-1的随机数为：+a);,2019/12/5,47,一般利用String对象提供的函数来处理字符串。String对字符串的处理主要提供了下列方法。charAt(idx)indexOf(chr)lastIndexOf(chr)toLowerCase()toUpperCase(),JavaScript内置对象-String,2019/12/5,48,varstr=IAMACHINESE,ILIKECHINA!;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/12/5,49,自定义函数,定义函数：function函数名(参数1,参数2，)语句;调用函数：函数调用一般和表单元素的事件一起使用，调用格式为：事件名“函数名”;,functionsum(one,two)varresult=one+two;returnresult;,表示单击此按钮时，调用函数sum()执行,2019/12/5,50,函数的应用,num1,num2,result,2019/12/5,51,定义函数,定义函数compute()，完成计算的功能。op参数代表运算符号,2019/12/5,52,调用函数,第一个数第二个数计算结果,2019/12/5,53,If语句,分支结构：,2019/12/5,54,switch语句,分支结构：,2019/12/5,55,For循环演示document.write(打印金字塔直线);for(vari=0;i);,for循环例：vari;for(i=0;i10;i+)/语句;,for循环,如何实现,当i=5时，,2019/12/5,56,docume