JavaScript语法

单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,*,第六章,JavaScript 语法基础,目标,理解什么是 JavaScript,如何将 JavaScript 嵌入到 HTML 中,理解变量、数据类型和运算符,掌握 if-else 和 switch 语句,2,Swiss Bank,Florida,USA,dollar,110089778,“67 89 005 90”,$,什么是JavaScript 3-1,一万元整,Jeny Smiss,J.Smiss,.,10,000/-,Jeny Smiss,A/c No.,010077,瑞士银行,Jeny 想在银行存钱,验证 Jeny 帐户详细信息,余额,帐号,签名,帐户验证完毕,3,什么是JavaScript 3-2,同样，,Jeny,Jeny 想创建一个电子邮件帐户,*,24,US,帐户 Id：,密码：,年龄：,国家：,提交,提交,*,请等待，正在,创建您的帐户,OK,提交,提交,这样，JavaScript 将验证数据并给出错误信息（如有）,错误消息,密码不能,少于六位!,4,什么是JavaScript,JavaScript 是一种脚本,语言,提供用户交互,动态更改内容,数据验证,5,将,JavaScript,嵌入网页,可以将 JavaScript 语句插入 HTML 文档，方式,如下：,使用 标签将语句嵌入文档,将 JavaScript 源文件链接到 HTML 文档中,6,使用 Script 标签,JavaScript 代码,document.write(欢迎来到 JavaScript 世界);,尽情享受学习的快乐!,脚本代码,设置语言,7,使用外部 JS 文件,外部 JavaScript 文件可以链接到 HTML 文档中,SCRIPT 标签的 SRC（源文件）属性可用于包括此外部文件,8,使用外部 JS 文件,JavaScript 代码(test.htm),使用外部文件,以上文本是通过访问外部 JavaScript 文件显示的,document.write(喂！你好吗?),JavaScript 代码(test.js),9,变量,变量名必须以字母或下划线（,_）开头,变量可以包含数字、从 A 至 Z 的大小写字母,JavaScript,区分大小写，即变量,myVar,、,myVAR,和,myvar,是不同的变量,10,声明变量,v,ar,a,;,“var”用于声明变量的关键字,“a”变量名,同时声明和初始化变量,v,ar a=10;,a,=10;,声明变量,声明多个变量,v,ar x,y,z=10;,赋值,11,声明变量,使用变量,var,x;,x=,prompt,(淘宝网竟拍，请出一口价,1);,document.write,(拍卖价格,+,x,+,)/+用来连接多个字符串,document.write(恭喜您，您以最高价拍卖成功！);,alert,(欢迎下次光临！);,定义变量,赋 值,输 出,prompt(“提示信息”,”默认值”),将弹出提示对话框，接受用户的输入。点击确定返回输入的字符串，点击取消反馈空字符串。,12,变量 a、b 和 c 只能,在其各自的函数中,被访问,变量的作用域,脚本,函数function1,局部变量a,函数function,2,局部变量b,函数function3,局部变量c,可由函数 1、函数 2 和函数 3 访问,全局变量 gg,全局变量不需要以 var 关键字进行声明，但局部变量则必须,以此关键字来声明,13,浮点型浮点型字面量至少必须含有一个数字。此数字可包含小数点或采用科学记数法表示的数字。科学记数法中的整数可以是正整数,(,+),或负整数,(,-)，,指数,(e),表示“十次幂”。例如,10.24,、,1.20e+22、4E-8、.1815,等。,常量,整型,浮点型,字符串型,字 符,说 明,示 例,b,退格符,alert,(“这是第一句,b 这是第二句”),f,换页符,alert,(“这是第一局,f 这是第二句”),n,换行符,alert,(“这是第一局,n 这是第二句”),r,回车符,alert,(“这是第一局,r 这是第二句”),t,制表符,alert,(“这是第一局,t 这是第二句”),和C语言一样，,js,也有转义字符，常用的就是,：,“n”,14,数据类型,数据类型,说 明,示 例,数字型,整数或实数,487,25.95,逻辑型或布尔型,执行逻辑运算,t,ru,或,f,alse,字符串型,一组字符,“Hello”,空,特殊关键字，表示不存在的值。,null,15,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,+字符串相连：100+”200”,200,16,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,17,运算符,运算符对一个或多个变量或值（操作数）进行运算，并返,回一个新值,根据所执行的运算，运算符可分为以下类别：,算术运算符,比较运算符,逻辑运算符,18,运算符,运算符,说 明,示 例,+,加,a,=5+8,-,减,a,=8-5,/,除,a,=20/5,*,乘,a,=5*19,%,取模两个数相除的余数,10%3=1,+,一元自加。该运算符带一个操作数，将操作数的值加,1,。返回的值取决于,+,运算符位于操作数的前面或是后面,将返回,x,自加运算后的值。,x+,将返回,x,自加运算前的值,-,一元自减。该运算符只带一个操作数。返回的值取决于,-,运算符位于操作数的前面或是后面,-x,将返回,x,自减运算后的值。,x-,将返回,x,自减运算前的值,19,算术运算符-1,实现步骤：,1.使用DreamWeaver设计页面,2.指定各个文本框的名称,3.切换为代码视图，编写脚本代码,4.浏览并调试,num1,num2,result,20,function,calcu(),var numb1=document.calc.num1.value;,var numb2=document.calc.num2.value;,var total=parseFloat(numb1)*parseFloat(numb2);,=total;,计算总价并显示,添加单击事件，单击按钮时调用“,calcu()”函数,算术运算符-2,获取表单中输入的数据：,document.表单名.表单元素名.value,定义calcu()计算函数,实现两个数相乘的功能.定义函数的语法：,function 函数名(参数列表),/JavaScript语句；,21,比较运算符,比较运算符,2-1,运算符,说 明,示 例,=,等于。,如果两个操作数相等，则返回真。,a=b,!=,不等于。,如果两个操作数不相等，则返回真。,Var2!=5,大于。,如果左边的操作数大于右边的操作数，则返回真。,Var1 var2,小于。,如果左边的操作数小于右边的操作数，则返回真。,Var2 var1,=,小于等于。,如果左边的操作数小于或等于右边的操作数，则返回真。,Var2=4,Var2=,大于等于。如果左边的操作数大于或等于右边的操作数，则返回真。,Var1=5,Var1=var2,22,function calcu(),var numb1=document.calc.num1.value;,var numb2=document.calc.num2.value;,var total=parseFloat(numb1)*parseFloat(numb2);,=total;,if(total500),alert(购买总价超过500n支付时将赠送超级Q币2枚！);,.其他代码略，同上例,比较运算符,购买总价超过500，,赠送超级Q币2枚！,23,运算符,逻辑运算符,运算符,值,说 明,与,(&),expr1&expr2,只有当,expr1,和,expr2,同为真时，才返回真。否则，返回假。,或,(|),expr1|expr2,如果其中一个表达式为真，或两个表达式同为真，则返回真。否则，返回假。,非,(!),!expr,如果表达式为真，则返回假。如果为假，则返回真。,24,function calcu(),var numb1=document.calc.num1.value;,var numb2=document.calc.num2.value;,var total=parseFloat(numb1)*parseFloat(numb2);,=total;,if(total500)&(total1000)&(total2000),alert(购买总价超过2000n请直接与贵宾台联系！);,.其他代码略，同上例,逻辑运算符,5001000 之间，赠送超级Q币两枚；,10002000之间，赠送IBM智能鼠标一只；,2000以上，直接与贵宾台联系。,25,条件语句用于测试条件。,if(条件),JavaScript代码;,语法：,if 语句 2-1,如果要执行多个语句，必须将这些语句放在一对大括号(,)内。但如果只要执行一个语句，则可以省略大括号,26,function calcu(),var numb1=document.calc.num1.value;,var numb2=document.calc.num2.value;,if(numb1!=)&(numb2!=),var total=parseFloat(numb1)*parseFloat(numb2);,=total;,if(total500)&(total1000)&(total2000),alert(购买总价超过2000n请直接与贵宾台联系！);,.其他代码略，同上例,If语句 2-2,如果输入框中的数据用户漏填了，,出现,NaN,的,bug,为什么呢?,27,if else 语句 2-1,if(条件),/JavaScript代码;,else,/JavaScript代码;,语法：,28,function calcu(),var numb1=document.calc.num1.value;,var numb2=document.calc.num2.value;,if(numb1!=)&(numb2!=),var total=parseFloat(numb1)*parseFloat(numb2);,=total;,if(total500)&(total1000)&(total2000),alert(购买总价超过2000n请直接与贵宾台联系！);,else,alert(购买数量或竞拍价格没有填写n请重新输入！);,If-else语句 2-2,提示没有填写购买数量或者竞拍价格?,29,if(条件1),if(条件2),/JavaScript代码;,语法：,嵌套 if 语句 2-1,30,function calcu(),var numb1=document.calc.num1.value;,var numb2=document.calc.num2.value;,if,(numb1!=)&(numb2!=),if,(parseFloat(numb1)0),alert(竞拍价格不能小于零！n请重填);,return;/函数返回，不再执行