《JavaScript程序设计》电子教案

XX职业技术学院

教案

院、部：软件工程学院教研室：计算机应用

姓名：职称：助教

课程名称：___________JavaScript程序设计______________

授课专业：学生人数：

授课时间：20XX至20XX学年度1学期

教材名称：JavaScript入门与提高编者曾光

出版单位：科学出版社出版时间2008年7月

第一讲

第一章第一节《万维网和HTML》

教学目的和目标

1、了解万维网的发展历史及功能。

2、介绍HTML语言的概念，简单语法。

3、熟练编写静态页面。

教学重点与难点

1、掌握理解万维网的功能。

2、掌握理解HTML概念，语法规则及文件结构。

3、HTML页面元素多，记忆难，要求学生短时间里具有编写HTML

页面能力。

教学方法和手段

1、以课堂问答法和案例讨论法为主，以讲授法和指导法为辅。

2、使用先锋电子教室多媒体手段进行教学。

教学时间：

2课时

教学过程及详细内容

1.1万维网和HTML

万维网的目的是用于共享资源，这些资源包括文字，图片，音频和

视频等.统一的标准是一种用于定位和打开这些信息的超文本语言，

HTML语言。

1.1.1什么是万维网

万维网，环球网，1989年始于瑞士日内瓦的CERN,通过统一的方式

来访问各类信息、，这就是超文本链接。

为了设计含有各类信息资源的超文本链接的万维网页面，产生了

超文本标记语言，即HTML。

流行浏览器有IE,NETscape,firefox等。

页面都有一个唯一的地址，即统一资源定位符URL,使用的协议

是HTTP协议。

域名是包括标识串和网站的类型，com代表私营公司，gov代表

政府，edu代表教育机构等。

例：http例/www.163.comhttp是协议,www是服务，163.com

是域名。

1.1.2了解HTML标签

HTML页面是纯文本，可以用记事本来编辑。

HTML文件的后缀名必须是.html或.htm,用浏览器来解释和执

行。

HTML文档基本组成部分是标签，一般有一对尖括号“◊”，并不

是所有的标签都有结束标签。HTML文档必须以开始，</html>

结束，一个HTML文档分为HEAD和BODY两部分。

<a>标签:href属性是用来指定超文本链接所要访问的URL地址。

<img>标签：src属性是用来指定要显示的图片的地址。

HTML标签允许嵌套使用。

例子：IT.htm

<!-->表示注释。

div与span:这是用得最多的两个标签，以后会有专文总结如何

使用好他们，现在必须知道的是前者是block元素，后者是inline

元素；而block元素与inline元素区别正如名字告诉我们的那样：

前者是所包含的内容是一个整体，几个block元素间垂直堆叠，强制

后面元素另起一行；而后者，几个inline元素水平排列，相互间只

有水平方向上的边距设置才会有效，padding-top,margin-bottom

等竖直格式设置会被忽略。不添加css,前者无法并放，后者无法堆

叠。即span内部是不能放div的。

ul,ol与dl:无序，有序（按字母或数字顺序）以及定义（表示对话

也可以）列表，列表项使用Qi＞元素标记，不能含block元素，即＜hx＞

不能包含其中。

a与link:〈ahref=〃#top〃＞,＜link＞可有得研究他和＜a＞都有两个重

要属性：rel以及rev,rel指出该文档与href指向的链接关系类型,

rev则将两对象方向互换，可选类型有：alternative,如果是可选

译文，则与lang属性一起用；如果是可选媒介，则用到media属性。

colgroup,col:在表头区分格需要这两个标签，并不实用，不如用

scope属性值，rowspan,colspan等属性也可，具体哪种更好现在不

明。

form与input,label:用得太多了，就说form的enctype属性与input

有file类型可用有关，而reset类型还是别再用了。

1.1.3〈body〉标签的常用属性

Background:设置页面的背景图案

Bgcolor:设置页面的背景色

Text:设置页面的文字颜色

Topmargin：顶空白像素

Leftmargin:左空白像素

Link：指定文档的所有连接颜色［不推荐］使用样式来取代

Vlink:指定文档那些被访问过的连接颜色［不推荐］使用样式来取代

1.1.4编写HTML页面

例子：l-3.htm

HTML页面是不分大小写的，常用小写。

一定要闭合HTML标签，声明正确的文档类型（DocType）,不要

使用嵌入式CSS样式，在页面head标签中引入所有的样式表文件,

不要使用嵌入式JavaScript.

1.1.5使用浏览器访问网页

流行浏览器有IE,NETscape,firefox等,跨浏览器访问网页。

布置课后任务及作业

完成课后练习题：P10:（1）（5）课堂讲解

第二讲

第一章第二节《程序与Web脚本》

教学目的和目标

1、了解程序的功能。

2、了解与认识web脚本。

教学重点与难点

1、掌握程序的功能。

2、认识web脚本。

教学方法和手段

1、以课堂问答法和案例讨论法为主，以讲授法和指导法为辅。

2、使用先锋电子教室多媒体手段进行教学。

教学时间：

2课时

教学过程及详细内容

1.2程序与Web脚本

javascript可以嵌入到HTML页面，javascript称为web脚本语言。

1.2.1认识一段程序

计算机程序或者软件程序（通常简称程序）是指一组指示计算

机每一步动作的指令，通常用某种程序设计语言编写，运行于某种

目标体系结构上。打个比方，一个程序就像一个用汉语（程序设计

语言）写下的红烧肉菜谱（程序），用于指导懂汉语的人（体系结

构）来做这个菜。通常，计算机程序要经过编译和链接而成为一种

人们不易理解而计算机理解的格式，然后运行。未经编译就可运行

的程序通常称之为脚本程序。

程序的运行:为了一个程序运行，计算机加载程序代码，可能还

要加载数据，从而初始化成一个开始状态，然后调用某种启动机制。

在最低层上，这些是由一个引导序列开始的。

在大多数计算机中，操作系统例如Windows等，加载并且执

行很多程序。在这种情况下，一个计算机程序是指一个单独的可执

行的映射，而不是当前在这个计算机上运行的全部程序。

冯诺依曼体系结构:在一台基于最常见的冯诺依曼体系结构(又

称HarvardArchitecture)的计算机上，程序从某种外部设备，通常

是硬盘，被加载到计算机里。如果计算机选择冯诺依曼体系结构，

那么程序就被加载入内存。指令序列顺序执行，直到一条跳转或转

移指令被执行，或者一个中断出现。所有这些指令都会改变指令寄

存器的内容。

基于这种体系计算机如果没有程序的支持将无法工作。一个计

算机程序是一系列指令的集合。

程序里的指令都是基于机器语言;程序通常首先用一种计算机

程序设计语言编写，然后用编译程序或者解释执行程序翻译成机器

语言。有时，程序也可以用汇编语言编写，汇编语言实质就是表示

机器语言的一组记号一在这种情况下，用于翻译的程序叫做汇编程

序(Assembler)。

程序和数据:程序已经被定义了。如何定义数据呢？数据可以被

定义为被程序处理的信息。当我们考虑到整个计算机系统时，有时

程序和数据的区别就不是那么明显了。中央处理器有时有一组微指

令控制硬件，数据可以是一个有待执行的程序(参见脚本编程语言),

程序可以编写成去编写其它的程序；所有这些例子都使程序和数据

的比较成为一种视角的选择。有人甚至断言程序和数据没有区别。

编写一个程序去生成另外一个程序的过程被称之为原编程

(Metaprogramming)。它可以被应用于让程序根据给定数据生成代

码。单一一个程序可能不足以表示给定数据的所有方面。让一个程

序去分析这个数据并生成新的程序去处理数据所有的方面可能会容

易一些。Lisp就是一例支持这种编程模式的程序语言。

在神经网络里储存的权重是一种数据。正是这些权重数据，跟

网路的拓扑结构一起，定义了网络的行为。人们通常很难界定这些

数据到底表示什么或者它们是否可以由程序来代替。这个例子以及

跟人工智能相关的其它一些问题进一步考验程序和数据的区别。

算法:算法指解决某个问题的严格方法，通常还需辅以某种程度

上的运行性能分析。算法可以是纯理论的，也可以由一个计算机程

序实现。理论算法通常根据复杂性分为不同类别；实现的算法通常

经过颇析(Profiling)以测试其性能。请注意虽然一个算法在理论上有

效可行，但是一个糟糕的实现仍会浪费宝贵的计算机资源。(更详

细信息，参见算法信息论，AlgorithmicInformationTheory)

开发:编写程序是以下步骤的一个往复过程：编写新的源代码，

测试、分析和提高新编写的代码以找出语法和语义错误。从事这种

工作的人叫做程序设计员？?趋多样，由此产生了不同种类的程序设

计员，每一种都有更细致的分工和任务。软件工程师和系统分析员

就是两个例子。现在，编程的长时间过程被称之为“软件开发”或

者软件工程。后者也由于这一学科的日益成熟而逐渐流行。

计算机程序是利用相应的程序设计语言，按照一定的逻辑和语

法进行编写和组织,通过程序的运行，使得计算机实现某种特定的功

能。与web相关的有asp,jsp,php等。例:Php程序一段代码如下:

If($num>0)

{

echo“thenumberyouenteris>0”

)

Else

(

echo“thenumberyouenteris<=0"

)

1.2.2认识Web脚本

web脚本有javascript,还有VBscript等,脚本语言同程序

设计语言一样,是根据一定的逻辑和语法来编写脚本，以实现网

页中的特殊效果。

例：javascript程序如下：

If(num>0)

alert("thenumberyouenteris>0");

Else

alert("thenumberyouenteris<=0");

)

布置课后任务及作业

完成课后练习题：PH：进阶练习。

复习总结：

1、万维网的发展历史及功能是共享资源。

2、HTML语言的概念，简单语法。

3、掌握程序的功能。

4、认识web脚本。

第三讲

第二章第一节《JavaScript的发展史》

第二节《JavaScript的作用》

教学目的和目标

1、了解JavaScript的发展史。

2、掌握JavaScript的作用。

3、熟练编写页面特效。

教学重点与难点

1、掌握理解JavaScript的作用。

2、熟练编写各种页面特效。

3、HTML页面元素多，记忆难，要求学生短时间里具有编写HTML

页面能力。

教学方法和手段

1、以课堂问答法和案例讨论法为主，以讲授法和指导法为辅。

2、使用先锋电子教室多媒体手段进行教学。

教学时间：

2课时

教学过程及详细内容

2.1JavaScript的发展史

Netscape的JavaScript:增加更多的用户交互,控制浏览器以

及动态创建页面内容的诸多功能，最主要的是使合法性验证之类

的工作在客户端得以实现。

Microsoft的Jscript:IE浏览器。

EMCA-262标准：欧洲计算机制造商联合会创造了一个国际通

用的标准化版本的JavaScript,称为EMCAScripto

2.2JavaScript的作用

2.2.1表单验证:最基本和最重要的作用。

例：2T.htm演示各个限制条件。

2.2.2实现网页特效。

文字特效：例子2-2.htm鼠标特效2-3.htm

图片特效2-4.htm

页面特效2-5.htm

时间特效2-6.htm

状态栏特效2-7.htm

导航特效2-8.htm

综合特效2-9.htm

2.2.3改善页面样式

页面样式是通过样式表来定义的.通过样式表，定义页面元素的

表现形式。如控制颜色，图案，文字，可见性等。

2.2.4应用Ajax

Ajax技术并不是一个新的语言，是

javascript,xmlhttp,css,xhtml,xml等的一个综合应用□优势是通

过数据异步传输从而减少交互时间和改善用户体验等。

例：图2.20:页面的多块区域能分时异步加载，减少等待时间。

图2.23:通过Ajax技术，实时对用户名进行验证并在页面上显示文

字提示。

布置课后任务及作业

完成课后练习题：P32:(1)(4)课堂讲解

第四讲

第二章第三，四，五节《使用JavaScript》，《浏览器与

JavaScript^《其他常用脚本和技术》

教学目的和目标

1、掌握Javascript的使用。

2、了解浏览器与JavaScript的版本号。

3、了解其他常用脚本和技术。

教学重点与难点

1、掌握理解JavaScript的使用。

2、掌握理解文档对象模型概念。

教学方法和手段

1、以课堂问答法和案例讨论法为主，以讲授法和指导法为辅。

2、使用先锋电子教室多媒体手段进行教学。

教学时间：

2课时

教学过程及详细内容

2.3使用Javascript

2.3.1认识〈script＞标签

Javascript是嵌入到html才被解释执行的，Javascript代

码可以放到页面的任意位置。使用。一和〃一》将程序段包含起

来，可以让不支持的浏览器忽略过这一段代码。

2.3.2嵌入网页

Alert():弹出一个按钮的提示框。例：2-10.htm

2.3.3使用JavaScript文件

把篇幅较多的JavaScript代码保存到一个单独的文件中，然

后在HTML文档中进行引用，保持页面的清晰性。代码重复使用，

只需引用文件即可，减少维护的工作量。

JavaScript文件使用js作为扩展名，通过〈script》中的src

来引用.使用＜script＞标签的src属性来指定文件的路经，可以使

用外部的JavaScript文件。

2.3.4使用事件

事件是Javascript时刻监视某些特定条件，当Javascript

发现这些条件发生后，根据具体的代码对事件进行响应。如

onclick,onfocus事件等。例：2-12.htm

除了由用户的行为来触发的事件外，Javascript也响应某些

不由用户触发的事件，如整个HTML页面加载完后的load（加载）

事件。

2.4浏览器与JavaScript

2.4.1简单认识文档对象模型

文档对象模型D0M（DocumentObjectModel）是表示文档（HTML

文档）和访问，操作构成文档的各种元素（如HTML标记和文本串）

的应用程序接口（API）,把整个页面规划成由节点分层级构成的文

档。例：2-13.htm

DOM通过创建树来表示一个HTML文档，从而使控制文档内容

及结构变得异常的容易。

2.4.2Javascript的版本表2.1

2.4.3不同的浏览器支持IE,Netscape,firefox等，表2.2

2.4.4指定Javascript版本

<script>标签的language属性来指定。

例：<scriptlanguage=javascript1.1,J>

Alert(<<hello>>);</script>

版本号可以省。

2.5其他常用脚本和技术

2.5.IVBscript语言例：2-14.htm

2.5.2Java语言

JavaScript和Java不是一个概念，Java是SUN公司推出的

编程语言，跨平台执行的程序设计语言，特别适合于Internet应

用程序开发；而JavaScript是Netscape公司的产品，其目的是

为了扩展NetscapeNavigator功能而开发的一种可以嵌入Web页

面中的基于对象和事件驱动的解释性语言。

2.5.3Asp和Asp.net语言

Asp是“活动服务器网页”，用来创建和运行动态网页或Web

应用程序，用于各种动态网站，扩展名为.asp。

Asp.net是asp的最近版本，扩展名为.asp或.aspxo

2.5.4php语言

基于服务端创建动态网站的脚本语言，是开放源码和跨平台运

行。

布置课后任务及作业

完成课后练习题：P32:(5)——(9)课堂讲解

P32:进阶练习即项目实训1

第五讲

第三章第一部分

教学目的和目标

1、熟悉编辑javascript常用工具。

2、掌握整个程序设计过程与思路。

3、掌握普通提示对话框方法。

4、掌握控制页面元素的显示和隐藏方法。

教学重点与难点

1、掌握理解整个程序设计过程与思路。

2、掌握普通提示对话框方法。

3、掌握控制页面元素的显示和隐藏方法。

教学方法和手段

1、以课堂问答法和案例讨论法为主，以讲授法和指导法为辅。

2、使用先锋电子教室多媒体手段进行教学。

教学时间：

2课时

教学过程及详细内容

3.1常用工具介绍

3.1.1使用记事本：

记事本编辑纯文本文件，HTML文档，Javascript程序和其他各

种类型的文本文件.演示操作.注意保存文件类型选择为"所有文

件”，文件名扩展名为.htm或html,js等.

3.1.2使用EditPlus文字编辑器。

EditPlus文字编辑器功能强大，使用方便。

3.1.3使用Dreamweaver网页软件

1.方便的设计

2.可视化编辑

3.强大的Javascript和CSS支持

3.2设计简单的Javascript功能

要创建一个完整的程序，事先需要对所实现的功能进行设计.

例:2-9.htm

3.3编写Javascript代码之前

按照设计好的功能进行具体的实现，包括HTML页面和

Javascript相关编写

3.3.1向用户显示普通提示对话框

一个好的网页除了要有合适的动态内容外，还应该有好的交

互性,就是让用户在访问网页的过程中得到信息提示,或提供给用

户一些选择.

<scriptlanguage="javascript”>

<!—//

Alert("thisisasimpleuseralert.");

//一>

</script>

Alert()是内置函数，出现提示框.

3.3.2控制页面元素的显示和隐藏

Javascript的主要作用之一是控制页面元素的样式.

例：3-l.HTML

Javascript控制样式的显示需要两个条件：

⑴获取需要控制的元素对

象.document.getElementByld(uidv)

(2)使用对象的style属性来操作样式.

例：3-2.html

布置课后任务及作业

完成课后练习题：P59:(1)——(3)课堂讲解

第六讲

第三章第二部分

教学目的和目标

1、掌握确认提示对话框方法。

2、掌握网页中输出内容方法。

3、掌握变量存储数据定义方法。

4、掌握函数定义方法。

5、掌握HTML与Javascript整合技巧与方法。

教学重点与难点

1、掌握确认提示对话框方法。

2、掌握网页中输出内容方法。

3、掌握变量存储数据定义方法。

4、掌握函数定义方法。

5、理解HTML与Javascript整合技巧与方法。

6、培养学生整合HTML与Javascript能力。

教学方法和手段

1、以课堂问答法和案例讨论法为主，以讲授法和指导法为辅。

2、使用先锋电子教室多媒体手段进行教学。

教学时间：

2课时

教学过程及详细内容

3.3.3向用户显示确认提示对话框

<scriptlanguage="javascript”>

<!—//

confirm("eat?");

//一>

</script>

confirm。是内置函数，出现确认提示框.

3.3.4在网页中输出内容提供了在网页中输出内容的方法，

用"document,write();“

例：3-3.html

3.3.5使用变量存储数据,用var来显示

Varstr="hello";

例：3-5.html

3.3.6使用javascript进行计算Javascript支持等

运算符.

例:3-6.html

3.3.7将javascript代码定义为函数

定义函数使用function语句

Function函数名()

(

语句；

)

<scriptlanguage="javascript”>

<!—//

FunctionFunl(i,j,k)

{alert(i-j+k);}

Funl(10,100,3);

//一>

</script>

3.4HTML文档编写与Javascript整合

把代码嵌入到页面中.

3.4.1编写出所有需要的页面元素

3-7.html

3-8.html

3.4.2通过单选按钮控制隐藏属性

编写出所有需要的页面元素

3-9.html

3.4.3提交表单时的确认提示框

3.4.4用JAVASCRIPT函数计算结果

3.4.5生成最终页面

3.4.6整合所有功能:借助主函数把所有功能组织起来.

3-10.html

布置课后任务及作业

完成课后练习题：P59:(4)-----(10)课堂讲解

P59:进阶练习即项目实训2。

第七讲

第四章第一部分

教学目的和目标

1、掌握Javascript语法结构。

2、掌握理解Javascript对象概念。

3、掌握理解Javascript对象创建。

教学重点与难点

1、掌握理解Javascript语法结构。

2、掌握理解Javascript对象概念。

3、对象概念多，理解难，要求学生短时间里具有编写对象能力。

教学方法和手段

1、以课堂问答法和案例讨论法为主，以讲授法和指导法为辅。

2、使用先锋电子教室多媒体手段进行教学。

教学时间：

2课时

教学过程及详细内容

4.IJavascript语法结构

4.1.1大小写敏感

对大小写敏感，必须大小写一致，而HTML是不区分大小写的，而

Javascript是嵌入到html中去，必须注意。

4.1.2空格，制表符和换行

使分隔符，来对齐用程序语句，或将一条长语句分成几行编写，

对于程序的美观整洁是很有好处的，增加了程序的可读性。

4.1.3直接量

是程序里直接显示出来的数值。

4.1.4分号

用来分隔两条程序语句的，每条语句都使用一个分号'”作为结

束。

4.1.5标识符

用来命名变量或函数等。

标识符命名规则必须是以字母，下划线或美元符开始的字母，数

字，或任意组合，数字不允许作为变量名的开头，标识符不能和

保留字重名。

4.1.6保留字

表4.1,4.2,4.3

4.2理解Javascript对象

4.2.1Javascript面向对象概念

面向对象尽可能模拟人类的思维习惯，使程序设计的方法与过程

尽可能的接近人类的自然思维方式.

Javascript对象类基于构造器函数创建的实例化一个对象，构造

器函数包含属性和方法两个基本的元素，属性实际上用于存储对

象的数据，方法是在对象内部调用的函数,用来实现一些功能或对

属性进行访问更改.

4.2.2对象的创建

Javascript对象是通过"new”来创建的，

Varobj=newobject();

类名通常以大写字母来开头，而构造器函数相当于类，因此构造机

器函数通常以大写字母开头.

Vardate=newDate();〃创建日期对象

布置课后任务及作业

完成课后练习题：P70:(1)——(4)课堂讲解

第八讲

第四章第二部分

教学目的和目标

1、掌握Javascript对象属性的设置和读取。

2、掌握Javascript对象的方法，继承和原型。

3、培养学生养成良好的编程习惯。

教学重点与难点

1、掌握理解Javascript对象属性的设置和读取。

2、掌握理解Javascript对象的方法，继承和原型。

3、理解良好的编程习惯重要性。

教学方法和手段

1、以课堂问答法和案例讨论法为主，以讲授法和指导法为辅。

2、使用先锋电子教室多媒体手段进行教学。

教学时间：

2课时

教学过程及详细内容

4.2.3属性的设置和读取

通常用”.”运算符实现属性的存取，”.”左边是表示该对象的

引用名，右边是属性名称.

Vardog=newDog();

Dog.dog_weight=50;

Dog.dog_type="big";

Alert("dogtype:"+dog.dog_type);

4.2.4对象的方法:访问属性通过"this”，对象的方法其实就

是一个函数，

FunctionshowDoglnfo()

alert("dogtype:"+this.dog_type);

4.2.5对象的继承和原型:对象是类的一个实例，类是对象的抽象,

继承是对象的一个很重要的特征，对象可以从实例化它的构造器

函数中继承到属性和方法.

FunctionAnimal(type,sound,food)

{

This.animal_type=type;

〃实例化对象

Vardog=newanimal("dog",...);

原型属性是一个内置的属性，指定了对象所扩展的是构造器函数.

Dog.prototype.detail_type="";

Varcat=newAnimal("cat",…)；

Alert(cat.detail_type);〃输出””

通常情况下用prototype,detail_type=""；增加属性，具体的属

性值将在具体的实例化对象中设置，使用原型属性可以实现附加

对象定义扩展对象.

4.3养成良好的编程习惯

维护成本大于开发成本，养成良好的编程习惯尤为重要。

4.3.1命名风格：命名风格必须保持一致性和可读性，任何一个实

体的主要功能或用途必须能够从命名中明显的看出来。

函数：实现功能。”动词+名词”：showinfo();

变量名：存储数据：名词或形容词+名词。

以小写字母开头,第二个开始小写，allMoneyO;

类:使用名词，以大写字母开头，BookO;

4.3.2使用注释

(1)使用实现单行注释

(2)使用“/*”和“*/”实现块注释，不能嵌套，可以跨多行。

(3)使用整块注释

注释不是越多越好，要讲究一个度，没必要为每条语句加注释。

布置课后任务及作业

完成课后练习题：P70:(5)——(8)课堂讲解

P71:进阶练习

第九讲

第五章第一部分

教学目的和目标

1、掌握变量的命名。

2、掌握赋值给变量的方法。

3、掌握变量的作用域。

教学重点与难点

1、掌握理解变量的命名。

2、掌握理解赋值给变量的方法。

3、掌握理解变量的作用域。

教学方法和手段

1、以课堂问答法和案例讨论法为主，以讲授法和指导法为辅。

2、使用先锋电子教室多媒体手段进行教学。

教学时间：

2课时

教学过程及详细内容

5.1变量的命名

变量是用来存储数据的，利用变量参与各种运算以实现动态的效

果。

5.1.1使用有意义的名称

变量名代表了所存储数据的具体含义，给变量取合适的名字能够

理解变量的含义，从而让程序的编写和理解更加容量。

Varprice=32.8〃定义price变量，表示价格

5.1.2使用多个单词与分隔符

第二个单词首字母要答谢，或在多个单词间使用分隔符

VaruserName="wei

Vardog_weight=55;

5.1.3全大写命名方式

变量名字母全部大写，表明该变量的级别较高，为全局变量。

5.1.4给变量名增加前缀

防止重名或混淆，把具有相关性质的变量进行统一命名，如统一

使用前缀或.

5.1.5综合示例例5-l.html

第十讲

教学时间：

2课时

5.2赋值给变量

变量的作用是用来存储数据的，变量赋值使用

(1)先定义变量后赋值Varbook_name;

book_name="javascript”;

(2)定义时赋值Varbook_name="javascript";

5.3变量的作用域

分为全局和局部两种，全局变量是在函数体外声明的，可以在任

何地方使用，局部变量在函数体内声明，只能在函数体内使用，

并随着函数的结束而消失。

5.3.1局部变量：在函数体内声明的变量

5.3.2全局变量：在函数体外声明的变量，声明后可以在任何地方

调用，声明全局变量，全部用大写，

如果全局变量和局部变量遇到重名情况，局部变量优先。

布置课后任务及作业

完成课后练习题：P87:(1)(4)课堂讲解

第十一讲

教学时间：

2课时

第五章第二部分

教学目的和目标

1、掌握数字，布尔值的使用方法。

2、掌握字符串的常见用法。

3、掌握数组的常见用法。

教学重点与难点

1、掌握理解数字，布尔值的使用方法。

2、掌握理解字符串的常见用法。

3、掌握理解数组的常见用法。

教学方法和手段

1、以课堂问答法和案例讨论法为主，以讲授法和指导法为辅。

2、使用先锋电子教室多媒体手段进行教学。

教学时间：

2课时

教学过程及详细内容

5.4使用数字

一种是整型，另一种是浮点型，科学计算法

例5-2.html,5-3.html

5.5使用布尔值

布尔值是一个逻辑值，有true和false两个，对应1和0表示。

5.6使用字符串

字符串是一段文本内容，常用一对单引号或双引号起来。

5.6.1创建字符串：字符串里含有双引号，那么创建是就用一对单

引号“.

Varstr='Iam"student”';

Varstr="Iam'student'";

字符串必须以相同类型的引号开始和结束。

5.6.2使用转义符号：在字符串里边包含单引号和双引号，

了解转义字符。

Varstr="Iam\"student\v,from'china'";

表5.1

5.6.3使用length属性获取字符串长度，length属性获取。

5.6.4截取字符串：substring方法，substr方法

(1)截取指定起始位置和长度的字符串。

Varstr=“十月一日是国庆节”；

Alert(str.substr(5,3));〃国庆节

⑵只指定起始位置截取字符串，默认到字符串末尾。

Alert(str.substr(5))

⑶利用length属性动态指定位置截取。

Alert(str.substr(0,str.length-3));

5.6.5字符串的大小写转换：

toLowerCase():变为小写

toUpperCase():变为大写

Alert(a大写：”+str.toUpperCase()+“小写："

str.toLowerCase());

5.6.6查找与匹配字符串：

Indexof或lastindexof方法来进行

Indexof：字符串在被查找的字符串里第一次出现的位置。

lastindexof：该字符串在被查找的字符串里最后一次出现的位

置。

Varstr="a";

Varstrl="javascript”;

Alert("thefirst:"+strl.indexOf(str)+w,thelast:"+

strl.lastlndexOf(str));

第十二讲

教学时间：

2课时

5.7使用数组

数组是由几个变量组合起来的一个变量组。

5.7.1创建一个数组

使用Array()构造器来创建。

Varary=newArray(num);

5.7.2给数组元素赋值，通过下标元素赋值也可以创建时赋值。

Varary=newArray("a","b","c");

Ary[0]="a";

Alert(ary[0]);

5.7.3使用length属性获取数组的长度，数组的长度是数组元素

的个数，ary.lengtho

For(vari=0;i<ary.length;i++)

(

alert(ary[i]);

}

5.7.4多维数组，数组中的每一个元素就是一个数组，就变成了三

维数组.

例：5-4.htmlo

布置课后任务及作业

完成课后练习题：P87:(5)(17)课堂讲解

P87:进阶练习

第十三讲

第六章第一节函数的定义与调用

教学目的和目标

1、掌握函数的定义格式。

2、掌握函数参数的传递。

3、掌握调用函数。

教学重点与难点

1、掌握理解函数参数的传递。

2、掌握理解调用函数。

3、函数概念多，理解难，要求学生短时间里具有编写函数能力。

教学方法和手段

1、以课堂问答法和案例讨论法为主，以讲授法和指导法为辅。

2、使用先锋电子教室多媒体手段进行教学。

教学时间：

2课时

教学过程及详细内容

6.1.1定义函数

JavaScript函数可以封装那些在程序中可能要多次用到的模块。

并可作为事件驱动的结果而调用的程序。从而实现一个函数把它与事

件驱动相关联。这是与其它语言不一样的地方。

function函数名（参数）

：

具体语句;

）

函数由关键字function定义，function是关键字。

函数名必须是唯一的，命名规则与变量名的命名规则一样，并且

是大小写有区别的。

函数可以带参数也把可以不带参数，其中函数的参数可以是常量、

变量或表达式。

当使用多个参数时，参数间以逗号相隔。

如果函数需要返回，则使用关键字retun将值返回。

如果所要调用的函数不带参数，使用时只要直接以“函数名()”

的方式调用函数就可以了。

如果调用的函数具有返回值，可以通过变量或直接将函数置于表

达式中。

functionshowResult(a,b)

{

Varresult=a*b;

Alert("squareis:"+result);

}

函数说明：

形式参数：定义函数时为函数赋予的参数，它代表了参数类型和

位置，系统并不为形式参数分配实际的存储空间，而是在调用函数时

候由实际参数代表形式参数参与函数的运行。

实际参数：

调用函数时传递给函数的参数，它通常在调用函数前已经分配了

内存，并且包含了实际数据。在函数执行过程中，实际参数参与函数

的运行，函数定义中的形式参数只是表明了调用函数时实际传递的参

数类型.

函数定义格式:例子：6-1.htm,6-10.htm

函数参数的传递:例子：6-8.htm

6.1.2调用函数

定义好函数，在需要的地方调用。如果所要调用的函数不带参数,

使用时只要直接以“函数名()”的方式调用函数就可以了。如果调用

的函数具有返回值，可以通过变量或直接将函数置于表达式中。

在多个位置调用函数，可以在下述位置调用JavaScript函数：

在JavaScript代码中调用函数；在事件响应中调用函数；通过链

接调用函数。

(1)在JavaScript代码中调用函数6-9.htm

(2)在事件中调用函数6-4.htm

(3)通过链接调用函数6-5.htm

布置课后任务及作业

P99:(1)——(3)课堂讲解

第十四讲

第六章第一节函数的返回值与作用域

教学目的和目标

1、掌握函数的返回值。

2、掌握函数变量的作用域。

3、掌握组合多个函数实现复杂功能。

教学重点与难点

1、掌握理解函数的返回值。

2、掌握理解函数变量的作用域。

3、掌握理解组合多个函数实现复杂功能。

教学方法和手段

1、以讲授法、课堂操作演示及学生实训为主。

2、使用先锋电子教室多媒体手段进行教学。

教学时间：

2课时

教学过程及详细内容

6.1.3函数的返回值与函数变量的作用域

(1)函数中变量的作用域：全局变量是在函数体外声明的，可以在

任何地方使用，局部变量在函数体内声明，只能在函数体内使用，并

随着函数的结束而消失。具体区别详见例子：6-6.htm

(2)函数的返回值：

函数可以通过参数接受传入的变量，将一些结果返回给调用函数的地

方，由“return返回值”完成；

Varretval=函数(参数)；

例子：

6-2.htm

6-7.htm

6-8.htm

函数可以返回一个确定的值，也可以只用retun返回空值。

6.1.4组合多个函数来实现复杂功能

代码重用，编写成函数，起主导地位的函数是主函数，被调用的函数

是子函数，主函数和子函数通过主函数调用子函数。

例子：6-3.htm

布置课后任务及作业

P99:(4)——(6)课堂讲解

复习总结：

1、掌握函数的定义格式。

2、掌握函数参数的传递。

3、掌握调用函数。

4、掌握函数的返回值。

5、掌握函数变量的作用域。

6、掌握组合多个函数实现复杂功能。

第十五讲

第六章第二节HTML标签与事件

教学目的和目标

1、掌握常用HTML标签事件。

2、掌握事件处理概念，处理程序。

教学重点与难点

1、掌握常用HTML标签事件。

2、掌握事件处理概念，处理程序。

教学方法和手段

1、以讲授法、课堂操作演示及学生实训为主。

2、使用先锋电子教室多媒体手段进行教学。

教学时间：

2课时

教学过程及详细内容

6.2.1HTML标签与事件

HTML标签是主要的事件对象,(input〉标签的“type”属性.

表6.1

6.2.2事件处理器

1、基本概念

JavaScript是基于对象(object-based)的语言。这与Java不同，Java是面

向对象的语言。而基于对象的基本特征，就是采用事件驱动(event-driven)。它

是在用形界面的环境下，使得一切输入变化简单化。通常鼠标或热键的动作我们

称之为事件(Event),而由鼠标或热键引发的一连串程序的动作，称之为事件

驱动(EventDriver)0而对事件进行处理程序或函数，我们称之为事件处理程

序(EventHandler)。

事件处理器的名称是由事件名加上一个“on”组成,统一用小写，事件处理

器代码后面用"="添加了事件触发时需要的JavaScript代码，代码可以是一条

语句也可以是一个函数，〈inputonclick=,showinfo();J>

2、事件处理程序

在JavaScript中对象事件的处理通常由函数(Function)担任。其基本格式

与函数全部一样，可以将前面所介绍的所有函数作为事件处理程序。格式如下:

Function事件处理名(参数表){

事件处理语句集；

范例1：下例程序是一个自动装载和自动卸载的例子。即当装入HTML文档

时调用loadform()函数,而退出该文档进入另一HTML文档时则首先调用

unloadform()函数,确认后方可进入。

6_sl.htm

布置课后任务及作业

P99:(7)(9)课堂讲解

第十六讲

第六章第二节使用常用事件

教学目的和目标

1、掌握使用常用事件方法。

2、掌握使用onClick,onLoad事件。

3、掌握组合函数实现事件功能。

教学重点与难点

1、掌握使用常用事件方法。

2、掌握使用onClick,onLoad事件。

3、掌握组合函数实现事件功能。

教学方法和手段

1、以讲授法、课堂操作演示及学生实训为主。

2、使用先锋电子教室多媒体手段进行教学。

教学时间：

2课时

教学过程及详细内容

6.2.3、使用常用事件

JavaScript事件驱动中的事件是通过鼠标或热键的动作引发的。它主要有

以下几个事件：

（1）单击事件onClick

当用户单击鼠标按钮时，产生onClick事件。同时。nClick指定的事件处理

程序或代码将被调用执行。通常在下列基本对象中产生：

•button（按钮对象）

•checkbox（复选框）或（检查列表框）

•radio（单选钮）

•resetbuttons（重要按钮）

•submitbuttons（提交按钮）

例：可通过下列按钮激活change。文件:

<Form>

<Inputtype二〃button"Value=""onClick二〃change()〃>

</Form>

在onClick等号后，可以使用自己编写的函数作为事件处理程序，也可以使

用JavaScript中内部的函数。还可以直接使用JavaScript的代码等。例：

<Inputtype二〃button"value=〃〃onclick二alert(〃这是一个例子〃)；

(2)失去焦点onBlur

当text对象或textarea对象以及select对象不再拥有焦点、而退到后台

时，引发该文件，他与onFocas事件是一个对应的关系。

(3)onChange改变事件

当利用text或texturea元素输入字符值改变时发该事件，同时当在select

表格项中一个选项状态改变后也会引发该事件。

例：<Form>

<Inputtype二〃text“name="Test"value="Test"

onCharge="?check(Jthis,test)zz>

</Form>

(4)选中事件onSelect

当Text或Textarea对象中的文字被加亮后，引发该事件。

(5)获得焦点事件onFocus

当用户单击Text或textarea以及select对象时，产生该事件。此时

该对象成为前台对象。

(6)载入文件onLoad

当文档载入时，产生该事件。onLoad一个作用就是在首次载入一个文档时

检测cookie的值，并用一个变量为其赋值，使它可以被源代码使用。

(7)卸载文件onUnload

当Web页面退出时引发onUnload事件，并可更新Cookie的状态。

6_sl.htm6_20.htm

布置课后任务及作业

P99:进阶练习

复习总结：

1、掌握函数的使用。

2、掌握常用事件的使用。

第十七讲

第7章算术，赋值运算符和表达式

教学目的和目标

1、掌握理解表述式。

2、掌握使用算术运算符。

3、掌握使用赋值运算符。

教学重点与难点

1、掌握理解表述式。

2、掌握使用算术运算符。

3、掌握使用赋值运算符。

教学方法和手段

1、以讲授法、课堂操作演示及学生实训为主。

2、使用先锋电子教室多媒体手段进行教学。

教学时间：

2课时

教学过程及详细内容

7.1、使用表达式

在定义完变量后，就可以对它们进行赋值、改变、计算等一系列

操作，这一过程通常又叫称一个叫表达式来完成，可以说它是变量、

常量、布尔及运算符的集合，因此表达式可以分为算术表述式、字串

表达式、赋值表达式以及布尔表达式等。

7.2、运算符概述

运算符完成操作的一系列符号，在JavaScript中有算术运算符，

如+、-、*、/等；有比较运算符如！=、==等；有new,逻辑布尔

运算符如！（取反）、|、||;有字串运算如+、+=等。表7.1

7.3、使用算术运算符

7.3.1、二元运算符

需要两个操作数才能进行运算.

其二元运算符由下列组成：表7.2

操作数1运算符操作数2

即由两个操作数和一个运算符组成。如50+40、〃This〃+〃that〃

等。

+（加）、-（减）、*（乘）、/（除）、%（取模）、

例子:7-1.htm

Javascript是一种弱类型的语言,本身就有类型转换的

功能,如乘法:字符串转换成数字.但加法除外.

Vara="3”；

Varb="4”;

Varc=a*b;

Alert("resultis:"+c);//12

Vara="3"；

Varb="4”;

Varc=a+b;

Alert("resultis:"+c);//34

例子:7-2.htm

7.3.2、一元运算符

只需一个操作数，其运算符可在前或后。表7.3

-(取反)、++(递加1)、一(递减1)。

(1)”++”运算符在前面：7-3.htm

Vara=3;

Varb=++a;

Alert("ais:"+a+”,bis:"+b);//4,4

⑵"++”运算符在后面

varc=3;

vard=c++;

alert(〃cis："+c+〃，dis"+d);//4,3

(3)“一”运算符在前面：7-3.htm

Vare=3;

Varf=++e;

Alert(eis:"+e+”，fis:"+f);//2,2

(4)“一”运算符在后面

varh=3;

vari=h一;

alert("his："+h+”,iis"+i);//2,3

⑸取反运算符"-"

varj=3;

vark=-j;

alert("jis：〃+j+”,kis"+k);//3,-3

第十八讲

教学时间：

2课时

7.4、使用赋值运算符

“=”，表7.4,例子：7-4.htm

7.4.1、”+="运算符

先把左右操作数相加，后把得到的结果赋值给左边的操作数.

vara=3;

a+=2;

alert("ais："+a);//5

7.4.2、运算符

varc=3;

c-=2;

alert(，zcis："+c);//l

7.4.3、”*="运算符

vare=3;

e*=2;

alert("eis："+e);//6

7.4.4、”/=”运算符

varh=3;

h/=2;

alert(，zhis："+h);//l.5

7.4.5、“%二"运算符

varj=3;

j%=2;

alert("jis："+j);//l

布置课后任务及作业

P116:(1)(3)课堂讲解

第十九讲

第7章关系，逻辑，字符串运算符

教学目的和目标

1、掌握使用关系运算符。

2、掌握使用逻辑运算符。

3、掌握使用字符串运算符。

4、掌握理解运算符的优先级。

教学重点与难点

1、掌握使用关系运算符。

2、掌握使用逻辑运算符。

3、掌握使用字符串运算符。

4、掌握理解运算符的优先级。

教学方法和手段

1、以讲授法、课堂操作演示及学生实训为主。

2、使用先锋电子教室多媒体手段进行教学。

教学时间：

2课时

教学过程及详细内容

7.5、使用关系运算符

比较运算符它的基本操作过程是，首先对它的操作数进行比较，尔后

再返回一个true或False值，有6个比较运算符：

〈（小于）、＞（大于）、＜=（小于等于）、＞=（大于等于）、==（等于）、！=（不

等于）。例子:7-5.htm

7.5.1、”==”运算符

判断左右操作数是否相等，相等返回true,否则返回false

vara=3;

varb=3;

varc=2;

varflag_ab=a==b;

varflag_ac=a==c;

，，

alert("aisequalofb："+flag_ab+＞aisequalofc：

“+flag_ac);//true,false

7.5.2、”！=”运算符

vara=3;

varb=3;

varc=2;

varflag_ab=a!=b;

varflag_ac=a!=c;

alert("aisnotequalofb："+flag_ab+”,aisnotequalofc：

，，+flag_ac);//false,true

7.5.3、“>”运算符

vara=3;

varb=3;

varc=2;

varflag_ab=a>b;

varflag_ac=a>c;

alert("ais>b："+flag_ab+”,ais>c："+flag_ac);//true,false

7.5.4、">=”运算符

vara=3;

varb=3;

varc=2;

varflag_ab=a>=b;

varflag_ac=a>=c;

alert("ais>=b："+flag_ab+”,ais>=c：

，，+flag_ac);//true,false

7.5.5、"<"运算符

vara=3;

varb=3;

varc=2;

varflag_ab=a<b;

varflag_ac=a<c;

alert("ais<b："+flag_ab+”,ais<c："+flag_ac);//false,false

7.5.5、”<=”运算符

vara=3;

varb=3;

varc=2;

varflag_ab=a<=b;

varflag_ac=a<=c;

alert(ais<=b："+flag_ab+”,ais<=c：

，，+flag_ac);//true,false

第二十讲

教学时间：

2课时

7.6、使用逻辑运算符

在JavaScript中增加了几个布尔逻辑运算符：

!（取反）、&=（与之后赋值）、&（逻辑与）、|=（或之后赋值）、

I（逻辑或）、=（异或之后赋值）、八（逻辑异或）、？：（三目

操作符）、II（或）、==（等于）、|=（不等于）。例子:7-6.htm

7.6.1、”&&”运算符

逻辑与,判断两个表达式是否为true,都为true则返回true,否则

返回false.

Alert（l>2&&3>2）;//false

Alert（1<2&&3>2）;//true

7.6.2、”运算符：逻辑或，判断两个表达式其中之一为true,都

为true,否则返回false.

Alert（2>1||3<2）;//true

Alert(2>5||3<2);//false

7.6.3、“！"运算符:逻辑非,求反.

Alert(!(2>5));//true

7.7、使用字符串运算符

“+”，”+=”