【网页设计课件】简单的JavaScript特效网页设计.pptVIP

* 教学项目十七 简单的JavaScript特效网页设计 【教学内容】 讲解JavaScript语言的主要特点，JavaScript代码在html中的插入方法，以及使用alert( )窗口方法。 【教学目的】 使学生了解JavaScript语言的主要特点，理解交互性和动态性是JavaScript语言设计网页特色，重点掌握在html中插入JavaScript代码的方法以及使用alert( )设计弹出信息窗口。 【教学重点】 1．JavaScript代码在html的插入方法 2．弹出信息窗口网页的设计 【教学难点】 理解交互性与动态性是JavaScript语言设计网页的特色 【教学方式】 项目模块式、讨论式、案例分析式、练习式相结合 【教学参考】 1．JavaScript 入门与提高 杨浩著 清华大学出版社 2．Internet 网页工场 Wittime工作室 重庆出版社 3．JavaScript从入门到精通 电脑报社出版 4．JavaScript编程起步 人民邮电出版社 5．Flash MX灵感设计 电子工业出版社 【教学过程】 【引言】 采用超链技术是实现将自己的或公司的信息资源加入到 WWW 的最简单的、最快速的手段和途径。但是采用超链技术存在一定的缺陷，那就是它只能提供一种静态的信息资源，缺少动态的客户端与服务器端的交互。 【新课】 一、?JavaScript语言的主要特点 １、JavaScript语言概述 JavaScript是一种基于对象(Object)和事件驱动(Event Driven)并具有安全性能的脚本语言。使用它的主要目的是与HTML超文本标记语言一起在一个Web页面中链接多个对象，实现与Web客户的交互。它是通过嵌入在HTML语言中实现的语言,它的出现弥补了HTML语言无法实现WEB页面与客户进行交互的不足。 JavaScript网页效果欣赏： 讨论题： 使用JavaScript设计的网页与直接利用HTML标志制作的网页相比，你认为主要有哪些区别？ 讨论小结： （1）交互性 （2）动态性 交互性与动态性是JavaScript语言设计网页的特色。 ? 2、JavaScript语言具有以下几个基本特点： ? （1）是一种脚本编写语言 （2）是基于对象的语言 （3）简单性（4）安全性 （5）动态性 （6）跨平台性二、HTML中JavaScript代码的使用 二、HTML中JavaScript代码的使用 下面我们先通过一个例子查看JavaScript脚本的基本结构。 a0.html文档：htmlheadScript Language =“JavaScript”alert(“这是第一个JavaScript例子!”);alert(“欢迎你进入JavaScript世界!”);alert(“今后我们将共同学习JavaScript知识！”);/Script/Head/Html 代码说明：（１）a0.html是HTML文档，其标识格式为标准的HTML格式； （２）如同HTML标识语言一样， JavaScript程序代码也是一些可用字处理软件浏览的文本； （３）JavaScript代码由 Script Language =“JavaScript”.../Script说明。在标识Script Language =“JavaScript”.../Script之间就可加入JavaScript脚本。JavaScript 以 /Script 标志结束。 （４）alert()是JavaScript的一个窗口对象方法，其功能是弹出一个具有确定按钮的对话框并显示（）中提示信息的窗口。 在HTML中插入JavaScript代码的方法： 方法一 将 SCRIPT /SCRIPT 标记对放在 HEAD 和 /HEAD 标记对之间； 方法二 将脚本代码放在 BODY 和 /BODY 标记对之间； ? 三、案例设计举例 案例一：制作一个点击按钮能弹出信息窗口的网页 分析： 要设计满足用户要求的网页，必须要解决以下几个问题： （1）网页中的按钮如何产生：  解决方法：使用HTML的表单标志 input type=“button” value=“非点不可” （2）如何弹出信息窗口： 解决方法：使用alert(“欢迎光临”) （3）点击按钮后如何作出弹出窗口的响应： 解决方法： 第一步：将弹出信息窗口的功能设计为一个函数go( )