Download presentation
Presentation is loading. Please wait.
1
第四章 JavaScript 语法基础
2
回顾 样式表有什么用？分为哪三类？ 什么场合使用行内样式？要求某一段落显示红色，20号字，HTML代码为：
<P ? >请采用行内样式</P> 什么场合使用内嵌样式，根据选择器的不同，又分为哪三类？ 指定<DIV>在Z轴方向的顺便号使用哪个属性？ 1）修饰（包装）网页。分为行内样式、内嵌样式、外部样式 2）如果希望某个标签，如某个段落“与众不同”，则采用行内样式，它只作用于个别标签。 <P style=“color:red ; font-size:20px”>请采用行内样式</P> 3）如果希望本网页的所有同类标签都采用某种样式，或者说它们共享同一样式。分为HTML选择器、类选择器、ID选择器 4）z－index
3
目标 理解什么是 JavaScript 如何将 JavaScript 嵌入到 HTML 中 理解变量、数据类型和运算符
掌握 if-else 和 switch 语句
4
什么是JavaScript 3-1 验证 Jeny 帐户详细信息 Jeny 想在银行存钱 余额 瑞士银行 帐号 签名 .. 帐户验证完毕
Swiss Bank Florida, USA dollar ’11’00’89’778 “ ” $ Jeny Smiss 一万元整 10,000/- 帐号 A/c No 签名 J. Smiss .. 余额 帐户验证完毕 Jeny Smiss
5
这样，JavaScript 将验证数据并给出错误信息（如有）
同样， 帐户 Id： 密码： 年龄： 国家： *** 24 US 错误消息 密码不能 少于六位 ! ****** 请等待，正在 创建您的帐户 OK 提交 提交 提交 提交 说明：请点击提交，ok等按钮，整个动画模拟了网页的效果。 Jeny Jeny 想创建一个电子邮件帐户 这样，JavaScript 将验证数据并给出错误信息（如有）
6
什么是JavaScript JavaScript 是一种脚本语言 提供用户交互 动态更改内容 数据验证 强调JS的主要功能： 1）数据验证
2）网页特效 3）因为js是脚本语言，所以代码也称为js脚本
7
将JavaScript嵌入网页 可以将 JavaScript 语句插入 HTML 文档，方式如下：
讲解要点： 1）JavaScript代码可以直接写在网页内 2）也可以象样式文件一样。把JavaScript代码写在一个*.js文件中，然后把网页和*.js文件关联就是。
8
使用 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 文件夹中的“欢迎页面”用例
9
使用外部 JS 文件 外部 JavaScript 文件可以链接到 HTML 文档中
SCRIPT 标签的 SRC（源文件）属性可用于包括此外部文件 <script language=“JavaScript” src= “文件名.js"></script>
10
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文件”用例
11
变量 变量名必须以字母或下划线（"_"）开头 变量可以包含数字、从 A 至 Z 的大小写字母
JavaScript 区分大小写，即变量 myVar、 myVAR 和 myvar 是不同的变量 告诉学员：JavaScript语法和C语言类似，只是语法关键字等细节不同。 例如： 1）区分大小写 2）每条语句以分号结束 ; 3) If －else语句 4）for while do..while循环 5）支持函数、数组等。 以便后续语法的讲解。
12
声明变量 var a; “var” － 用于声明变量的关键字 “a” － 变量名 声明变量 赋值 a = 10; 同时声明和初始化变量
告诉学员： 和C语言一样，变量的使用分为两步： 1）声明变量 2）给变量赋值 声明多个变量 var x, y, z = 10;
13
声明变量 <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(“提示信息”,”默认值”) 将弹出提示对话框，接受用户的输入。点击确定返回输入的字符串，点击取消反馈空字符串。
14
全局变量不需要以 var 关键字进行声明，但局部变量则必须
变量的作用域 脚本 可由函数 1、函数 2 和函数 3 访问 全局变量 gg 函数function1 局部变量a 函数function3 局部变量c 函数function2 局部变量b 变量 a、b 和 c 只能 在其各自的函数中 被访问 全局变量不需要以 var 关键字进行声明，但局部变量则必须 以此关键字来声明
15
和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、 等。 告诉学员： 和C语言一样，js也有转义字符，常用的就是： “\n” 和C语言一样，js也有转义字符，常用的就是： “ \n ”
16
数据类型 数据类型 说 明 示 例 数字型 整数或实数 487, 25.95 逻辑型或布尔型 执行逻辑运算 tru或 false 字符串型
一组字符 “Hello” 空 特殊关键字，表示不存在的值。 null
17
运算符 运算符对一个或多个变量或值（操作数）进行运算，并返 回一个新值 根据所执行的运算，运算符可分为以下类别： 算术运算符 比较运算符
逻辑运算符
18
运算符 运算符 说 明 示 例 + 加 a = 5 + 8 - 减 a = 8 - 5 / 除 a = 20 / 5 * 乘
% 取模－两个数相除的余数 10 % 3 = 1 ++ 一元自加。该运算符带一个操作数，将操作数的值加 1。返回的值取决于 ++ 运算符位于操作数的前面或是后面 将返回 x 自加运算后的值。 x++ 将返回 x 自加运算前的值 - - 一元自减。该运算符只带一个操作数。返回的值取决于 -- 运算符位于操作数的前面或是后面 --x 将返回 x 自减运算后的值。 x-- 将返回 x 自减运算前的值 告诉学员，运算符号的语法和C语言雷同。
19
“+”号的用法-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，分析结果为什么是 。 6)如何修正这个bug了，点击进入下页幻灯片。 演示：参考TG7-Source 文件夹中的“＋号用法 1”用例
20
“+”号的用法-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)
21
算术运算符-1 实现步骤： 1.使用DreamWeaver设计页面 2.指定各个文本框的名称 3.切换为代码视图，编写脚本代码
4.浏览并调试 讲解步骤： 1）先打开演示效果，让学员明白我们希望实现一个什么功能的页面。参考TG7-Source 文件夹中的“算术运算符”用例 2）告诉学员的实现步骤。 在DreamWeaver中打开用例，演示如何指定文本框的名称， 因为我们需要从文本框中获取数据，所以名称很重要。 由于前面学员已经练习过Dreamweaver设计表单，所以不用演示如何插入表单等操作。 3）第三步，编写脚本代码，点击进入下页幻灯片 num1 num2 result
22
添加单击事件，单击按钮时调用“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="计算看看">
23
比较运算符 比较运算符 2-1 运算符 说 明 示 例 = = 等于。 如果两个操作数相等，则返回真。 a = = b != 不等于。
如果两个操作数不相等，则返回真。 Var2 != 5 > 大于。 如果左边的操作数大于右边的操作数，则返回真。 Var1 > var2 < 小于。 如果左边的操作数小于右边的操作数，则返回真。 Var2 < var1 <= 小于等于。 如果左边的操作数小于或等于右边的操作数，则返回真。 Var2 <= 4 Var2 <= var1 >= 大于等于。如果左边的操作数大于或等于右边的操作数，则返回真。 Var1 >= 5 Var1 >= var2 告诉学员，和C语言雷同，强调等号用两个等号，即”＝＝”。 重点是讲解例子，帮助学员使用。
24
比较运算符 <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枚！
25
运算符 逻辑运算符 运算符 值 说 明 与 ( &&) expr1 && expr2
或 ( || ) expr1 || expr2 如果其中一个表达式为真，或两个表达式同为真，则返回真。否则，返回假。 非 (!) !expr 如果表达式为真，则返回假。如果为假，则返回真。 告诉学员：这些都和C语言雷同，重点是讲解例子，帮助学员使用。
26
逻辑运算符 <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以上，直接与贵宾台联系。
27
如果要执行多个语句，必须将这些语句放在一对大括号 ({ }) 内。但如果只要执行一个语句，则可以省略大括号
if 语句 2-1 条件语句用于测试条件。 语法： if(条件) { JavaScript代码; } 告诉学员，条件语句的语法和C语言一样，重点讲解例子，帮助学员应用。 如果要执行多个语句，必须将这些语句放在一对大括号 ({ }) 内。但如果只要执行一个语句，则可以省略大括号
28
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 为什么呢?
29
if else 语句 2-1 语法： if(条件) { //JavaScript代码; } else
30
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 提示没有填写购买数量或者竞拍价格?
31
嵌套 if 语句 2-1 语法： if (条件1) { if (条件2) //JavaScript代码; }
32
嵌套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 怎么办?
33
switch 语句 2-1 语法： switch (表达式) { case 常量1 : JavaScript语句; break;
... default : }
34
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折
35
总结 网页中嵌入脚本有两种方式：使用<Script>标签或外部 *. js文件 JavaScript 中声明变量：var 变量名
“+”可以用于两个数相加，还可以用于连接字符串 parseInt() 和 parseFloat() 函数将字符串分别转换为整型和小数 运算符号分为算术运算符、比较运算符、逻辑运算符 条件语句分为if语句，if-else语句、if的嵌套 多分支语句switch根据表达式的值，进入不同的分支执行
Similar presentations
