教学项目十七 简单的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灵感设计>> 电子工业出版社 【时间分配】 1．引言 2分钟 2．JavaScript语言的主要特点 10分钟 3．Html中的JavaScript代码的使用 8分钟 4．案例分析与设计举例、学生练习 24分钟 5．课后小结及布置上机实验项目 6分钟 【教学过程】 【引言】 采用超链技术是实现将自己的或公司的信息资源加入到 WWW 的最简单的、最快速的手段和途径。但是采用超链技术存在一定的缺陷，那就是它只能提供一种静态的信息资源，缺少动态的客户端与服务器端的交互。而JavaScript的出现，无疑为Internet网上用户带来了一线生机。可以这样说,是当今的信息时代造就了JavaScript。 【新课】 一、?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代码的使用 下面我们先通过一个例子查看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> 练习： (lianxi.htm) 设计一个网页，当用户访问网页时，直接弹出窗口，显示“欢迎光临02624班网站” 【课后小结】 本次课讲解了JavaScript语言的主要特点，JavaScript代码在html中的插入方法及弹出信息窗口的制作过程。要求能熟练掌握代码的插入方法和使用alert( )。 【上机实验项目】 实验目的： 熟练掌握在HTML中插入JavaScript代码的方法 ，灵活运用Alert( )窗口方法制作弹出信息的窗口。 实验内容： 设计一个网页，实现以下效果： （１）实现图片和文字的滚动； （２）网页中出现按钮， 点击按钮时弹出窗口，显示信息：“湖北职院欢迎你”