长春工业大学：《Javascript 程序设计》课程教学资源（PPT课件讲稿）第8章 网页特效 JavaScript

BUSINESS 零0 e 第8章 网页特效——JavaScript 长春工业大学 CCUT 经济管理学院 CHANGCHUN UNIVERSITY OF TECHNOLOGY

内容概览 i Java Script简介 目图目目面日日面日日日日着 2在网页中插入 Javascript的方法及定义 3 JavaScript基本语法 4 JavaScript常用内置对象 5 JavaScript'常用 DHTML对象 6常见的网页特效 長春工主大CCUT CHANGOHUN UNIVERSITY OF TECHNOLOGY

内 容 概 览 JavaScript简介 在网页中插入JavaScript的方法及定义 JavaScript基本语法 JavaScript常用内置对象 JavaScript常用DHTML对象 常见的网页特效

81 JavaScrip简介 Javascript语言的前身叫作 LiveScript,自从Sun公司推 出著名的Java语言后, Netscape公司引进了Sun公司有关Java 的程序概念,将 Livescript重新进行设计,并改名为 avaScript 目前流行的多数浏览器都支持 Javascript,如 Netscape 公司的 Navigator3.0以上版本, Microsoft公司的 Internet Explorer3.0以上版本。 JavaScript是一种行为脚本语言,用 Javascript可以创 建出运行在多平台和浏览器上的交互行为和效果 長春工主大CCUT CHANGOHUN UNIVERSITY OF TECHNOLOGY

JavaScript语言的前身叫作LiveScript，自从Sun公司推 出著名的Java语言后，Netscape公司引进了Sun公司有关Java 的程序概念，将LiveScript重新进行设计，并改名为 JavaScript。 目前流行的多数浏览器都支持JavaScript，如Netscape 公司的Navigator 3.0以上版本，Microsoft公司的Internet Explorer 3.0以上版本。 JavaScript是一种行为脚本语言，用JavaScript可以创 建出运行在多平台和浏览器上的交互行为和效果。 8.1 JavaScript简介

JavaScript的使用范围 适合做哪些事情 客户端数据计算 客户端表单合法性验证 浏览器对象的调用 浏览器事件的触发 网页特殊显示效果制作 不适合做哪些事情 大型应用程序 图像、多媒体处理 网络实时通讯应用 長春工主大CCUT CHANGOHUN UNIVERSITY OF TECHNOLOGY

• 适合做哪些事情 – 客户端数据计算 – 客户端表单合法性验证 – 浏览器对象的调用 – 浏览器事件的触发 – 网页特殊显示效果制作 • 不适合做哪些事情 – 大型应用程序 – 图像、多媒体处理 – 网络实时通讯应用 JavaScript的使用范围

JavaScript与Java的区别 Javascript.与Jaa运行方式不一样 Javascript是解释执行 Java是编译,解释执行 JavaScrip不是Java的简化版本 逻辑运算符、语句结构类似 变量声明、对象调用等不同 Javascript和Java功能实现不一样 Javascript通过浏览器实现程序功能 Java通过Java虚拟机实现程序功能 長春王主大孝ccUT CHANGOHUN UNIVERSITY OF TECHNOLOGY

• JavaScript与Java运行方式不一样 – JavaScript是解释执行 – Java是编译，解释执行 • JavaScript不是Java的简化版本 – 逻辑运算符、语句结构类似 – 变量声明、对象调用等不同 • JavaScript和Java功能实现不一样 – JavaScript通过浏览器实现程序功能 – Java通过Java虚拟机实现程序功能 JavaScript与Java的区别

编写工具 JavaScript的编辑工具很多,如 Notepad, Ultraedit, EditPlus Microsoft FrontPage, DreamWeaver, Microsoft Visual interdev Eclipse, JBuilder, NetBean等IDE开发工具 针对简单的程序,我们使用文本编辑器直接书写源代码 長春王主大孝ccUT CHANGOHUN UNIVERSITY OF TECHNOLOGY

• JavaScript的编辑工具很多，如 – Notepad，Ultraedit，EditPlus – Microsoft FrontPage、DreamWeaver、Microsoft Visual InterDev – Eclipse,JBuilder,NetBean等IDE开发工具 • 针对简单的程序，我们使用文本编辑器直接书写源代码 编写工具

Javascrip程序示例 本程序主要针对事件驱动和基于对象,该例子在网页的一个按钮中设 置了 onclick属性,当鼠标单击该按钮时,将会弹出一个窗口,浏览百 度网站。 window是客户端 Javascript中浏览器对象之一,open是 window对象的一个方法,意思是打开窗口,在参数中设置好网址, 就可以打开指定的网站。 打开记事本,将以下代码输入,保存为D:\helo.htm 保存好以后双击该文件打开,试一试单击按钮后运行的结果。 長春工主大CCUT CHANGOHUN UNIVERSITY OF TECHNOLOGY

• 本程序主要针对事件驱动和基于对象，该例子在网页的一个按钮中设 置了onclick属性，当鼠标单击该按钮时，将会弹出一个窗口，浏览百 度网站。 – window是客户端JavaScript中浏览器对象之一，open是 window对象的一个方法，意思是打开窗口，在参数中设置好网址， 就可以打开指定的网站。 打开记事本，将以下代码输入，保存为D:\hello.htm 保存好以后双击该文件打开，试一试单击按钮后运行的结果。 JavaScript程序示例

82网页中插入 JavaScript方法及定义 8.2.1在HTM文档中嵌入脚本程序 Javascript的脚本程序包括在HM中,使之成为HTM文 档的一部分。其格式为: Script language = JavaScript> JavaScript语言代码 JavaScript语言代码; 【演练8-1】在HTML文档中嵌入 JavaScript的脚本,本例文件8-1hm在浏览器 中显示的效果如图8-1和图82所示。 JavaScript示例- Windows Internet Er.回 ⊙ JavaScript示例- indows Internet Ex.凵回区 .同w,1+×图百 ☆收藏夹 O JavaScript例 ☆收夹6 JavaScript示例 Hello, JavaScript I Hello, JavaScript! 来自网页的消息 学习 JavaScript! 迎进入 JavaScript世界! 長cU CHANGOHUN UNIVERSITY OF TECHNOLOGY

8.2.1 在HTML文档中嵌入脚本程序 JavaScript的脚本程序包括在HTML中，使之成为HTML文 档的一部分。其格式为： JavaScript语言代码; JavaScript语言代码; … 【演练 8-1】在HTML文档中嵌入JavaScript的脚本，本例文件8-1.html在浏览器 中显示的效果如图8-1和图8-2所示。 8.2 网页中插入JavaScript方法及定义

82网页中插入 JavaScript方法及定义 8.2.2引用脚本文件 如果已经存在一个脚本文件(以js为扩展名),则可以 使用 script标记的src属性引用外部脚本文件的URL。采用引 用脚本文件的方式,可以提高程序代码的利用率。 其格式为: Head> 長春工主大CCUT CHANGOHUN UNIVERSITY OF TECHNOLOGY

8.2.2 引用脚本文件 如果已经存在一个脚本文件（以js为扩展名），则可以 使用script标记的src属性引用外部脚本文件的URL。采用引 用脚本文件的方式，可以提高程序代码的利用率。 其格式为： … … 8.2 网页中插入JavaScript方法及定义

82网页中插入 JavaScript方法及定义 8.2.3在HTM标签内添加脚本 可以在HTM表单的输入标记符内添加脚本,以响应输入 的事件。 【演练8-2】在标记中添加 Javascript的脚本,本例文件8-2.html在浏览 器中显示的效果如图8-3和图8-4所示 JavaScript示例- indows Internet Ex.□口区 jAvasCript示例- Windows Internet Er回x d8162:+×圖百度 ☆收藏夹8 sCripta示例 收藏夹 JavaScript示例 Hello, JavaScript! Hello, JavaScript! 单击此按钮 「单击此撿钮 来 自网页的消息 学习 JavaScript! 字 欢迎进入 JavaScript世界! 長春王主大孝ccUT CHANGOHUN UNIVERSITY OF TECHNOLOGY

8.2.3 在HTML标签内添加脚本 可以在HTML表单的输入标记符内添加脚本，以响应输入 的事件。 【演练8-2】在标记中添加JavaScript的脚本，本例文件8-2.html在浏览 器中显示的效果如图8-3和图8-4所示。 8.2 网页中插入JavaScript方法及定义