教案首页
共6课时
【回顾】HTML超文本标记语言描述了网页的基本构成元素;样式表(CSS)是用于向网页添加样式(如字体、颜色、空格)的一种简单机制;二者结合可以构建漂亮的静态页面,但所设计的网页缺乏交互性;“动态HTML”是HTML、样式表和脚本的组合,用于为网页增添交互性。
【本讲重点】JA V ASCRIPT数据类型和转换,条件语句,循环语句和函数的定义及调用。5.3JA V ASCRIPT 语言简介
一、JA V ASCRIPT基本语法
1. JA V ASCRIPT简介
JavaScript是一种高级的脚本描述语言,不依赖于特定的机器和操作系统,而且独立于操作系统平台,设计它目标是为了尽可能少地占用系统和网络资源。同样JavaScript也可以嵌入HTML文档,是基于对象的脚本程序设计语言。
JavaScript是解释性语言,由浏览器解释完成,不需要对它们进行编译等操作。
对于JavaScript有两点必须说明:
第一,Microsoft公司在Netscape公司发布的JavaScript基础上,独立开发了自己的JavaScript语言版本JScript。
第二,不同的浏览器对脚本语言或其部分功能的支持可能有所不同,但高版本的浏览器(如:IE 5.0以上、Netscape 6.0以上)对脚本语言的支持要好得多。
2. 在网页中使用JA V ASCRIPT
方法一:在HTML中直接通过 方式嵌入
方法二:通过的外联式引用
3. JA V ASCRIPT的变量定义、数据类型、运算符和表达式
(1). 几个常用的方法:write、alert、confirm 和prompt
(2). 变量的定义和使用
变量命名规则:
◆变量名必须以字母或下划线(“_”)开头
◆变量名可以包含数字、从A 到Z 的大写字母和从a到z的小写字母
◆区分大小写,变量myVar、myV AR 和myvar 是三个不同的变量
◆不能为JavaScript关键字
定义变量
var x;
var y=’hello’,z=10;
var a=new Date();
T=true;
[注意]“变量无类型”
(3). 数据类型
强制类型转换
(4). 运算符
算术运算符:+-*/%++-- -
比较运算符:><>=<=!===
逻辑运算符:&&||!
字符串连接运算符:+
特殊运算符:关系表达式?表达式1:表达式2new 运算符typeof 运算符号赋值运算符:=+=-=*=/=%=
(5). 表达式
表达式是由常量、变量和运算符组成,其计算结果是一个值
表达式类型:
算术表达式:表达式结果为数值
34%4+98-32/12
逻辑表达式:计算结果为逻辑值
3>2!=2-1
字符串表达式:计算结果为字符串
1997+”hello”
4. JA V ASCRIPT流程控制语句―――条件语句
(1). IF 语句
格式:
if (逻辑表达式)
{ ...}
或
if (逻辑表达式)
{ ...}
else
{ ...}
(2). SWITCH 语句
格式:
switch (表达式)
{
case label1:
语句块1
[break;]
case label2:
语句块2
break;
…
case labeln:
语句块n
break;
[default:
语句块n+1]
}
5. JA V ASCRIPT流程控制语句―――循环语句
(1). FOR 语句
for(表达式1;表达式2;表达式3)
{
….. //循环体
}
(2). DO . . . WHILE 语句
格式:
do
{
….. //循环体
} while (逻辑表达式)
(3). WHILE 语句
格式:
while (逻辑表达式)
{
….. //循环体
}
(4). BREAK、CONTINUE 语句
continue; //结束本次循环,进入下次循环,整个循环还在进行中break; 结束循环,跳出循环结构;或跳出switch结构
6. JA V ASCRIPT的函数
(1). 函数定义
格式:
function 函数名(参数列表)
{
语句块
[return(表达式);] //向调用者返回一个值
}
(2). 函数的调用
通过“函数名()”形式调用。
【习题与思考】
1. 试比较JavaScipt基本语法结构和C语言的异同。
2. 试用JavaScipt编程解决“百钱百鸡”问题
3. 试用JavaScipt编程求解1!+2!+3!+4!+5!
【回顾】前次课介绍了JA V ASCRIPT基本语法,其语法规范和C语言基本一样,唯一要注意的是对变量的定义不同,JA V ASCRIPT通过var 定义变量,“变量无类型”,但数据本身有数据类型之分。
【本讲重点】JA V ASCRIPT常用内置对象:Array 、Date、String、Math对象的常用属性和方法。
二、JA V ASCRIPT常用内置对象
1. 对象及其属性、方法和对象处理语句
对象及其属性、方法
对象:客观存在的事物或事件
属性:用于描叙对象的状态和特征
方法:对象所具备的某种“能力”
几个对象常用处理语句:this、for … in 、with ,new 语句
◆this 总是代表当前对象
◆for…in 语句用于遍历对象的每个属性或数组的每个元素。
◆with (对象名)
{ 语句块}
◆new 创建对象一个新的实例
2. 数组对象
(1). 定义数组
var a=new Array ()
var b=new Array(12,”abc”);
var c=[12,”def”]
(2).数组元数的引用
数组名[下标] //下标从0开始
如:a[0], b[4]
(3). 数组的属性
length 返回数据元数个数
3. Date对象
日期型是将日期存储为自1970 年 1 月 1 日00:00:00 起经过的毫秒数
(1). 定义:var today=new Date ()
var dd1=new Date(“06 12 2006 14:25:27“)
var dd2=new Date(“2005 02 29 “);
4. Math对象
5. String对象
利用String对象提供的各种函数可以方便的处理字符串
(1). String对象的定义
var strX=“Hello, World !”;
strX=“Hello, World !”;
var strX=String(“Hello, World !”);
var strX=new String(“Hello, World !”);
【习题与思考】
1. 试用JavaScipt编程实现对10个数进行冒泡排序
2. 试用JavaScipt编写一个通用函数用于计算两个日期之间相差XX天XX小时XX秒
3. 使用String对象,编写一通用函数,实现类似于VB中alltrim()的功能
【回顾】前次课介绍了JA V ASCRIPT常用内置对象的属性和方法,这些对象的方法是我们对各种类型数据进行加工处理的基础,要求掌握一些常见的属性和基本方法。
【本讲重点】浏览器对象的常用属性和方法,JA V ASCRIPT常用事件。
6. 浏览器对象简介
(1). 浏览器对象层次
Window
Document
Event
Frame
History
Location
Navigator
Screen
(2). Windows对象
Window对象表示浏览器的窗口,其他对象都继承自Window对象,并且通过Window
三、JA V ASCRIPT常用事件介绍
1.事件的概念
事件:对象对外界作用所产生的一系列反映
JavaScript 事件处理程序是指诸如鼠标单击、鼠标移动等事件发生时执行的一组语句
2. 常用事件介绍
(1)onclick、onmouseover、onmouseout事件
分析示例“demo_5.3_26.html”
(2)onchange、onfocus、onBlur事件
分析示例“demo_5.3_27.html”
(4)onSubmit、onload事件
3. 综合案例---使用JA V ASCRIPT实现表单验证
分析示例“demo_5.3_27.html”
[代码]:
function CheckForm()
{
if (https://www.wendangku.net/doc/4f14434030.html,ername.value.length<6 ||
https://www.wendangku.net/doc/4f14434030.html,ername.value.length>12 ) { alert("帐号应为6~12个字符!
");https://www.wendangku.net/doc/4f14434030.html,ername.focus();return(false);}
if (document.frm1.password.value.length<8 || document.frm1.password.value.length>16 )
{ alert("密码应为8~16个字符!");document.frm1.password.focus();return(false);}
if (document.frm1.email.value=="") { alert("电子邮件不能为空!
");document.frm1.email.focus();return(false);}
if (document.frm1.qq.value=="") { alert("QQ号码不能为空!
");document.frm1.qq.focus();return(false);}
document.frm1.sub1.disabled="true";
return(true);
}