第02章教案_JavaScript入门.doc

《JavaScript与jQuery网页前端开发与设计-第2版》教案

第2章JavaScript入门

一、教学目标：

了解JavaScript的使用方式；

了解JavaScript的基本语法规则；

熟悉JavaScript的变量声明与命名规范。

二、教学重点和难点：

重点：了解JavaScript的基本语法规则；

难点：JavaScript的使用方式（内部和外部的用法）。

三、教学方法与手段：

采取互动式教学方法，理论教学使用多媒体投影教室。

四、课程简介：

本章主要内容是JavaScript基础知识，包括JavaScript的使用方式、语法规则、变量声明与明明规范等内容。

五、教学基本内容：

2.1JavaScript的实现

完整JavaScript的实现是由以下三个部分组成：

ECMAScript：核心标准。

DOM：文档对象模型。

BOM：浏览器对象模型。

2.1.1ECMAScript

ECMAScript是JavaScript的核心标准，它描述了该语言的语法和基本对象。

2.1.2DOM

DOM指的是DocumentObjectModel（文档对象模型），它是HTML的应用程序接口。DOM将整个HTML页面看作是由各种节点层级构成的结构文档。

2.1.3BOM

BOM指的是BrowserObjectModel（浏览器对象模型），可以对浏览器窗口进行访问和操作处理。该模型最早是由IE3.0与NetscapeNavigator3.0提供的，目前所有的主流浏览器都支持BOM，但是会有各自独立的实现内容。

2.2JavaScript的使用

JavaScript有两种使用方式：一是在HTML文档中直接添加代码；二是将JavaScript脚本代码写到外部的JavaScript文件中，再在HTML文档中引用该文件的路径地址。这两种使用方式的效果完全相同，可以根据使用率和代码量选择相应的开发方式。例如有多个网页文件需要引用同一段JavaScript代码时，则可以写在外部文件中进行引用，以减少代码冗余。

2.2.1内部JavaScript

JavaScript代码可以直接写在HTML页面中，只需使用script首尾标签嵌套即可。相关HTML代码语法格式如下：

script

//JavaScript代码...

/script

使用JavaScript代码中的alert()方法制作一段简单的示例：

script

alert(HelloJavaScript!);

/script

该语句表示打开网页后弹出警告对话框，显示的文字内容为HelloJavaScript!。

【例2-1】内部JavaScript的简单应用

在HTML5页面使用内部JavaScript代码弹出对话框。

【代码说明】

本示例在body首尾标签之间使用script标签插入了一行简单的JavaScript代码，用于弹出对话框并显示提示语句。当前为Chrome浏览器的运行效果，不同浏览器的对话框样式稍有不同。

内部JavaScript代码可位于HTML网页的任何位置，例如放入head或者body首尾标签中均可。同一个HTML网页也允许在不同位置放入多段JavaScript代码。为了页面代码的可读性，通常把JavaScript代码统一放在同一个位置，例如页面的底部或者head首尾标签中。

2.2.2外部JavaScript

如果选择将JavaScript代码保存到外部文件中，则只需要在HTML页面的script标签中声明src属性即可。此时外部文件的类型必须是JavaScript类型文件（简称为JS文件），即文件后缀名为.js。相关HTML代码语法格式如下：

scriptsrc=JavaScript文件URL/script

以在本地js文件夹中的myFirstScript.js文件为例，在HTML页面中的引用方法如下：

scriptsrc=js/myFirstScript.js/script

引用语句放在head或body首尾标签中均可，与在script标签中直接写脚本代码的运行效果完全一样。

【例2-2】外部JavaScript的简单应用

在HTML5页面引用外部JS文件弹出对话框。

【代码说明】

本示例在head首尾标签之间对外部JS文件myFirstScript.js进行了引用，该方法的运行效果与内部JS代码完全一样。不同之处在于，外部JS文件中直接写JavaScript相关代码即可，无需使用script首尾标签。

2.3JavaScript语法

2.3.1JavaScript大小写

在JavaScript中大小写是严格区分的，无论是变量、函数名称、运算符和其他语法都必须严格按照要求的大小写进行声明和使用。例如变量