Web前端开发实例与实战第7章 JavaScript基础.docxVIP

编写日期：授课日期：任课教师：

课程

名称

《Web前端开发实例与实战》

授课

专业

授课

班级

周次

节次

授课

章节

第7章

JavaScript基础

授课

学时

5学时

教学

目标

知识

1.了解JavaScript语言。

2.了解JavaScript语言的发展历史。

3.了解JavaScript语言发布版本。

4.了解JavaScript的组成。

5.了解JavaScript语言的特点。。

能力

1.能够创建JavaScript文件。

2.熟知JavaScript语言的基础语法。

3.熟知运算符。

4.熟知流程控制结构。

5.能够定义不同类型的函数。

素质

培养学生在技术的能力，同时具备社会责任感和道德素养。

教学

重点

在HTML文档的head元素中添加JavaScript代码

教学

难点

在网页中输出等式的运算结果

教学

方法

教学环节包括课堂讲授、集体讨论、师生互动、课后答疑等

教学

用具

多媒体、课件

教学

内容

第7章JavaScript基础

7.1JavaScript语言引入

JavaScript脚本语言需要引入HTML文档中才可以实现动态控制网页元素样式的功能。

7.1.1JavaScript文件创建和引入

引入JavaScript文件之前首先需要创建一个JavaScript文件。创建JavaScript文件的方式包括2种。第1种是新建一个.txt文档，然后修改文件后缀名为.js即可。第2种方式是使用Dreamweaver软件依次单击JavaScript后打开新的JavaScript文件编辑页面，在页面中可以添加JavaScript代码，添加完成后依次单击“文件|保存”，在“另存为”窗口中设置JavaScript文件的名称后，单击保存即可。

JavaScript引入HTML文档的方式包括内部引用和外部引用2种。

1.内部引用

内部引用JavaScript代码，根据引用的位置不同可以分为head标签中引用、body标签中引用和两者皆有引用3种方式。

（1）head标签中引用。

（2）body标签中引用。

（3）两者皆有。

2.外部引用

外部引用是指单独创建一个后缀为.js的文件，在该文件中写入具体的JavaScript代码。然后在HTML文档中的head元素内使用script标签将.js文件引入HTML文档中，其引用语法形式如下所示。

scriptsrc=xxx.js/script

外部引用JavaScript文件相对于其他引入方式有以下几点优势。

（1）分离了HTML和代码。

（2）使HTML和JavaScript更易于阅读和维护。

（3）已缓存的JavaScript文件可加速页面加载。

7.1.2JavaScript语言的显示方式

JavaScript语言属于编程语言，使用对应的代码可以将代码运行的结果通过指定的方式显示到指定位置，显示运行结果的方式有3种，这些显示方式都是JavaScript语言提供的固定语法形式和函数。

1.window.alert()

window.alert()的作用是将指定的内容通过浏览器弹框的方式进行显示。其中，window可以省略，直接使用alert()即可，要显示的内容添加在小括号中。例如，将一段文本内容“Hello，JavaScript！”通过弹窗进行显示。

2.document.write()

document.write()的作用是将指定的内容添加到HTML文档显示页面。例如，将一段文本内容“Hello，JavaScript！”添加到文档页面进行显示。

3.console.log()

console.log()的作用是将指定内容写入浏览器的控制台中。例如，将一段文本内容“Hello，JavaScript！”在浏览器的控制台中显示。

7.2基础语法

JavaScript语言属于解释型编程语言，它在设计时有很多内容参考了Java语言的规则。

7.2.1标识符

标识符是用于定义JavaScript中数据的符号，简单理解标识符就是数据的名称。标识符的首字符必须是字母、下划线（_）或美元符号（$），其他字符可以是字母、数字、下划线或美元符号。

7.2.2关键字

关键字属于标识符的一种，它由JavaScript标准进行定义，每个关键字都有对应的功能。用户自定义标识符时不可以使用关键字。

7.2.3常量

常量是指不可改变的数据。例如，数字1、字母a都属于常量。根据不同常量的特性可以将常量划分为5种数据类型，分别是整型常量、实型常量、布尔型常量、字符型常量和空值，具体内容如下所示。

（1）整型常量，一般与数学中使用的整数基本相同。

（2）实型常量，与日常生活中使用的小数类似，在JavaScript中由整数部分加小数部分的形式来表示，