《动态网页技术》PPT课件
合集下载
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
JavaScript脚本可放在HTML文件中的任意位置，在浏览器读到后就会解释执行。
JavaScript中区分大小写
§3 动态网页技术 §3.2 客户端脚本
3.2.1 JavaScript脚本与实例
JavaScript脚本中的数据类型
JavaScript中可使用六种类型的数据，分别是:字符串、数值数据、对象 、布尔值（true、false）、空( null) 和 未定的数据类型。
通常将执行Applet的浏览器称为Applet容器，在Java 2软件开发工 具包1.4.1版中也包含一个用于测试的Applet容器，这就是 appletviewer。目前，有的Web浏览器不能直接支持Applet，如IE 浏览器，必须安装相应的Applet插件才能支持；真正支持Applet的 浏览器是Netscape7，可从 /ns/browsers/download.jsp站点下载。
§3 动态网页技术 §3.2 客户端脚本
3.2.1 JavaScript脚本与实例
JavaScript几个实例
例4：改变窗口状态行内容的动态网页
<html> <head> <script language="JavaScript"> <!-- Hide var scrtxt="怎么样! 很酷吧! "; var lentxt=scrtxt.length; var width=100; var pos=1-width;
第3章 动态网页技术
§3 动态网页技术 §3.1 动态网页的含义
动态网页与静态网页的特征比较
静态网页
内容固定不变，不随客户访问要求的改变而改变； 页面文件预先储存在Web服务器上； 通过超链接来访问其它的网页； 可含有动画的内容
动态网页
内容随客户访问要求的改变而改变； 内容的生成可在客户端完成（通过客户端脚本、Applet插件、ActiveX控件），也
Байду номын сангаас
case label3:M语i句xe串du3p；[2]="no";
...
document.write("Element No. 1: "+Mixedup[0]+"<br>");
default: 语句串3；
}
document.write("Element No. 2: "+Mixedup[1]+"<br>");
§3 动态网页技术 §3.2 客户端脚本
3.2.1 JavaScript脚本与实例
JavaScript几个实例
例2：一个简易计算器的动态网页
§3 动态网页技术
<html> <head>
<title>一个简易计算器</title> <script language="javascript"> <!--
</html>
§3 动态网页技术 §3.2 客户端脚本
3.2.1 JavaScript脚本与实例
JavaScript脚本中的对象与事件
对象
由浏览器根据web页面的内容自动提供的对象 JavaScript的内置对象，如Date,Math、window、document等 服务器上的固有对象 用户自定义的对象
function scroll() { pos++; var scroller=""; if (pos==lentxt) {
§3 动态网页技术 §3.2 客户端脚本
3.2.2 Applet插件与实例
Applet是一种特殊的客户端脚本，也是一种程序，称为java小程序 ，嵌在HTML网页文件中。当浏览器浏览一个含有Applet的网页时， 它就从服务器端下载到客户端的浏览器中，并执行。这样，利用 Applet就能实现人机交互，并能进行必要的商务逻辑处理，实现与 后台服务器交互
§3 动态网页技术 §3.2 客户端脚本
3.2.1 JavaScript脚本与实例
JavaScript脚本中的主要语句
变量声明语句：var x,y;
赋值语句：x=25.3;
函数定义语句 ：
function 函数名称(函数所带的参数)
{
函数执行部分;
return 表达式;
}
条件语句 （if…else），如
循环语句：for， for...in，whdiolceu,mberneta.wk,ricteo(n"tEilenmueent No. 3: "+Mixedup[2]+"<br>");
对象操作语句：with，this，n//e-w->
注释语句：//，/*...*/
</script>
数组定义
</head>
§3 动态网页技术 §3.2 客户端脚本
3.2.2 Applet插件与实例
Applet动态网页实例：乘法练习
//source file name : CalTest.java import java.awt.*; import javax.swing.*; import java.awt.event.*; public class CalTest extends JApplet{
字符串数据用单引号或双引号来说明的。如：“The cow jumped over the moon”
数值数据包括整数和浮点数。整数可以为正数、0 或者负数；浮点数可 以包含小数点、也可用科学记数法来表示
布尔值为 true 和 false两种，这是两个特殊值 未定的数据类型是指：在一个变量被创建后，但未给该变量赋值以前该
<script language="JavaScript">
switch(expression)
<!-- Hide
{
var Mixedup= new Array(3);
case label1:M语i句xe串du1p；[0]="yes";
case label2:M语i句xe串du2p；[1]="5";
if (result == true)
{
response = "你答对了！"
}else{
response = "你错了！"
}
§3 动态网页技术 §3.2 客户端脚本
3.2.1 JavaScript脚本与实例 <html>
JavaScript脚本中的主要语句 <head>
分支语句 （switch），如
public Container cont1; public JLabel lb1,lb2; public JTextField t1,t2,t3,t4; public JButton b1; public MyEvent1 listen1; public void start() { listen1=new MyEvent1();
变量命名规则
JavaScript 是一种区分大小写的语言，因此将一个变量命名为 computer 和将其命名为 Computer是不一样的
变量名的第一个字符必须是一个字母（大小写均可）、或一个下划线(_)或 一个美元符 ($)，后续的字符可以是字母、数字、下划线或美元符
变量名不能是保留字 变量名长度没有限制
变量所具有的值 空数据类型为null object类型
§3 动态网页技术 §3.2 客户端脚本
3.2.1 JavaScript脚本与实例
JavaScript脚本中的变量及命名规则
JavaScript中的变量用来存放JavaScript中的值 ，JavaScript对变量的 数据类型要求不太严格（与Java、VB、C++等高级语言不同），所以在声 明变量时，不需要指出变量的类型。变量声明格式如：var men = true;
} //-->
§3 动态网页技术 §3.2 客户端脚本
3.2.1 JavaScript脚本与实例
JavaScript几个实例
例3：产生一个窗口的动态网页
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <script language="JavaScript"> function WinOpen() {
可在服务器端完成（通过服务器端脚本，如JSP、ASP、PHP）; 能与用户进行交互，根据不同客户请求来生成不同的页面内容； 是连接商务表达层和商务逻辑层的桥梁； 也可含有动画的内容
§3 动态网页技术 §3.2 客户<端htm脚l>本
<head>
<script language="JavaScript">
事件
引起页面之间跳转的事件，主要是超链接事件 浏览器自己引起的事件 表单内部同界面对象的交互事件
§3.2 客户端脚本 §3 动态<!网DO页CT技YP术E HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> 3<.tit2le.>乘1法J练a习v<a/tiStlec>ript脚本与实例 <script language="JavaScript" type="Text/JavaScript"> <!-- JavaScript几个实例 function c例he1c：kre一sul个t() 乘法练习的动态网页 { var strx,stry; var z; strx=window.document.forms("form1").text1.value; <!--此处也可写为:strx=this.document.form1.text1.value --> stry=window.document.forms("form1").text2.value; strz=window.document.forms("form1").text3.value; z=eval(strx+"*"+stry); if(z==eval(strz)) document.write("对"); else document.write("错,正确答案应为："+strx+"*"+stry+"="+z.toString()); }
msg=open("","DisplayWindow","toolbar=no,directories=no,menubar=no,width=280,height=280"); msg.document.write("<HEAD><TITLE>Hello!</TITLE></HEAD>"); msg.document.write("<CENTER><H1>Coo!</H1><h2>一个<B>JavaScript</B>所开的窗口 !</h2></CENTER>"); } </script> </head> <body> <form> <input type="button" name="Button1" value="Push me" onclick="WinOpen()">
function ex(x) {
if(x=="=") window.document.form1.text1.value=eval(window.document.form1.text1.value);
else if(x=="clear") window.document.form1.text1.value=""; else window.document.form1.text1.value=window.document.form1.text1.value+x;
JavaScript脚本技术
JavaScript是一种基于对<象b和od事y件>驱动并具有安全性能的脚本语言
一个实例
</body>
说明
</html>
JavaScript脚本以<script language=“JavaScript”> </script>作为标记；
<!-- -->为说明语句，这样不支持JavaScript的浏览器就会忽略掉当中的脚本语句；
phpechodate1fdsbodyhtml33服务器端的脚本331服务器端的脚本比较asp是微软开发的一种服务器端的脚本语言它没有提供自己专门的编程语言而是允许用户使用包括vbscriptjavascript等在内的许多已有的脚本语言编写asp的应用程序asp吸收了当今许多流行的技术如iisactivexvbscriptodbc等是一种发展较为成熟的网络应用程序开发技术支持组件和对象
3.2.1 JavaScript脚本与实例<!- 静态网页的客户端实现技术 document.writeln("JavaScript脚本示例！"); 客户端脚本：JavaScript、VB/S/-c-r>ipt、JScript；
Applet插件；
</script>
ActiveX控件
</head>