jsp基础教程入门介绍.ppt

1、1,第3章 JSP动态网页设计基础,2,了解和掌握HTML语法、CSS语法 掌握JSP注释、变量和方法的声明 掌握JSP指令、JSP动作（Action）语法,学习目标,3,学习内容,HTML语法 CSS语法 JavaScript脚本 JSP注释 变量、方法的声明 JSP指令 JSP动作（Action）语法 JSP脚本,4,HTML文件的一般格式 ： 网页标题 网页正文 ,5, 使用标题标签 欢迎学习JSP！ 欢迎学习JSP！ 欢迎学习JSP！ ,6,加入超级链接,1、锚点标记 格式：热点 例如： 山东农业大学 ,7,加入表单,一个表单至少应该包括： 表单标签：处理表单数据所用CGI程序的URL

2、以及数据提交到服务器的方法。 表单域：文本框、密码框、隐藏域、多行文本框、复选框、 单选框、下拉选择框和文件上传框等。 表单按钮：提交按钮、复位按钮和一般按钮,8,1.表单标记, . action属性：E-MAIL地址或网址。 method属性：GET/POST 标记：表单中提供给用户的输入形式。,9,2、文字和密码的输入： type属性为text：输入文本以标准的字符显示。 type属性为password：输入文本显示为“*”。 3、重置和提交 ,10,4、复选框和单选钮 checked表示是否为默认选中项。,11,head部分包含元素及描述： title：文档标题。 meta：描述非htm

3、l标准的一些文档信息。 link：描述当前文档与其他文档之间的连接关系。 base：定义体试时默认的外部资源。 script：脚本程序内容 style：样式表内容,12,1、title： title包含的内容将会被显示在浏览器窗口的标题栏中。 语法格式： 在省略号处加入的文字或符号，都将显示在浏览器的标题栏中。,13,2、meta： 下面是meta的几种用法： （1）定义搜索关键字： meta元素提供的信息是用户不可见的，只是提供给那些搜索引擎使用。,14,（2）控制页面缓存： 在用户下次打开网页时，浏览器直接调用硬盘上缓存的上次临时版本。如果每次打开网页的时看到最新版本，就加上该语句！,15

4、,（3）定义语言： 设定语言的编码方式。便于浏览器正确的选择语言，不需要人工选取。,16,（4）自动刷新页面 注意： 标识必须放置在中 http-equiv属性值设置为“Refresh”时，要求显示URL指定的文件。,17,3、script： 用来在页面中加入脚本程序。 在language中一定要指定脚本语言的种类。如VBScript等。,18,4、 style： 用来指定当前文档的css层叠样式表。css对于网页的字体样式、背景、边界等都有很大的应用。,19,3.2 CSS语法,CSS简介 CSS基本语法 CSS基本属性,20,一、CSS简介,CSS（Cascading Style Shee

5、t “层叠样式表”或“级联样式单” ） 制作网页时采用CSS技术，可以有效地对页面布局、字体、颜色、背景和其它效果实现更加精确的控制，可以改变同一页面的不同部分，或者页数不同的网页的外观和格式。,21,“Cascading” 即在同一个Web文档中可以有多个样式表存在，根据所在的位置，拥有不同的优先级。优先级越高，就会被最后在显示时采用。从样式表插入的形式来看可以分为三种： 1、内联式样式表： 利用现有的HTML标记把特殊的样式加入到那些由标记控制的信息中。,22,2、嵌入式样式表： 嵌入到HTML文件的头部中去（和标记之间），使用容器装载，例如： p color : blue ; font-

6、weight : bold 对页面中所有标记都起作用。,23,3、外部式样式表： 一种保存在外部的样式表文件，外部文件以.CSS为扩展名，例如: ,24,CSS扩展HTML但不能脱离HTML，仅是一项辅助工具。 减少图形文件使用。CSS提供很多文字样式，可轻松取代原来图形表现的视觉效果。 集中管理样式信息。CSS可将网页要展示内容与样式设定分开。 设定共享样式。CSS样式信息存成独立文件，让多个网页文件共同使用。 样式分类使用。在一份HTML网页文件上套用多个CSS样式文件。,25,二、CSS基本语法,CSS的基本语法： 基本格式、注释语句、选择符等是开发CSS基础。 通常，样式表的定义分为选

7、择符（selector）和块（block），块里包含属性(properties)和属性的取值（value）. 格式：选择符属性：属性值,26,格式：选择符属性：属性值 开发人员可以在CSS中插入注释来说明代码含义。CSS注释以“/*” 开头，以“*/” 结尾。 CSS中，选择符可以分为: HTML标记选择符（HTML selector）、 类选择符（Class selector） ID选择符（ID selector）。,27, 这里是FIF制作小组 这里是FIF制作小组 ,28,1. 类选择符, .mfont-family:隶书; font-size:18px; color:#ff0000;

8、text-decoration:line-through; , 请注意 这里是FIF制作小组 ,29, afont-size:36px; color:#ff0000; text-decoration:line-through; 这里是FIF制作小组 这里是FIF制作小组 ,2、HTML标记选择符,30, #5font-size:24px; color:#0000ff; text-decoration:line-through; 这里是FIF制作小组 这里是FIF制作小组 ,3、ID选择符,31,hongen 这里Style是内嵌到中来定义该段落内的格式的。在中用直接定义。这种定义方法非常适用于

9、编写的代码比较多的情况。而上面的代码的CSS定义格式则非常适用于代码较少、结构较简单的情况。,32,怎样编写CSS？,1、把CSS文档放到文档中： 其中中的“type=text/css”的意思是中的代码是定义样式表单的。,33,2、把CSS样式表写在HTML的行内。 如： 蓝色14号文字采用的格式把样式写在html中的任意行内，这样比较方便灵活。,34,3、把编辑好的CSS文档保存成“.CSS”文件，然后在中定义。 定义格式： “href=style.css”指需要连接的文件地址。,35,3.3 JavaScript脚本语言,JavaScript语言概况 JavaScript基本数据结构 Ja

10、vaScript程序构成 基于对象的JavaScript语言 创建新对象 使用内部对象系统 窗口及输入输出 WEB页面信息的交互,36,3.3.1 JavaScriptJavaScript是一种基于对象(Object)和事件驱动(Event Driven)并具有安全性能的脚本语言。使用目的是与HTML语言、Java 脚本语言（Java小程序）一起实现在一个Web页面中链接多个对象，与Web客户交互，从而开发客户端应用程序。它通过嵌入或调入在标准的HTML语言中实现的。,37,3.3.2 JavaScript和Java,Java是SUN公司推出的新一代面向对象的程序设计语言，特别适合于Inter

11、net应用程序开发；而JavaScript是Netscape公司的产品，其目的是为扩展Netscape Navigator功能而开发的一种可以嵌入Web页面中的基于对象和事件驱动的解释性语言。,38,Java是一种面向对象的语言，即使是开发简单的程序，必须设计对象。 JavaScript是种脚本语言，它是一种基于对象（Object Based）和事件驱动（Event Driver）的编程语言。它本身提供丰富的内部对象供设计人员使用。,39,Java的源代码在传递到客户端执行之前，必须经过编译，因而客户端上必须具有相应平台上的仿真器或解释器，它可以通过编译器或解释器实现独立于某个特定的平台编译代

12、码的束缚。 JavaScript是一种解释性编程语言，其源代码在发往客户端执行之前不需经过编译，而是将文本格式的字符代码发送给客户编由浏览器解释执行。,40,3.3.3 JavaScript基本数据结构,一、JavaScript代码的加入直接将JavaScript脚本加入HTML文档： JavaScript语言代码；JavaScript 语言代码; .,41,二、基本数据类型数值（整数和实数）、字符串型（用“”号或括起来的字符或数值）、布尔型（True或False）和空值。 JavaScript采用弱类型的形式，因而一个数据的变量或常量不必首先作声明，而是在使用或赋值时确定其数据的类型的。当然

13、也可以先声明该数据的类型，它是通过在赋值时自动说明其数据类型的。,42,(1)整型常量JavaScript的常量通常又称字面常量，它是不能改变的数据。其整型常量可以使用十六进制、八进制和十进制表示其值。(2)实型常量实型常量是由整数部分加小数部分表示，如12.32、193.98 。可以使用科学或标准方法表示：5E7、4e5等。,2、常量,43,(3)布尔值 布尔常量只有两种状态：True或False。 它主要用来说明或代表一种状态或标志，以说明操作流程。JavaScript只能用True或False表示其状态。,2、常量,(4)字符型常量 使用单引号（）或双引号（“）括起来的一个或几个字符。如

14、 This is a book of JavaScript 、3245、ewrt234234 等。,44,(5)空值JavaScript中有一个空值null,表示什么也没有。如试图引用没有定义的变量,则返回一个Null值。(6)特殊字符同语言一样，JavaScript中同样以有些以反斜杠（）开头的不可显示的特殊字符。通常称为控制字符。,45,3、变量(1)变量的命名 必须是一个有效的变量，即变量以字母开头，中间可以出现数字如test1、text2等。除下划线（）作为连字符外，变量名称不能有空格、（）、（）、（，）或其它符号。 不能使用JavaScript中的关键字作为变量。在JavaScrip

15、t中定义了多个类键字，这些关键是JavaScript内部使用的，不能作为变量的名称。如Var、int、double、true不能作为变量的名称。,46,(2)变量的类型可以用命令Var作声明:var mytest;Var mytest=”This is a book” 变量可以在使用时再根据数据类型确定变量类型。如：x=100 y=125 xy= True cost=19.5。其中x整数，y为字符串，xy为布尔型，cost为实型。,47,(3)变量的声明及其作用域 变量的作用域。全局变量是定义在所有函数体之外，其作用范围是整个函数；而局部变量是定义在函数体之内，只对其该函数是可见的，而对其它函

16、数则是不可见的。,48,三、表达式和运算符,、表达式算术表述式、字串表达式、赋值表达式、布尔表达式。 、运算 （）算术运算符（单目运算符和双目运算符）,49,（）比较运算符（）布尔逻辑运算符增加了几个布尔逻辑运算符: !（取反)、.Return 表达式;,、函数中的形式参数：函数名后有参数表，参数变量可能是一个或几个。在JavaScript中可通过arguments .Length来检查参数的个数。,53,三、事件驱动及事件处理、基本概念JavaScript是object-based的语言。即在图形界面环境下，使得一切输入变化简单化。通常鼠标或热键的动作称之为事件（Event），而由鼠标或热键

17、引发的一连串程序的动作，称之为事件驱动（Event Driver）。而对事件进行处理程序或函数，称之为事件处理程序（Event Handler）。,54,、事件处理程序在JavaScript中对象事件的处理通常由函数(Function)担任。其基本格式与函数全部一样。格式如下：Function 事件处理名（参数表） 事件处理语句集；,55,、事件驱动事件通过鼠标或热键的动作引发。主要有以下事件：（）单击事件onClick当用户单击鼠标按钮时，产生onClick事件。通常在下列基本对象中产生： button（按钮对象） checkbox（复选框）或（检查列表框） radio （单选钮） rese

18、t buttons（重要按钮） submit buttons（提交按钮）,56,例：可通过下列按钮激活change()文件：,在onClick等号后，可以使用自己编写的函数作为事件处理程序，也可以使用JavaScript中内部的函数。还可以直接使用JavaScript的代码等。例： Input type=button value= onclick=alert(这是一个例子）;,57,（）onChange改变事件当利用text或texturea元素输入字符值改变时发该事件，同时当在select表格项中一个选项状态改变后也会引发该事件。例： ,58,（）选中事件onSelect当Text或Text

19、area对象中的文字被加亮后，引发该事件。 （）获得焦点事件onFocus当用户单击Text或textarea及select对象时产生该事件。此时该对象成为前台对象。 （）失去焦点onBlur当text对象或textarea对象以及select对象不再拥有焦点、而退到后台时，引发该文件，他与onFocas事件 是一个对应的关系。,59,（）载入文件onLoad当文档载入时，产生该事件。onLoad一个作用就是在首次载入一个文档时检测cookie的值，并用一个变量为其赋值，使它可以被源代码使用。 （）卸载文件onUnload当Web页面退出时引发onUnload事件，并可更新Cookie的状态。

20、,60, 调用 ,下例程序当装入HTML文档时调用loadform()函数,而退出该文档进入另一HTML文档时则首先调用unloadform()函数,确认后方可进入。,61,3.3.5基于对象的JavaScript语言,一、对象的基础知识 、对象的基本结构 JavaScript中的对象是由属性(properties)和方法(methods)两个基本的元素构成。 、引用对象的途径 一个对象要被使用，可采用以下几种方式： 引用JavaScript内部对象； 由浏览器环境中提供； 创建新对象。,62,、有关对象操作语句 (1) For.in语句 格式如下： For（对象属性名 in 已知对象名）,用

21、于对已知对象的所有属性进行操作的控制循环。它是将一个已知对象的所有属性反复置给一个变量；而不是使用计数器来实现的。 优点是无需知道对象中属性的个数即可操作。,63,例： Function showData(object) for(var prop in object) document.write(objectprop)； 使用该函数时，在循环体中，For自动将的属性取出来，直到最后为此。,64,(2)with语句 ： 该语句体内，任何对变量的引用被认为是这个对象的属性。 with object. 所有在with语句后的花括号中的语句，都在后面object对象的作用域中。,65,(3)this

22、关键字 在JavaScript由于对象的引用是多层次，多方位的，对象间的彼此引用较多，有可能造成混乱，为此JavaScript提供语句this用于指定当前对象。,66,(4) New运算符 使用New运算符可创建一个新对象。格式： Newobject=NEW Object(Parameters table); 如创建一个日期新对象 newData=New Data() birthday=New Data (Decembe?12.1998),67,、对象属性的引用,（）使用点（.）运算符 university.Name=“云南省” university.city=“昆明市” university

23、.Date=1999 其中university是一个已经存在的对象，Name、City?Date是它的三个属性，并通过操作对其赋值。,68,（）通过对象的下标实现引用 university0=“云南” university1=“昆明市” university2=1999,（）通过字符串的形式实现 universityName=“云南” universityCity=“昆明市” universityDate=1999,69,、对象的方法的引用,ObjectName.methods() 如：引用university对象中showmy（）可使用：document.write (university.

24、showmy() 或：document.write(university),70,如引用math内部对象中cos()的方法，则： with(math) document.write(cos(35)? document.write(cos(80); 若不使用with则引用时相对要复杂些： document.write(Math.cos(35) document.write(math.sin(80),71,二、常用对象的属性和方法,1、常用内部对象 )、 string对象 使用格式：objectName.op/methods （）串对象的属性 该对象只有一个属性，即length。例： mytest

25、=This is a JavaScript mystringlength=mytest.length,72,（） string对象方法 方法共有个。主要用于有关字符串在Web页面中的显示、字体大小、字体颜色、字符的搜索以及字符的大小写。,73,、算术函数的math对象 （）主要属性 提供个属性，学中经常用到的常数、以为底的自然对数、以为底的自然对数LN2、3.14159的PI、1/2的平方根SQRT1-2,2的平方根为SQRT2。,74,、算术函数的math对象 （）主要方法 绝对值：abs() 正弦余弦值：sin(),cos() 反正弦反余弦 :asin(), acos() 正切反正切：ta

26、n(),atan() 四舍五入：round() 平方根：sqrt() 基于几方次的值：Pow(base,exponent),75,、日期及时间对象 必须使用New运算符创建一个实例。例: MyDate=New Date() Date对象没有提供直接访问的属性。 (1) 获取日期的时间方法 getYear(): 年数 getMonth():当月号数 getDate(): 当日号 getDay():星期几 getHours():小时数 getMintes():分钟数 getSeconds():秒数 getTime() :毫秒数,76,（）设置日期和时间： setYear();设置年 setDate

27、():设置当月号数 setMonth():设置当月份数 setHours():设置小时数 setMintes():设置分钟数 setSeconds():设置秒数 setTime ():设置毫秒数,77,2、JavaScript中的系统函数,1返回字符串表达式中的值： 方法名：eval（字串表达式）， 例：? test=eval(8+9+5/2); 2.返回字符串ASCI码： 方法名：unEscape (string) 3返回字符的编码： 方法名：escape(chara?er) 4返回实数： parseFloat(floustring); 、返回不同进制的数： parseInt(numbest

28、ring ,rad.X) 其中radix是数的进制，numbs字符串数,78,3.3.6 创建新对象,一、对象的定义 基本格式如下： Function Object（属性表） Tp1=prop1 Tp2=prop2 . This.meth=FunctionName1; This.meth=FunctionName2; . 在一个对象的定义中，可以为该对象指明其属性和方法。通过属性和方法构成一个对象的实例。,79,如: University对象的定义 Function university(name,city,creatDate URL) T=name

29、 This.city=city This.creatDate=New Date(creatDate) This.URL=URL 其中：Name指定一个“单位”名称。 City“单位”所在城市。 CreatDate记载university对象更新日期。 URL该对象指向一个网址。,80,二、创建对象实例 对象定义完成后，可以为该对象创建一个实例： NewObject=New object(); 例： U1=New university(“云南省”，“昆明市”，January 05,199712:00:00, http:/www.YN.KM),81,三、对象方法的使用 在对象中还需要使用方法。 在

30、对象的定义中，This.meth=FunctionName语句，就是为定义对象的方法。而对象的方法就是一个函数FunctionName。,82,例：在university对象中增加一个方法，该方法是显示它自己本身，并返回相应串。 function university(name,city,createDate,URL) This.Name=Name; This.city=city; This.createDate=New Date(creatDate)； This.URL=URL； This.showuniversity=showuniversity;,function showunivers

31、ity() For (var prop in this) alert(prop+=+thisprop+); 其中alert是JavaScript中的内部函数，显示其字符串。,83,定义对象的数组 Function arrayName(size) This.length=Size; for(var X=; X=size;X+) thisX=0; Reture this; 其中arrayName是定义数组的一个名子，Size是有关数组大小的值（1-size），即数组元素的个数。通过for循环对一个当前对象的数组进行定义，最后返回这个数组。,3.3.6 JavaScript中的数组,84,一个数组定

32、义完成以后，还不能马上使用，必须为该数组创建一个数组实例： Myarray=New arrayName(n); 并赋于初值： Myarray1=“字串”； Myarray2=“字串”； Myarray3=“字串”； . Myarrayn=“字串n”； 一旦给数组赋于了初值后，数组中就具有真正意义的数据了，以后就可以在程序设计过程中直接引用。,85,3.3.7 WEB页面信息的交互,一、窗体基础知识 窗体（Form）:它构成了Web页面的基本元素。通常一个Web页面有一个窗体或几个窗体，使用Forms数组来实现不同窗体的访问。 在Forms0中共有三个基本元素，而Forms1中只有两个元素。 窗

33、体对象最主要的功能就是能够直接访问HTML文档中的窗体，它封装了相关的HTML代码：,86,窗体对象最主要的功能就是能够直接访问HTML文档中的窗体，它封装了相关的HTML代码： ,87,、窗体对象的方法 窗体对象的方法只有一个-submit()方法，该方法主要功用就是实现窗体信息的提交。如提交Mytest窗体,则使用下列格式： document.mytest.submit() 、窗体对象的属性 窗体对象中的属性主要包括以下：elements name action target encoding method. 除Elements外，其它几个均反映了窗体中标识中相应属性的状态，这通常是单个窗

34、体标识；而elements常常是多个窗体元素值的数组，例： elements0.Mytable.elements1,88,、访问窗体对象 在JavaScript中访问窗体对象可由两种方法实现： （）通过访问窗体 在窗体对象的属性中首先必须指定其窗体名，而后就可以通过下列标识访问窗体如：document.Mytable()。 （）通过数组来访问窗体 除了使用窗体名来访问窗体外，还可以使用窗体对象数组来访问窗体对象。但需要注意一点，因窗体对象是由浏览器环境的提供的，而浏览器环境所提供的数组下标是由0到n。所以可通过下列格式实现窗体对象的访问： document.forms0 document.fo

35、rms1 document.forms2. 、引用窗体的先决条件 在JavaScript中要对窗体引用的条件是：必须先在页面中用标识创建窗体，并将定义窗体部分放在引用之前。,89,二、窗体中的基本元素 窗体中的基本元素由按钮、单选按钮、复选按钮、提交按钮、重置按钮、文本框等组成。在JavaScript中要访问这些基本元素，必须通过对应特定的窗体元素的数组下标或窗体元素名来实现。每一个元素主要是通过该元素的属性或方法来引用。其引用的基本格式见下: formName.elements.methadName (窗体名.元素名或数组.方法) formNpertyName

36、(窗体名.元素名或数组.属性),90,、Text单行单列输入元素 功能：对Text标识中的元素实施有效的控制。 基本属性： Name：设定提交信息时的信息名称。对应于HTML文档中的Name。 Value：用以设定出现在窗口中对应HTML文档中Value的信息。 defaultvalue：包括Text元素的默认值 基本方法： blur()：将当前焦点移到后台。 select()：加亮文字。 主要事件： onFocus：当Text获得焦点时，产生该事件。 OnBlur：从元素失去焦点时，产生该事件。 Onselect：当文字被加亮显示后，产生该文件。 onchange：当Text元素值改变时，产

37、生该文件。 例：. . document.mytest.value=that is a Javascript; document.mytest.select(); document.mytest.blur(); ,91,、textarea多行多列输入元素 功能：实施对Textarea中的元素进行控制。 基本属性 name：设定提交信息时的信息名称，对应HTML文档Textarea的Name。 Value：用以设定出现在窗口中对应HTML文档中Value的信息。 Default value：元素的默认值。 方法： blur()：将输入焦点失去 select()：将文字加亮后 事件： onBlur

38、:当失去输入焦点后产生该事件 onFocus:当输入获得焦点后，产生该文件 Onchange:当文字值改变时，产生该事件 Onselect:当文字加亮后，产生该文件,92,、Select选择元素 功能：实施对滚动选择元素的控制。 属性： name:设定提交信息时的信息名称，对应文档select中的name。 Length:对应文档select中的length options:组成多个选项的数组 selectIndex;该下标指明一个选项 select在中每一选项都含有以下属性： Text:选项对应的文字 selected:指明当前选项是否被选中 Index:指明当前选项的位置 defaults

39、elected:默认选项 事件： OnBlur：当select选项失去焦点时，产生该文件。 onFocas:当select获得焦点时，产生该文件。 Onchange:选项状态改变后，产生该事件。,93,、Button按钮 功能：实施对Button按钮的控制。 属性： Name:设定提交信息时的信息名称，对应文档中button的Name。 Value:用以设定出现在窗口中对应HTML文档中Value的信息。 方法：click()该方法类似于一个按下的按钮。 事件：onclick当单击button按钮时，产生该事件。 例 ： . document.elements0.value=mytest; /

40、通过元素访问 或 document.testcallvalue=mytest; / 通过名字访问 .,94,、checkbox检查框 功能：实施对一个具有复选框中元素的控制。 属性： name:设定提交信息时的信息名称。 Value:用以设定出现在窗口中对应HTML文档中Value的信息。 Checked:该属性指明框的状态true/false. defauitchecked:默认状态 方法： click()该方法使得框的某一个项被选中。 事件： onclick:当框的选被选中时，产生该事件。,95,、radio无线按钮 功能：实施对一个具单选功能的无线按钮控制。 属性： name:设定提交信

41、息时的信息名称，对应HTML文档中的radio的name相同 value:用以设定出现在窗口中对应HTML文档中Value的信息，对应HTML文档中的radio的name。 length:单选按钮中的按钮数目。 defalechecked:默认按钮。 checked:指明选中还是没有选中。 index:选中的按钮的位置。 方法： chick():选定一个按钮。 事件： onclick:单击按钮时，产生该事件。,96,、hidden:隐藏 功能：实施对一个具有不显示文字并能输入字符的区域元素的控制。 属性： name:设定提交信息时的信息名称，对应HTML文档的hidden中的Name。 Val

42、ue:用以设定出现在窗口中对应HTML文档中Value的信息，对应HTML文档hidden中的value。 defaleitvalue:默认值,97,、Password口令 功能：实施对具有口令输入的元素的控制。 属性： Name:设定提交信息时的信息名称，对应HTML文档中password中的name。 Value:用以设定出现在窗口中对应HTML文档中Value的信息，对应HTML文档中password中的Value。 defaultvalu:默认值 方法 select():加亮输入口令域。 blur():使这丢失passward输入焦点。 focus():获得password输入焦点。,

43、98,、submit提交元素 功能：实施对一个具有提交功能按钮的控制。 属性： name:设定提交信息时的信息名称，对应HTML文档中submit。 Value:用以设定出现在窗口中对应HTML文档中Value的信息，对应HTML文档中value。 方法 click()相当于按下submit按钮。 事件： onclick()当按下该按钮时，产生该事件。,99,三、范例,test8_1.htm /原来的颜色 document.bgColor=blue; document.vlinkColor=white; document.linkColor=yellow; document.alinkcolo

44、r=red; /动态改变颜色 function changecolor() document.bgColor=red; document.vlinkColor=blue; document.linkColor=green; document.alinkcolor=blue; 调用动态按钮文档 ,100,动态按钮程序。 test8_2.htm var id,pause=0,position=0; function banner() / variables declaration var i,k,msg= 这里输入你要的内容;/ increase msg k=(30/msg.length)+1;

45、for(i=0;i banner(); 返回 ,101,4.3 JSP注释,隐藏注释 HTML注释 Java注释,102,隐藏注释,隐藏注释也是JSP的标准注释，写在JSP程序中，在发布网页时完全被忽略，不发给客户，当希望隐藏JSP程序的注释时是很有用的。其语法格式为：，comment为想要添加的文本注释。,103,HTML注释,HTML注释在发布网页时可以在浏览器源文件窗口中可以看到，并且在这种注释中可以使用JSP的表达式，其语法格式为： -，其中comment可以是文字说明，expression为JSP表达式。,104,Java注释,在JSP程序中，也可以遵循Java语言本身的注释规则对代

46、码进行注释，这样的注释和隐藏注释相似，在发布网页被完全忽略，在浏览器的源文件窗口中看不到这种注释。其语法格式为：，comment为要添加的注释文本。,105,4.4 变量、方法的声明,变量、方法的声明和表达式 表达式,106,变量、方法的声明和表达式,JSP中的声明可以用来定义一个或多个合法的变量（包括普通变量和类变量）和方法，并不输出任何的文本到输出流去。在声明元素中声明的变量和方法将在JSP页面初始化时被初始化。 JSP声明的语法格式为：，其中declaration为声明的变量、方法的名称和内容 。 在声明变量变量和方法时，需要注意以下几点： 声明必须以;结尾。 可以直接使用在中被包含进来

47、的已经声明的变量和方法，不需要对它们重新进行声明。 一个声明仅在一个页面中有效。如果想每个页面都用到一些声明，最好把它们写成一个单独的文件，然后用或元素包含进来。,107,表达式,SP中表达式可以将某个计算结果转换成一个字符串并且直接使用在输出网页上。包含一个符合JSP语法的表达式的语法格式为：。JSP的表达式中没有分号，除非在加引号的字符串部分才使用分号。,108,4.5 JSP指令,include指令 Page指令 taglib指令,109,include指令,在JSP中用include指令包含一个静态的文件，同时解析这个文件中的JSP语句，使用jsp的include指令有助于实现jsp页

48、面的模块化。其语法格式为：，其中filename指被包含的文件的名称 。 指令将会在JSP编译时插入一个包含文本或代码的文件，当使用指令时，这个包含的过程是静态的。静态的包含是指这个被包含的文件将会被插入到JSP文件中去，这个包含的文件可以是JSP文件、HTML文件、文本文件。如果包含的是JSP文件，这个包含的JSP文件中的代码将会被执行。,110,Page指令,Page 指令用来定义JSP文件中的全局属性，它描述了与页面相关的一些信息，其作用域为它所在的JSP文件页面和其包含的文件，但是指令不能作用于动态的包含文件，例如。Page 指令的语法格式为： 无论把指令放在JSP的文件的哪个地方，它

49、的作用范围都是整个JSP页面。,111,taglib指令,taglib指令用来定义一个标签库以及其自定义标签的前缀。其语法格式为： 其中，属性uri（Uniform Resource Identifier，统一资源标识符）用来唯一的确定标签库的路径，并告诉JSP引擎在编译JSP程序时如何处理指定标签库中的标签，属性prefix定义了一个指示使用此标签库的前缀。,112,4.6 JSP动作（Action）语法,动作 动作 动作 动作 动作 ,113,动作,动作用来把指定文件插入正在生成的页面。其语法如下： jsp:include page=“relative URL” flush=“true”

50、/ 动作允许包含静态文件和动态文件，这两种包含文件的结果是不同的。如果文件仅是静态文件，那么这种包含仅仅是把包含文件的内容加到jsp文件中去，这个文件不会被JSP编译器执行；如果这个文件动态的，那么这个被包含文件也会被JSP编译器执行。,114,动作,动作用来装载一个将在JSP页面中使用的JavaBean。这个功能非常有用，因为它既可以发挥Java组件重用的优势，同时也避免了损失JSP区别于Servlet的方便性。其语法格式为： type=package.class“ / | other elements 元素的主体通常包含有元素，用于设置Bean的属性值。正如上面所说的，的主体仅仅只有在示例

51、Bean时才会被执行，如果这个Bean已经存在，能够定位它，那么主体中的内容将不会起作用，但你可以在元素外用元素设定 JavaBean 的属性。,115, 动作,获得Bean实例之后，可以利用动作设置、修改Bean中的属性值。其语法格式如下： / 元素使用Bean给定的setter方法，在Bean中设置一个或多个属性值。在使用这个元素之前必须使用声明此Bean，因为和是联系在一起的，同时它们使用的Bean实例的名字也应当相匹配 。,116,动作,动作用来提取指定Bean属性的值，转换成字符串，然后输出。其语法格式为： 元素可以获取Bean的属性值，并可以将其使用或显示在JSP页面中。在使用之前

52、，必须用创建它。,117,动作,用于引导客户端的请求到另一个页面或者是另一个Servlet去。其语法格式为： / 动作可以包含一个或几个子动作，用于向要引导进入的页面传递参数。需要注意，当动作发生的时候，如果已经有文本被写入输出流而且页面没有设置缓冲，那么将抛出一个IllegalStateException的异常。,118,在JSP处理这个动作的时候，将根据客户端浏览器的不同，JSP在执行以后将分别输出为OBJECT或EMBED这两个不同的HTML元素。其语法格式为： jsp:plugin type=bean | applet code=classFileName codebase=class

53、FileDirectoryName name=instanceName archive=URIToArchive, . align=bottom | top | middle | left | right height=displayPixels width=displayPixels ,119, hspace=leftRightPixels vspace=topBottomPixels jreversion=JREVersionNumber | 1.1 nspluginurl=URLToPlugin iepluginurl=URLToPlugin / text message for use

54、r ,120,4.7 JSP脚本,JSP脚本即Scriptlet，也就是JSP中的代码部分，是java程序的一段代码，几乎可以使用任何java语法，它是在请求时期执行的，它可以使用jsp页面所定义的变量、方法、表达式或JavaBeans。脚本的语法格式为： 如果要在Scriptlet内部使用字符“%”，必须写成“%”,121,第六讲 使用内部对象系统,一、浏览器对象层次及其主要作用 除了前面提到过的文档document对象外，Navigator浏览器中还提供了窗口（Window）对象以及历史（History）和位置（Location）对象。 浏览器对象(Navigator) 提供有关浏览器的信

55、息 窗口对象(Windows) Window对象处于对象层次的最顶端，它提供了处理Navigator窗口的方法和属性。 位置对象(Location) Location对象提供了与当前打开的URL一起工作的方法和属性，它是一个静态的对象。 历史对象(History) History对象提供了与历史清单有关的信息。 文档对象(Document) document对象包含了与文档元素(elements)一起工作的对象，它将这些元素封装起来供编程人员使用。,122,二、文档对象功能及其作用 在Navigator浏览器中，document文档对象是核心是，同时也是最重要的。见图所示。 Links Anc

56、hor Form Method Prop 链接对象 锚对象 窗体对象 方法 对象 从图中可以看出，document对象的主要作用就是把这些基本的元素（如links,anchor等）包装起来，提供给编程人员使用。从另一个角度看，document对象中又是由属性和方法组成。,123,、document中三个主要的对象 在document中主要有：links,anchor,form等三个最重要的对象： （）anchor锚对象： anchor对象指的是 标识在HTML源码 中存在时产生的对象。它包含着文档中所有的anchors信息。 （）链接links对象 link对象指的是用 标记的连接一个超文本或

57、超媒体的元素作为一个特定的URL。 （）窗体（Form）对象 窗体对象是文档对象的一个元素，它含有多种格式的对象储 存信息，使用它可以在JavaScript脚本中编写程序进行文字输 入，并可以用来动态改变文档的行为。通过 document. Forms数组来使得在同一个页面上可以有多个相 同的窗体,使用forms数组要比使用窗体名字要方便得多。,124,例:下面就是一个使用窗体数组和窗体名字的例子。该程序使得两个窗体中的字段内容保持一致。 Test6_1.htm ,125,、文档对象中的attribute属性 document对象中的attribute属性，主要用于在引用 Href标识时，控制

58、着有关颜色的格式和有关文档标题、文档原 文件的URL以及文档最后更新的日期。这部分元素的主要含义 如下： （）链接颜色：alinkcolor 这个元素主要用于，当选取一个链接时，链接对象本身的颜 色就按alinkcolo r指定改变。 （）链接颜色：linkcolor 当用户使用 Text string 链接后， Textstring的颜色就会按Linkcolor所指定的颜色更新。 （）浏览过后的颜色：VlinkColor 该属性表示的是已被浏览存储为已浏览过的链接颜色。 （）背景颜色：bgcolor 该元素包含文档背景的颜色。 （）前景颜色：Fgcolor 该元素包含HTML文档中文本的前景

59、颜色。,126,、文档对象的基本元素 （）窗体属性： 窗体属性是与HTML文档中.相对应的一组对象在HTML文档所创建的窗体数，由length指定。通过document.forms.length反映该文档中所创建的窗体数目。 （）锚属性：anchors 该属性中，包含了HTML文档的所有 标记为Name=.的语句标识。所有“锚”的数目保存在document.anchors.length中。 （）链接属性：links 链接属性是指在文档中.的由Href=.指定的数目，其链接数目保存在document.links.length中。,127,第七讲 窗口及输入输出,一、窗口及输入输出请看下面例子： Var test=mpt(请输入数据:); document.write(test+JavaScript输入输出的例子); 其中mpt()