第四章 JavaScript 语法基础
回顾 样式表有什么用？分为哪三类？ 什么场合使用行内样式？要求某一段落显示红色，20号字，HTML代码为： <P ? >请采用行内样式</P> 什么场合使用内嵌样式，根据选择器的不同，又分为哪三类？ 指定<DIV>在Z轴方向的顺便号使用哪个属性？ 1）修饰（包装）网页。分为行内样式、内嵌样式、外部样式 2）如果希望某个标签，如某个段落“与众不同”，则采用行内样式，它只作用于个别标签。 <P style=“color:red ; font-size:20px”>请采用行内样式</P> 3）如果希望本网页的所有同类标签都采用某种样式，或者说它们共享同一样式。分为HTML选择器、类选择器、ID选择器 4）z－index
目标 理解什么是 JavaScript 如何将 JavaScript 嵌入到 HTML 中 理解变量、数据类型和运算符 掌握 if-else 和 switch 语句
什么是JavaScript 3-1 验证 Jeny 帐户详细信息 Jeny 想在银行存钱 余额 瑞士银行 帐号 签名 .. 帐户验证完毕 Swiss Bank Florida, USA dollar ’11’00’89’778 “67 89 005 90” $ Jeny Smiss 一万元整 10,000/- 帐号 A/c No. 010077 签名 J. Smiss .. 余额 帐户验证完毕 Jeny Smiss
这样，JavaScript 将验证数据并给出错误信息（如有） 同样， 帐户 Id： 密码： 年龄： 国家： Jeny@hotmail.com *** 24 US 错误消息 密码不能 少于六位 ! ****** 请等待，正在 创建您的帐户 OK 提交 提交 提交 提交 说明：请点击提交，ok等按钮，整个动画模拟了网页的效果。 Jeny Jeny 想创建一个电子邮件帐户 这样，JavaScript 将验证数据并给出错误信息（如有）
什么是JavaScript JavaScript 是一种脚本语言 提供用户交互 动态更改内容 数据验证 强调JS的主要功能： 1）数据验证 2）网页特效 3）因为js是脚本语言，所以代码也称为js脚本
将JavaScript嵌入网页 可以将 JavaScript 语句插入 HTML 文档，方式如下： 讲解要点： 1）JavaScript代码可以直接写在网页内 2）也可以象样式文件一样。把JavaScript代码写在一个*.js文件中，然后把网页和*.js文件关联就是。
使用 Script 标签 JavaScript 代码 <HTML> 设置语言 <HEAD> <SCRIPT language = "JavaScript"> document.write("欢迎来到 JavaScript 世界"); </SCRIPT> </HEAD> <BODY> <P>尽情享受学习的快乐!!! </BODY> </HTML> 设置语言 脚本代码 告诉学员： 1）JavaScript代码的固定语法： 一般在<head>标签中 <HEAD> <SCRIPT language = "JavaScript"> //Js代码 </ SCRIPT > 2) document.write( )方法表示往页面中写（输出）内容，相当于C语言的printf( )函数。 Document表示页面文档，后续章节会讲解。 3）演示：参考TG7-Source 文件夹中的“欢迎页面”用例
使用外部 JS 文件 外部 JavaScript 文件可以链接到 HTML 文档中 SCRIPT 标签的 SRC（源文件）属性可用于包括此外部文件 <script language=“JavaScript” src= “文件名.js"></script>
JavaScript 代码 (test.htm) 使用外部 JS 文件 JavaScript 代码 (test.htm) <HTML> <HEAD> <TITLE>使用外部文件</TITLE> <SCRIPT SRC = "test.js"></SCRIPT> </HEAD> <BODY> <P>以上文本是通过访问外部 JavaScript 文件显示的 </BODY> </HTML> document.write("喂！你好吗?") JavaScript 代码 (test.js ) 演示：参考TG7-Source 文件夹中的“外部js文件”用例
变量 变量名必须以字母或下划线（"_"）开头 变量可以包含数字、从 A 至 Z 的大小写字母 JavaScript 区分大小写，即变量 myVar、 myVAR 和 myvar 是不同的变量 告诉学员：JavaScript语法和C语言类似，只是语法关键字等细节不同。 例如： 1）区分大小写 2）每条语句以分号结束 ; 3) If －else语句 4）for while do..while循环 5）支持函数、数组等。 以便后续语法的讲解。
声明变量 var a; “var” － 用于声明变量的关键字 “a” － 变量名 声明变量 赋值 a = 10; 同时声明和初始化变量 告诉学员： 和C语言一样，变量的使用分为两步： 1）声明变量 2）给变量赋值 声明多个变量 var x, y, z = 10;
声明变量 <HTML> <HEAD> <TITLE>使用变量</TITLE> <SCRIPT LANGUAGE = "Javascript"> var x; x=prompt("淘宝网竟拍，请出一口价",1) ; document.write("拍卖价格"+x+"<BR>") // "+"用来连接多个字符串 document.write("恭喜您，您以最高价拍卖成功！"); alert("欢迎下次光临！"); </SCRIPT> </HEAD> </HTML> 定义变量 赋 值 输 出 讲解要点： 先给出效果图，讲解代码的脚本部分，强调： 1）变量的定义 2）变量的赋值 3）prompt的用法 4）document.write（）的用法，功能类似于printt( ), 5) “+”表示字符串连接 6）alert( “消息”) 表示弹出信息框 演示：参考TG7-Source 文件夹中的“变量”用例 prompt(“提示信息”,”默认值”) 将弹出提示对话框，接受用户的输入。点击确定返回输入的字符串，点击取消反馈空字符串。
全局变量不需要以 var 关键字进行声明，但局部变量则必须 变量的作用域 脚本 可由函数 1、函数 2 和函数 3 访问 全局变量 gg 函数function1 局部变量a 函数function3 局部变量c 函数function2 局部变量b 变量 a、b 和 c 只能 在其各自的函数中 被访问 全局变量不需要以 var 关键字进行声明，但局部变量则必须 以此关键字来声明
和C语言一样，js也有转义字符，常用的就是： “ \n ” 常量 字 符 说 明 示 例 \b 退格符 alert(“这是第一句 \b 这是第二句”) \f 换页符 alert(“这是第一局 \f 这是第二句”) \n 换行符 alert(“这是第一局 \n 这是第二句”) \r 回车符 alert(“这是第一局 \r 这是第二句”) \t 制表符 alert(“这是第一局 \t 这是第二句”) 整型 浮点型 字符串型 浮点型－浮点型字面量至少必须含有一个数字。此数字可包含小数点或采用科学记数法表示的数字。科学记数法中的整数可以是正整数(+) 或负整数(-)，指数(e) 表示“十次幂”。例如 10.24、1.20e+22、4E-8、.1815 等。 告诉学员： 和C语言一样，js也有转义字符，常用的就是： “\n” 和C语言一样，js也有转义字符，常用的就是： “ \n ”
数据类型 数据类型 说 明 示 例 数字型 整数或实数 487, 25.95 逻辑型或布尔型 执行逻辑运算 tru或 false 字符串型 一组字符 “Hello” 空 特殊关键字，表示不存在的值。 null
运算符 运算符对一个或多个变量或值（操作数）进行运算，并返 回一个新值 根据所执行的运算，运算符可分为以下类别： 算术运算符 比较运算符 逻辑运算符
运算符 运算符 说 明 示 例 + 加 a = 5 + 8 - 减 a = 8 - 5 / 除 a = 20 / 5 * 乘 % 取模－两个数相除的余数 10 % 3 = 1 ++ 一元自加。该运算符带一个操作数，将操作数的值加 1。返回的值取决于 ++ 运算符位于操作数的前面或是后面 将返回 x 自加运算后的值。 x++ 将返回 x 自加运算前的值 - - 一元自减。该运算符只带一个操作数。返回的值取决于 -- 运算符位于操作数的前面或是后面 --x 将返回 x 自减运算后的值。 x-- 将返回 x 自减运算前的值 告诉学员，运算符号的语法和C语言雷同。
“+”号的用法-1 10020 ? bug 200 <HTML> <HEAD> <SCRIPT LANGUAGE = "JavaScript"> var x=100; var y; var z; document.write("<H2>竞拍SONY数码相机 600万像素" +x+"$起价</H2>"); y=prompt("加多少银子？","1"); z=x+y; alert("您最终的出价\n"+z+"$"); //”\n”用于换行显示 </SCRIPT> </HEAD> <body> </body> </HTML> 10020 ? bug 200 Prompt函数返回输入的字符串 +字符串相连：100+”200” 讲解步骤： 1)先点击幻灯片演示效果，原价100$，竞拍时输入加的银子数：假定200 2）和学员一起，100＋200那总价就应该是300$了。 3）根据显示结果：您的最终出价应该是100200，程序是不是有bug. 4)让我们一起来看看源代码，从脚本开始，逐行分析代码，重点指出“＋”号的用法。 5）找出bug的语句：z=x+y，分析结果为什么是100200 。 6)如何修正这个bug了，点击进入下页幻灯片。 演示：参考TG7-Source 文件夹中的“＋号用法 1”用例
“+”号的用法-2 <HTML> <HEAD> <SCRIPT LANGUAGE = "JavaScript"> var x=100; var y; var z; document.write("<H2>竞拍SONY数码相机 600万像素" +x+"$起价</H2>"); y=prompt("加多少银子？","1"); z=x+parseFloat( y ); alert("您最终的出价\n"+z+"$"); //”\n”用于换行显示 </SCRIPT> </HEAD> <body> </body> </HTML> 讲解步骤： 1)引入转换函数：parseFloat（）和parseInt（）函数，介绍它们的功能 2）演示：bug消除了。参考TG7-Source 文件夹中的“＋号用法 2”用例 3）z=x+parseFloat( y ); 讲解为什么就消除bug 了。 parseFloat( )函数将字符串转换为float数据 parseInt( )函数将字符串转换为int数据 如果转换失败，返回NaN值(not a number)
算术运算符-1 实现步骤： 1.使用DreamWeaver设计页面 2.指定各个文本框的名称 3.切换为代码视图，编写脚本代码 4.浏览并调试 讲解步骤： 1）先打开演示效果，让学员明白我们希望实现一个什么功能的页面。参考TG7-Source 文件夹中的“算术运算符”用例 2）告诉学员的实现步骤。 在DreamWeaver中打开用例，演示如何指定文本框的名称， 因为我们需要从文本框中获取数据，所以名称很重要。 由于前面学员已经练习过Dreamweaver设计表单，所以不用演示如何插入表单等操作。 3）第三步，编写脚本代码，点击进入下页幻灯片 num1 num2 result
添加单击事件，单击按钮时调用“calcu()” 函数 算术运算符-2 <HEAD> <SCRIPT language = "JavaScript"> function calcu( ) { var numb1= document.calc.num1.value; var numb2= document.calc.num2.value; var total=parseFloat(numb1)*parseFloat(numb2); document.calc.result.value=total; } </SCRIPT> </HEAD> 定义calcu( )计算函数,实现两个数相乘的功能.定义函数的语法： function 函数名(参数列表) { //JavaScript语句； } 获取表单中输入的数据： document.表单名.表单元素名.value 计算总价并显示 讲解要点： 1.因为学员初步接触函数、事件等概念。所以这部分一定要放慢节奏的讲解，随时关注学员的反映，一旦明白后，后续的例子讲解就非常顺利了。 2.学员对函数、事件等概念现在还不能理解，告诉他们步骤： 第一步：定义函数，象C语言的一样，在JavaScript中也是先定义函数，然后再调用执行，语法是： function 函数名(参数列表) { //JavaScript语句； } 其中，function是关键字。 第二步：在函数中编写JavaScript脚本代码 第三步：和C语言一样，函数定义好后，不能执行，需要去调用它。 添加按钮的单击事件，表示当用户单击按钮时将调用这个函数，执行函数中的脚本代码，从而完成计算功能。 添加单击事件，单击按钮时调用“calcu()” 函数 … <INPUT name="getAnswer" TYPE="button" onClick="calcu( )" value="计算看看">
比较运算符 比较运算符 2-1 运算符 说 明 示 例 = = 等于。 如果两个操作数相等，则返回真。 a = = b != 不等于。 如果两个操作数不相等，则返回真。 Var2 != 5 > 大于。 如果左边的操作数大于右边的操作数，则返回真。 Var1 > var2 < 小于。 如果左边的操作数小于右边的操作数，则返回真。 Var2 < var1 <= 小于等于。 如果左边的操作数小于或等于右边的操作数，则返回真。 Var2 <= 4 Var2 <= var1 >= 大于等于。如果左边的操作数大于或等于右边的操作数，则返回真。 Var1 >= 5 Var1 >= var2 告诉学员，和C语言雷同，强调等号用两个等号，即”＝＝”。 重点是讲解例子，帮助学员使用。
比较运算符 <HTML> <HEAD> <SCRIPT LANGUAGE = "JavaScript"> function calcu() { var numb1= document.calc.num1.value; var numb2= document.calc.num2.value; var total= parseFloat(numb1)*parseFloat(numb2); document.calc.result.value=total; if (total>500) alert("购买总价超过500\n支付时将赠送超级Q币2枚！"); } </SCRIPT> </HEAD> ….其他代码略，同上例 购买总价超过500， 赠送超级Q币2枚！
运算符 逻辑运算符 运算符 值 说 明 与 ( &&) expr1 && expr2 或 ( || ) expr1 || expr2 如果其中一个表达式为真，或两个表达式同为真，则返回真。否则，返回假。 非 (!) !expr 如果表达式为真，则返回假。如果为假，则返回真。 告诉学员：这些都和C语言雷同，重点是讲解例子，帮助学员使用。
逻辑运算符 <HEAD> <SCRIPT LANGUAGE = "JavaScript"> function calcu() { var numb1= document.calc.num1.value; var numb2= document.calc.num2.value; var total= parseFloat(numb1)*parseFloat(numb2); document.calc.result.value=total; if ((total>500) &&(total<=1000)) alert("购买总价超过500\n支付时将赠送超级Q币2枚！"); if ((total>1000) &&(total<=2000)) alert("购买总价超过1000\n支付时将赠送IBM光电智能鼠标1只！"); if ((total>2000)) alert("购买总价超过2000\n请直接与贵宾台联系！"); } </SCRIPT> </HEAD>….其他代码略，同上例 500－1000 之间，赠送超级Q币两枚； 1000－2000之间，赠送IBM智能鼠标一只； 2000以上，直接与贵宾台联系。
如果要执行多个语句，必须将这些语句放在一对大括号 ({ }) 内。但如果只要执行一个语句，则可以省略大括号 if 语句 2-1 条件语句用于测试条件。 语法： if(条件) { JavaScript代码; } 告诉学员，条件语句的语法和C语言一样，重点讲解例子，帮助学员应用。 如果要执行多个语句，必须将这些语句放在一对大括号 ({ }) 内。但如果只要执行一个语句，则可以省略大括号
If语句 2-2 <HEAD> <SCRIPT LANGUAGE = "JavaScript"> function calcu() { var numb1= document.calc.num1.value; var numb2= document.calc.num2.value; if ((numb1!="") && (numb2!="")) var total= parseFloat(numb1)*parseFloat(numb2); document.calc.result.value=total; if ((total>500) &&(total<=1000)) alert("购买总价超过500\n支付时将赠送超级Q币2枚！"); if ((total>1000) &&(total<=2000)) alert("购买总价超过1000\n支付时将赠送IBM光电智能鼠标1只！"); if ((total>2000)) alert("购买总价超过2000\n请直接与贵宾台联系！"); } </SCRIPT> </HEAD>….其他代码略，同上例 如果输入框中的数据用户漏填了， 出现NaN的 bug 为什么呢?
if else 语句 2-1 语法： if(条件) { //JavaScript代码; } else
If-else语句 2-2 <HEAD> <SCRIPT LANGUAGE = "JavaScript"> function calcu() { var numb1= document.calc.num1.value; var numb2= document.calc.num2.value; if ((numb1!="") && (numb2!="")) var total= parseFloat(numb1)*parseFloat(numb2); document.calc.result.value=total; if ((total>500) &&(total<=1000)) alert("购买总价超过500\n支付时将赠送超级Q币2枚！"); if ((total>1000) &&(total<=2000)) alert("购买总价超过1000\n支付时将赠送IBM光电智能鼠标1只！"); if ((total>2000)) alert("购买总价超过2000\n请直接与贵宾台联系！"); } else alert("购买数量或竞拍价格没有填写\n请重新输入！"); </SCRIPT> If-else语句 2-2 提示没有填写购买数量或者竞拍价格?
嵌套 if 语句 2-1 语法： if (条件1) { if (条件2) //JavaScript代码; }
嵌套If语句 2-2 <SCRIPT LANGUAGE = "JavaScript"> function 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 total= parseFloat(numb1)*parseFloat(numb2); document.calc.result.value=total; ….. 购买数量无意中输入负数，出现 bug 怎么办?
switch 语句 2-1 语法： switch (表达式) { case 常量1 : JavaScript语句; break; ... default : }
switch语句 2-2 下拉列表框pay的选项和值 ..... 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折优惠 default: alert("请重新选择支付方式！"); return; } var money=total*grade; //根据折扣率，计算实际总价 document.calc.result.value=money; alert("您享受了"+grade*10+"折优惠！"); ….. switch语句 2-2 下拉列表框pay的选项和值 银行转帐－ 打6折 电话支付－ 打7折 邮政汇款－ 打8折 Q币支付－ 打9折
总结 网页中嵌入脚本有两种方式：使用<Script>标签或外部 *. js文件 JavaScript 中声明变量：var 变量名 “+”可以用于两个数相加，还可以用于连接字符串 parseInt() 和 parseFloat() 函数将字符串分别转换为整型和小数 运算符号分为算术运算符、比较运算符、逻辑运算符 条件语句分为if语句，if-else语句、if的嵌套 多分支语句switch根据表达式的值，进入不同的分支执行