北大青鸟软件工程师HTML.ppt

《北大青鸟软件工程师HTML.ppt》由会员分享，可在线阅读，更多相关《北大青鸟软件工程师HTML.ppt（35页珍藏版）》请在装配图网上搜索。

第七章,JavaScript语法基础,2,回顾,样式表有什么用？分为哪三类？什么场合使用行内样式？要求某一段落显示红色，20号字，HTML代码为：请采用行内样式什么场合使用内嵌样式，根据选择器的不同，又分为哪三类？指定在Z轴方向的顺便号使用哪个属性？,3,目标,理解什么是JavaScript如何将JavaScript嵌入到HTML中理解变量、数据类型和运算符掌握if-else和switch语句,4,什么是JavaScript3-1,一万元整,JenySmiss,10,000/-,JenySmiss,A/cNo.010077,,瑞士银行,Jeny想在银行存钱,验证Jeny帐户详细信息,余额,帐号,签名,帐户验证完毕,,5,什么是JavaScript3-2,同样，,Jeny,,Jeny想创建一个电子邮件帐户,,Jeny@***24US,帐户Id：密码：年龄：国家：,******,,这样，JavaScript将验证数据并给出错误信息（如有）,6,什么是JavaScript,JavaScript是一种脚本语言提供用户交互动态更改内容数据验证,7,将JavaScript嵌入网页,可以将JavaScript语句插入HTML文档，方式如下：使用标签将语句嵌入文档将JavaScript源文件链接到HTML文档中,8,使用Script标签,JavaScript代码,document.write("欢迎来到JavaScript世界");尽情享受学习的快乐!!!,,脚本代码,设置语言,,9,使用外部JS文件,外部JavaScript文件可以链接到HTML文档中SCRIPT标签的SRC（源文件）属性可用于包括此外部文件,,10,使用外部JS文件,,JavaScript代码(test.htm),使用外部文件以上文本是通过访问外部JavaScript文件显示的,,11,变量,变量名必须以字母或下划线（"_"）开头变量可以包含数字、从A至Z的大小写字母JavaScript区分大小写，即变量myVar、myVAR和myvar是不同的变量,12,声明变量,,vara;“var”－用于声明变量的关键字“a”－变量名,,,同时声明和初始化变量vara=10;,,a=10;,声明变量,声明多个变量varx,y,z=10;,赋值,13,声明变量,使用变量varx;x=prompt("淘宝网竟拍，请出一口价",1);document.write("拍卖价格"+x+"")//"+"用来连接多个字符串document.write("恭喜您，您以最高价拍卖成功！");alert("欢迎下次光临！");,定义变量,赋值,输出,prompt(“提示信息”,”默认值”)将弹出提示对话框，接受用户的输入。点击确定返回输入的字符串，点击取消反馈空字符串。,14,,,变量a、b和c只能在其各自的函数中被访问,,,变量的作用域,,,,脚本,函数function1局部变量a,函数function2局部变量b,函数function3局部变量c,可由函数1、函数2和函数3访问,全局变量gg,,,,,全局变量不需要以var关键字进行声明，但局部变量则必须以此关键字来声明,15,常量,整型浮点型字符串型,和C语言一样，js也有转义字符，常用的就是：“\n”,16,数据类型,17,varx=100;vary;varz;document.write("竞拍SONY数码相机600万像素"+x+"$起价");y=prompt("加多少银子？","1");z=x+y;alert("您最终的出价\n"+z+"$");//”\n”用于换行显示,Prompt函数返回输入的字符串,“+”号的用法-1,10020?bug,+字符串相连：100+”200”,200,18,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),“+”号的用法-2,19,运算符,运算符对一个或多个变量或值（操作数）进行运算，并返回一个新值根据所执行的运算，运算符可分为以下类别：算术运算符比较运算符逻辑运算符,20,运算符,21,算术运算符-1,实现步骤：1.使用DreamWeaver设计页面2.指定各个文本框的名称3.切换为代码视图，编写脚本代码4.浏览并调试,22,functioncalcu(){varnumb1=document.calc.num1.value;varnumb2=document.calc.num2.value;vartotal=parseFloat(numb1)*parseFloat(numb2);document.calc.result.value=total;},计算总价并显示,…,添加单击事件，单击按钮时调用“calcu()”函数,算术运算符-2,获取表单中输入的数据：document.表单名.表单元素名.value,,定义calcu()计算函数,实现两个数相乘的功能.定义函数的语法：function函数名(参数列表){//JavaScript语句；},,23,比较运算符,比较运算符2-1,24,functioncalcu(){varnumb1=document.calc.num1.value;varnumb2=document.calc.num2.value;vartotal=parseFloat(numb1)*parseFloat(numb2);document.calc.result.value=total;if(total>500)alert("购买总价超过500\n支付时将赠送超级Q币2枚！");}….其他代码略，同上例,,比较运算符,购买总价超过500，赠送超级Q币2枚！,25,运算符,逻辑运算符,26,functioncalcu(){varnumb1=document.calc.num1.value;varnumb2=document.calc.num2.value;vartotal=parseFloat(numb1)*parseFloat(numb2);document.calc.result.value=total;if((total>500)}….其他代码略，同上例,,逻辑运算符,500－1000之间，赠送超级Q币两枚；1000－2000之间，赠送IBM智能鼠标一只；2000以上，直接与贵宾台联系。,27,,条件语句用于测试条件。,if(条件){JavaScript代码;},语法：,if语句2-1,如果要执行多个语句，必须将这些语句放在一对大括号({})内。但如果只要执行一个语句，则可以省略大括号,28,functioncalcu(){varnumb1=document.calc.num1.value;varnumb2=document.calc.num2.value;if((numb1!="")}}….其他代码略，同上例,,If语句2-2,如果输入框中的数据用户漏填了，出现NaN的bug为什么呢?,29,ifelse语句2-1,if(条件){//JavaScript代码;}else{//JavaScript代码;},语法：,30,functioncalcu(){varnumb1=document.calc.num1.value;varnumb2=document.calc.num2.value;if((numb1!="")},,If-else语句2-2,提示没有填写购买数量或者竞拍价格?,31,if(条件1){if(条件2){//JavaScript代码;}},语法：,嵌套if语句2-1,32,functioncalcu(){varnumb1=document.calc.num1.value;varnumb2=document.calc.num2.value;if((numb1!="")…..,,嵌套If语句2-2,购买数量无意中输入负数，出现bug怎么办?,33,switch语句2-1,switch(表达式){case常量1:JavaScript语句;break;case常量2:JavaScript语句;break;...default:JavaScript语句;},语法：,34,switch语句2-2,.....varf=document.calc.pay.value;//支付方式代号vargrade;//折扣率vartotal=parseFloat(numb1)*parseFloat(numb2);switch(parseInt(f)){case1:grade=0.6;//打6折优惠break;case2:…….同理其他方式打7折、八折case4:grade=0.9;//打9折优惠break;default:alert("请重新选择支付方式！");return;}varmoney=total*grade;//根据折扣率，计算实际总价document.calc.result.value=money;alert("您享受了"+grade*10+"折优惠！");…..,,银行转帐－打6折电话支付－打7折邮政汇款－打8折Q币支付－打9折,下拉列表框pay的选项和值,35,总结,网页中嵌入脚本有两种方式：使用标签或外部*.js文件JavaScript中声明变量：var变量名“+”可以用于两个数相加，还可以用于连接字符串parseInt()和parseFloat()函数将字符串分别转换为整型和小数运算符号分为算术运算符、比较运算符、逻辑运算符条件语句分为if语句，if-else语句、if的嵌套多分支语句switch根据表达式的值，进入不同的分支执行,