教案首页.docx
《教案首页.docx》由会员分享，可在线阅读，更多相关《教案首页.docx（17页珍藏版）》请在冰豆网上搜索。
教案首页
教案首页
共6课时
课题
５.３ JAVASCRIPT语言简介
课型
理论课
教
学
目
的
掌握JavaScript基本语法基础；内置对象的常用属性和方法使用；浏览器对象属性和方法；培养JavaScript基本的程序实际能力；培养编写浏览器对象的事件处理程序的能力。
重点
难点
1、数据类型转换
2、内置对象的常用属性和方法
3、浏览器对象的事件处理程序的编写
教具
挂图
多媒体投影设备，PC
教学方法
讲授法
演示法
授课班级
授课日期
月日
月日
月日
月日
月日
月日
教学过程
1、导入新课：
§５.３ JAVASCRIPT语言简介
2、第一讲：
JAVASCRIPT基本语法
3、第二讲：
JAVASCRIPT常用内置对象
4、第三讲：
浏览器对象属性和方法，JavaScript事件编程
课后小结
【回顾】HTML超文本标记语言描述了网页的基本构成元素；样式表（CSS）是用于向网页添加样式（如字体、颜色、空格）的一种简单机制；二者结合可以构建漂亮的静态页面，但所设计的网页缺乏交互性；“动态HTML”是HTML、样式表和脚本的组合，用于为网页增添交互性。
【本讲重点】JAVASCRIPT数据类型和转换，条件语句，循环语句和函数的定义及调用。
５.３ JAVASCRIPT语言简介
一、JAVASCRIPT基本语法
1.JAVASCRIPT简介
JavaScript是一种高级的脚本描述语言，不依赖于特定的机器和操作系统，而且独立于操作系统平台，设计它目标是为了尽可能少地占用系统和网络资源。
同样JavaScript也可以嵌入HTML文档，是基于对象的脚本程序设计语言。
JavaScript是解释性语言，由浏览器解释完成，不需要对它们进行编译等操作。
对于JavaScript有两点必须说明：
第一，Microsoft公司在Netscape公司发布的JavaScript基础上，独立开发了自己的JavaScript语言版本JScript。
第二，不同的浏览器对脚本语言或其部分功能的支持可能有所不同，但高版本的浏览器（如：
IE5.0以上、Netscape6.0以上）对脚本语言的支持要好得多。
2.在网页中使用JAVASCRIPT
方法一：
在HTML中直接通过...方式嵌入
方法二：
通过的外联式引用
3.JAVASCRIPT的变量定义、数据类型、运算符和表达式
（1）.几个常用的方法：
write、alert、confirm和prompt
（2）.变量的定义和使用
变量命名规则：
◆变量名必须以字母或下划线（“_”）开头
◆变量名可以包含数字、从A到Z的大写字母和从a到z的小写字母
◆区分大小写，变量myVar、myVAR和myvar是三个不同的变量
◆不能为JavaScript关键字
定义变量
varx;
vary=’hello’,z=10;
vara=newDate（）;
T=true;
［注意］“变量无类型”
（3）.数据类型
JAVASCRIPT的数据类型：
数据类型
说明
示例
数字型
执行逻辑运算
487,25.95
逻辑型或布尔型
一组字符
true或false
字符串
特殊关键字表示不存在的值
“Hello”
空型
执行逻辑运算
null
强制类型转换
（4）.运算符
算术运算符：
+ - * / % ++ ---
比较运算符：
> < >= <= !
= ==
逻辑运算符：
&& || !
字符串连接运算符：
+
特殊运算符：
关系表达式？
表达式１：
表达式2 new运算符 typeof运算符号
赋值运算符：
= += -= *= /= %=
运算符的优先级
运算符类型
单个运算符
赋值
=+=-=*=/=%=
条件
?
:
逻辑–or
||
逻辑–and
&&
等于
==!
=
关系
<<=>>=
加法/减法
+-
乘法/除法
*/%
求反/递增
!
~-++--typeofnew
（5）.表达式
表达式是由常量、变量和运算符组成，其计算结果是一个值
表达式类型：
算术表达式：
表达式结果为数值
３４％４＋９８－３２／１２
逻辑表达式：
计算结果为逻辑值
3>2!
=2-1
字符串表达式：
计算结果为字符串
1997+”hello”
4.JAVASCRIPT流程控制语句―――条件语句
（1）.IF语句
格式：
if（逻辑表达式）
{...}
或
if（逻辑表达式）
{...}
else
{...}
（2）.SWITCH语句
格式：
switch（表达式）
{
caselabel1:
语句块1
[break;]
caselabel2:
语句块2
break;
…
caselabeln:
语句块n
break;
[default:
语句块n+1]
}
５.JAVASCRIPT流程控制语句―――循环语句
（1）.FOR语句
for（表达式１;表达式２;表达式3）
{
…..//循环体
}
（2）.DO...WHILE语句
格式：
do
{
…..//循环体
}while（逻辑表达式）
（3）.WHILE语句
格式：
while（逻辑表达式）
{
…..//循环体
}
（4）.BREAK、CONTINUE语句
continue;//结束本次循环，进入下次循环，整个循环还在进行中
break;结束循环，跳出循环结构；或跳出switch结构
6.JAVASCRIPT的函数
（1）.函数定义
格式：
function函数名（参数列表）
｛
语句块
[return（表达式）;]//向调用者返回一个值
｝
（2）.函数的调用
通过“函数名（）”形式调用。
【习题与思考】
1.试比较JavaScipt基本语法结构和C语言的异同。
2.试用JavaScipt编程解决“百钱百鸡”问题
3.试用JavaScipt编程求解 1!
+2!
+3!
+4!
+5!
【回顾】前次课介绍了JAVASCRIPT基本语法，其语法规范和C语言基本一样，唯一要注意的是对变量的定义不同，JAVASCRIPT通过var定义变量，“变量无类型”，但数据本身有数据类型之分。
【本讲重点】JAVASCRIPT常用内置对象：
Array、Date、String、Math对象的常用属性和方法。
二、JAVASCRIPT常用内置对象
1.对象及其属性、方法和对象处理语句
对象及其属性、方法
对象：
客观存在的事物或事件
属性：
用于描叙对象的状态和特征
方法：
对象所具备的某种“能力”
几个对象常用处理语句：
this、for…in、with,new语句
◆this总是代表当前对象
◆for…in语句用于遍历对象的每个属性或数组的每个元素。
◆with（对象名）
{语句块}
◆new创建对象一个新的实例
2.数组对象
（1）.定义数组
vara=newArray（）
varb=newArray（12,”abc”）;
varc=[12,”def”]
（2）.数组元数的引用
数组名[下标]//下标从０开始
如：
a[0],b[4]
（3）.数组的属性
length返回数据元数个数
（4）.数组的方法
方法
说明
join
此方法将数组元素组合为一个字符串
pop
此方法在从数组中删除最后一个元素之后返回该元素
push
此方法将一个或多个元素添加到数组末尾，它返回添加的最后一个元素
reverse
此方法反转数组元素：
第一个数组元素变为最后一个，最后一个变为第一个
shift
此方法从数组中删除第一个元素并返回该元素
sort
此方法对数组元素进行排序
3.Date对象
日期型是将日期存储为自1970年1月1日00:
00:
00起经过的毫秒数
（1）.定义：
vartoday=newDate（）
vardd1=newDate（“0612200614:
25:
27“）
vardd2=newDate（“20050229“）;
（2）.Date对象中所含的日期时间值的范围
值
整数
秒和分钟
0至59
小时
0至23
星期
0至6（一星期中的第几天）
日期
1至31（一月中的第几天）
月份
0至11（1月至12月）
（2）.Date常用方法
方法
说明
getDate
返回Date对象的日期（1-31）。
getDay
返回Date对象的星期（0-6）。
getHours
返回Date对象的小时数（0–23）。
getMinutes
返回Date对象的分钟数（0-59）。
getSeconds
返回Date对象的秒数（0-59）。
getMonth
返回Date对象的月份（0-11）。
getFullYear
返回Date对象的年份（四位数）。
getTime
返回自1970年1月1日00:
00:
00以来的毫秒数。
setDate
设置Date对象的日期（0–31）
setHours
设置Date对象的小时数（0-23）
setMinutes
设置Date对象的分钟数（0-59）
setSeconds
设置Date对象的秒数（0-59）
setTime
设置Date对象的时间值
setMonth
设置Date对象的月份（1-12）
SetFullYear
设置Date对象的年份。
toGMTString
用GMT数据格式规范将Date对象转换为字符串表示形式。
toLocaleString
用本地时间规范将Date对象转换为字符串表示形式。
4.Math对象
Math对象可以用来处理各种数学运算
属性&方法
名称
说明
属性
PI
值。
该值约等于3.1415。
LN10
10的自然对数值。
该值约等于2.302。
E
值约等于2.718的常数。
方法
abs（y）
返回y的绝对值。
sin（y）
返回y的正弦值。
该值的单位为弧度。
cos（y）
返回y的余弦值。
该值的单位为弧度。
tan（y）
返回y的正切值。
该值的单位为弧度。
min（x,y）
返回x和y两个数字中较小的一个。
max（x,y）
返回x和y两个数字中较大的一个。
round（y）
将参数四舍五入到最接近的整数。
sqrt（y）
返回y的平方根。
ceil（y）
返回大于或等于y的最小整数。
floor（y）
返回小于或等于y的最大整数。
5.String对象
利用String对象提供的各种函数可以方便的处理字符串
（1）.String对象的定义
varstrX=“Hello,World!
”;
strX=“Hello,World!
”;
varstrX=String（“Hello,World!
”）;
varstrX=newString（“Hello,World!
”）;
（2）.String对象常用属性和方法
属性&方法
名称
说明
属性
length
返回字符串的长度。
方法
big（）
增加字符串文本的大小。
bold（）
将字符串文本设为粗体。
fontcolor（）
确定字体的颜色。
italics（）
以斜体显示字符串。
small（）
减小文本的大小。
strike（）
显示加了删除线的文本。
sub（）
将文本显示为下标。
sup（）
将文本显示为上标。
toLowerCase（）
将字符串转换为小写。
toUpperCase（）
将字符串转换为大写。
charAt（index）
返回位于指定索引位置的字符
indexOf（searchtext[,startindex]）
检测一个字符串是否包含在另一个中。
它返回一个数值，表示searchtext在主字符串中起始位置的索引值
slice（index1,index2）
返回位于指定索引index1和index2之间的字符串。
substr（start[,length]）
从主字符串的start位置开始提取length个长度的子字符，若不设置第二个参数，则提取到字符串的末尾。
【习题与思考】
1.试用JavaScipt编程实现对１０个数进行冒泡排序
2.试用JavaScipt编写一个通用函数用于计算两个日期之间相差XX天XX小时XX秒
3.使用String对象，编写一通用函数，实现类似于VB中alltrim（）的功能
【回顾】前次课介绍了JAVASCRIPT常用内置对象的属性和方法，这些对象的方法是我们对各种类型数据进行加工处理的基础，要求掌握一些常见的属性和基本方法。
【本讲重点】浏览器对象的常用属性和方法，JAVASCRIPT常用事件。
6.浏览器对象简介
（1）.浏览器对象层次
Window
Document
Event
Frame
History
Location
Navigator
Screen
（2）.Windows对象
Window对象表示浏览器的窗口，其他对象都继承自Window对象，并且通过Window对象访问的
属性名称
说明
document
表示给定浏览器窗口中的HTML文档
event
给出关于触发事件的元素、键盘上特殊键的状态、鼠标的位置和鼠标按钮的状态等事件的信息
location
包含有关当前URL的信息
name
设置或检索窗口或框架的名称
history
包含有关用户访问过的URL信息
navigator
包含有关Web浏览器的信息
screen
包含有关客户端屏幕和显示功能的信息
parent
对包含调用子框架的窗口的引用
status
设置或检索窗口底部状态栏内的消息
default
设置在窗口状态栏中显示的默认文字（在加载页面时显示）
alert（"msg"）
显示包含消息的对话框
close（）
关闭当前窗口
focus（）
使控件接收焦点，而焦点反过来又促使执行与onfocus事件关联的代码
open（"url","name"）
打开具有指定名称的新窗口，并加载给定URL指定的文档；如果没有提供URL，则打开一个空白文档
（3）.document对象，代表Window中的HTML页面
名称
说明
alinkColor
设置或检索文档中所有活动链接的颜色
bgColor
设置或检索Document对象的背景色
linkColor
设置或检索文档链接的颜色
location
包含关于当前URL的信息
title
包含文档的标题
url
设置或检索当前文档的URL
vlinkColor
设置或检索用户访问过的链接的颜色
clear（）
清除当前文档
close（）
关闭输出流并强制显示发送的数据
write（"text"）
将文本写入文档
三、JAVASCRIPT常用事件介绍
1.事件的概念
事件：
对象对外界作用所产生的一系列反映
JavaScript事件处理程序是指诸如鼠标单击、鼠标移动等事件发生时执行的一组语句
2.常用事件介绍
（１）onclick、onmouseover、onmouseout事件
分析示例“demo_5.3_26.html”
（２）onchange、onfocus、onBlur事件
分析示例“demo_5.3_27.html”
（４）onSubmit、onload事件
3.综合案例---使用JAVASCRIPT实现表单验证
分析示例“demo_5.3_27.html”
[代码]：
综合案例---使用JAVASCRIPT实现表单验证
body,td,th{
color:
#FFFFFF;
font-size:
10pt;
font-weight:
bold;
}
functionCheckForm（）
{
if（document.frm1.username.value.length<6||document.frm1.username.value.length>12）{alert（"帐号应为6～12个字符！
"）;document.frm1.username.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）;
}
'）"bgcolor="#0099FF">
［职院学生论坛］会员注册
帐号：
密码：
信箱：
QQ号：