JavaScript——ppt讲解

单击此处编辑母版文本样式
4. 位于网页之外的单独脚本文件
第二级



第三级 示例：先建立一个名为 test.js的文件，内容如下：
第四级
第五级
单击此处编辑母版标题样式 9.1 JavaScript 简介

单击此处编辑母版文本样式
第二级 然后，再建立一个 html文件，内容如下：

第三级

单击此处编辑母版标题样式 9.1 JavaScript 简介

（4）可被用来验证用户输入的数据。 第二级 （5）可被用来检测访问者的浏览器，并根据所检测 第三级


单击此处编辑母版文本样式
第五级 到的浏览器，为这个浏览器载入相应的页面。

第四级
（6）可被用来创建cookies，用来存储和取回位于 访问者的计算机中的信息。 （7）可利用Ajax技术来完成和服务器的直接通信， 无刷新的修改当前HTML页面内容。
单击此处编辑母版标题样式 9.1 JavaScript 简介
基本语法： 第二级 <script type="text/javascript" [src= “外部js文件”]> 第三级 … </script> 第四级 第五级




单击此处编辑母版文本样式
语法说明： （1）script：脚本标记。它必须以<script type="text/javascript">开 头，以<script>结束，界定程序开始的位置和结束的位置。 （2）script在页面中的位置决定了什么时候装载它们，如果希望在其 他所有内容之前装载脚本，就要确保脚本在head部分。 （3）src属性不是必要的。它指定了一个要加载的外部js代码文件， 一旦应用了这个属性，则<script>标签中的任何内容都将被忽略。
第二级 9.2 JavaScript 程序


第四级 9.3 标识符和变量


第三级
第五级
9.4 运算符和表达式 9.5 JavaScript程序控制结构 9.6 常用对象 9.7 事件编程
9.8 利用JS实现在线订购功能
单击此处编辑母版标题样式 教学重点和难点

单击此处编辑母版文本样式
重点：在网页中使用客户端脚本的方法、函数的定义和 第二级

单击此处编辑母版文本样式
3. 调用函数 第二级 函数必须被调用才能发挥作用，前面多个程序已经展 第四级


第三级

示了函数的调用过程。具体调用规则是： （1）函数必须通过名字加上括号才能调用。 （2）函数调用时，必须满足参数传递的要求，按照 形式参数的声明要求，保证类型、顺序和个数（不是 必须的）的统一。



单击此处编辑母版文本样式
单击此处编辑母版标题样式 9.2 JavaScript 程序

单击此处编辑母版文本样式

第二级 JavaScript 脚本语言的基本构成是由语句、函数、 第三级


第五级 对象、方法、属性等来实现编程的，在程序结构上

第四级
同样是有顺序、分支和循环三种基本结构。
单击此处编辑母版标题样式 9.2.1 语句和语句块


说明，但有时也会用来屏蔽某些语句行的执行。 第四级


第三级
① 单行注释
第五级
单行注释以//开始，一般对语句的含义进行说明，也可 以跟在代码后，放在同一行中。
② 多行注释
多行注释以“/*”开头，以“*/”结尾，经常用来对一 个函数或者语句块进行说明。
单击此处编辑母版标题样式 9.2.2 函数


单击此处编辑母版文本样式
3. 代码 第二级 代码就是由若干条语句或语句块构成的执行体。浏览 第三级 第四级 器按照代码编写的逻辑顺序逐行执行，直至碰到结束符 第五级 号或者返回语句。



单击此处编辑母版标题样式 9.2.1 语句和语句块

单击此处编辑母版文本样式 4. 注释
第二级 与CSS 中的注释方法相同。注释的作用是为代码添加阅读



单击此处编辑母版标题样式 9.1 JavaScript 简介

JavaScript是一种被嵌入HTML网页之中的基于对 第二级 第三级 象和事件驱动编程的脚本语言。脚本实际上是一段



单击此处编辑母版文本样式
第四级

第五级 程序，用来完成某些特殊功能。
JavaScript功能： （1）可以将文本动态的放入HTML页面。 （2）可以对事件做出响应。 （3）可以读写HTML元素。
第三级


第四级 行的一些脚本，这些代码执行后的输出就成为页面的内容，在
第五级
浏览器中可以即时看到。如示例。
单击此处编辑母版标题样式 9.1 JavaScript 简介

单击此处编辑母版文本样式
3. 直接位于事件处理部分的代码中
第二级

第三级

第四级

第五级
单击此处编辑母版标题样式 9.1 JavaScript 简介

单击此处编辑母版文本样式
JavaScript 语句是发给浏览器的命令，这些命令 第二级 的作用是告诉浏览器要做的事情。 第三级 1. 语句 第四级 第五级 在JavaScript程序中，语句的类型一般包括： （1）变量声明语句。 （2）输入输出语句。 （3）表达式语句。 （4）程序流向控制语句。 （5）返回语句。
第9章 Jห้องสมุดไป่ตู้vaScript
单击此处编辑母版标题样式 教学目标
1. 理解JavaScript语言的作用和运行方式。

单击此处编辑母版文本样式

第二级 2. 掌握在网页中使用客户端脚本的方法。

第四级 3. 掌握JavaScript 语言的基本语法（语句和语句块、函数）。


第三级
4. 掌握消息对话框的使用方法。 5. 掌握JavaScript语言的基本语法（标识符和变量、运算符和

第三级


调用、标识符和变量的使用、运算符和表达式的 第四级 使用、程序控制结构、常用对象、事件编程。
第五级
难点：函数的定义和调用、分支程序、循环程序、常用 对象的理解和使用。
单击此处编辑母版标题样式 导入：为什么要学习 JavaScript

单击此处编辑母版文本样式

前面我们已经系统学习了Html和CSS，其中Html 第二级 是基础架构， CSS用来美化页面，而Javascript 是 第三级 第四级 实现网页动态效果的的基石 , 在web开发中扮演重 第五级 要的角色，被广泛的应用到 web 聊天 .....

第三级

12. 掌握文档对象模型（DOM）的使用方法。 13. 掌握窗口对象的使用方法。 14. 熟悉JavaScript的事件类型。
第五级
15. 掌握指定事件处理程序的两种方法。
16. 掌握表单事件、鼠标事件、键盘事件、页面载入和离开事 件的使用方法。
单击此处编辑母版标题样式 教学内容
单击此处编辑母版文本样式 9.1 JavaScript简介
单击此处编辑母版标题样式 9.1 JavaScript 简介

JavaScript程序本身不能独立存在，它是依附于某个HTML页

单击此处编辑母版文本样式
面，在浏览器端运行的。 第三级

第二级


1. 位于head部分的脚本 第五级 如果把脚本放置到head部分，在页面载入的时候，就同时载
第四级
入了代码。通常这个区域的JavaScript代码是为body区域程序
代码所调用的事件处理函数。如示例。
单击此处编辑母版标题样式 9.1 JavaScript 简介

单击此处编辑母版文本样式

第二级

第三级

第四级

第五级
单击此处编辑母版标题样式 9.1 JavaScript 简介
2. 位于body部分的脚本



单击此处编辑母版文本样式
第二级 放置于body中的脚本，通常是一些在页面载入时需要同时执



单击此处编辑母版标题样式 9.2.2 函数

6. 常用系统函数

单击此处编辑母版文本样式
系统函数又称内部方法，与任何对象无关，可直接使用。 第三级

第二级





单击此处编辑母版标题样式

单击此处编辑母版文本样式

第二级

第三级

第四级

第五级
单击此处编辑母版标题样式 9.2.2 函数

单击此处编辑母版文本样式

第二级

第三级

第四级

第五级
单击此处编辑母版标题样式 9.2.2 函数 5. 函数的作用域 单击此处编辑母版文本样式
（1）局部变量 第二级 当代码在函数内声明了一个变量后，就只能在该函数中访 第三级 问该变量，它们被称为“局部变量”。当退出该函数后，这 第四级 第五级 个变量会被撤销。可以在不同的函数中使用名称相同的局部 变量而互不影响，这是因为一个函数能够识别它自己内部定 义的每个变量。 （2）全局变量 如果程序在函数之外声明了一个变量，则页面上的所有函 数都可以访问该变量，它们被称为“全局变量”。这些变量 的生存期从声明它们之后开始，在页面关闭时结束。
第五级
表达式）
6. 掌握顺序结构程序的编写。 7. 掌握选择结构程序的编写。 8. 掌握循环结构程序的编写。
单击此处编辑母版标题样式 教学目标

单击此处编辑母版文本样式 9. 理解面向对象编程（OOP）的优点。
10. 第二级 熟悉JavaScript的对象类型。


11. 掌握常用核心对象的使用方法。 第四级
单击此处编辑母版文本样式

JavaScript 的函数有系统本身提供的内部函数，也 第二级 有系统对象定义的函数，还包括程序员自定义的函数。 第三级 第四级 一个函数代表了一个特定的功能。 第五级 1. 函数的构成 基本语法： function 函数名(参数1, 参数2, ... 参数N) { 函数体； }



单击此处编辑母版标题样式 9.2.1 语句和语句块
单击此处编辑母版文本样式 2. 语句块 语句块就是用“ {”和“}”封闭起来的若干条语句。 第二级 如： 第三级


第四级

第五级
说明：用“{…}”把相关代码封闭在一起的做法是一个很好的编 程习惯，有助于更清晰和准确地定义逻辑边界。
单击此处编辑母版标题样式 9.2.1 语句和语句块
第四级

第五级
单击此处编辑母版标题样式 9.1 JavaScript 简介

优点：复用、共享。 第二级 注意： 第三级 （1）外部的 JavaScript程序文件中不需要使用<script>标签， 第四级 第五级 此文件的内容仅含有 JavaScript程序代码。 （2）使用src属性后，那么在该script元素内部的任何内容都将 被忽略。如果需要嵌入其他的代码，可以继续在文件中添加一 对新的<script>标签。 （3）src属性指定外部文件所在的位置时，默认是在页面所在 目录下。



单击此处编辑母版标题样式 9.2.2 函数

单击此处编辑母版文本样式 示例：

第二级

第三级

第四级

第五级
单击此处编辑母版标题样式 9.2.2 函数

单击此处编辑母版文本样式

第二级

第三级

第四级

第五级
单击此处编辑母版标题样式 9.2.2 函数
运行结果：

单击此处编辑母版文本样式



单击此处编辑母版标题样式 9.2.2 函数

单击此处编辑母版文本样式
语法说明： 第二级 （1）function 是关键字，组成一个函数必须有 第三级 第四级 function关键字开始。 第五级 （2）函数名用来在调用时使用，命名必须符合有关 标识符的命名规则。 （3）一个函数可以没有参数，但括号必须保留，函 数也可以有1到多个参数，声明参数不必明确类型。 （4）大括号界定了函数的函数体。
第二级

第三级

第四级

第五级
单击此处编辑母版标题样式 9.2.2 函数

单击此处编辑母版文本样式

第二级 第三级 2. 函数声明时的参数


第四级

第五级 形参：color ，用来接收函数调用者传递过来的参数。
实参：red,orange,yellow,…，函数调用时的实际参数 值。
单击此处编辑母版标题样式 9.2.2 函数
第五级
单击此处编辑母版标题样式 9.2.2 函数

单击此处编辑母版文本样式
4. 用 return返回函数的计算结果 第二级 第三级 函数可以在执行后返回一个值来代表执行后的结果， 第四级 当然有些函数基于功能的需要并不需要返回任何值。 第五级 函数返回一个值非常简单，一般在一个函数代码的最 后一行是return语句。 当然，一个函数也可以没有返回值，但并不妨碍最 后添加一条return语句，明确表示函数执行结束，如 show函数一样。