《JavaScript语法.ppt》由会员分享,可在线阅读,更多相关《JavaScript语法.ppt(34页珍藏版)》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、第六章第六章 JavaScript 语法基础目标q理解什么是 JavaScriptq如何将 JavaScript 嵌入到 HTML 中q理解变量、数据类型和运算符q掌握 if-else 和 switch 语句2Swiss BankFlorida,USAdollar110089778“67 89 005 90”$什么是JavaScript 3-1一万元整一万元整Jeny SmissJ.Smiss.10,000/-Jeny SmissA/c No.010077瑞士银行瑞士银行Jeny 想在银行存钱验证 Jeny 帐户详细信息余额帐号帐号签名签名帐户验证完毕3什么是JavaScript 3-2q同样
2、,JenyJeny 想创建一个电子邮件帐户*24US帐户 Id:密码:年龄:国家:提交提交*请等待,正在请等待,正在创建您的帐户创建您的帐户OK提交提交这样,这样,JavaScript 将验证数据并给出错误信息(如有)将验证数据并给出错误信息(如有)错误消息错误消息密码不能密码不能 少于六位少于六位!4什么是JavaScript qJavaScript 是一种脚本语言q提供用户交互 q动态更改内容 q数据验证 5将JavaScript嵌入网页 q可以将 JavaScript 语句插入 HTML 文档,方式 如下:q使用 标签将语句嵌入文档q将 JavaScript 源文件链接到 HTML 文档
3、中6使用 Script 标签JavaScript 代码document.write(欢迎来到 JavaScript 世界);尽情享受学习的快乐!脚本代码设置语言7使用外部 JS 文件 q外部 JavaScript 文件可以链接到 HTML 文档中qSCRIPT 标签的 SRC(源文件)属性可用于包括此外部文件 8使用外部 JS 文件 JavaScript 代码代码(test.htm)使用外部文件以上文本是通过访问外部 JavaScript 文件显示的 document.write(喂!你好吗喂!你好吗?)JavaScript 代码代码(test.js)9变量 q变量名必须以字母或下划线(_)开
4、头q变量可以包含数字、从 A 至 Z 的大小写字母qJavaScript 区分大小写,即变量 myVar、myVAR 和 myvar 是不同的变量10声明变量 var a;“var”用于声明变量的关键字用于声明变量的关键字“a”变量名变量名同时声明和初始化变量同时声明和初始化变量v var a=10;ar a=10;a=10;声明变量声明变量声明多个变量声明多个变量v var x,y,z=10;ar x,y,z=10;赋值赋值11声明变量 使用变量var x;x=prompt(淘宝网竟拍,请出一口价,1);document.write(拍卖价格+x+)/+用来连接多个字符串document.w
5、rite(恭喜您,您以最高价拍卖成功!);alert(欢迎下次光临!);定义变量赋 值输 出prompt(“提示信息”,”默认值”)将弹出提示对话框,接受用户的输入。点击确定返回输入的字符串,点击取消反馈空字符串。12变量 a、b 和 c 只能在其各自的函数中被访问 变量的作用域脚本脚本函数function1局部变量a函数function2局部变量b函数function3局部变量c可由函数 1、函数 2 和函数 3 访问全局变量 gg全局变量不需要以 var 关键字进行声明,但局部变量则必须以此关键字来声明13浮点型浮点型字面量至少必须含有一个数字。此数字可包含小数点或采用科学记数法表示的数字
6、。科学记数法中的整数可以是正整数(+)或负整数(-),指数(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
7、.95逻辑型或布尔型执行逻辑运算tru或 false 字符串型一组字符“Hello”空特殊关键字,表示不存在的值。null15 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”20016 var x=100;var y;var z;document.write(竞拍SONY数码相机 600万像素+x+$起价);
8、y=prompt(加多少银子?,1);z=x+parseFloat(y);alert(您最终的出价n+z+$);/”n”用于换行显示 parseFloat()函数将字符串转换为float数据 parseInt()函数将字符串转换为int数据如果转换失败,返回NaN值(not a number)“+”号的用法-217运算符 q运算符对一个或多个变量或值(操作数)进行运算,并返 回一个新值q根据所执行的运算,运算符可分为以下类别:q算术运算符q比较运算符q逻辑运算符18运算符运算符说 明示 例+加a=5+8-减a=8-5/除a=20/5*乘a=5*19%取模两个数相除的余数10%3=1+一元自加。
9、该运算符带一个操作数,将操作数的值加 1。返回的值取决于+运算符位于操作数的前面或是后面将返回 x 自加运算后的值。x+将返回 x 自加运算前的值-一元自减。该运算符只带一个操作数。返回的值取决于-运算符位于操作数的前面或是后面-x 将返回 x 自减运算后的值。x-将返回 x 自减运算前的值19算术运算符-1实现步骤:1.使用DreamWeaver设计页面2.指定各个文本框的名称3.切换为代码视图,编写脚本代码4.浏览并调试num1num2result20function calcu()var numb1=document.calc.num1.value;var numb2=document.
10、calc.num2.value;var total=parseFloat(numb1)*parseFloat(numb2);=total;计算总价并显示添加单击事件,单击按钮时调用“calcu()”函数算术运算符-2获取表单中输入的数据:document.表单名.表单元素名.value定义calcu()计算函数,实现两个数相乘的功能.定义函数的语法:function 函数名(参数列表)/JavaScript语句;21比较运算符比较运算符 2-1 运算符运算符说说 明明示示 例例=等于。如果两个操作数相等,则返回真。a=b!=不等于。如果两个操作数不相等,则返回真。Var2!=5大于。如果左边的
11、操作数大于右边的操作数,则返回真。Var1 var2小于。如果左边的操作数小于右边的操作数,则返回真。Var2 var1=小于等于。如果左边的操作数小于或等于右边的操作数,则返回真。Var2=4Var2=大于等于。如果左边的操作数大于或等于右边的操作数,则返回真。Var1=5Var1=var222function calcu()var numb1=document.calc.num1.value;var numb2=document.calc.num2.value;var total=parseFloat(numb1)*parseFloat(numb2);=total;if(total500)
12、alert(购买总价超过500n支付时将赠送超级Q币2枚!);.其他代码略,同上例比较运算符购买总价超过500,赠送超级Q币2枚!23运算符逻辑运算符运算符运算符值值说说 明明与(&)expr1&expr2只有当 expr1 和 expr2 同为真时,才返回真。否则,返回假。或(|)expr1|expr2如果其中一个表达式为真,或两个表达式同为真,则返回真。否则,返回假。非(!)!expr如果表达式为真,则返回假。如果为假,则返回真。24function calcu()var numb1=document.calc.num1.value;var numb2=document.calc.num2
13、.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如果要执行多个语句,必须将这些语句放在一对大括号()内。但如果只要执行一个语句,则可以省略大括号26func
14、tion 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 为什么呢?27if else 语句 2-1if(条件)/JavaScr
15、ipt代码;else /JavaScript代码;语法:语法:28function 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语句
16、 2-2提示没有填写购买数量或者竞拍价格?29if(条件1)if(条件2)/JavaScript代码;语法:语法:嵌套 if 语句 2-130function calcu()var numb1=document.calc.num1.value;var numb2=document.calc.num2.value;if(numb1!=)&(numb2!=)if(parseFloat(numb1)0)alert(竞拍价格不能小于零!n请重填);return;/函数返回,不再执行后面的代码 if(parseFloat(numb2)0)alert(购买数量不能小于零!n请重填);return;var
17、total=parseFloat(numb1)*parseFloat(numb2);=total;.嵌套If语句 2-2购买数量无意中输入负数,出现 bug 怎么办?31switch 语句 2-1switch(表达式)case 常量1:JavaScript语句;break;case 常量2:JavaScript语句;break;.default:JavaScript语句;语法:语法:32switch语句 2-2.var f=;/支付方式代号 var grade;/折扣率 var total=parseFloat(numb1)*parseFloat(numb2);switch(parseInt(
18、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;/根据折扣率,计算实际总价 =money;alert(您享受了+grade*10+折优惠!);.银行转帐 打6折电话支付 打7折邮政汇款 打8折Q币支付 打9折下拉列表框pay的选项和值33总结 q网页中嵌入脚本有两种方式:使用标签或外部*.js文件qJavaScript 中声明变量:var 变量名 q“+”可以用于两个数相加,还可以用于连接字符串qparseInt()和 parseFloat()函数将字符串分别转换为整型和小数q运算符号分为算术运算符、比较运算符、逻辑运算符q条件语句分为if语句,if-else语句、if的嵌套q多分支语句switch根据表达式的值,进入不同的分支执行34