网页制作脚本语言课件.ppt

网页设计与制作教程第1章 网页设计与制作基础第第1010章章 网页制作脚本语言网页制作脚本语言本章概述 本章的学习目标主要内容1网页设计与制作教程第1章 网页设计与制作基础本章概述本章概述l在网页设计领域，特效发挥着非常重要的作用。在网页设计领域，特效发挥着非常重要的作用。使用网页特效，可以使网页具备更强的交互性、使用网页特效，可以使网页具备更强的交互性、欣赏性，也可使网页更加智能化。在编写各种特欣赏性，也可使网页更加智能化。在编写各种特效时，最流行的脚本语言就是效时，最流行的脚本语言就是JavaScriptJavaScript脚本语脚本语言。本章主要介绍言。本章主要介绍JavaScriptJavaScript语言基础知识和在语言基础知识和在网页制作中的应用。网页制作中的应用。2网页设计与制作教程第1章 网页设计与制作基础本章的学习目标本章的学习目标l了解了解JavaScriptJavaScript的概念的概念l掌握掌握JavaScriptJavaScript的语法的语法l了解了解JavaScriptJavaScript函数和事件函数和事件l了解了解JavaScriptJavaScript对象的使用方法对象的使用方法3网页设计与制作教程第1章 网页设计与制作基础主要内容主要内容10.110.1脚本语言概述脚本语言概述10.210.2 JavaScriptJavaScript基础基础10.310.3函数和事件函数和事件10.410.4对象对象10.510.5应用应用JavaScriptJavaScript10.610.6本章小结本章小结4网页设计与制作教程第1章 网页设计与制作基础10.1 10.1 脚本语言概述脚本语言概述l在互联网中，很多网站都是通过脚本语言编写行在互联网中，很多网站都是通过脚本语言编写行为，控制网页中的对象，实现动态的效果，这些为，控制网页中的对象，实现动态的效果，这些动态效果可以使网页更加丰富多彩。在制作动态动态效果可以使网页更加丰富多彩。在制作动态效果时，可使用两种语言：一种是效果时，可使用两种语言：一种是JavaScriptJavaScript语语言，另一种则是言，另一种则是VBScriptVBScript语言。在这两种脚本语语言。在这两种脚本语言中，言中，JavaScriptJavaScript语言使用最为广泛。语言使用最为广泛。5网页设计与制作教程第1章 网页设计与制作基础JavaScriptJavaScript语言语言lJavaScriptJavaScript的概念的概念JavaScriptJavaScript是一种面向网络应用的、面向对象编程的脚本语是一种面向网络应用的、面向对象编程的脚本语言，是互联网中最流行且应用最广泛的脚本语言。言，是互联网中最流行且应用最广泛的脚本语言。lJavaScriptJavaScript与与JavaJava的区别的区别JavaJava语言是升阳计算机拥有版权的一种服务器端高级语言，语言是升阳计算机拥有版权的一种服务器端高级语言，而而JavaScriptJavaScript最早由网景公司开发，并免费发布。最早由网景公司开发，并免费发布。JavaScriptJavaScript的语法和语义更接近于的语法和语义更接近于C C语言。语言。lJavaScriptJavaScript的应用的应用JavaScriptJavaScript是一种简单的面向对象脚本语言，其使用者无需是一种简单的面向对象脚本语言，其使用者无需了解太多的编程理论和编译方法，即可将代码嵌入到网页中。了解太多的编程理论和编译方法，即可将代码嵌入到网页中。6网页设计与制作教程第1章 网页设计与制作基础主要内容主要内容10.110.1脚本语言概述脚本语言概述10.210.2 JavaScript JavaScript基础基础10.310.3函数和事件函数和事件10.410.4对象对象10.510.5应用应用JavaScriptJavaScript10.610.6本章小结本章小结7网页设计与制作教程第1章 网页设计与制作基础10.2 JavaScript10.2 JavaScript基础基础lJavaScriptJavaScript是一种基于对象和事件驱动，并且具是一种基于对象和事件驱动，并且具有较强安全性的脚本语言。它使得信息和用户之有较强安全性的脚本语言。它使得信息和用户之间不仅只是一种显示和浏览的关系，而是实现了间不仅只是一种显示和浏览的关系，而是实现了一种实时的、可交互式的表达能力。一种实时的、可交互式的表达能力。8网页设计与制作教程第1章 网页设计与制作基础语法语法l JavaScriptJavaScript在网页中的用法在网页中的用法JavaScriptJavaScript脚本语言可以通过嵌入或导入的方法，实现在脚本语言可以通过嵌入或导入的方法，实现在HTMLHTML语言中的功能。语言中的功能。嵌入式嵌入式导入式导入式lJavaScriptJavaScript的变量的变量变量是程序中数据的临时存放场所。使用变量之前首先进行变量是程序中数据的临时存放场所。使用变量之前首先进行声明，在声明，在JavaScriptJavaScript脚本程序中使用脚本程序中使用varvar关键字来声明变量。关键字来声明变量。9网页设计与制作教程第1章 网页设计与制作基础语法语法lJavaScriptJavaScript的数据类型的数据类型JavaScriptJavaScript有有5 5种数据类型。种数据类型。NumberNumber类型类型：也就是数值数据类型，包括整型和浮点型。也就是数值数据类型，包括整型和浮点型。StringString类型也称为字符串型，它在类型也称为字符串型，它在JavaScriptJavaScript中有两种等价中有两种等价的表示方法。的表示方法。BooleanBoolean类型也称为布尔型，它的数值只有两个值：真有类型也称为布尔型，它的数值只有两个值：真有truetrue或或1 1表示；假用表示；假用falsefalse或或0 0表示。表示。UndefinedUndefined类型的值就是指在变量被创建后，但未给该变量类型的值就是指在变量被创建后，但未给该变量赋值。赋值。NullNull类型的值即为空值，也就是说该变量没有保存有效的数类型的值即为空值，也就是说该变量没有保存有效的数值、字符串、值、字符串、booleanboolean等。等。10网页设计与制作教程第1章 网页设计与制作基础运算符运算符lJavaScriptJavaScript具有全范围的运算符，包括算术运算具有全范围的运算符，包括算术运算符、逻辑运算符、位运算符、赋值运算符、比较符、逻辑运算符、位运算符、赋值运算符、比较运算符、字符串运算符和特殊运算符。运算符、字符串运算符和特殊运算符。11网页设计与制作教程第1章 网页设计与制作基础控制和循环语句控制和循环语句l与多数高级编程语言类似，与多数高级编程语言类似，JavaScriptJavaScript也可以通也可以通过语句控制代码执行的流程。这样能使整个程序过语句控制代码执行的流程。这样能使整个程序减少混乱，增加程序功能。减少混乱，增加程序功能。l选择结构选择结构选择结构通常用来指明程序代码的多个运行顺序或方向，并选择结构通常用来指明程序代码的多个运行顺序或方向，并为这些顺序或方向创建一个交叉点。为这些顺序或方向创建一个交叉点。单一选择结构单一选择结构双路选择结构双路选择结构内联三元运算符内联三元运算符多路选择结构多路选择结构12网页设计与制作教程第1章 网页设计与制作基础控制和循环语句控制和循环语句l循环结构循环结构在在JavaScriptJavaScript中，还可以使用循环结构。循环结构的特点是中，还可以使用循环结构。循环结构的特点是根据一定的条件多次执行，直到满足一定的条件后停止。例根据一定的条件多次执行，直到满足一定的条件后停止。例如，打印输出九九乘法表的程序，就需要使用这种结构。如，打印输出九九乘法表的程序，就需要使用这种结构。由计数器控制的循环由计数器控制的循环对对象的每个属性都进行操作对对象的每个属性都进行操作在循环开头测试表达式在循环开头测试表达式在循环末尾测试表达式在循环末尾测试表达式13网页设计与制作教程第1章 网页设计与制作基础主要内容主要内容10.110.1脚本语言概述脚本语言概述10.210.2 JavaScriptJavaScript基础基础10.310.3函数和事件函数和事件10.410.4对象对象10.510.5应用应用JavaScriptJavaScript10.610.6本章小结本章小结14网页设计与制作教程第1章 网页设计与制作基础10.3 10.3 函数和事件函数和事件lJavaScriptJavaScript函数函数lJavaScriptJavaScript事件事件l修改修改HTMLHTML和和CSSCSS15网页设计与制作教程第1章 网页设计与制作基础JavaScriptJavaScript函数函数l通常在进行一个复杂的程序设计时，总是将所要通常在进行一个复杂的程序设计时，总是将所要完成的复杂功能划分为一些相对独立的部分，每完成的复杂功能划分为一些相对独立的部分，每个部分编写一个函数，使它们充分独立、任务单个部分编写一个函数，使它们充分独立、任务单一、程序清晰、易懂易读易维护。然后根据需要一、程序清晰、易懂易读易维护。然后根据需要来组合这些函数完成最终的功能。函数的定义形来组合这些函数完成最终的功能。函数的定义形式如下：式如下：16网页设计与制作教程第1章 网页设计与制作基础JavaScriptJavaScript事件事件l一个完整的事件过程包括事件源、监听以及对事件的处理一个完整的事件过程包括事件源、监听以及对事件的处理等等3 3个部分。个部分。l事件源和监听事件源和监听在在JavaScriptJavaScript中，事件源通常是指用户对网页文档进行的各中，事件源通常是指用户对网页文档进行的各种操作。事件源的监听者通常就是指网页浏览器。种操作。事件源的监听者通常就是指网页浏览器。l事件的处理事件的处理事件通常会与函数结合使用。通过事件的监听属性，可以在事件通常会与函数结合使用。通过事件的监听属性，可以在事件发生执行指定的函数，实现对事件的处理。事件发生执行指定的函数，实现对事件的处理。l消息框消息框JavaScriptJavaScript可以在网页中弹出可以在网页中弹出3 3种消息框，即警告框、确认种消息框，即警告框、确认框和提示框。框和提示框。17网页设计与制作教程第1章 网页设计与制作基础修改修改HTMLHTML和和CSSCSSl例例10-1 10-1 如图所示，单击文字如图所示，单击文字click meclick me，下面的，下面的盒子宽度就会变大。该实例综合了函数、事件、盒子宽度就会变大。该实例综合了函数、事件、对对CSSCSS的修改，包括了现在实际网页中主流效果所的修改，包括了现在实际网页中主流效果所需要的技术要素。需要的技术要素。18网页设计与制作教程第1章 网页设计与制作基础主要内容主要内容10.110.1脚本语言概述脚本语言概述10.210.2 JavaScriptJavaScript基础基础10.310.3函数和事件函数和事件10.410.4对象对象10.510.5应用应用JavaScriptJavaScript10.610.6本章小结本章小结19网页设计与制作教程第1章 网页设计与制作基础10.4 10.4 对象对象lJavaScriptJavaScript的一个重要功能就是基于对象功能。的一个重要功能就是基于对象功能。通过基于对象的程序设计，可以用更直观、模块通过基于对象的程序设计，可以用更直观、模块化和可重复使用的方法进行程序开发。化和可重复使用的方法进行程序开发。lStringString对象对象StringString对象是对象是JavaScriptJavaScript最重要的核心对象之一，所有程序最重要的核心对象之一，所有程序只要使用字符串数据，就需要只要使用字符串数据，就需要StringString对象。对象。ldocumentdocument对象对象documentdocument对象即为文档对象，用来描述当前窗口或指定窗口对象即为文档对象，用来描述当前窗口或指定窗口对象的文档，它包含文档从对象的文档，它包含文档从到到之间的内容。之间的内容。20网页设计与制作教程第1章 网页设计与制作基础10.4 10.4 对象对象lwindowwindow对象对象windowwindow对象是浏览器显示内容的主要容器。对象是浏览器显示内容的主要容器。lArrayArray对象对象ArrayArray对象即为数组对象，它是一个对象的集合，而且里边对象即为数组对象，它是一个对象的集合，而且里边的对象可以为不同类型。的对象可以为不同类型。lDateDate对象对象DateDate对象即为日期对象，可以用来表示任意的日期和时间，对象即为日期对象，可以用来表示任意的日期和时间，获取当前系统日期以及计算两个日期的间隔。获取当前系统日期以及计算两个日期的间隔。lMathMath对象对象MathMath对象即为数学对象，提供对数据的数学计算。对象即为数学对象，提供对数据的数学计算。21网页设计与制作教程第1章 网页设计与制作基础主要内容主要内容10.110.1脚本语言概述脚本语言概述10.210.2 JavaScriptJavaScript基础基础10.310.3函数和事件函数和事件10.410.4对象对象10.510.5应用应用JavaScriptJavaScript10.610.6本章小结本章小结22网页设计与制作教程第1章 网页设计与制作基础10.5 10.5 应用应用JavaScriptJavaScriptl编写编写JavaScriptJavaScript程序程序l使用使用“代码片段代码片段”面板面板l表单校验表单校验23网页设计与制作教程第1章 网页设计与制作基础编写编写JavaScriptJavaScript程序程序l本节通过编写一个简单本节通过编写一个简单JavaScriptJavaScript程序制作一个程序制作一个带链接的水平滚动字幕效果，在网页中，这种效带链接的水平滚动字幕效果，在网页中，这种效果用于广告会非常醒目。果用于广告会非常醒目。24网页设计与制作教程第1章 网页设计与制作基础使用使用“代码片段代码片段”面板面板l插入脚本标记插入脚本标记l插入消息框的插入消息框的JavaScriptJavaScript代码代码l调用调用JavaScriptJavaScript函数函数25网页设计与制作教程第1章 网页设计与制作基础表单校验表单校验l表单的校验首先要通过客户端的表单的校验首先要通过客户端的JavaScriptJavaScript代码代码来进行有效性检查，来进行有效性检查，JavaScriptJavaScript代码需要获得表代码需要获得表单控件的值，并根据响应规则进行检查。单控件的值，并根据响应规则进行检查。l例例10-210-2 表单校验。运行效果如图所示。表单校验。运行效果如图所示。26网页设计与制作教程第1章 网页设计与制作基础主要内容主要内容10.110.1脚本语言概述脚本语言概述10.210.2 JavaScriptJavaScript基础基础10.310.3函数和事件函数和事件10.410.4对象对象10.510.5应用应用JavaScriptJavaScript10.610.6本章小结本章小结27网页设计与制作教程第1章 网页设计与制作基础10.6 10.6 本章小结本章小结 l本章全面讲述了本章全面讲述了JavaScriptJavaScript语言的基本功能。语言的基本功能。l首先，介绍了首先，介绍了JavaScriptJavaScript与与JavaJava的区别和在网页制作的区别和在网页制作中的应用。中的应用。l接下来，对接下来，对JavaScriptJavaScript语言的特点进行了分析。语言的特点进行了分析。l之后，分别讲述了之后，分别讲述了JavaScriptJavaScript的语法、运算符、控制的语法、运算符、控制和循环语句、函数和事件以及和循环语句、函数和事件以及JavaScriptJavaScript对象的类型对象的类型和特点。和特点。l最后，通过实例讲述了最后，通过实例讲述了JavaScriptJavaScript的应用，包括编写的应用，包括编写JavaScriptJavaScript程序、使用程序、使用“代码片段代码片段”面板及使用面板及使用JavaScriptJavaScript进行表单校验的方法。进行表单校验的方法。28