2.JSP预备知识.ppt

1、2020年10月10日,1,第二章 JSP预备知识,2020年10月10日,2,本节课的内容：,什么是脚本语言 JavaScript概述 JavaScript嵌套HTML JavaScript基本语法 事件触发和处理 JavaScript 的对象 window 对象 document 对象 form 对象,2020年10月10日,3,1、什么是脚本语言,脚本语言源于UNIX操作系统 应用于web页面的脚本语言有javaScript、VBScript和用于编写CGI脚本的perl、shellScript等 根据脚本程序执行的地点不同分为服务器端脚本和客户端脚本，javaScript、VBScri

2、pt既可以作为客户端脚本语言，又可作为服务器端脚本语言。,2020年10月10日,4,2、JavaScript 概述,HTML仅仅是一种标记语言，它能作的事情有限。 用HTML建立的文档是静态的。不能处理客户端的活动。 Scripting 使Web页变成动态的。 目前比较流行的脚本语言是JavaScript、Perl、VBScript。,2020年10月10日,5,JavaScript是一种潜入在HTML文件中的脚本语言，由Netscape公司在1995年的Netscape2.0中推出，最初称为Mocha，后来又改为LiveScript，95年Java语言出现后，引进java的有关概念，又改为

3、JavaScript,2020年10月10日,6,JavaScript 的特性： JavaScript脚本是由一系列的程序指令语句组成。 是事件驱动的，用户在网页上的某个动作就是一个事件，由嵌入网页中的脚本对这个事件作出响应。 是平台独立的，不论什么机器只要装有支持JavaScript的浏览器就可以正常运行 不涉及耗时的编译， 没有复杂的语法和规则集合 是基于对象而不是面向对象的，本身已经有创建好的对象，是不完全的面向对象，不支持分类、继承、封装等特性 支持诸如：switch.case、Ifelse、while 、 for、 do while等之类的构造 区分大小写，使用分号组合语句,2020

4、年10月10日,7,JavaScript 和 Java JavaScript 是由客户机进行解释的, 而 Java 在服务器上进行编译. JavaScript 是解释性语言, 而 Java 代码是在执行前先被编译。 不象Java, JavaScript.不需要声明变量的数据类型 不象Java, JavaScript 能够存取浏览器对象和功能 JavaScript 多数用于客户端的活动，有有限的对象、方法、属性和数据类型是不可扩展的。这与Java 的类和方法是不同的。,2020年10月10日,8,Javascript的代码样例 Javascript 中的注释 / /*这里注释*/,2020年10

5、月10日,9,3、JavaScript嵌套HTML中有两种,3.1 在HTML中嵌套 JavaScript JavaScript 程序在 HTML 文档中运行 JavaScript 语句放在 语句标签对内 JavaScript 代码可以放在HTML文件中的任何位置,2020年10月10日,10, 页标题 HTML文本 HTML文本 ,2020年10月10日,11,3.2 JavaScript 源文件,可以一个外部文件包括脚本 假如： 代码比较复杂 计划经常修改该代码 计划在多个页面中使用使用相同的代码 这是有用的 文件的扩展名为 .js 外部文件的引用（两个属性） ,2020年10月10日,1

6、2,JavaScript大小写敏感，若要几行代码写在一行中各语句间以分号分隔，习惯上在每一个语句之后以分号结束，但不是必须。 数据类型有三种：数字（包括整数和浮点数）、字符（以单引号和双引号）、布尔变量（true、false) JavaScript可以自动确定存储在变量中的数据类型。,4、JavaScript基本语法,2020年10月10日,13,常量：分为整型、实型、字符型和逻辑型 变量:如同其它编程语言,JavaScript允许你声明变量并使用存储在它们中的值，不过不需要去专门声明变量的数据类型。 JavaScript用关键字var声明变量或直接使用赋值的形式声明变量。 Var str;

7、Num1=20 Num2=3.0e10 变量命名是以字母开头由字母、数字、下划线组成,2020年10月10日,14,声明变量通过关键字var,如下： var var1,var2; 在声明同时赋值给它，如： var var1=10; var var2=“hello”; var var3=true; 变量的长度可由length函数获得，如： var len=var2.length;,2020年10月10日,15,赋值运算符：= += -= *= /= %= 算术运算符： + - * / + % - 字符串运算符：+ 如：“abcd”+”efg” 逻辑运算符和关系运算符 =, !=, , ! , a

8、 ? value1: value2 / 结果为value1,2020年10月10日,16,函数的编写 函数被嵌在HTML文件中，语法格式如下： function 函数名(形参表) /函数体 function one() 调用方式： 函数名(实参),2020年10月10日,17,当函数没有返回值时，可以不使用return语句，如果使用也只能使用不带参数的形式。 当函数有返回值时，需要使用return语句，格式： return 表达式 例如2-1 注意：函数定义位置和函数参数,2020年10月10日,18,函数简例 function factor(num) var i,fact=1; for (i

9、=1;i document.write(调用factor函数，5的阶乘等于：,factor(5),。); ,2020年10月10日,19,变量的作用域 局部变量：变量可在声明它的函数中被访问， 全局变量：变量在函数体以外被声明，则可以在整个页面被访问到。 在函数内用var声明的变量是局部变量而在函数外用var声明的变量是全局变量 在函数内未用var声明的变量是全局变量，当函数内用var声明的变量和全局变量同名，他们就像两个不同名的变量。 例2-2变量作用域示例,2020年10月10日,20, 变量作用域示例 var i, j=10;/全局变量 function output( ) var j=

10、0;/局部变量 i=100; /全局变量 j+; j+; document.write( j=,j); document.write( i=,i); i+; ,2020年10月10日,21, document.write(“调用函数output()前，i无定义，不能引用！); document.write(j的初始值=,j,); document.write(调用output()，观察函数的输出！); output(); document.write(调用output()后，观察函数对i,j的影响：i=,i, j=,j); ,2020年10月10日,22,Javascript支持三种控制结构

11、选择流程 if (condstmt) statement1 Else statement2,2020年10月10日,23,嵌套结构 if (condstmt1) statement1 else if (condstmt2) statement2 else if (condstmt3) statement3 else statement4 ,2020年10月10日,24,循环流程 for(初始化；条件；更新） statement 例2-3 使用for循环语句计算10！,2020年10月10日,25, var i,factor; factor=1; for (i=1;i ,2020年10月10日,

12、26,While（条件） 语句 比如： n=0; x=0; while(n3) n+; x+; ,2020年10月10日,27,break语句 结束当前的while,for 以及do while 循环的执行，并把程序的控制交给下一条语句。 continue语句 结束当前while,for以及do while循环，并开始下一轮循环。,2020年10月10日,28,事件是为动作响应时出现的通知。此通知的处理代码称为事件处理程序。 在javascript中可以为指定对象的各种事件设置相对应的事件处理程序。 如: 按钮的onClick,onLoad,onunload,onMouseOver,onMou

13、seOut 下拉框的onChange, onClick,5、事件触发和处理,2020年10月10日,29,设置事件的方法，在指定对象的代码中加入类似属性 例2-4,2020年10月10日,30, 事件触发和事件处理 var Images=new Array( ); Images0=dot1.jpg; Images1=check.gif; function changeImg(ImgIndex) document.imgs.src=ImagesImgIndex; ,2020年10月10日,31, 软件设计 ,2020年10月10日,32,例2-5：创建一个登录页面，它接收客户的帐户ID和口令，如

14、果客户留下任何字段空白，在点击Submit按钮后，应显示一条信息。,2020年10月10日,33,接收数据的用户界面,2020年10月10日,34,获得输入框的值用属性value，如：txtAccountID.value 事件：代表一个动作的产生。如单击鼠标按钮、双击鼠标、文字的改变等等。 当一个事件发生时，系统所做的操作是调用一个函数来完成处理。如： onClick、 onChange 等。,2020年10月10日,35,创建用户界面, Earnest Bank Earnest Bank Banking Online Login information: ,2020年10月10日,36, A

15、ccount ID Password ,2020年10月10日,37,prompt( ) 语法： prompt(”提示信息“ )； 功能：请求用户在对话框中的文本字段中进行输入，并将其用户输入的结果返回。 alert( ) 语法： alert (”用户信息“ )； 功能：供用户通信的简单方法，用OK按钮在对话框中显示消息。,2020年10月10日,38,function checkValues() var AccountID; var AccountIDLength; var passw; var passLength; AccountID=txtAccountID.value; Accoun

16、tIDLength=AccountID.length; assw=pass.value; passLength=passw.length; if (AccountIDLength=0)|(passLength=0) alert(“你必须同时输入登录名和口令字”); ,2020年10月10日,39,【例2-6】 数字钟的设计, 数字钟 function aClock( ) var now=new Date( ); var hour=now.getHours( ); var min=now.getMinutes( ); var sec=now.getSeconds( ); var timeStr=

17、 +hour; timeStr+=(min=12)? P.M.: A.M.;,2020年10月10日,40,document.clock_form.clock_text.value=timeStr; clockId=setTimeout(aClock( ),1000); 当前时间是： ,2020年10月10日,41,例2-7、开发Web 站点，当用户访问该站点时能显示向他们致敬的个性化信息。当用户退出时应显示告别的信息。当用户访问该站点时，此站点应接收用户的名。,2020年10月10日,42,识别要使用的事件处理程序,onLoad onUnLoad 例： ,识别显示消息的方法,Prompt()

18、 接收用户的名 alert() 显示信息,2020年10月10日,43,代码：,var visitor_name = ; function greet_visitor() visitor_name=prompt(请输入你的名字：, ); alert(欢迎 + visitor_name + 光临 !); function farewell_visitor() alert(感谢 + visitor_name + 访问我们网页!); ,2020年10月10日,44,6、JavaScript 的对象模型,2020年10月10日,45,7、window 对象,JavaScript 对象层次的最高层的对象

19、，可以在脚本程序中隐式的引用window 对象。即输出时不用Window.document.Write()每当打开浏览器窗口都有一个相关的window 对象，每个window 对象都与特定的WEB网页相关，而这个网页的结构都反映在window 对象的Document对象中，每个window 都与URL页相关，而这个URL反映在window 对象的Location对象中，每个window 对象都有一个显示在这个窗口前的历史信息，这些信息存储在window 对象的History对象中.,2020年10月10日,46,window 对象相关属性,2020年10月10日,47,方法,2020年10月1

20、0日,48,2020年10月10日,49, var sWindowName; function fnNewWindow() alert(“新窗口在进行中.”); sWindowName=open(,Window,scrollbars=1, status=1); status=单击新窗口选择; ,2020年10月10日,50, 又如例2-8,2020年10月10日,51,8、document 对象,属于 window 的对象,每个窗口都与一个文档对象有关 为处理当前文档资料提供了若干属性，诸如: location Lastmodified 为处理当前文档资料提供了若干方法，诸如： Open()和

21、Close()启动和停止缓冲输出,调用Open打开文档进行写操作，调用Close()关闭写操作 Clear()清除文档窗口 Write()和Writeln()相同,2020年10月10日,52,属性 描述 linkColor表示未被连接的颜色的串值 alinkColore表示活动连接颜色的串值 vlinkColor 表示被访问连接的颜色的串值 bgColor表示文档背景颜色 fgColor表示文档前景颜色 Location表示当前URL的串值 Title表示 与 标签之间文本的串值,Document 对象相关属性,2020年10月10日,53,Document 对象相关方法,2020年10月1

22、0日,54,Ex2, var sWindowName; function fnNewWindow() alert(新窗口在进行中.); sWindowName=open(,Window,scrollbars=1,status=1); status=单击新窗口选择; sWindowName.document.writeln(受欢迎的联机银行业务); sWindowName.document.bgColor=pink; sWindowName.document.fgColor=Green; ,2020年10月10日,55, ,2020年10月10日,56,【例2-9】 本例通过Document对象

23、设置页面的颜色和文字等属性,2020年10月10日,57,9、Form对象,属于文档对象的子对象，这就是表单form对象 标记有三个参数， Name表单的名字 method: 可以为get或post Action 提交表单数据时发送到的目的地,2020年10月10日,58,【例2-10】 、创建一个页面， 包括Login按钮，当客户点击 Login 按钮时，应显示登录页面，该页面应接受帐户ID和口令，应有一个 Submit 按钮. 如果客户在主页上不点击Login按钮，5秒钟后将自动进入登录页面。,2020年10月10日,59,根据问题陈述需要两个页面： 主页 上边应有一个登录按钮 登录页面 有客户ID与口令框及一个submit 提交按钮,确定自动显示登录页面的方法,SetTimeout() 方法 格式： SetTim