文档介绍：教学项目十七简单的JavaScript特效网页设计
【教学内容】
讲解JavaScript语言的主要特点,JavaScript代码在html中的插入方法,以及使用alert( )窗口方法。
【教学目的】
使学生了解JavaScript语言的主要特点,理解交互性和动态性是JavaScript语言设计网页特色,重点掌握在html中插入JavaScript代码的方法以及使用alert( )设计弹出信息窗口。
【教学重点】
【教学难点】
理解交互性与动态性是JavaScript语言设计网页的特色
【教学方式】
项目模块式、讨论式、案例分析式、练习式相结合
【教学参考】
1.<<JavaScript 入门与提高>> 杨浩著清华大学出版社
2.<< 网页工场>> Wittime工作室重庆出版社
3.<<JavaScript从入门到精通>> 电脑报社出版
4.<<JavaScript编程起步>> 人民邮电出版社
5.<<Flash MX灵感设计>> 电子工业出版社
【教学过程】
【引言】
采用超链技术是实现将自己的或公司的信息资源加入到途径。但是采用超链技术存在一定的缺陷,那就是它只能提供一种静态的信息资源,缺少动态的客户端与服务器端的交互。
【新课】
一、 JavaScript语言的主要特点
1、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脚本的基本结构。
: <html> <head> <Script Language =“JavaScript”> alert(“这是第一个JavaScript例子!”); alert(“欢迎你进入JavaScript世界!”); alert(“今后我们将共同学习JavaScript知识!”); </Script> </Head> </Html>
代码说明: (1),其标识格式为标准的HTML格式;
(2)如同HTML标识语言一样, JavaScript程序代码也是一些可用字处理软件浏览的文本;
(3)JavaScript代码由<Script Language =“JavaScript”>...</Script>说明。在标识<Script Language =“JavaScript”>...</Script>之间就可加入JavaScript脚本。JavaScript 以</Script> 标志结束。
(4)alert()是JavaScript的一个窗口对象方法,其功能是弹出一个具有确定按钮的对话框并显示()中提示信息的窗口。
在HTML中插入JavaScript代码的方法:
方法一将<SCRIPT> </SCRIPT> 标记对放在<HEAD> 和</HEAD> 标记对之间;
方法二将脚本代码放在<BODY> 和</BODY> 标记对之间;
 
三、案例设计举例
案例一:制作一个点击按钮能弹出信息窗口的网页
分析:
要设计满足用户要求的网页,必须要解决以下几个问题:
(1)网页中的按钮如何产生:
解决方法:使用HTML的表单标志
<input type=“button” value=“非点不可”>
(2)如何弹出信息窗口:
解决方法:使用alert(“欢迎光临”)
(3)点击按钮后如何作出弹出窗口的响应:
解决方法:
第一步:将弹出信息窗口的功能设计为一个函数go( )
function go( )
{
alert(“欢迎光临”);
}
第二步:在定义按钮的标志中加上单击鼠标响应的事件onclick( )
<input type=button onclick=go() value=非点不