1 / 42

多媒体技术与网页设计

多媒体技术与网页设计. 主 编 ： 陈 新 龙. 第 8 章 网页设计语言. 本章主要介绍了两种流行的网页设计语言： JavaScript 与 VBScript ，最后简要介绍了 ASP 及其实例。 读者学习本章应重点理解脚本语言在 HTML 文档中的应用方法，理解 JavaScript 与 VBScript 语言的语法基础，深入理解基于对象的网页设计语言的事件机制。 本章建议学时数： 4 学时。. 第 一 课. 本次课介绍 JavaScript 语言。. 一、组成网页的其它方式 纯 HTML 标记组成网页的不足 网页的内容固定不变

lumina
Télécharger la présentation

多媒体技术与网页设计

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. 多媒体技术与网页设计 主 编 ： 陈 新 龙

  2. 第8章 网页设计语言 本章主要介绍了两种流行的网页设计语言：JavaScript与VBScript，最后简要介绍了ASP及其实例。 读者学习本章应重点理解脚本语言在HTML文档中的应用方法，理解JavaScript与VBScript语言的语法基础，深入理解基于对象的网页设计语言的事件机制。 本章建议学时数：4学时。

  3. 第 一 课 本次课介绍JavaScript语言。

  4. 一、组成网页的其它方式 • 纯HTML标记组成网页的不足 网页的内容固定不变 （GIF动画不过是单个文件多帧图像） 缺乏交互性 • DHTML的引入 • DHTML（Dynamic HTML）即动态HTML • 主要技术有：Javascript VBScript CSS等，使自己的网页达到一种更好的效果。 • DHTML效果赏析

  5. 二、JavaScript 1、 Java与JavaScript JavaScript不是Java Java是一种类似C、VB等语言的专门的因特网开发语言，属于编译语言。 JavaScript是一种脚本语言，属于解释语言。可直接嵌入到网页中。 JavaScript支持许多Java语法，相对简单易学，在网页制作中应用十分广泛。

  6. 2、JavaScript的执行 • 直接嵌入到HTML中 • 一个简单实例 • <html> <Head></Head><body> • <script language="JavaScript"> • document.write("我的第一个JavaScript程序") • </script> </body> </html>

  7. JavaScript代码由<Script Language =“JavaScript”>...</Script>说明。 • 在标识<Script Language =“JavaScript”>...</Script>之间加入具体的JavaScript脚本即可。

  8. 3、JavaScript语法基础 • （1）数据类型 • JavaScript数据类型主要有：数值型(number，如12.32、5E7、4e5等）、字符串型（string）、布尔型（Boolean）、对象类型（object）、空值（null）等。 • （2）变量 • JavaScript是一种区分大小写的语言，其变量命名和C语言非常相似。 • JavaScript是一种宽松类型的语言，可不显式定义变量的数据类型。

  9. （3）运算符 • （4）语句 • 变量声明，赋值语句：var。 • 函数定义语句：function，return。 • 　function 函数名称 （函数所带的参数） • 　　　　　　　 ｛ 函数执行部分 ｝ • 条件和分支语句：if...else，switch。 • 语法如下： if (条件) 　｛ 执行语句1 ｝ • else { 执行语句2 ｝

  10. 循环语句：for， for...in • function showData(aa) • {for (var X=0; X<30;X++) • document.write(aa[X])；} • function showData(aa) • {for(var Y in aa) • document.write(aa[Y])；} • 对象操作语句：with，this，new

  11. 4、事件机制 • 在JavaScript中，事件是用户与页面交互（也可以是浏览器本身，如页面加载等）时产生的具体操作，如鼠标单击、鼠标移动等。浏览器为了响应某个事件而进行的处理过程，叫做事件处理。JavaScript的事件处理机制可以改变浏览器响应用户操作的方式，从而开发出具有交互性，并易于使用的网页。

  12. <html><head> • <script language="JavaScript"> • function pushbutton() • {document.write("我的第一个JavaScript程序");} • </script> • </head><body><form> • <input type="button" name="Button1" value="单击此处打印字符串" onclick=pushbutton()> • </form></body></html>

  13. 事件机制是Windows操作系统应用程序的基本特点，也是JavaScript程序设计的基础。事件机制是Windows操作系统应用程序的基本特点，也是JavaScript程序设计的基础。 • 基于事件机制，网页设计中的JavaScript脚本编写思路如下： • 为需要JavaScript脚本支持的网页元素定义相应的事件处理函数，利用JavaScript语言实现该函数。

  14. JavaScript中的事件主要有三大类： • 1.引起页面之间跳转的事件，主要是超连接事件。 • 2.浏览器自己引起的事件。 • 3.表单内部对象同界面的交互事件。

  15. 5、对象的使用 • JavaScript是一种基于对象的语言，使用的对象包括属性(properties)和方法(methods)两个基本要素。 • 属性是该对象在实施其所需要行为的过程中涉及的数据信息，与变量相关联。 • 方法是该对象能执行的具体操作，与特定的函数相关联。

  16. 对象的引用 • 可通过引用该对象的名称引用该对象，可引用的对象有以下三种： • JavaScript内部对象、浏览器内部对象、已经创建的新对象。 • 引用对象的属性常用下面的方式： • （1）使用点（.）运算符实现引用 • （2）通过字符串的形式实现引用 • （3）通过下标的形式实现引用

  17. 假定有一个已经存在的对象university，具有Name、City、Date三个属性，下面的语句等价： 假定有一个已经存在的对象university，具有Name、City、Date三个属性，下面的语句等价： • university.Name="重庆大学" • university[0] = "重庆大学" • university["Name"]="重庆大学"

  18. JavaScript的内部对象和方法 • String（字符串）、Math（数值计算）和Date（日期）

  19. <html><head> <meta http-equiv="Content-Language" content="zh-cn"> <script language="JavaScript"> /*（1）*/ function title(h1,h2) {this.h1="JavaScript对象的使用"; this.h2="简单实例";} function pushbutton() { if (confirm("你是否确信退出本系统")) close(); } /*（1）*/ </script></head>

  20. <body><p align="center"><font size="5" color="#000080"><script language="JavaScript"> U1=new title(); for(var Y in U1) document.write(U1[Y]); /*（2）*/ document.write("<br></br>"); /*（3）*/ NowDate=new Date(); with(NowDate) { document.write(getYear()+"-"+getMonth()+"-"+getDate())} </script></font> /*（3）*/ <form> <input type="button" name="Button1" value="退 出 系 统" onclick="pushbutton()"> </form> </body></html>

  21. 6、应用实例 • JavaScript是一种基于对象的语言，使用的对象包括属性(properties)和方法(methods)两个基本要素。 • 属性是该对象在实施其所需要行为的过程中涉及的数据信息，与变量相关联。 • 方法是该对象能执行的具体操作，与特定的函数相关联。

  22. <html><head> <script language="JavaScript"> function form_onsubmit(obj) { if(obj.lSno.value=="") {alert("请输入你的学号!\n"); obj.lSno.focus(); return; } if(obj.lScode.value=="") { alert("请输入你的密码!\n"); obj.lScode.focus(); return; } } </script></head> <body><form><TABLE> <TD>学号 :<INPUT class=inputs name=lSno size="20"></TD> <TD>密 码 : <INPUT class=inputs name=lScode type=password size="20"> </TD></TABLE> <input type="submit" name="submit" onclick=form_onsubmit(this.form) value="提交"> </form></body></html>

  23. 下 课

  24. 第 二 课 本次课介绍VBScript语言、ASP。

  25. 一、VBScript脚本的执行 • VBScript脚本的执行有两种方式： • 由浏览器解释执行、由IIS解释后由浏览器执行。 • <html> <Head></Head><body> • <script language="VBScript"> • document.write("我的第一个VBScript程序") • </script> </body> </html>

  26. 二、VBScript语法基础 • 1.数据类型 • VBScript 只有一种数据类型，称为Variant。 • Variant 是一种特殊的数据类型，根据使用的方式，它可以包含不同类别的信息。 • Variant 包含的数值信息类型称为子类型。大多数情况下，可将所需的数据放进 Variant 中，而 Variant 也会按照最适用于其包含的数据的方式进行操作。

  27. 2.变量 • 3．运算符 • 4．语句 • 条件和分支语句：If...Then...Else语句 • if 条件　Then 单行语句（多条语句用:分割） else 单行语句 • If...Then...Else语句在1行中书写完毕。 • if 条件　Then • 多行语句 • else • 多行语句 • End If

  28. 循环语句 • Do...Loop：当（或直到）条件为 True 时循环 • While...Wend：当条件为 True 时循环 • For...Next：指定循环次数，使用计数器循环执行语句 • For Each...Next：对于集合中的每项或数组中的每个元素，循环执行一组语句

  29. <html><head></head> • <body><script language="vbscript"> • Do Until DefResp = vbNo • MyNum = Int (200 * Rnd + 1) '产生 1 到 200 之间的随机数。 • DefResp = MsgBox (" 当前随机数："&MyNum & " 想要另一个数吗？", vbYesNo) • Loop • </script></body></html>

  30. 过程语句 • 在 VBScript 中，过程被分为两类：Sub 过程和 Function 过程

  31. <html><head> • <script language="vbscript"> • Sub ConvertTemp() • temp = InputBox("请输入华氏温度。", 1) • MsgBox "温度为 " & Celsius(temp) & " 摄氏度。" • End Sub • Function Celsius(fDegrees) • Celsius = (fDegrees - 32) * 5 / 9 • End Function</script></head> • <body><script language="vbscript"> • ConvertTemp • </script></body></html>

  32. 三、事件机制 • <html><head><script language="vbscript"> • Sub Button1_OnClick • Do MyNum = Int (200 * Rnd + 1) • DefResp = MsgBox (" 当前随机数："&MyNum & " 想要另一个数吗？", vbYesNo) • Loop While DefResp = vbYes • End Sub</script></head> • <body><FORM><INPUT NAME="Button1" TYPE="BUTTON" VALUE="产生随机数消息框"></FORM></body></html>

  33. 四、ASP程序原理 • 1、DHTML的不足 DHTML给网页注入了新的活力，使页面美观并具有交互性。但上面的脚本程序是运行在客户端的脚本。 缺乏与服务器的交互 2、ASP ASP（Active Sever Pages）中文翻译“动态服务器页面” 伴随着ASP的流行，它逐渐成为动态网页的代名词。

  34. 3、ASP程序运行环境 ASP程序必须由Web 服务器软件解释执行，因此，ASP程序文件应放在 Web 服务器的站点目录（或子目录）下（该目录必须要有可执行权限），客户端浏览器通过 WWW 的方式访问该 ASP 程序。

  35. 4、ASP程序运行原理

  36. ASP文件可以包括以下3个部分： •  普通的HTML文件，也就是普通的Web的页面内容。 •  服务器端的Script程序代码：位于<%...%>内的程序代码。 •  客户端的Script程序代码：位于<Script>…</Script>内的程序代码。 • 也就是说，ASP文件中的所有服务器端的Script程序代码均须放在<%…%>符号之间，其余代码编写方法同前。

  37. <html><head> • <script language="JavaScript"> • function pushbutton() • {document.write("我的第一个JavaScript程序");} • </script></head><body><form> • <% aa="pushbutton()"%> • <input type="button" name="Button1" value="单击此处打印字符串" onclick=<% =aa %>> • </form></body></html>

  38. 应用实例 • 【例8.3.2】分析光盘n8目录下登录系统子目录下的登录系统 • 该登录系统包括三个文件，login.htm、stu.mdb、COFIRM2.ASP • login.htm表单定义标记如下： • <FORM method="POST" action="cofirm2.asp" name=form1 onSubmit="return ValidationPassed"> • …… </form>

  39. 学号旁边的文本框变量名为：lSno，密码旁边的文本框变量名为：lScode。学号旁边的文本框变量名为：lSno，密码旁边的文本框变量名为：lScode。 • COFIRM2.ASP为表单后台处理程序

  40. 五、VRML • 1、虚拟现实的含义 • 虚拟现实（Virtual Reality）最早诞生于上个世纪70年代，用于表示人类存在于计算机空间的概念。 • 虚拟现实定义如下： • 虚拟现实必须是一个由计算机产生的三维立体空间，用户可以和这个空间中的对象交互，并可在空间中随用户的意志自由移动，进而产生融入感和参与感。

  41. 2、VRML的含义 • VRML表示虚拟现实标记语言。 • 3、VRML的运行环境 • 4、VRML的实例

  42. 下 课

More Related