教学项目十七 简单的 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文档,
<html>
<head>
<Script 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( )
function go( )
{
alert(“欢迎光临, );
}
第二步：在定义按钮的标志中加上单击鼠标响应的事件 onclick( )
<input type=button onclick=go() value=非点不可 >
即当在按钮上单击鼠标时执行函数 go( ),弹出信息窗口
下面，我们来查看完整的程序代码,
(一 ) 将 JavaScript代码放在 <head> </head>部分，程序如下,(a1head.htm)
<html>
<head>
<title>欢迎光临 </title>
<Script language="JavaScript">
function go()
{ alert("欢迎光临 "); }
</script>
</head>
<body>
<input type=button onclick=go( ) value=非点不可 >
<img src=62.gif><font face=隶书
size=5>Hi,www.xg000.com惊喜多多,.....</font>
</body>
</html>
（二）将 JavaScript代码放在 <body> </body>部分，程序如下
:(a1body.htm)（三）
<html>
<head>
<title>欢迎光临 </title>
</head>
<body>
<script language="JavaScript">
function go()
{ alert(“欢迎光临, );}
</script>
<input type=button onclick=go( ) value=非点不可 >
<img src=62.gif><font face=隶书
size=5>Hi,www.xg000.com惊喜多多,.....</font>
</body>
</html>
案例设计,在 body部分插入脚本,实现无限次弹出信息窗口 ;
<html>
<body onload=pop()>
<script>
function pop()
{
window.alert("just");
window.alert("here");
window.alert("waiting");
window.alert("for");
window.alert("you");
return pop();
}
</script>
</html>
案例设计,制作简单的计算机器
<html>
<head>
<style>input,table{font-size:25px}
</style>
<script>
function computer()
{
document.bgColor='pink';
document.fgColor='blue';
sam.ans.value=eval(sam.int.value);
}
</script>
</head>
<body>
<table width=50% border=0
align=center>
<form name=sam>
<tr><td>输入数学表达式 </td>
<td><input type=text name=int size=20
onFocus='javascript:alert("合法数据为,加、
减、乘、除和数字 ")'>
</td></tr>
<tr><td>结果为,</td><td><input
type=text name=ans size=20></td></tr>
<tr><td colspan=2>
<input type=button value=计算
onclick=computer()>
</td></tr>
</form></table></body></html>
【 课后小结 】
本次课讲解了 JavaScript语言的主要特点,JavaScript代码
在 html中的插入方法及弹出信息窗口的制作过程。要求能熟练
掌握代码的插入方法和 document.write()与 window.alert( )。
【 教学内容 】
讲解 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文档,
<html>
<head>
<Script 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( )
function go( )
{
alert(“欢迎光临, );
}
第二步：在定义按钮的标志中加上单击鼠标响应的事件 onclick( )
<input type=button onclick=go() value=非点不可 >
即当在按钮上单击鼠标时执行函数 go( ),弹出信息窗口
下面，我们来查看完整的程序代码,
(一 ) 将 JavaScript代码放在 <head> </head>部分，程序如下,(a1head.htm)
<html>
<head>
<title>欢迎光临 </title>
<Script language="JavaScript">
function go()
{ alert("欢迎光临 "); }
</script>
</head>
<body>
<input type=button onclick=go( ) value=非点不可 >
<img src=62.gif><font face=隶书
size=5>Hi,www.xg000.com惊喜多多,.....</font>
</body>
</html>
（二）将 JavaScript代码放在 <body> </body>部分，程序如下
:(a1body.htm)（三）
<html>
<head>
<title>欢迎光临 </title>
</head>
<body>
<script language="JavaScript">
function go()
{ alert(“欢迎光临, );}
</script>
<input type=button onclick=go( ) value=非点不可 >
<img src=62.gif><font face=隶书
size=5>Hi,www.xg000.com惊喜多多,.....</font>
</body>
</html>
案例设计,在 body部分插入脚本,实现无限次弹出信息窗口 ;
<html>
<body onload=pop()>
<script>
function pop()
{
window.alert("just");
window.alert("here");
window.alert("waiting");
window.alert("for");
window.alert("you");
return pop();
}
</script>
</html>
案例设计,制作简单的计算机器
<html>
<head>
<style>input,table{font-size:25px}
</style>
<script>
function computer()
{
document.bgColor='pink';
document.fgColor='blue';
sam.ans.value=eval(sam.int.value);
}
</script>
</head>
<body>
<table width=50% border=0
align=center>
<form name=sam>
<tr><td>输入数学表达式 </td>
<td><input type=text name=int size=20
onFocus='javascript:alert("合法数据为,加、
减、乘、除和数字 ")'>
</td></tr>
<tr><td>结果为,</td><td><input
type=text name=ans size=20></td></tr>
<tr><td colspan=2>
<input type=button value=计算
onclick=computer()>
</td></tr>
</form></table></body></html>
【 课后小结 】
本次课讲解了 JavaScript语言的主要特点,JavaScript代码
在 html中的插入方法及弹出信息窗口的制作过程。要求能熟练
掌握代码的插入方法和 document.write()与 window.alert( )。
