ACCP V4.0
第七章
JavaScript 语法基础
ACCP V4.02
回顾
样式表有什么用?分为哪三类?
什么场合使用行内样式?要求某一段落显示红色,
20号字,HTML代码为:
<P? >请采用行内样式 </P>
什么场合使用内嵌样式,根据选择器的不同,又分为哪三类?
指定 <DIV>在 Z轴方向的顺便号使用哪个属性?
ACCP V4.03
目标
理解什么是 JavaScript
如何将 JavaScript 嵌入到 HTML 中
理解变量、数据类型和运算符
掌握 if-else 和 switch 语句
ACCP V4.04
Swiss Bank
Florida,USA
dollar
’11’00’89’77
8
“67 89 005
90”
$
什么是 JavaScript 3-1
一万元整
Jeny Smiss
10,000/-
Jeny Smiss
A/c No.
010077
瑞士银行
Jeny 想在银行存钱验证 Jeny 帐户详细信息余额帐号签名帐户验证完毕
ACCP V4.05
什么是 JavaScript 3-2
同样,
Jeny
Jeny 想创建一个电子邮件帐户
Jeny@hotmail.com
***
24
US
帐户 Id:
密码:
年龄:
国家:
提交提交
******
请等待,正在创建您的帐户
OK
提交提交这样,JavaScript 将验证数据并给出错误信息(如有)
错误消息密码不能少于六位 !
ACCP V4.06
什么是 JavaScript
JavaScript 是一种脚本 语言
提供用户交互
动态更改内容
数据验证
ACCP V4.07
将 JavaScript嵌入网页
可以将 JavaScript 语句插入 HTML 文档,方式如下:
使用 <SCRIPT> 标签将语句嵌入文档
将 JavaScript 源文件链接到 HTML 文档中
ACCP V4.08
使用 Script 标签
JavaScript 代码
<HTML>
<HEAD>
<SCRIPT language = "JavaScript">
document.write("欢迎来到 JavaScript 世界 ");
</SCRIPT>
</HEAD>
<BODY>
<P>尽情享受学习的快乐 !!!
</BODY>
</HTML>
脚本代码设置语言
ACCP V4.09
使用外部 JS 文件
外部 JavaScript 文件可以链接到 HTML 文档中
SCRIPT 标签的 SRC(源文件)属性可用于包括此外部文件
<script language=“JavaScript”
src=,文件名,js"></script>
ACCP V4.010
使用外部 JS 文件
JavaScript 代码 (test.htm)
<HTML>
<HEAD>
<TITLE>使用外部文件 </TITLE>
<SCRIPT SRC = "test.js"></SCRIPT>
</HEAD>
<BODY>
<P>以上文本是通过访问外部 JavaScript 文件显示的
</BODY>
</HTML>
document.write("喂!你好吗?")
JavaScript 代码 (test.js )
ACCP V4.011
变量
变量名必须以字母或下划线( "_")开头
变量可以包含数字、从 A 至 Z 的大小写字母
JavaScript 区分大小写,即变量 myVar、
myVAR 和 myvar 是不同的变量
ACCP V4.012
声明变量
var a;
“var” - 用于声明变量的关键字
“a” - 变量名同时声明和初始化变量
var a= 10;
a = 10;
声明变量声明多个变量
var x,y,z = 10;
赋值
ACCP V4.013
声明变量
<HTML>
<HEAD>
<TITLE>使用变量 </TITLE>
<SCRIPT LANGUAGE = "Javascript">
var x;
x=prompt("淘宝网竟拍,请出一口价 ",1) ;
document.write("拍卖价格 "+x+"<BR>") // "+"用来连接多个字符串
document.write("恭喜您,您以最高价拍卖成功! ");
alert("欢迎下次光临! ");
</SCRIPT>
</HEAD>
</HTML>
定义变量赋 值输 出
prompt(“提示信息”,”默认值” )
将弹出提示对话框,接受用户的输入。点击确定返回输入的字符串,点击取消反馈空字符串。
ACCP V4.014
变量 a,b 和 c 只能在其各自的函数中被访问变量的作用域脚本函数 function1
局部变量 a
函数 function2
局部变量 b
函数 function3
局部变量 c
可由函数 1、函数 2 和函数 3 访问全局变量 gg
全局变量不需要以 var 关键字进行声明,但局部变量则必须以此关键字来声明
ACCP V4.015
浮点型-浮点型字面量至少必须含有一个数字。此数字可包含小数点或采用科学记数法表示的数字。科学记数法中的整数可以是正整数 (+) 或负整数 (-),指数 (e) 表示“十次幂”。例如 10.24、
1.20e+22,4E-8,.1815 等。
常量
整型
浮点型
字符串型字 符 说 明 示 例
\b 退格符 alert(“这是第一句 \b 这是第二句” )
\f 换页符 alert(“这是第一局 \f 这是第二句” )
\n 换行符 alert(“这是第一局 \n 这是第二句” )
\r 回车符 alert(“这是第一局 \r 这是第二句” )
\t 制表符 alert(“这是第一局 \t 这是第二句” )
和 C语言一样,js也有转义字符,常用的就是,,\n,
ACCP V4.016
数据类型数据类型 说 明 示 例数字型 整数或实数 487,25.95
逻辑型或布尔型 执行逻辑运算 tru或 false
字符串型 一组字符,Hello”
空 特殊关键字,表示不存在的值。 null
ACCP V4.017
<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>
Prompt函数返回输入的字符串
“+”号的用法 -1
10020? bug
+字符串相连,100+”200”
200
ACCP V4.018
<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>
parseFloat( )函数将字符串转换为 float数据
parseInt( )函数将字符串转换为 int数据如果转换失败,返回 NaN值 (not a number)
“+”号的用法 -2
ACCP V4.019
运算符
运算符对一个或多个变量或值(操作数)进行运算,并返回一个新值
根据所执行的运算,运算符可分为以下类别:
算术运算符
比较运算符
逻辑运算符
ACCP V4.020
运算符运算符 说 明 示 例
+ 加 a = 5 + 8
- 减 a = 8 - 5
/ 除 a = 20 / 5
* 乘 a = 5*19
% 取模-两个数相除的余数 10 % 3 = 1
++ 一元自加 。 该运算符带一个操作数,将操作数的值加 1。
返回的值取决于 ++ 运算符位于操作数的前面或是后面将返回 x 自加运算后的值 。
x++ 将返回 x 自加运算前的值
- - 一元自减 。 该运算符只带一个操作数 。 返回的值取决于
-- 运算符位于操作数的前面或是后面
--x 将返回 x 自减运算后的值 。
x-- 将返回 x 自减运算前的值
ACCP V4.021
算术运算符 -1
实现步骤:
1.使用 DreamWeaver设计页面
2.指定各个文本框的名称
3.切换为代码视图,编写脚本代码
4.浏览并调试
num1
num2
result
ACCP V4.022
<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>
计算总价并显示

<INPUT name="getAnswer" TYPE="button" onClick="calcu( )" value="
计算看看 ">
添加单击事件,单击按钮时调用,calcu()”函数算术运算符 -2
获取表单中输入的数据:
document.表单名,表单元素名,value
定义 calcu( )计算函数,实现两个数相乘的功能,定义函数的语法:
function 函数名 (参数列表 )
{
//JavaScript语句;
}
ACCP V4.023
比较运算符比较运算符 2-1
运算符 说 明 示 例
= = 等于 。
如果两个操作数相等,则返回真 。
a = = b
!= 不等于 。
如果两个操作数不相等,则返回真 。
Var2 != 5
> 大于 。
如果左边的操作数大于右边的操作数
,则返回真 。
Var1 > var2
< 小于 。
如果左边的操作数小于右边的操作数
,则返回真 。
Var2 < var1
<= 小于等于 。
如果左边的操作数小于或等于右边的操作数,则返回真 。
Var2 <= 4
Var2 <= var1
>= 大于等于 。 如果左边的操作数大于或等于右边的操作数,则返回真 。
Var1 >= 5
Var1 >= var2
ACCP V4.024
<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枚!
ACCP V4.025
运算符逻辑运算符运算符 值 说 明与 ( &&) expr1 && expr2 只有当 expr1 和 expr2 同为真时,才返回真 。
否则,返回假 。
或 ( || ) expr1 || expr2 如果其中一个表达式为真,或两个表达式同为真,则返回真 。 否则,返回假 。
非 (!) !expr 如果表达式为真,则返回假 。 如果为假,则返回真 。
ACCP V4.026
<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以上,直接与贵宾台联系。
ACCP V4.027
条件语句用于测试条件。
if(条件 )
{
JavaScript代码 ;
}
语法:
if 语句 2-1
如果要执行多个语句,必须将这些语句放在一对大括号 ({ }) 内。
但如果只要执行一个语句,则可以省略大括号
ACCP V4.028
<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>…,其他代码略,同上例
If语句 2-2
如果输入框中的数据用户漏填了,
出现 NaN的 bug 为什么呢?
ACCP V4.029
if else 语句 2-1
if(条件 )
{
//JavaScript代码 ;
}
else
{
//JavaScript代码 ;
}
语法:
ACCP V4.030
<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
提示没有填写购买数量或者竞拍价格?
ACCP V4.031
if (条件 1)
{
if (条件 2)
{
//JavaScript代码 ;
}
}
语法:
嵌套 if 语句 2-1
ACCP V4.032
<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;
…..
嵌套 If语句 2-2
购买数量无意中输入负数,出现 bug 怎么办?
ACCP V4.033
switch 语句 2-1
switch (表达式 )
{
case 常量 1,
JavaScript语句 ;
break;
case 常量 2,
JavaScript语句 ;
break;
...
default,
JavaScript语句 ;
}
语法:
ACCP V4.034
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("请重新选择支付方式! ");
return;
}
var money=total*grade; //根据折扣率,计算实际总价
document.calc.result.value=money;
alert("您享受了 "+grade*10+"折优惠! ");
…..
银行转帐- 打 6折电话支付- 打 7折邮政汇款- 打 8折
Q币支付- 打 9折下拉列表框
pay的选项和值
ACCP V4.035
总结
网页中嵌入脚本有两种方式:使用 <Script>标签或外部 *,js
文件
JavaScript 中声明变量,var 变量名
,+”可以用于两个数相加,还可以用于连接字符串
parseInt() 和 parseFloat() 函数将字符串分别转换为整型和小数
运算符号分为算术运算符、比较运算符、逻辑运算符
条件语句分为 if语句,if-else语句,if的嵌套
多分支语句 switch根据表达式的值,进入不同的分支执行