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