JavaScript程序设计电子教案

江西先锋软件职业技术学院

教案

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

姓名：职称：助教

课程名称：___________JavaScript程序设计______________

授课专业：1(X)3级学生人数：

授课时间：2023至2023学年度1学期

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

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

第一讲

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

教学目的和目标

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

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

3、娴熟编写静态页面。

教学重点与难点

1、驾驭理解万维网的功能。

2、驾驭理解HTML概念，语法规则与文件结构。

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

页面实力。

教学方法和手段

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

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

教学时间：

2课时

教学过程与详细内容

1.1万维网和HTML

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

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

HTML语言。

什么是万维网

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

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

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

超文本标记语言，即HTML。

流行阅读器有IE,NETscape,firefox等。

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

是协议。

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

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

例：：//163是协议,www是服务，163是

域名。

了解HTML标签

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

HTML文件的后缀名必需是.html或.htm,用阅读器来说明和执

行。

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

是全部的标签都有结束标签。HTML文档必需以起先，

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

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

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

HTML标签允许嵌套运用。

例子：1-1.htm

<!-表示注释。

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

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

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

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

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

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

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

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

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

也可以）列表，列表项运用Gi〉元素标记，不能含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类型还是别再用了。

＜body＞标签的常用属性

Background:设置页面的背景图案

Bgcolor:设置页面的背景色

Text:设置页面的文字颜色

Topmargin：顶空白像素

Leftmargin:左空白像素

Link:指定文档的全部连接颜色［不举荐］运用样式来取代

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

编写HTML页面

例子：l-3.htm

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

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

运用嵌入式CSS样式，在页面head标签中引入全部的样式表文件,

不要运用嵌入式JavaScript.

运用阅读器访问网页

流行阅读器有IE,NETscape,firefox等，跨阅读器访问网页。

布置课后任务与作业

完成课后练习题：PIO：（1）——（5）课堂讲解

其次讲

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

教学目的和目标

1、了解程序的功能。

2、了解与相识web脚本。

教学重点与难点

1、驾驭程序的功能。

2、相识web脚本。

教学方法和手段

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

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

教学时间：

2课时

教学过程与详细内容

1.2程序与Web脚本

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

相识一段程序

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

则程序就被加载入内存。指令序列依次执行，直到一条跳转或转移

指令被执行，或者一个中断出现。全部这些指令都会变更指令寄存

器的内容。

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

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

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

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

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

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

序(Assembler)。

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

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

程序和数据的区分就不是则明显了。中心处理器有时有一组微指令

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

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

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

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

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

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

序去分析这个数据并生成新的程序去处理数据全部的方面可能会简

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

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

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

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

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

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

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

序实现。理论算法通常依据困难性分为不同类别；实现的算法通常

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

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

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

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

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

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

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

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

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

计算机程序是利用相应的程序设计语言，依据确定的逻辑和语

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

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

If($num>0)

echo“thenumberyouenteris>0”

Else

echo“thenumberyouenteris<=0"

相识Web脚本

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

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

页中的特别效果。

例：javascript程序如下：

If(num>0)

alert("thenumberyouenteris>0");

Else

alert("thenumberyouenteris<=0");

布置课后任务与作业

完成课后练习题：P11:进阶练习。

复习总结：

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的作用

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

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

实现网页特效。

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

图片特效2-4.htm

页面特效2-5.htm

时间特效2-6.htm

状态栏特效2-7.htm

导航特效2-8.htm

综合特效2-9.htm

改善页面样式

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

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

应用Ajax

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

javascript,xml,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

相识〈script）标签

Javascript是嵌入到html才被说明执行的，Javascript代

码可以放到页面的随意位置。运用＜!一和〃一＞将程序段包含起

来，可以让不支持的阅读器忽视过这一段代码。

嵌入网页

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

运用JavaScript文件

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

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

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

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

来引用.运用〈script》标签的src属性来指定文件的路经，可以运

用外部的JavaScript文件。

运用事务

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

发觉这些条件发生后，依据详细的代码对事务进行响应。如

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

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

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

事务。

2.4阅读器与JavaScript

简洁相识文档对象模型

文档对象模型DOM(DocumentObjectModel)是表示文档(HTML

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

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

档。例：2-13.htm

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

与结构变得异样的简洁。

Javascript的版本表2.1

不同的阅读器支持IE,Netscape,firefox等，表2.2

指定Javascript版本

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

例：<scriptlanguage=javascript1.1,J>

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

版本号可以省。

2.5其他常用脚本和技术

VBscript语言例：2-14.htm

Java语后

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:进阶练习即项目实训I1

第五讲

第三章第一部分

教学目的和目标

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

2、驾驭整个程序设计过程与思路。

3、驾驭一般提示对话框方法。

4、驾驭限制页面元素的显示和隐藏方法。

教学重点与难点

1、驾驭理解整个程序设计过程与思路。

2、驾驭一般提示对话框方法。

3、驾驭限制页面元素的显示和隐藏方法。

教学方法和手段

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

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

教学时间：

2课时

教学过程与详细内容

3.1常用工具介绍

运用记事本：

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

种类型的文本文件.演示操作.留意保存文件类型选择为"全部文

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

运用EditPlus文字编辑器。

EditPlus文字编辑器功能强大,运用便利。

运用Dreamweaver网页软件

1.便利的设计

2.可视化编辑

3.强大的Javascript和CSS支持

3.2设计简洁的Javascript功能

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

例:2-9.htm

3.3编写Javascript代码之前

依据设计好的功能进行详细的实现，包括HTML页面和

Javascript相关编写

向用户显示一般提示对话框

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

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

户一些选择.

<scriptlanguage="javascript”>

Alert("thisisasimpleuseralert.");

</script>

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

限制页面元素的显示和隐藏

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

例：3-l.HTML

Javascript限制样式的显示须要两个条件：

(1)获得须要限制的元素对

象.document.getElementByld("id")

(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课时

教学过程与详细内容

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

<scriptlanguage="javascript”>

confirm(“eat”);

</script>

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

在网页中输出内容供应了在网页中输出内容的方法,

用"document,write();“

例：3-3.html

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

Varstr="hello";

例:3-5.html

运用javascript进行计算Javascript支持"*，/”等运算符.

例:3-6.html

将javascript代码定义为函数

定义函数运用funclion语句

Function函数名()

语句；

<scriptlanguage="javascript”>

FunctionFunl(i,j,k)

{alert(i-j+k);}

Funl(10,100,3);

</script>

3.4HTML文档编写与Javascript整合

把代码嵌入到页面中.

编写出全部须要的页面元素

3-7.html

3-8.html

通过单选按钮限制隐藏属性

编写出全部须要的页面元素

3-9.html

提交表单时的确认提示框

用JAVASCRIPT函数计算结果

生成最终页面

整合全部功能:借助主函数把全部功能组织起来.

3-10.html

布置课后任务与作业

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

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

第七讲

第四章第一部分

教学目的和目标

1、驾驭Javascript语法结构。

2、驾驭理解Javascript对象概念。

3、驾驭理解Javascript对象创建。

教学重点与难点

1、驾驭理解Javascript语法结构。

2、驾驭理解Javascript对象概念。

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

教学方法和手段

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

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

教学时间：

2课时

教学过程与详细内容

4.IJavascript语法结构

大小写敏感

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

Javascript是嵌入到html中去，必需留意。

空格，制表符和换行

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

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

干脆量

是程序里干脆显示出来的数值。

分号

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

束。

标识符

用来命名变量或函数等。

标识符命名规则必需是以字母，下划线或美元符起先的字母，数

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

保留字重名。

保留字

表4.1,4.2,4.3

4.2理解Javascript对象

Javascript面对对象概念

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

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

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

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

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

属性进行访问更改.

对象的创建

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

Varobj=newobject();

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

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

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

布置课后任务与作业

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

第八讲

第四章其次部分

教学目的和目标

1、驾驭Javascript对象属性的设置和读取。

2、驾驭Javascript对象的方法，继承和原型。

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

教学重点与难点

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

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

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

教学方法和手段

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

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

教学时间：

2课时

教学过程与详细内容

属性的设置和读取

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

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

Vardog=newDog();

Dog.dog_weight=50;

Dog.dog_type="big";

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

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

函数，

FunctionshowDoglnfo()

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

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

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

中继承到属性和方法.

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养成良好的编程习惯

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

命名风格：命名风格必需保持一样性和可读性，任何一个实体的

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

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

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

以小写字母开头，其次个起先小写，allMoneyO;

类：运用名词，以大写字母开头，BookO;

运用注释

(1)运用实现单行注释

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

(3)运用整块注释

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

布置课后任务与作业

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

P71:进阶练习

第九讲

第五章第一部分

教学目的和目标

1、驾驭变量的命名。

2、驾驭赋值给变量的方法。

3、驾驭变量的作用域。

教学重点与难点

1、驾驭理解变量的命名。

2、驾驭理解赋值给变量的方法。

3、驾驭理解变量的作用域。

教学方法和手段

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

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

教学时间：

2课时

教学过程与详细内容

5.1变量的命名

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

果。

运用有意义的名称

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

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

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

运用多个单词与分隔符

其次个单词首字母要答谢，或在多个单词间运用分隔符

VaruserName="wei";

Vardog_weight=55;

全大写命名方式

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

给变量名增加前缀

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

运用前缀或.

综合示例例5-1.html

第十讲

教学时间：

2课时

5.2赋值给变量

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

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

book_name="javascript”;

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

5.3变量的作用域

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

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

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

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

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

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

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

布置课后任务与作业

完成课后练习题：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运用字符串

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

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

a，”

Varstr='Iam"student”';

Varstr="Iam'student'";

字符串必需以相同类型的引号起先和结束。

运用转义符号“\"：在字符串里边包含单引号和双引号，了解转

义字符。

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

表5.1

运用length属性获得字符串长度，length属性获得。

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

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

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

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

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

Alert(str.substr(5))

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

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

字符串的大小写转换：

toLowerCase():变为小写

toUpperCase():变为大写

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

str.toLowerCase());

查找与匹配字符串：

Indexof或lastindexof方法来进行

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

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

置。

Varstr="a";

Varstrl="javascript”;

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

strl.lastlndexOf(str));

第十二讲

教学时间：

2课时

5.7运用数组

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

创建一个数组

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

Varary=newArray(num);

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

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

Ary[0]="a";

Alert(ary[0]);

运用length属性获得数组的长度，数组的长度是数组元素的个

数，ary.lengtho

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

alert(ary[i]);

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

组.

例：5-4.htmlo

布置课后任务与作业

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

P87:进阶练习

第十三讲

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

教学目的和目标

1、驾驭函数的定义格式。

2、驾驭函数参数的传递。

3、驾驭调用函数。

教学重点与难点

1、驾驭理解函数参数的传递。

2、驾驭理解调用函数。

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

教学方法和手段

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

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

教学时间：

2课时

教学过程与详细内容

6.1.1定义函数

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

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

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

function函数名（参数）

详细语句;

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

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

是大小写有区分的。

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

变量或表达式。

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

假如函数须要返回，则运用关键字return将值返回。

假如所要调用的函数不带参数，运用时只要干脆以“函数名（）”

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

假如调用的函数具有返回值，可以通过变量或干脆将函数置于表

达式中。

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课时

教学过程与详细内容

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

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

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

随着函数的结束而消逝。详细区分详见例子：6-6.htm

(2)函数的返回值：

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

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

Varretval=函数(参数)；

例子：

6-2.htm

6-7.htm

6-8.htm

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

组合多个函数来实现困难功能

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

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

例子：6-3.htm

布置课后任务与作业

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

复习总结：

1、驾驭函数的定义格式。

2、驾驭函数参数的传递。

3、驾驭调用函数。

4、驾驭函数的返回值。

5、驾驭函数变量的作用域。

6、驾驭组合多个函数实现困难功能。

第十五讲

第六章其次节HTML标签与事务

教学目的和目标

1、驾驭常用HTML标签事务。

2、驾驭事务处理概念，处理程序。

教学重点与难点

1、驾驭常用HTML标签事务。

2、驾驭事务处理概念，处理程序。

教学方法和手段

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

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

教学时间：

2课时

教学过程与详细内容

HTML标签与事务

HTML标签是主要的事务对象,〈input)标签的“type”属性.

表6.1

事务处理器

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课时

教学过程与详细内容

、运用常用事务

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

以下几个事务：

（1）单击事务onClick

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

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

•button（按钮对象）

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

•radio（单选钮）

•resetbuttons（重要按钮）

•submitbuttons（提交按钮）

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

<Form>

<Inputtype="button"Value=""onClick="change()”>

</Form>

在。nClick等号后，可以运用自己编写的函数作为事务处理程序，也可以运

用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=/，checkCthis,test)”〉

</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）。

⑴“++”运算符在前面：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(，zjis："+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;

alertC'cis："+c);//l

7.4.3、”*="运算符

vare=3;

e*=2;

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

7.4.4、”/=”运算符

varh=3;

h/=2;

alert(z，his："+h);//I.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;

alertC'aisequalofb："+flag_ab+，z,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(z，ais>b："+flag_ab+”,ais>c：，z+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(z，ais<b："+flag_ab+”,ais<c：z，+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（或）、==（等于）、1=（不等于）。例子:7-6.htm

7.6.1、”&&”运算符

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

返回false.

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

Alert（l<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、运用字符串运算符

例子:7-7.htm

7.7.1、”+=”运算符

varstr="java";

str+="Script”;

alert(str);

7.8、理解运算符的优先级

表7.7

布置课后任务与作业

P116:(4)——(7)课堂讲解

P116：进阶练习

其次十一讲

第8章第一节流程限制语句的推断语句

教学目的和目标

1、驾驭运用if推断语句。

2、驾驭运用if…else语句。

3、驾驭运用switch语句。

教学重点与难点

1、驾驭理解if…else语句。

2、驾驭运用switch语句。

3、驾驭运用break语句。

教学方法和手段

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

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

教学时间：

2课时

教学过程与详细内容

JavaScript脚本语言的基本构成是由限制语句、函数、对象、方法、属性

等,来实现编程的。

在任何一种语言中，程序限制流是必需的，它能使得整个程序减小混乱，使

之顺当按其确定的方式执行。下面是JavaScript常用的程序限制流结构与语句:

8.1运用推断语句

if条件语句

运用if语句

基本格式

if（表述式）

（

语句段1;

if语句允许嵌套。

8-1.htm

运用if…else语句

if（表述式）

{

语句段1;

else

（

语句段2；

功能：若表达式为true,则执行语句段1；否则执行语句段2。

•if-else语句是JavaScript中最基本的限制语句，通过它可以变更语句

的执行依次。

・表达式中必需运用关系语句，来实现推断,它是作为一个布尔值来估算的。

・它将零和非零的数分别转化成false和t