《JavaScript程序设计》电子教案_第1页
《JavaScript程序设计》电子教案_第2页
《JavaScript程序设计》电子教案_第3页
《JavaScript程序设计》电子教案_第4页
《JavaScript程序设计》电子教案_第5页
已阅读5页，还剩69页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

1、【精品文档】如有侵权，请联系网站删除，仅供学习与交流JavaScript程序设计电子教案.精品文档.江西先锋软件职业技术学院教 案院、部： 软件工程学院 教研室： 计算机应用 姓 名： 王维伟 职 称： 助教 课程名称： JavaScript程序设计 授课专业： 1003级 学生人数： 授课时间： 2011 至 2012 学年度 1 学期教材名称： JavaScript入门与提高 编者 曾光 出版单位： 科学出版社 出版时间 2008年7月 第一讲第一章 第一节万维网和HTML教学目的和目标1、了解万维网的发展历史及功能。2、介绍HTML语言的概念，简单语法。3、熟练编写静态页面。教学重点与难

2、点1、掌握理解万维网的功能。2、掌握理解HTML概念，语法规则及文件结构。3、HTML页面元素多，记忆难，要求学生短时间里具有编写HTML页面能力。教学方法和手段1、以课堂问答法和案例讨论法为主，以讲授法和指导法为辅。2、使用先锋电子教室多媒体手段进行教学。教学时间：2课时教学过程及详细内容1.1万维网和HTML万维网的目的是用于共享资源,这些资源包括文字,图片,音频和视频等.统一的标准是一种用于定位和打开这些信息的超文本语言, HTML语言。1.1.1什么是万维网 万维网,环球网,1989年始于瑞士日内瓦的CERN,通过统一的方式来访问各类信息，这就是超文本链接。 为了设计含有各类信息资源的

3、超文本链接的万维网页面，产生了超文本标记语言， 即HTML。 流行浏览器有IE,NETscape,firefox等。 页面都有一个唯一的地址，即统一资源定位符URL,使用的协议是HTTP协议。 域名是包括标识串和网站的类型，com代表私营公司，gov代表政府，edu代表教育机构等。 例： http是协议,www是服务, 是域名。1.1.2 了解HTML标签HTML页面是纯文本，可以用记事本来编辑。HTML文件的后缀名必须是.html或.htm，用浏览器来解释和执行。HTML文档基本组成部分是标签，一般有一对尖括号“<>”,并不是所有的标签都有结束标签。HTML文档必须以<ht

4、ml>开始，</html>结束，一个HTML文档分为HEAD和BODY两部分。<a>标签：href属性是用来指定超文本链接所要访问的URL地址。<img>标签：src属性是用来指定要显示的图片的地址。HTML标签允许嵌套使用。例子：1-1.htm<!- ->表示注释。div与span:这是用得最多的两个标签，以后会有专文总结如何使用好他们，现在必须知道的是前者是block元素，后者是inline元素；而block元素与inline元素区别正如名字告诉我们的那样：前者是所包含的内容是一个整体，几个block元素间垂直堆叠，强制后面元素另起一行

5、；而后者，几个inline元素水平排列，相互间只有水平方向上的边距设置才会有效，padding-top，margin-bottom等竖直格式设置会被忽略。不添加css，前者无法并放，后者无法堆叠。即span内部是不能放div的。ul，ol与dl:无序，有序（按字母或数字顺序）以及定义（表示对话也可以）列表，列表项使用<li>元素标记，不能含block元素，即<hx>不能包含其中。a 与link:<a href="#top">,<link>可有得研究他和<a>都有两个重要属性：rel以及rev，rel指出该文档与hr

6、ef指向的链接关系类型，rev则将两对象方向互换，可选类型有：alternative，如果是可选译文，则与lang属性一起用；如果是可选媒介，则用到media属性。colgroup，col:在表头区分格需要这两个标签，并不实用，不如用scope属性值，rowspan，colspan等属性也可，具体哪种更好现在不明。form与input，label:用得太多了，就说form的enctype属性与input有file类型可用有关，而reset类型还是别再用了。1.1.3 <body>标签的常用属性Background:设置页面的背景图案Bgcolor:设置页面的背景色Text:设置页面

7、的文字颜色Topmargin：顶空白像素Leftmargin:左空白像素Link: 指定文档的所有连接颜色不推荐使用样式来取代Vlink: 指定文档那些被访问过的连接颜色不推荐使用样式来取代1.1.4编写HTML页面例子：1-3.htmHTML页面是不分大小写的，常用小写。一定要闭合HTML标签,声明正确的文档类型( DocType ), 不要使用嵌入式CSS样式, 在页面head标签中引入所有的样式表文件, 不要使用嵌入式JavaScript.1.1.5使用浏览器访问网页流行浏览器有IE,NETscape,firefox等,跨浏览器访问网页。布置课后任务及作业完成课后练习题：P10: （1）

8、（5） 课堂讲解第二讲第一章 第二节程序与Web脚本教学目的和目标1、了解程序的功能。2、了解与认识web脚本。教学重点与难点1、掌握程序的功能。2、认识web脚本。教学方法和手段1、以课堂问答法和案例讨论法为主，以讲授法和指导法为辅。2、使用先锋电子教室多媒体手段进行教学。教学时间：2课时教学过程及详细内容1.2程序与Web脚本javascript可以嵌入到HTML页面, javascript称为web脚本语言。1.2.1 认识一段程序   计算机程序或者软件程序（通常简称程序）是指一组指示计算机每一步动作的指令，通常用某种程序设计语言编写，运行于某种目标体系结构上。打个

9、比方，一个程序就像一个用汉语（程序设计语言）写下的红烧肉菜谱（程序），用于指导懂汉语的人（体系结构）来做这个菜。 通常，计算机程序要经过编译和链接而成为一种人们不易理解而计算机理解的格式，然后运行。未经编译就可运行的程序通常称之为脚本程序。程序的运行:为了一个程序运行，计算机加载程序代码，可能还要加载数据，从而初始化成一个开始状态，然后调用某种启动机制。在最低层上，这些是由一个引导序列开始的。在大多数计算机中，操作系统例如Windows等，加载并且执行很多程序。在这种情况下，一个计算机程序是指一个单独的可执行的映射，而不是当前在这个计算机上运行的全部程序。冯诺依曼体系结构:在一台基于最常见的冯

10、诺依曼体系结构(又称Harvard Architecture)的计算机上，程序从某种外部设备，通常是硬盘，被加载到计算机里。 如果计算机选择冯诺依曼体系结构，那么程序就被加载入内存。 指令序列顺序执行，直到一条跳转或转移指令被执行，或者一个中断出现。所有这些指令都会改变指令寄存器的内容。 基于这种体系计算机如果没有程序的支持将无法工作。一个计算机程序是一系列指令的集合。 程序里的指令都是基于机器语言；程序通常首先用一种计算机程序设计语言编写，然后用编译程序或者解释执行程序翻译成机器语言。 有时，程序也可以用汇编语言编写，汇编语言实质就是表示机器语言的一组记号在这种情况下，用于翻译的程序叫做汇编

11、程序(Assembler)。程序和数据:程序已经被定义了。如何定义数据呢？数据可以被定义为被程序处理的信息。当我们考虑到整个计算机系统时，有时程序和数据的区别就不是那么明显了。中央处理器有时有一组微指令控制硬件，数据可以是一个有待执行的程序（参见脚本编程语言），程序可以编写成去编写其它的程序；所有这些例子都使程序和数据的比较成为一种视角的选择。有人甚至断言程序和数据没有区别。编写一个程序去生成另外一个程序的过程被称之为原编程(Metaprogramming)。它可以被应用于让程序根据给定数据生成代码。单一一个程序可能不足以表示给定数据的所有方面。让一个程序去分析这个数据并生成新的程序去处理数据

12、所有的方面可能会容易一些。Lisp就是一例支持这种编程模式的程序语言。在神经网络里储存的权重是一种数据。正是这些权重数据，跟网路的拓扑结构一起，定义了网络的行为。人们通常很难界定这些数据到底表示什么或者它们是否可以由程序来代替。这个例子以及跟人工智能相关的其它一些问题进一步考验程序和数据的区别。算法:算法指解决某个问题的严格方法，通常还需辅以某种程度上的运行性能分析。算法可以是纯理论的，也可以由一个计算机程序实现。理论算法通常根据复杂性分为不同类别；实现的算法通常经过颇析(Profiling)以测试其性能。请注意虽然一个算法在理论上有效可行，但是一个糟糕的实现仍会浪费宝贵的计算机资源。（更详细

13、信息，参见算法信息论，Algorithmic Information Theory）开发:编写程序是以下步骤的一个往复过程：编写新的源代码，测试、分析和提高新编写的代码以找出语法和语义错误。从事这种工作的人叫做程序设计员?趋多样，由此产生了不同种类的程序设计员，每一种都有更细致的分工和任务。软件工程师和系统分析员就是两个例子。现在，编程的长时间过程被称之为“软件开发”或者软件工程。后者也由于这一学科的日益成熟而逐渐流行。计算机程序是利用相应的程序设计语言,按照一定的逻辑和语法进行编写和组织,通过程序的运行,使得计算机实现某种特定的功能。与web相关的有asp,jsp,php等。例: Php程序

14、一段代码如下:If ($num>0)echo “the number you enter is >0”Elseecho “the number you enter is <=0”1.2.2 认识Web脚本web脚本有javascript,还有VBscript等,脚本语言同程序设计语言一样,是根据一定的逻辑和语法来编写脚本,以实现网页中的特殊效果。例: javascript 程序如下:If (num>0)alert(“the number you enter is >0”);Elsealert(“the number you enter is <=0”);布置

15、课后任务及作业完成课后练习题：P11: 进阶练习 。复习总结： 1、万维网的发展历史及功能是共享资源。2、HTML语言的概念，简单语法。 3、掌握程序的功能。4、认识web脚本。第三讲第二章第一节JavaScript的发展史 第二节JavaScript的作用教学目的和目标1、了解JavaScript的发展史。2、掌握JavaScript的作用。3、熟练编写页面特效。教学重点与难点1、掌握理解JavaScript的作用。2、熟练编写各种页面特效。3、HTML页面元素多，记忆难，要求学生短时间里具有编写HTML页面能力。教学方法和手段1、以课堂问答法和案例讨论法为主，以讲授法和指导法为辅。2、使用

16、先锋电子教室多媒体手段进行教学。教学时间：2课时教学过程及详细内容2.1 JavaScript的发展史 Netscape的JavaScript:增加更多的用户交互,控制浏览器以及动态创建页面内容的诸多功能,最主要的是使合法性验证之类的工作在客户端得以实现。Microsoft的Jscript:IE浏览器。EMCA-262标准:欧洲计算机制造商联合会创造了一个国际通用的标准化版本的JavaScript，称为EMCAScript。2.2 JavaScript的作用2.2.1表单验证:最基本和最重要的作用。例：2-1.htm演示各个限制条件。2.2.2实现网页特效。文字特效：例子2-2.htm鼠标特效

17、 2-3.htm图片特效 2-4.htm页面特效2-5.htm时间特效2-6.htm状态栏特效2-7.htm导航特效 2-8.htm综合特效 2-9.htm2.2.3改善页面样式页面样式是通过样式表来定义的.通过样式表,定义页面元素的表现形式。如控制颜色,图案,文字,可见性等。2.2.4 应用AjaxAjax技术并不是一个新的语言，是javascript,xmlhttp,css,xhtml,xml等的一个综合应用。优势是通过数据异步传输从而减少交互时间和改善用户体验等。例：图2.20:页面的多块区域能分时异步加载，减少等待时间。图2.23:通过Ajax技术，实时对用户名进行验证并在页面上显示文

18、字提示。布置课后任务及作业完成课后练习题：P32:（1）（4）课堂讲解第四讲第二章第三，四，五节使用JavaScript，浏览器与JavaScript，其他常用脚本和技术教学目的和目标1、掌握Javascript的使用。2、了解浏览器与JavaScript的版本号。3、了解其他常用脚本和技术。教学重点与难点1、掌握理解JavaScript的使用。2、掌握理解文档对象模型概念。教学方法和手段1、以课堂问答法和案例讨论法为主，以讲授法和指导法为辅。2、使用先锋电子教室多媒体手段进行教学。教学时间：2课时教学过程及详细内容2.3使用Javascript 2.3.1认识<script>标签

19、Javascript是嵌入到html才被解释执行的， Javascript代码可以放到页面的任意位置。使用<!和/->将程序段包含起来，可以让不支持的浏览器忽略过这一段代码。2.3.2嵌入网页Alert():弹出一个按钮的提示框。例：2-10.htm2.3.3 使用JavaScript文件把篇幅较多的JavaScript代码保存到一个单独的文件中，然后在HTML文档中进行引用，保持页面的清晰性。代码重复使用，只需引用文件即可，减少维护的工作量。JavaScript文件使用js作为扩展名，通过<script>中的src来引用.使用<script>标签的src属

20、性来指定文件的路经，可以使用外部的JavaScript文件。2.3.4 使用事件事件是Javascript时刻监视某些特定条件，当Javascript发现这些条件发生后，根据具体的代码对事件进行响应。如onclick,onfocus事件等。例：2-12.htm除了由用户的行为来触发的事件外，Javascript也响应某些不由用户触发的事件，如整个HTML页面加载完后的load(加载)事件。2.4浏览器与JavaScript2.4.1简单认识文档对象模型文档对象模型DOM（Document Object Model）是表示文档(HTML文档)和访问，操作构成文档的各种元素(如HTML标记和文本串

21、)的应用程序接口(API)，把整个页面规划成由节点分层级构成的文档。例：2-13.htmDOM通过创建树来表示一个HTML文档，从而使控制文档内容及结构变得异常的容易。2.4.2 Javascript的版本 表不同的浏览器支持 IE,Netscape,firefox等,表指定Javascript版本<script>标签的language属性来指定。例：<script language=“javascript1.1”>Alert(“hello”);</script> 版本号可以省。2.5其他常用脚本和技术2.5.1VBscrip

22、t语言 例：2-14.htm2.5.2Java语言JavaScript和Java不是一个概念，Java是SUN公司推出的编程语言，跨平台执行的程序设计语言，特别适合于Internet应用程序开发；而JavaScript是Netscape公司的产品，其目的是为了扩展Netscape Navigator功能而开发的一种可以嵌入Web页面中的基于对象和事件驱动的解释性语言。 2.5.3 Asp和A语言Asp是“活动服务器网页”，用来创建和运行动态网页或Web应用程序，用于各种动态网站，扩展名为.asp。A是asp的最近版本，扩展名为.asp或.aspx。2.5.4 php语言基于服务端创建动态网站的

23、脚本语言，是开放源码和跨平台运行。布置课后任务及作业完成课后练习题：P32:（5）（9）课堂讲解P32: 进阶练习 即项目实训1第五讲第三章 第一部分教学目的和目标1、熟悉编辑javascript常用工具。2、掌握整个程序设计过程与思路。3、掌握普通提示对话框方法。4、掌握控制页面元素的显示和隐藏方法。教学重点与难点 1、掌握理解整个程序设计过程与思路。2、掌握普通提示对话框方法。3、掌握控制页面元素的显示和隐藏方法。教学方法和手段1、以课堂问答法和案例讨论法为主，以讲授法和指导法为辅。2、使用先锋电子教室多媒体手段进行教学。教学时间：2课时教学过程及详细内容3.1常用工具介绍3.1.1使用记

24、事本:记事本编辑纯文本文件,HTML文档,Javascript程序和其他各种类型的文本文件.演示操作.注意保存文件类型选择为”所有文件”,文件名扩展名为.htm或html,js等.3.1.2 使用EditPlus文字编辑器。EditPlus文字编辑器功能强大,使用方便。3.1.3 使用Dreamweaver网页软件1.方便的设计2.可视化编辑3.强大的Javascript和CSS支持3.2设计简单的Javascript功能要创建一个完整的程序,事先需要对所实现的功能进行设计.例:2-9.htm3.3编写Javascript代码之前按照设计好的功能进行具体的实现,包括HTML页面和Javascr

25、ipt相关编写3.3.1向用户显示普通提示对话框一个好的网页除了要有合适的动态内容外,还应该有好的交互性,就是让用户在访问网页的过程中得到信息提示,或提供给用户一些选择.<script language=“javascript”>Alert(“this is a simple user alert.”);</script>Alert()是内置函数,出现提示框.3.3.2控制页面元素的显示和隐藏Javascript的主要作用之一是控制页面元素的样式.例: 3-1.HTMLJavascript控制样式的显示需要两个条件:(1)获取需要控制的元素对象.document.get

26、ElementById(“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能力。教学方法和手段

27、1、以课堂问答法和案例讨论法为主，以讲授法和指导法为辅。2、使用先锋电子教室多媒体手段进行教学。教学时间：2课时教学过程及详细内容3.3.3 向用户显示确认提示对话框<script language=“javascript”>confirm(“eat?”);</script>confirm()是内置函数,出现确认提示框.3.3.4 在网页中输出内容提供了在网页中输出内容的方法,用”document.write();”例: 3-3.html3.3.5 使用变量存储数据,用var来显示Var str=“hello”;例: 3-5.html3.3.6 使用javascript

28、进行计算 Javascript支持”+,-,*,/”等运算符.例: 3-6.html3.3.7 将javascript代码定义为函数 定义函数使用function语句Function 函数名() 语句;<script language=“javascript”>Function Fun1(i,j,k)alert(i-j+k);Fun1(10,100,3);</script>3.4HTML文档编写与Javascript整合把代码嵌入到页面中.3.4.1编写出所有需要的页面元素3-7.html3-8.html3.4.2通过单选按钮控制隐藏属性编写出所有需要的页面元素3-9.

29、html3.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、对象概念多，理解难，要求学生短时间里具有编写对象能力。教学方法和手

30、段1、以课堂问答法和案例讨论法为主，以讲授法和指导法为辅。2、使用先锋电子教室多媒体手段进行教学。教学时间：2课时教学过程及详细内容4.1Javascript语法结构4.1.1大小写敏感对大小写敏感，必须大小写一致 ，而HTML是不区分大小写的，而Javascript是嵌入到html中去，必须注意。4.1.2空格，制表符和换行使分隔符，来对齐用程序语句，或将一条长语句分成几行编写，对于程序的美观整洁是很有好处的，增加了程序的可读性。4.1.3直接量是程序里直接显示出来的数值。4.1.4分号用来分隔两条程序语句的，每条语句都使用一个分号“;”作为结束。4.1.5标识符用来命名变量或函数等。标识符

31、命名规则必须是以字母，下划线或美元符开始的字母，数字 ，或任意组合，数字不允许作为变量名的开头，标识符不能和保留字重名。4.1.6保留字表4.1,4.2,4.34.2理解Javascript对象4.2.1 Javascript面向对象概念面向对象尽可能模拟人类的思维习惯,使程序设计的方法与过程尽可能的接近人类的自然思维方式.Javascript对象类基于构造器函数创建的实例化一个对象,构造器函数包含属性和方法两个基本的元素,属性实际上用于存储对象的数据,方法是在对象内部调用的函数,用来实现一些功能或对属性进行访问更改.4.2.2 对象的创建Javascript对象是通过”new”来创建的,Va

32、r obj=new object();类名通常以大写字母来开头,而构造器函数相当于类,因此构造机器函数通常以大写字母开头.Var date=new Date();/创建日期对象布置课后任务及作业完成课后练习题：P70:（1）（4）课堂讲解第八讲第四章 第二部分教学目的和目标1、掌握Javascript对象属性的设置和读取。2、掌握Javascript对象的方法，继承和原型。3、培养学生养成良好的编程习惯。教学重点与难点1、掌握理解Javascript对象属性的设置和读取。2、掌握理解Javascript对象的方法，继承和原型。3、理解良好的编程习惯重要性。教学方法和手段1、以课堂问答法和案例讨

33、论法为主，以讲授法和指导法为辅。2、使用先锋电子教室多媒体手段进行教学。教学时间：2课时教学过程及详细内容4.2.3 属性的设置和读取通常用”.”运算符实现属性的存取,”.”左边是表示该对象的引用名,右边是属性名称.Var dog=new Dog();Dog.dog_weight=50;Dog.dog_type=“big”;Alert(“dog type:”+dog.dog_type);4.2.4 对象的方法:访问属性通过”this”, 对象的方法其实就是一个函数,Function showDogInfo() alert(“dog type:”+this.dog_type);4.2.5 对象的

34、继承和原型:对象是类的一个实例,类是对象的抽象,继承是对象的一个很重要的特征,对象可以从实例化它的构造器函数中继承到属性和方法.Function Animal(type,sound,food)This.animal_type=type;/实例化对象Var dog=new animal(“dog”,);原型属性是一个内置的属性,指定了对象所扩展的是构造器函数.Dtotype.detail_type=“”;Var cat=new Animal(“cat”,);Alert(cat.detail_type);/输出”通常情况下用prototype.detail_type=“”;增加属性,具

35、体的属性值将在具体的实例化对象中设置,使用原型属性可以实现附加对象定义扩展对象.4.3养成良好的编程习惯维护成本大于开发成本，养成良好的编程习惯尤为重要。4.3.1命名风格：命名风格必须保持一致性和可读性，任何一个实体的主要功能或用途必须能够从命名中明显的看出来。函数：实现功能。“动词+名词” ：showInfo();变量名：存储数据：名词或形容词+名词。以小写字母 开头，第二个开始小写，allMoney();类：使用名词，以大写字母开头，Book();4.3.2使用注释（1）使用“/”实现单行注释（2）使用“/*”和“*/”实现块注释，不能嵌套，可以跨多行。（3）使用整块注释注释不是越多越好

36、，要讲究一个度，没必要为每条语句加注释。布置课后任务及作业完成课后练习题：P70:（5）（8） 课堂讲解P71: 进阶练习 第九讲第五章 第一部分教学目的和目标1、掌握变量的命名。2、掌握赋值给变量的方法。3、掌握变量的作用域。教学重点与难点1、掌握理解变量的命名。2、掌握理解赋值给变量的方法。3、掌握理解变量的作用域。教学方法和手段1、以课堂问答法和案例讨论法为主，以讲授法和指导法为辅。2、使用先锋电子教室多媒体手段进行教学。教学时间：2课时教学过程及详细内容5.1变量的命名变量是用来存储数据的，利用变量参与各种运算以实现动态的效果。5.1.1使用有意义的名称变量名代表了所存储数据的具体含义

37、，给变量取合适的名字能够理解变量的含义，从而让程序的编写和理解更加容量。Var price=32.8 /定义price变量，表示价格5.1.2使用多个单词与分隔符第二个单词首字母要答谢，或在多个单词间使用分隔符“_”Var userName=“wei”;Var dog_weight=55;5.1.3全大写命名方式变量名字母全部大写，表明该变量的级别较高，为全局变量。5.1.4给变量名增加前缀防止重名或混淆，把具有相关性质的变量进行统一命名，如统一使用前缀或“_”.5.1.5综合示例 例5-1.html第十讲教学时间：2课时5.2赋值给变量变量的作用是用来存储数据的，变量赋值使用“=”（1）先定

38、义变量后赋值 Var book_name;book_name=“javascript”;（2）定义时赋值 Var book_name=“javascript”;5.3变量的作用域分为全局和局部两种，全局变量是在函数体外声明的，可以在任何地方使用，局部变量在函数体内声明，只能在函数体内使用，并随着函数的结束而消失。5.3.1局部变量：在函数体内声明的变量5.3.2全局变量：在函数体外声明的变量，声明后可以在任何地方调用，声明全局变量，全部用大写，如果全局变量和局部变量遇到重名情况，局部变量优先。布置课后任务及作业完成课后练习题：P87:（1）（4）课堂讲解第十一讲教学时间：2课时第五章 第二部分

39、教学目的和目标1、掌握数字，布尔值的使用方法。2、掌握字符串的常见用法。3、掌握数组的常见用法。教学重点与难点1、掌握理解数字，布尔值的使用方法。2、掌握理解字符串的常见用法。3、掌握理解数组的常见用法。教学方法和手段1、以课堂问答法和案例讨论法为主，以讲授法和指导法为辅。2、使用先锋电子教室多媒体手段进行教学。教学时间：2课时教学过程及详细内容5.4使用数字一种是整型，另一种是浮点型,科学计算法例5-2.html,5-3.html5.5使用布尔值布尔值是一个逻辑值，有true和false两个，对应1和0表示。5.6使用字符串字符串是一段文本内容，常用一对单引号或双引号起来。5.6.1创建字符

40、串：字符串里含有双引号，那么创建是就用一对单引号“”.Var str=I am “student”;Var str=“I am student”;字符串必须以相同类型的引号开始和结束。5.6.2使用转义符号“”：在字符串里边包含单引号和双引号，了解转义字符。Var str=“I am ”student”,from china”;表使用length属性获取字符串长度，length属性获取。5.6.4截取字符串：substring方法，substr方法(1)截取指定起始位置和长度的字符串。Var str=“十月一日是国庆节”;Alert(str.substr(5,3);/国庆节(2

41、)只指定起始位置截取字符串，默认到字符串末尾。Alert(str.substr(5)(3)利用length属性动态指定位置截取。Alert(str.substr(0,str.length-3);5.6.5字符串的大小写转换：toLowerCase():变为小写toUpperCase():变为大写Alert(“大写:”+str.toUpperCase()+”小写:” str.toLowerCase();5.6.6查找与匹配字符串：Indexof 或lastindexof方法来进行Indexof：字符串在被查找的字符串里第一次出现的位置。lastindexof ：该字符串在被查找的字符串里最后一次

42、出现的位置。Var str=“a”;Var str1=“javascript”;Alert(“the first :”+str1.indexOf(str)+”,the last :”+ str1.lastIndexOf(str);第十二讲教学时间：2课时5.7使用数组数组是由几个变量组合起来的一个变量组。5.7.1创建一个数组使用Array()构造器来创建。Var ary=new Array(num);5.7.2 给数组元素赋值，通过下标元素赋值也可以创建时赋值。Var ary=new Array(“a”,”b”,”c”);Ary0=“a”;Alert(ary0);5.7.3 使用length

43、属性获取数组的长度，数组的长度是数组元素的个数，ary.length。For (var i=0;i<ary.length;i+) alert(aryi);5.7.4多维数组，数组中的每一个元素就是一个数组，就变成了三维数组.例：5-4.html。布置课后任务及作业完成课后练习题：P87: （5）（17） 课堂讲解P87: 进阶练习 第十三讲第六章 第一节 函数的定义与调用教学目的和目标1、掌握函数的定义格式。2、掌握函数参数的传递。3、掌握调用函数。教学重点与难点1、掌握理解函数参数的传递。2、掌握理解调用函数。3、函数概念多，理解难，要求学生短时间里具有编写函数能力。教学方法和手段1、

44、以课堂问答法和案例讨论法为主，以讲授法和指导法为辅。2、使用先锋电子教室多媒体手段进行教学。教学时间：2课时教学过程及详细内容6.1.1定义函数JavaScript函数可以封装那些在程序中可能要多次用到的模块。并可作为事件驱动的结果而调用的程序。从而实现一个函数把它与事件驱动相关联。这是与其它语言不一样的地方。function 函数名 （参数）具体语句;函数由关键字function定义，function是关键字。函数名必须是唯一的，命名规则与变量名的命名规则一样，并且是大小写有区别的。函数可以带参数也把可以不带参数，其中函数的参数可以是常量、变量或表达式。当使用多个参数时，参数间以逗号相隔。如

45、果函数需要返回，则使用关键字return 将值返回。如果所要调用的函数不带参数，使用时只要直接以“函数名()”的方式调用函数就可以了。如果调用的函数具有返回值，可以通过变量或直接将函数置于表达式中。function showResult(a,b) Var result=a*b; Alert(“square is:”+result);函数说明：形式参数：定义函数时为函数赋予的参数，它代表了参数类型和位置，系统并不为形式参数分配实际的存储空间，而是在调用函数时候由实际参数代表形式参数参与函数的运行。实际参数：调用函数时传递给函数的参数，它通常在调用函数前已经分配了内存，并且包含了实际数据。在函数执

46、行过程中，实际参数参与函数的运行，函数定义中的形式参数只是表明了调用函数时实际传递的参数类型.函数定义格式:例子：6-1.htm,6-10.htm函数参数的传递:例子：6-8.htm6.1.2调用函数定义好函数，在需要的地方调用。如果所要调用的函数不带参数，使用时只要直接以“函数名()”的方式调用函数就可以了。如果调用的函数具有返回值，可以通过变量或直接将函数置于表达式中。 在多个位置调用函数，可以在下述位置调用JavaScript函数：在JavaScript代码中调用函数；在事件响应中调用函数；通过链接调用函数。（1）在JavaScript代码中调用函数6-9.htm（2）在事件中调用函数

47、6-4.htm（3）通过链接调用函数6-5.htm布置课后任务及作业P99: （1）（3） 课堂讲解第十四讲第六章 第一节 函数的返回值与作用域教学目的和目标1、掌握函数的返回值。2、掌握函数变量的作用域。3、掌握组合多个函数实现复杂功能。教学重点与难点1、掌握理解函数的返回值。2、掌握理解函数变量的作用域。3、掌握理解组合多个函数实现复杂功能。教学方法和手段1、以讲授法、课堂操作演示及学生实训为主。2、使用先锋电子教室多媒体手段进行教学。教学时间：2课时教学过程及详细内容6.1.3函数的返回值与函数变量的作用域（1）函数中变量的作用域: 全局变量是在函数体外声明的，可以在任何地方使用，局部变

48、量在函数体内声明，只能在函数体内使用，并随着函数的结束而消失。具体区别详见例子：6-6.htm（2）函数的返回值:函数可以通过参数接受传入的变量，将一些结果返回给调用函数的地方，由“return 返回值”完成；Var retval=函数（参数）；例子：6-2.htm6-7.htm6-8.htm函数可以返回一个确定的值，也可以只用return返回空值。6.1.4组合多个函数来实现复杂功能代码重用，编写成函数，起主导地位的函数是主函数，被调用的函数是子函数，主函数和子函数通过主函数调用子函数。例子：6-3.htm布置课后任务及作业P99: （4）（6） 课堂讲解复习总结： 1、掌握函数的定义格式。

49、2、掌握函数参数的传递。 3、掌握调用函数。4、掌握函数的返回值。5、掌握函数变量的作用域。6、掌握组合多个函数实现复杂功能。第十五讲第六章 第二节 HTML标签与事件教学目的和目标1、掌握常用HTML标签事件。2、掌握事件处理概念，处理程序。教学重点与难点1、掌握常用HTML标签事件。2、掌握事件处理概念，处理程序。教学方法和手段1、以讲授法、课堂操作演示及学生实训为主。2、使用先锋电子教室多媒体手段进行教学。教学时间：2课时教学过程及详细内容6.2.1 HTML标签与事件HTML标签是主要的事件对象,<input>标签的”type”属性.表事件处理器1、基本概念

50、JavaScript是基于对象(object-based)的语言。这与Java不同,Java是面向对象的语言。而基于对象的基本特征，就是采用事件驱动(event-driven)。它是在用形界面的环境下，使得一切输入变化简单化。通常鼠标或热键的动作我们称之为事件（Event），而由鼠标或热键引发的一连串程序的动作，称之为事件驱动（Event Driver）。而对事件进行处理程序或函数，我们称之为事件处理程序（Event Handler）。事件处理器的名称是由事件名加上一个”on”组成,统一用小写, 事件处理器代码后面用”=”添加了事件触发时需要的JavaScript代码,代码可以是一条语句,也可

51、以是一个函数,<input onclick=showInfo();>、事件处理程序在JavaScript中对象事件的处理通常由函数(Function)担任。其基本格式与函数全部一样，可以将前面所介绍的所有函数作为事件处理程序。格式如下：Function 事件处理名（参数表）事件处理语句集；范例1：下例程序是一个自动装载和自动卸载的例子。即当装入HTML文档时调用loadform()函数,而退出该文档进入另一HTML文档时则首先调用unloadform()函数,确认后方可进入。 6_s1.htm 布置课后任务及作业P99: （7）（9） 课堂讲解第十六讲第六章 第二节 使用常用事件教

52、学目的和目标1、掌握使用常用事件方法。2、掌握使用onClick, onLoad事件。3、掌握组合函数实现事件功能。教学重点与难点1、掌握使用常用事件方法。2、掌握使用onClick, onLoad事件。3、掌握组合函数实现事件功能。教学方法和手段1、以讲授法、课堂操作演示及学生实训为主。2、使用先锋电子教室多媒体手段进行教学。教学时间：2课时教学过程及详细内容6.2.3、使用常用事件JavaScript事件驱动中的事件是通过鼠标或热键的动作引发的。它主要有以下几个事件：（）单击事件onClick当用户单击鼠标按钮时，产生onClick事件。同时onClick指定的事件处理程序或代码将被调用执

53、行。通常在下列基本对象中产生：· button（按钮对象） · checkbox（复选框）或（检查列表框） · radio （单选钮） · reset buttons（重要按钮） · submit buttons（提交按钮） 例：可通过下列按钮激活change()文件：<Form><Input type="button" Value=“ ” onClick="change()"></Form>在onClick等号后，可以使用自己编写的函数作为事件处理程序，也可以使用Ja

54、vaScript中内部的函数。还可以直接使用JavaScript的代码等。例： <Input type="button" value=" " onclick=alert("这是一个例子"）;（2）失去焦点onBlur当text对象或textarea对象以及select对象不再拥有焦点、而退到后台时，引发该文件，他与onFocas事件是一个对应的关系。（3）onChange改变事件当利用text或texturea元素输入字符值改变时发该事件，同时当在select表格项中一个选项状态改变后也会引发该事件。例： <Form>

55、;<Input type="text" name="Test" value="Test" onCharge="check('this.test)"></Form>（4）选中事件onSelect当Text或Textarea对象中的文字被加亮后，引发该事件。（5）获得焦点事件onFocus当用户单击Text或textarea以及select对象时，产生该事件。此时该对象成为前台对象。（）载入文件onLoad当文档载入时，产生该事件。onLoad一个作用就是在首次载入一个文档时检测cookie的值，并用一个变量为其赋值，使它可以被源代码使用。（）卸载文件onUnload当Web页面退出时引发onUnload事件，并可更新Cookie的状态。6_s1.htm 6_20.htm布置课后任务及作业P99: 进阶练习 复习总结： 1、掌握函数的使用。2、掌握

人人文库> 全部分类> 教育资料 > 备课教案

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论