湖北职晚计算机科学与技术理论课教案一《网页设计》 教学项目十七简单的 JavaScript特效网页设计 【教学内容】 讲解 JavaScript语言的主要特点, JavaScript代码在html中的插入方法,以及使 用 alert()窗口方法 【教学目的】 使学生了解 JavaScript语言的主要特点,理解交互性和动态性是 JavaScript语言 设计网页特色,重点掌握在htm1中插入 JavaScript代码的方法以及使用 alert()设计弹 出信息窗口 【教学重点】 JavaScript代码在hm1的插入方法 2.弹出信息窗口网页的设计 【教学难点】 理解交互性与动态性是 JavaScript语言设计网页的特色 【教学方式】 项目模块式、讨论式、案例分析式、练习式相结合 【教学参考】 1.>杨浩著 清华大学出版社 2. Wittime工作室重庆出版社 3.> 电脑报社出版 4.> 电子工业出版社 【时间分配】 1.引言 2分钟 2. JavaScr ipt语言的主要特点10分钟 3.Htm中的 JavaScript代码的使用8分钟 4.案例分析与设计举例、学生练习24分钟 5.课后小结及布置上机实验项目6分钟 【教学过程】 【引言】 采用超链技术是实现将自己的或公司的信息资源加入到Www的最简单的、最快速的 手段和途径。但是采用超链技术存在一定的缺陷,那就是它只能提供一种静态的信息资源, 缺少动态的客户端与服务器端的交互。而 JavaScript的出现,无疑为 Internet网上用户 来了一线生机。可以这样说,是当今的信息时代造就了 JavaScript 【新课】
湖北职院计算机科学与技术系理论课教案—《网页设计》 教学项目十七 简单的 JavaScript 特效网页设计 【教学内容】 讲解 JavaScript 语言的主要特点，JavaScript 代码在 html 中的插入方法，以及使 用 alert( )窗口方法。 【教学目的】 使学生了解 JavaScript 语言的主要特点，理解交互性和动态性是 JavaScript 语言 设计网页特色，重点掌握在 html 中插入 JavaScript 代码的方法以及使用 alert( )设计弹 出信息窗口。 【教学重点】 1．JavaScript 代码在 html 的插入方法 2．弹出信息窗口网页的设计 【教学难点】 理解交互性与动态性是 JavaScript 语言设计网页的特色 【教学方式】 项目模块式、讨论式、案例分析式、练习式相结合 【教学参考】 1．> 杨浩著 清华大学出版社 2．> Wittime 工作室 重庆出版社 3．> 电脑报社出版 4．> 人民邮电出版社 5．> 电子工业出版社 【时间分配】 1．引言 2 分钟 2．JavaScript 语言的主要特点 10 分钟 3．Html 中的 JavaScript 代码的使用 8 分钟 4．案例分析与设计举例、学生练习 24 分钟 5．课后小结及布置上机实验项目 6 分钟 【教学过程】 【引言】 采用超链技术是实现将自己的或公司的信息资源加入到 WWW 的最简单的、最快速的 手段和途径。但是采用超链技术存在一定的缺陷，那就是它只能提供一种静态的信息资源， 缺少动态的客户端与服务器端的交互。而 JavaScript 的出现，无疑为 Internet 网上用户 带来了一线生机。可以这样说,是当今的信息时代造就了 JavaScript。 【新课】
湖北职晚计算机科学与技术亲理论课教案一《网页设计》 、 JavaScript语言的主要特点 1、 JavaScr ipt语言概述 JavaScr ipt是一种基于对象(0 b ject)和事件驱动( Event Dr iven)并具有安全性能的脚 本语言。使用它的主要目的是与HTML超文本标记语言一起在一个Web页面中链接多个对 象,实现与Web客户的交互。它是通过嵌入在HM语言中实现的语言,它的出现弥补了HTML 语言无法实现WB页面与客户进行交互的不足。 JavaScript网页效果欣赏:(请学生上台操作并讲解看到的网页效果 (一)(表单交互) )(动态背景) (三)(旋转文字) (四)(滚屏效果) 讨论题 使用 JavaScript设计的网页与直接利用HTML标志制作的网页相比,你认为主要有哪些区 别? 讨论小结: (1)交互性 (2)动态性 交互性与动态性是 JavaScr ipt语言设计网页的特色。 2、 JavaScript语言具有以下几个基本特点 (1)是一种脚本编写语言(2)是基于对象的语言 (3)简单性 (4)安全性 (5)动态性 (6)跨平台性 二、HTML中 JavaScript代码的使用 下面我们先通过一个例子查看 JavaScript脚本的基本结构。 a0htm|文档: head> a lert(“这是第一个 JavaScript例子!”); alert(欢迎你进入 JavaScript世界!) alert(今后我们将共同学习 JavaScr ipt知识!”) 代码说明: (1)aO.html是HTML文档,其标识格式为标准的HML格式: (2)如同HML标识语言一样, JavaScript程序代码也是一些可用字处理软件浏览的文 本 (3) 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 文档： alert(“这是第一个 JavaScript 例子!”); alert(“欢迎你进入 JavaScript 世界!”); alert(“今后我们将共同学习 JavaScript 知识！”); 代码说明： （１）a0.html 是 HTML 文档，其标识格式为标准的 HTML 格式； （２）如同 HTML 标识语言一样， JavaScript 程序代码也是一些可用字处理软件浏览的文 本； （３）JavaScript 代码由 ...说明。在标
湖北职晚计算机科学与技术亲理论课教案一《网页设计》 识.之间就可加入 JavaScript脚本 JavaScript以标志结束 (4) alert(是 JavaScript的一个窗口对象方法,其功能是弹出一个具有确定按钮的对 话框并显示()中提示信息的窗口。 在HTML中插入 JavaScript代码的方法: 方法一将标记对放在和标记对之间 方法二将脚本代码放在和标记对之间: 三、案例设计举例 案例一:制作一个点击按钮能弹出信息窗口的网页 分析 要设计满足用户要求的网页,必须要解决以下几个问题: 非点不可 (1)网页中的按钮如何产生 解决方法:使用HML的表单标志 Input type=" but ton" value=”非点不可"> (2)如何弹出信息窗口 解决方法:使用 alert(“欢迎光临”) (3)点击按钮后如何作出弹出窗口的响应 解决方法 第一步:将弹出信息窗口的功能设计为一个函数go() function go() alert(“欢迎光临”) 第二步:在定义按钮的标志中加上单击鼠标响应的事件 onclick() 部分,程序如下:( ahead.htm) Head> 欢迎光临</ title <Script language= JavaScript
湖北职院计算机科学与技术系理论课教案—《网页设计》 识...之间就可加入 JavaScript 脚本。 JavaScript 以 标志结束。 （４）alert()是 JavaScript 的一个窗口对象方法，其功能是弹出一个具有确定按钮的对 话框并显示（）中提示信息的窗口。 在 HTML 中插入 JavaScript 代码的方法： 方法一 将 标记对放在 和 标记对之间； 方法二 将脚本代码放在 和 标记对之间； 三、案例设计举例 案例一：制作一个点击按钮能弹出信息窗口的网页 分析： 要设计满足用户要求的网页，必须要解决以下几个问题： （1）网页中的按钮如何产生： 解决方法：使用 HTML 的表单标志 （2）如何弹出信息窗口： 解决方法：使用 alert(“欢迎光临”) （3）点击按钮后如何作出弹出窗口的响应： 解决方法： 第一步：将弹出信息窗口的功能设计为一个函数 go( ) function go( ) { alert(“欢迎光临”); } 第二步：在定义按钮的标志中加上单击鼠标响应的事件 onclick( ) 即当在按钮上单击鼠标时执行函数 go( ),弹出信息窗口 下面，我们来查看完整的程序代码： （一） 将 JavaScript 代码放在 部分，程序如下:(a1head.htm) 欢迎光临 非点不可
湖北职晚计算机科学与技术亲理论课教案一《网页设计》 function go o alert("欢迎光临"); (二)将 JavaScript代码放在部分,程序如下:( albody.htm) 欢迎光临√/ title 练习:(1 lanXi.htm) 设计一个网页,当用户访问网页时,直接弹出窗口,显示“欢迎光临02624班网站” 【课后小结】 本次课讲解了 JavaScript语言的主要特点, JavaScript代码在hm1中的插入方法及弹 出信息窗口的制作过程。要求能熟练掌握代码的插入方法和使用 alert()
湖北职院计算机科学与技术系理论课教案—《网页设计》 function go() { alert("欢迎光临"); } Hi，www.xg000.com 惊喜多多...... （二） 将 JavaScript 代码放在 部分，程序如下:(a1body.htm) （三） 欢迎光临 function go() { alert(“欢迎光临”);} Hi，www.xg000.com 惊喜多多...... 练习： (lianxi.htm) 设计一个网页，当用户访问网页时，直接弹出窗口，显示“欢迎光临 02624 班网站” 【课后小结】 本次课讲解了 JavaScript 语言的主要特点，JavaScript 代码在 html 中的插入方法及弹 出信息窗口的制作过程。要求能熟练掌握代码的插入方法和使用 alert( )
湖北职晚计算机科学与技术亲理论课教案一《网页设计》 【上机实验项目】 实验目的: 熟练掌握在HML中插入 JavaScript代码的方法,灵活运用 Alert()窗口方法制作 弹出信息的窗口。 实验内容: 设计一个网页,实现以下效果: 1)实现图片和文字的滚动 湖北职业技术学院 (2)网页中出现按钮, 点击按钮时弹出窗口,显示信息:“湖北职院欢迎你
湖北职院计算机科学与技术系理论课教案—《网页设计》 【上机实验项目】 实验目的： 熟练掌握在 HTML 中插入 JavaScript 代码的方法 ，灵活运用 Alert( )窗口方法制作 弹出信息的窗口。 实验内容： 设计一个网页，实现以下效果： （１）实现图片和文字的滚动； （２）网页中出现按钮， 点击按钮时弹出窗口，显示信息：“湖北职院欢迎你” 湖北职业技术学院
