《javascript&jQuery程序设计》教师备课教案.docx

《《javascript&jQuery程序设计》教师备课教案.docx》由会员分享，可在线阅读，更多相关《《javascript&jQuery程序设计》教师备课教案.docx（55页珍藏版）》请在优知文库上搜索。

1、javascript&jQuery程序设计教师备课教案一：Javascript基础【教学目的与要求】1 .知识目标：学生应掌握JaVaSCriPt基本语法，以及各种数据类型的判别和变换2 .能力目标：掌握JaVaSCriPt的网页特效的应用【重点与难点】重点:JaVaSCriPt基本语法，以及各种数据类型的判别和变换难点：JaVaSCriPt的流程控制语句【教学方法及手段】媒体演示法、案例教学法【教学时数】20课时【教学内容与教学过程】一、JavaScript的实现JaVaSCriPt是一种直译式脚本语言，它和JaVa语言不一样，JaVa语言是介于解释型和编译型语言之间的一种语言，在虚拟机上运

2、行，必须经过编译，通过相应平台上的解释器，实现独立于某个特定的平台编译代码的束缚。而JavaScript语言是一种解释性编程语言，其源代码在发往客户执行之前不需经过编译，而是将文本格式的字符代码发送给客户编由浏览器解释执行。完整JaVaSCriPt的实现是由以下三个部分组成：ECMAScript:核心标准。D0M：文档对象模型。B0M：浏览器对象模型。1、 ECMAScriptECMAScript是JavaScript的核心标准，它描述了该语言的语法和基本对象。2、 DOMDOM指的是DOCUmentObjectModel（文档对象模型），它是HTML的应用程序接口。DOM将整个HTML页面看

3、作是由各种节点层级构成的结构文档。3、 BOMBOM指的是BrowserObjectModel（浏览器对象模型），可以对浏览器窗口进行访问和操作处理。该模型最早是由IE3.0与NetSCaPeNaVigatOr3.0提供的，目前所有的主流浏览器都支持BOM,但是会有各自独立的实现内容。二、Javascript的使用JavaScript有两种使用方式：一是在HTML文档中直接添加代码；二是将JavaScript脚本代码写到外部的JavaScript文件中，再在HTML文档中引用该文件的路径地址。这两种使用方式的效果完全相同，可以根据使用率和代码量选择相应的开发方式。例如有多个网页文件需要引用同一

4、段JavaScript代码时，则可以写在外部文件中进行引用，以减少代码冗余。R内部JaVaSCriPtJavaScript代码可以直接写在HTML页面中，只需使用script首尾标签嵌套即可。2、 外部JavaScript如果选择将JaVaSCriPt代码保存到外部文件中，则只需要在HTML页面的script）标签中声明SrC属性即可。此时外部文件的类型必须是JaVaSCriPt类型文件（简称为JS文件），即文件后缀名为.js。三、JavaScript语法1、JaVaSCriPt大小写在JavaScript中大小写是严格区分的，无论是变量、函数名称、运算符和其他语法都必须严格按照要求的大小写进

5、行声明和使用。例如变量hello与变量HELLO会被认为是完全不同的内容。2. JavaScript分号很多编程语言（例如C、JaVa和Perl等）都要求每句代码结尾要使用分号（；）表示结束。而JavaScript的语法规则对此比较宽松，如果一行代码结尾没有分号也是可以被正确执行的。3、JavaScript注释为了提高程序代码的可读性，JavaScript允许在代码中添加注释。注释仅用于对代码进行辅助提示，不会被浏览器执行。JavaScript有两种注释方式：单行注释和多行注释。单行注释用双斜杠（/）开头，可以自成一行也可以写在JaVaSCriPt代码的后面。多行注释使用/*开头，以*/结尾，

6、在这两个符号之间的所有内容都会被认为是注释内容，均不会被浏览器所执行。四、JaVaSCriPt代码块和Java语言类似，JavaScript语言也使用一对大括号标识需要被执行的多行代码。五、JavaScript变量1、变量的声明JavaScript是一种弱类型的脚本语言，无论是数字、文本还是其他内容，统一使用关键词var加上变量名称进行声明，其中关键词var来源于英文单词variable(变量)的前三个字母。可以在声明变量的同时对其指定初始值；也可以先声明变量，再另行赋值。由于JavaScript变量是弱类型的，因此同一个变量可以用于存放不同类型的值。例如可以声明一个变量初始化时用于存放数值，

7、然后将其更改为存放字符串。变量的声明不是必须的，可以不使用关键词Var声明直接使用。2、变量的命名规范一个有效的变量命名需要遵守以下两条规则： 首位字符必须是字母(A-Za-Z).下划线J)或者美元符号($)； 其他位置上的字符可以是下划线(_)、美元符号($)、数字(09)或字母(AZaz)。 常用的变量命名方式有CameI标记法、PaSCal标记法和匈牙利类型标记法等。 Camel标记法：又称为驼峰标记法，该规则声明的变量首字母为小写，其他单词以大写字母开头。例如：varmyFirstScript、varmyTest等。 Pascal标记法：该规则声明的变量所有单词首字母均大写。例如：va

8、rMyFirstScriptvarMyTest等。 匈牙利类型标记法：该规则是在Pascal标记法的基础上为变量加一个小写字母的前缀，用于提示该变量的类型，如i表示整数、s表示字符串等。例如：varSMyFirstScriptsvariMyTest等。六、JavaScript关键字和保留字JavaScript遵循ECMA-262标准中规定的一系列关键字规则，这些关键字不能作为变量或者函数名称。全部关键字共计25个，表41JavaScript关键字一览表breakcasecatchcontinuedefaultdeletedoelsefinallyforfunctionifininstanceo

9、fnewreturnswitchthisthrowtrytypeofvarvoidwhilewith如果使用了上述关键词作为变量或者函数名称会引起报错。在ECMA-262中还规定了一系列保留字，这些字是为将来的关键字而保留的单词，同样也不可以作为变量或者函数的名称。全部保留字共计31个，表4-2JavaScript保留字一览表abstractbleanbytecharclassconstdebuggerdoubleenumexportextendsfinalfloatgotoimplementsimportintinterfacelongnativepackageprivateprotecte

10、dpublicshortstaticsupersynchronizedthrowstransientvolatile如果使用了上述保留字作为变量或者函数名称会被认为是使用了关犍字,从而一样引起报错。七、JavaScript基本数据类型JavaScript有五种原始类型分别是：Number（数字）、Boolean（布尔值）、String（字符串）、Null（空值）和Undefined（未定义）。JaVaSCriPt提供了typeof方法用于检测变量的数据类型，该方法会根据变量本身的数据类型给出对应名称的返回值。八、JaVaSCriPt对象类型在JaVaSCriPt中，对象类型分为三种：本地对象、

11、内置对象和宿主对象。本地对象（nativeobject）是ECMASCriPt定义的引用类型;内置对象（builtinobject）指的是无需实例化可直接使用的对象，其实也是特殊的本地对象；宿主对象（hostobject）指的是用户的机器环境，包括DOM和BOM。九、文档对象模型DOM1、查找HTML元素在JavaScript中有三种方式可以查找HTML元素： 通过HTML元素的id名称查找； 通过HTML元素的标签名称查找；通过HTML元素的类名称查找。(1)通过id查找HTML元素一般默认不同的HTML元素使用不一样的Id名称以示区别，因此通过id名称找到指定的单个元素。在JaVaSCri

12、Pt中语法如下：document.getElementByld(id名称”)；其中getElementByldO方法是遵照驼峰命名法，即第一个单词全小写，后面的每一个单词首字母大写的方式。这种命名方法在JaVaSCriPt中比较普遍。如果未找到该元素，则返回值为null；如果找到该元素，则会以对象的形式返回。(2)通过标签名查找HTML元素HTML元素均有固定的标签名称，因此通过标签名称可以找到指定的单个或一系列元素。在JaVaSCriPt中语法如下：document.getElementsByTagName(标签名称”)；此时方法中的Elements是复数形式，因为要考虑到有可能存在多个元素

13、符合要求。同样如果未找到符合的元素，则返回值为null；如果有多个符合条件的元素，则返回值是数组的形式。(3)通过类名查找HTML元素document.getElementsByClassName()方法可用于根据类名称获取HTML元素。在JaVaSCriPt中语法如下：document.getElementsByClassName(类名称”)；此时方法中的Elements是复数形式，因为要考虑到有可能存在多个元素符合要求。同样如果未找到符合的元素，则返回值为null；如果有多个符合条件的元素，则返回值是数组的形式。十、DOMHTML1 .创建动态的HTML内容在JaVaSCriPt中，使用d

14、ocument,write()方法可以往HTML页面动态输出内容。例如:document,write（Hello2016”）；上述代码片段表示将在空白页面上动态输出字符串Hello2016”。需要注意的是,alertO方法中的换行符n在这里是无效的，如果需要输出换行直接使用HTML换行标签即可。2 .改变HTML元素内容innerHTML可以用于获取元素内容，也可以改变元素内容。使用innerHTML属性获取或更改的元素内容可以包括HTML标签本身。获取元素内容的语法结构如下：var变量名二元素对象.InnerHTML;更改元素内容的语法结构如下：元素对象innerHTML=新的内容；这里的元

15、素对象可以使用document对象的getElementById（id名称”）方法获取。3 .改变HTML元素属性在JavaScript还可以根据属性名称动态地修改元素属性。其语法结构如下：元素对象attribute=新的属性值；也可以使用SetAttribUte（）方法达到同样的效果。其语法格式如下：元素对象SetAttribute（属性名称“，新的属性值”）；H-一、DOMCSSJavaScript还可以改变HTML元素的CSS样式。其语法结构如下：元素对象style.属性二新的值；这里的元素对象可以使用document对象的getElementById（id名称”）方法获取。属性指的是在CSS样式中的属性名称，等号右边填写该属性更改后的样式值。十二、DOM事件JavaScript还可以在HTML页面状态发生变