JavaScript从入门到精通.ppt

《JavaScript从入门到精通.ppt》由会员分享，可在线阅读，更多相关《JavaScript从入门到精通.ppt（27页珍藏版）》请在三一办公上搜索。

1、JavaScript基础,PHPChina 工作室,知识回顾,CSS的分类CSS的引用方式常用的CSS样式,内容摘要,理解什么是 JavaScript如何将 JavaScript 嵌入到 HTML 中理解变量、数据类型和运算符掌握 if-else 和 switch 语句,什么是JavaScript 3-1,一万元整,Jeny Smiss,10,000/-,Jeny Smiss,A/c No.010077,瑞士银行,Jeny 想在银行存钱,验证 Jeny 帐户详细信息,余额,帐号,签名,帐户验证完毕,什么是JavaScript 3-2,同样,Jeny,Jeny 想创建一个电子邮件帐户,*24US

2、,帐户 Id：密码：年龄：国家：,*,这样，JavaScript 将验证数据并给出错误信息（如有）,将JavaScript嵌入网页,可以将 JavaScript 语句插入 HTML 文档，方式如下：使用 标签将语句嵌入文档将 JavaScript 源文件链接到 HTML 文档中,常量,整型浮点型字符串型,数据类型,转义字符,和C语言一样，js也有转义字符，常用的就是：“n”,var x=100;var y;var z;document.write(竞拍SONY数码相机 600万像素+x+$起价);y=prompt(加多少银子？,1);z=x+y;alert(您最终的出价n+z+$);/”n”用

3、于换行显示,Prompt函数返回输入的字符串,“+”号的用法-1,10020?bug,+字符串相连：100+”200”,200,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,运算符,运算符对一个或多个变量或

4、值（操作数）进行运算，并返 回一个新值根据所执行的运算，运算符可分为以下类别：算术运算符比较运算符逻辑运算符,运算符,算术运算符-1,实现步骤：1.使用DreamWeaver设计页面2.指定各个文本框的名称3.切换为代码视图，编写脚本代码4.浏览并调试,function calcu()var numb1=document.calc.num1.value;var numb2=document.calc.num2.value;var total=parseFloat(numb1)*parseFloat(numb2);=total;,计算总价并显示,添加单击事件，单击按钮时调用“calcu()”函数

5、,算术运算符-2,获取表单中输入的数据：document.表单名.表单元素名.value,定义calcu()计算函数,实现两个数相乘的功能.定义函数的语法：function 函数名(参数列表)/JavaScript语句；,比较运算符,比较运算符 2-1,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支付时将赠送

6、超级Q币2枚！);.其他代码略，同上例,比较运算符,购买总价超过500，赠送超级Q币2枚！,运算符,逻辑运算符,function calcu()var numb1=document.calc.num1.value;var numb2=document.calc.num2.value;var total=parseFloat(numb1)*parseFloat(numb2);=total;if(total500).其他代码略，同上例,逻辑运算符,5001000 之间，赠送超级Q币两枚；10002000之间，赠送IBM智能鼠标一只；2000以上，直接与贵宾台联系。,条件语句用于测试条件。,if(条

7、件)JavaScript代码;,语法：,if 语句 2-1,如果要执行多个语句，必须将这些语句放在一对大括号()内。但如果只要执行一个语句，则可以省略大括号,function calcu()var numb1=document.calc.num1.value;var numb2=document.calc.num2.value;if(numb1!=).其他代码略，同上例,If语句 2-2,如果输入框中的数据用户漏填了，出现NaN的 bug 为什么呢?,function calcu()var numb1=document.calc.num1.value;var numb2=document.ca

8、lc.num2.value;if(numb1!=),If-else语句 2-2,提示没有填写购买数量或者竞拍价格?,function calcu()var numb1=document.calc.num1.value;var numb2=document.calc.num2.value;if(numb1!=).,嵌套If语句 2-2,购买数量无意中输入负数，出现 bug 怎么办?,switch 语句 2-1,switch(表达式)case 常量1:JavaScript语句;break;case 常量2:JavaScript语句;break;.default:JavaScript语句;,语法：,

9、switch语句 2-2,var f=;/支付方式代号 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;/根据折扣率，计算实际总价=money;alert(您享受了+grade*10+折优惠！);.,银行转帐 打6折电话支付 打7折邮政汇款 打8折Q币支付 打9折,下拉列表框pay的选项和值,课堂重点,网页中嵌入脚本有两种方式：使用标签或外部*.js文件JavaScript 中声明变量：var 变量名“+”可以用于两个数相加，还可以用于连接字符串parseInt()和 parseFloat()函数将字符串分别转换为整型和小数运算符号分为算术运算符、比较运算符、逻辑运算符条件语句分为if语句，if-else语句、if的嵌套多分支语句switch根据表达式的值，进入不同的分支执行,谢 谢,http:/,