版权说明:本文档由用户提供并上传,收益归属内容提供方,若内容存在侵权,请进行举报或认领
文档简介
1第3章
JSP动态网页设计基础
2了解和掌握HTML语法、CSS语法掌握JSP注释、变量和方法的声明掌握JSP指令、JSP动作(Action)语法学习目标3学习内容HTML语法CSS语法JavaScript脚本JSP注释变量、方法的声明JSP指令JSP动作(Action)语法JSP脚本4HTML文件的一般格式:<html><head><title>网页标题</title></head><body>
网页正文</body></html>5<html><head><title>使用标题标签</title></head><body><H1align="center">欢迎学习JSP!!!</H1><H2align="center">欢迎学习JSP!!!</H2><H3align="center">欢迎学习JSP!!!</H3></body></html>6加入超级链接1、锚点标记格式:<Ahref=“地址”
name=“字符串”
target=“打开窗口方式”>热点</A>例如:<AHREF=“”>山东农业大学</A>7加入表单一个表单至少应该包括:表单标签:处理表单数据所用CGI程序的URL以及数据提交到服务器的方法。表单域:文本框、密码框、隐藏域、多行
文本框、复选框、单选框、下拉选择框和文件上传框等。表单按钮:提交按钮、复位按钮和一般按钮81.表单标记<FORMaction=mailto:mail地址或网址
method=get|post>
<INPUTtype=“表项名”
name=“名”
size=xmaxlenth=y>
…..</FORM>action属性:E-MAIL地址或网址。
method属性:GET/POST<INPUT>标记:表单中提供给用户的输入形式。92、文字和密码的输入:type属性为text:输入文本以标准的字符显示。type属性为password:输入文本显示为“*”。3、重置和提交<INPUTtype=“reset”value=“按钮名”><INPUTtype=“submit”value=“按钮名”>104、复选框和单选钮<INPUTtype=“radio”name=“控制名”value=“控制初值”checked><INPUTtype=“checkbox”name=“控制名”value=“控制初值”>checked表示是否为默认选中项。11head部分包含元素及描述:title:文档标题。meta:描述非html标准的一些文档信息。link:描述当前文档与其他文档之间的连接关系。base:定义体试时默认的外部资源。script:脚本程序内容style:样式表内容121、title:
title包含的内容将会被显示在浏览器窗口的标题栏中。语法格式:
<title>……
……</title>
在省略号处加入的文字或符号,都将显示在浏览器的标题栏中。132、meta:
下面是meta的几种用法:(1)定义搜索关键字:
<metaname="keywords"content="html,css,javascript">
<metaname="description"content="网页制作">meta元素提供的信息是用户不可见的,只是提供给那些搜索引擎使用。14(2)控制页面缓存:<metahttp-equiv="pragma"content="no-cache">
在用户下次打开网页时,浏览器直接调用硬盘上缓存的上次临时版本。如果每次打开网页的时看到最新版本,就加上该语句!15(3)定义语言:
<metahttp-equiv=“content-type”content=“text/html;charset=GB2312”>
设定语言的编码方式。便于浏览器正确的选择语言,不需要人工选取。16(4)自动刷新页面<METAhttp-equiv=“Refresh”content=“秒数;url=新页面”>注意:<META>标识必须放置在<head>…</head>中http-equiv属性值设置为“Refresh”时,要求显示URL指定的文件。173、script:用来在页面中加入脚本程序。<scriptlanguage="脚本语言">
……
……
</script>
在language中一定要指定脚本语言的种类。如VBScript等。184、style:用来指定当前文档的css层叠样式表。css对于网页的字体样式、背景、边界等都有很大的应用。193.2CSS语法
CSS简介CSS基本语法CSS基本属性20一、CSS简介CSS(CascadingStyleSheet-“层叠样式表”或“级联样式单”)
制作网页时采用CSS技术,可以有效地对页面布局、字体、颜色、背景和其它效果实现更加精确的控制,可以改变同一页面的不同部分,或者页数不同的网页的外观和格式。21“Cascading”
即在同一个Web文档中可以有多个样式表存在,根据所在的位置,拥有不同的优先级。优先级越高,就会被最后在显示时采用。
从样式表插入的形式来看可以分为三种:1、内联式样式表:
利用现有的HTML标记把特殊的样式加入到那些由标记控制的信息中。22
2、嵌入式样式表:嵌入到HTML文件的头部中去(<html>和<body>标记之间),使用<Style>…</Style>容器装载,例如:
<style>p{color:blue;font-weight:bold}</style>
对页面中所有<p>标记都起作用。23
3、外部式样式表:
一种保存在外部的样式表文件,外部文件以.CSS为扩展名,例如:
<linkrel=stylesheethref="main-sheet.css"type="text/css">
24CSS扩展HTML但不能脱离HTML,仅是一项辅助工具。减少图形文件使用。CSS提供很多文字样式,可轻松取代原来图形表现的视觉效果。集中管理样式信息。CSS可将网页要展示内容与样式设定分开。设定共享样式。CSS样式信息存成独立文件,让多个网页文件共同使用。样式分类使用。在一份HTML网页文件上套用多个CSS样式文件。25二、CSS基本语法
CSS的基本语法:
基本格式、注释语句、选择符等是开发CSS基础。通常,样式表的定义分为选择符(selector)和块{}(block),块里包含属性(properties)和属性的取值(value).格式:选择符{属性:属性值}
26格式:选择符{属性:属性值}
开发人员可以在CSS中插入注释来说明代码含义。CSS注释以“/*”
开头,以“*/”
结尾。CSS中,选择符可以分为:HTML标记选择符(HTMLselector)、类选择符(Classselector)ID选择符(IDselector)。
27<html>
<head><styletype="text/css"><!--.m{font-family:"隶书";font-size:18px;color:#ff0000;text-decoration:line-through;}--></style></head><body>
<pclass="m">这里是FIF制作小组</p>
<aclass="m"href="#">这里是FIF制作小组</a></body></html>
281.类选择符<styletype="text/css">
.m{font-family:"隶书";font-size:18px;color:#ff0000;text-decoration:line-through;}</style><body><pclass=“m”>请注意</p><aclass="m"href="#">这里是FIF制作小组</a></body></html>29<html><head><styletype="text/css">a{font-size:36px;color:#ff0000;text-decoration:line-through;}</style></head><body><p>这里是FIF制作小组<br><ahref="#">这里是FIF制作小组</a></body></html>2、HTML标记选择符
30<html><head><styletype="text/css">
#5{font-size:24px;color:#0000ff;text-decoration:line-through;}</style></head><body><pid="5">这里是FIF制作小组<br><aid="5"href="#">这里是FIF制作小组</a></body></html>3、ID选择符31<pstyle=“font-size:48;font-style:bold;color:red;”>hongen</p>
这里Style是内嵌到<P>中来定义该段落内的格式的。在<BODY>中用<STYLE=>直接定义。这种定义方法非常适用于编写的代码比较多的情况。
而上面的代码的CSS定义格式则非常适用于代码较少、结构较简单的情况。
32怎样编写CSS?
1、把CSS文档放到<head>文档中:
<styletype=“text/css”>……</style>
其中<style>中的“type=‘text/css’”的意思是<style>中的代码是定义样式表单的。332、把CSS样式表写在HTML的行内。如:
<pstyle=“font-size:14pt;color:blue”>蓝色14号文字</p>
采用<Style=“
”>的格式把样式写在html中的任意行内,这样比较方便灵活。343、把编辑好的CSS文档保存成“.CSS”文件,然后在<head>中定义。定义格式:
<head><linkrel=stylesheethref=“style.css”>……</head>
“href=‘style.css’”指需要连接的文件地址。353.3JavaScript脚本语言JavaScript语言概况
JavaScript基本数据结构
JavaScript程序构成
基于对象的JavaScript语言创建新对象
使用内部对象系统
窗口及输入输出
WEB页面信息的交互
363.3.1JavaScript
JavaScript是一种基于对象(Object)和事件驱动(EventDriven)并具有安全性能的脚本语言。使用目的是与HTML语言、Java脚本语言(Java小程序)一起实现在一个Web页面中链接多个对象,与Web客户交互,从而开发客户端应用程序。它通过嵌入或调入在标准的HTML语言中实现的。373.3.2JavaScript和JavaJava是SUN公司推出的新一代面向对象的程序设计语言,特别适合于Internet应用程序开发;而JavaScript是Netscape公司的产品,其目的是为扩展NetscapeNavigator功能而开发的一种可以嵌入Web页面中的基于对象和事件驱动的解释性语言。38Java是一种面向对象的语言,即使是开发简单的程序,必须设计对象。
JavaScript是种脚本语言,它是一种基于对象(ObjectBased)和事件驱动(EventDriver)的编程语言。它本身提供丰富的内部对象供设计人员使用。
39Java的源代码在传递到客户端执行之前,必须经过编译,因而客户端上必须具有相应平台上的仿真器或解释器,它可以通过编译器或解释器实现独立于某个特定的平台编译代码的束缚。
JavaScript是一种解释性编程语言,其源代码在发往客户端执行之前不需经过编译,而是将文本格式的字符代码发送给客户编由浏览器解释执行。403.3.3JavaScript基本数据结构一、JavaScript代码的加入
直接将JavaScript脚本加入HTML文档:
<ScriptLanguage=“JavaScript”>
JavaScript语言代码;
JavaScript语言代码;
</Script>41二、基本数据类型
数值(整数和实数)、
字符串型(用“”号或‘’括起来的字符或数值)、
布尔型(True或False)和空值。
JavaScript采用弱类型的形式,因而一个数据的
变量或常量不必首先作声明,而是在使用或赋值时确定其数据的类型的。当然也可以先声明该数据的类型,它是通过在赋值时自动说明其数据类型的。
42(1)整型常量
JavaScript的常量通常又称字面常量,它是不能改变的数据。其整型常量可以使用十六进制、八进制和十进制表示其值。
(2)实型常量
实型常量是由整数部分加小数部分表示,如12.32、193.98。可以使用科学或标准方法表示:5E7、4e5等。2、常量43(3)布尔值
布尔常量只有两种状态:True或False。它主要用来说明或代表一种状态或标志,以说明操作流程。JavaScript只能用True或False表示其状态。2、常量(4)字符型常量
使用单引号(‘)或双引号(“)括起来的一个或几个字符。如"ThisisabookofJavaScript"、"3245"、"ewrt234234"等。
44
(5)空值
JavaScript中有一个空值null,表示什么也没有。如试图引用没有定义的变量,则返回一个Null值。
(6)特殊字符
同C语言一样,JavaScript中同样以有些以反斜杠(/)开头的不可显示的特殊字符。通常称为控制字符。
453、变量
(1)变量的命名
必须是一个有效的变量,即变量以字母开头,中间可以出现数字如test1、text2等。除下划线(-)作为连字符外,变量名称不能有空格、(+)、(-)、(,)或其它符号。不能使用JavaScript中的关键字作为变量。
在JavaScript中定义了40多个类键字,这些关键是JavaScript内部使用的,不能作为变量的名称。如Var、int、double、true不能作为变量的名称。46(2)变量的类型
可以用命令Var作声明:
varmytest;
Varmytest=”Thisisabook”变量可以在使用时再根据数据类型确定变量类型。
如:
x=100y="125"
xy=Truecost=19.5。
其中x整数,y为字符串,xy为布尔型,cost为实型。47(3)变量的声明及其作用域
变量的作用域。全局变量是定义在所有函数体之外,其作用范围是整个函数;而局部变量是定义在函数体之内,只对其该函数是可见的,而对其它函数则是不可见的。
48三、表达式和运算符1、表达式
算术表述式、字串表达式、赋值表达式、布尔表达式。2、运算(1)算术运算符(单目运算符和双目运算符)49(2)比较运算符
(3)布尔逻辑运算符
增加了几个布尔逻辑运算符:
!(取反)、&=(与之后赋值)、&(逻辑与)、
|=(或之后赋值)、|(逻辑或)、^=(异或之后赋值)、^(逻辑异或)、?:(三目操作符)、||(或)、==(等于)、|=(不等于)。503.3.4JavaScript程序构成一、程序控制流
1、if条件语句
基本格式
if(表述式)
语句段1;
else
语句段2;
2、For循环语句
for(初始化;条件;增量)
语句集;513.3.4JavaScript程序构成3、while循环
基本格式
while(条件)
语句集;4、break和continue语句
52二、函数
1、JavaScript函数定义
Function函数名(参数,变元){
函数体;.
Return表达式;
}2、函数中的形式参数:
函数名后有参数表,参数变量可能是一个或几个。在JavaScript中可通过arguments.Length来检查参数的个数。
53三、事件驱动及事件处理
1、基本概念
JavaScript是object-based的语言。即在图形界面环境下,使得一切输入变化简单化。通常鼠标或热键的动作称之为事件(Event),而由鼠标或热键引发的一连串程序的动作,称之为事件驱动(EventDriver)。而对事件进行处理程序或函数,称之为事件处理程序(EventHandler)。542、事件处理程序
在JavaScript中对象事件的处理通常由函数(Function)担任。其基本格式与函数全部一样。格式如下:
Function事件处理名(参数表){
事件处理语句集;
}553、事件驱动
事件通过鼠标或热键的动作引发。主要有以下事件:
(1)单击事件onClick
当用户单击鼠标按钮时,产生onClick事件。通常在下列基本对象中产生:button(按钮对象)checkbox(复选框)或(检查列表框)radio(单选钮)resetbuttons(重要按钮)submitbuttons(提交按钮)56例:可通过下列按钮激活change()文件:
<Form>
<Inputtype="button"Value=“
”onClick="change()">
</Form>在onClick等号后,可以使用自己编写的函数作为事件处理程序,也可以使用JavaScript中内部的函数。还可以直接使用JavaScript的代码等。例:
<Inputtype="button"value=""onclick=alert("这是一个例子");57(2)onChange改变事件
当利用text或texturea元素输入字符值改变时发该事件,同时当在select表格项中一个选项状态改变后也会引发该事件。
例:
<Form>
<Inputtype="text"name="Test"value="Test"onCharge="check(this.test)">
</Form>58
(3)选中事件onSelect
当Text或Textarea对象中的文字被加亮后,引发该事件。(4)获得焦点事件onFocus
当用户单击Text或textarea及select对象时产生该事件。此时该对象成为前台对象。(5)失去焦点onBlur
当text对象或textarea对象以及select对象不再拥有焦点、而退到后台时,引发该文件,他与onFocas事件是一个对应的关系。59(6)载入文件onLoad
当文档载入时,产生该事件。onLoad一个作用就是在首次载入一个文档时检测cookie的值,并用一个变量为其赋值,使它可以被源代码使用。(7)卸载文件onUnload
当Web页面退出时引发onUnload事件,并可更新Cookie的状态。60<HTML>
<HEAD>
<scriptLanguage="JavaScript">
<!--
functionloadform(){
alert("这是一个自动装载例子!");}
functionunloadform(){
alert("这是一个卸载例子!");}
//-->
</Script>
</HEAD>
<BODYOnLoad="loadform()"OnUnload="unloadform()">
<ahref="test.htm">调用</a></BODY></HTML>下例程序当装入HTML文档时调用loadform()函数,而退出该文档进入另一HTML文档时则首先调用unloadform()函数,确认后方可进入。613.3.5基于对象的JavaScript语言一、对象的基础知识1、对象的基本结构
JavaScript中的对象是由属性(properties)和方法(methods)两个基本的元素构成。2、引用对象的途径一个对象要被使用,可采用以下几种方式:引用JavaScript内部对象;由浏览器环境中提供;创建新对象。
623、有关对象操作语句
(1)
For...in语句格式如下:
For(对象属性名in已知对象名)用于对已知对象的所有属性进行操作的控制循环。它是将一个已知对象的所有属性反复置给一个变量;而不是使用计数器来实现的。优点是无需知道对象中属性的个数即可操作。63例:
FunctionshowData(object)for(varpropinobject)document.write(object[prop]);使用该函数时,在循环体中,For自动将的属性取出来,直到最后为此。64(2)with语句:该语句体内,任何对变量的引用被认为是这个对象的属性。withobject{...}
所有在with语句后的花括号中的语句,都在后面object对象的作用域中。65(3)this关键字
在JavaScript由于对象的引用是多层次,多方位的,对象间的彼此引用较多,有可能造成混乱,为此JavaScript提供语句this用于指定当前对象。66(4)New运算符
使用New运算符可创建一个新对象。格式:Newobject=NEWObject(Parameterstable);如创建一个日期新对象newData=NewData()birthday=NewData(Decembe?12.1998)674、对象属性的引用
(1)使用点(.)运算符
university.Name=“云南省”
university.city=“昆明市”
university.Date="1999"
其中university是一个已经存在的对象,Name、City?Date是它的三个属性,并通过操作对其赋值。68
(2)通过对象的下标实现引用
university[0]=“云南”
university[1]=“昆明市”
university[2]="1999"(3)通过字符串的形式实现
university["Name"]=“云南”
university["City"]=“昆明市”
university["Date"]="1999"695、对象的方法的引用ObjectName.methods()如:引用university对象中showmy()可使用:
document.write(university.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、常用内部对象1)、string对象
使用格式:objectName.op/methods(1)串对象的属性该对象只有一个属性,即length。例:mytest="ThisisaJavaScript"mystringlength=mytest.length72(2)string对象方法方法共有19个。主要用于有关字符串在Web页面中的显示、字体大小、字体颜色、字符的搜索以及字符的大小写。732、算术函数的math对象(1)主要属性提供6个属性,学中经常用到的常数E、以10为底的自然对数LN10、以2为底的自然对数LN2、3.14159的PI、1/2的平方根SQRT1-2,2的平方根为SQRT2。742、算术函数的math对象(2)主要方法绝对值:abs()
正弦余弦值:sin(),cos()
反正弦反余弦:asin(),acos()
正切反正切:tan(),atan()
四舍五入:round()
平方根:sqrt()
基于几方次的值:Pow(base,exponent)753、日期及时间对象必须使用New运算符创建一个实例。例:MyDate=NewDate()Date对象没有提供直接访问的属性。
(1)获取日期的时间方法getYear():年数getMonth():当月号数getDate():当日号getDay():星期几getHours():小时数getMintes():分钟数getSeconds():秒数getTime():毫秒数76(2)设置日期和时间:setYear();设置年setDate():设置当月号数setMonth():设置当月份数setHours():设置小时数setMintes():设置分钟数setSeconds():设置秒数setTime():设置毫秒数772、JavaScript中的系统函数1.返回字符串表达式中的值:方法名:eval(字串表达式),例:?test=eval("8+9+5/2");2.返回字符串ASCI码:方法名:unEscape(string)
3.返回字符的编码:方法名:escape(chara?er)4.返回实数:parseFloat(floustring);5、返回不同进制的数:parseInt(numbestring,rad.X)其中radix是数的进制,numbs字符串数783.3.6创建新对象一、对象的定义基本格式如下:
FunctionObject(属性表)
Tp1=prop1Tp2=prop2...This.meth=FunctionName1;This.meth=FunctionName2;...
在一个对象的定义中,可以为该对象指明其属性和方法。通过属性和方法构成一个对象的实例。79
如:University对象的定义
Functionuniversity(name,city,creatDateURL)T=nameThis.city=cityThis.creatDate=NewDate(creatDate)This.URL=URL
其中:Name-指定一个“单位”名称。
City-“单位”所在城市。
CreatDate-记载university对象更新日期。
URL-该对象指向一个网址。80二、创建对象实例对象定义完成后,可以为该对象创建一个实例:
NewObject=Newobject();
例:U1=Newuniversity(“云南省”,“昆明市”,"January05,199712:00:00","http://www.YN.KM")81三、对象方法的使用
在对象中还需要使用方法。在对象的定义中,This.meth=FunctionName语句,就是为定义对象的方法。而对象的方法就是一个函数FunctionName。82例:在university对象中增加一个方法,该方法是显示它自己本身,并返回相应串。
functionuniversity(name,city,createDate,URL)This.Name=Name;This.city=city;This.createDate=NewDate(creatDate);
This.URL=URL;This.showuniversity=showuniversity;
functionshowuniversity()For(varpropinthis)alert(prop+="+this[prop]+"");
其中alert是JavaScript中的内部函数,显示其字符串。83定义对象的数组
FunctionarrayName(size){This.length=Size;for(varX=;X<=size;X++)this[X]=0;Returethis;}其中arrayName是定义数组的一个名子,Size是有关数组大小的值(1-size),即数组元素的个数。通过for循环对一个当前对象的数组进行定义,最后返回这个数组。3.3.6JavaScript中的数组
84一个数组定义完成以后,还不能马上使用,必须为该数组创建一个数组实例:Myarray=NewarrayName(n);并赋于初值:Myarray[1]=“字串1”;Myarray[2]=“字串2”;Myarray[3]=“字串3”;...Myarray[n]=“字串n”;一旦给数组赋于了初值后,数组中就具有真正意义的数据了,以后就可以在程序设计过程中直接引用。853.3.7WEB页面信息的交互一、窗体基础知识窗体(Form):它构成了Web页面的基本元素。通常一个Web页面有一个窗体或几个窗体,使用Forms[]数组来实现不同窗体的访问。<formName=Form1><INPUTtype=text...><Inputtype=text...><Inpupbyne=text...></form><formName=Form2><INPUTtype=text...><Inputtype=text...></form>在Forms[0]中共有三个基本元素,而Forms[1]中只有两个元素。窗体对象最主要的功能就是能够直接访问HTML文档中的窗体,它封装了相关的HTML代码:86窗体对象最主要的功能就是能够直接访问HTML文档中的窗体,它封装了相关的HTML代码:<FormName="表的名称"Target="指定信息的提交窗口"action="接收窗体程序对应的URL"Method=信息数据传送方式(get/post)enctype="窗体编码方式"[onsubmit="JavaScript代码"]></Form>872、窗体对象的方法窗体对象的方法只有一个--submit()方法,该方法主要功用就是实现窗体信息的提交。如提交Mytest窗体,则使用下列格式:document.mytest.submit()
3、窗体对象的属性窗体对象中的属性主要包括以下:elementsnameactiontargetencodingmethod.除Elements外,其它几个均反映了窗体中标识中相应属性的状态,这通常是单个窗体标识;而elements常常是多个窗体元素值的数组,例:elements[0].Mytable.elements[1]
884、访问窗体对象在JavaScript中访问窗体对象可由两种方法实现:(1)通过访问窗体在窗体对象的属性中首先必须指定其窗体名,而后就可以通过下列标识访问窗体如:document.Mytable()。(2)通过数组来访问窗体除了使用窗体名来访问窗体外,还可以使用窗体对象数组来访问窗体对象。但需要注意一点,因窗体对象是由浏览器环境的提供的,而浏览器环境所提供的数组下标是由0到n。所以可通过下列格式实现窗体对象的访问:document.forms[0]document.forms[1]document.forms[2]...5、引用窗体的先决条件在JavaScript中要对窗体引用的条件是:必须先在页面中用标识创建窗体,并将定义窗体部分放在引用之前。89二、窗体中的基本元素窗体中的基本元素由按钮、单选按钮、复选按钮、提交按钮、重置按钮、文本框等组成。
在JavaScript中要访问这些基本元素,必须通过对应特定的窗体元素的数组下标或窗体元素名来实现。每一个元素主要是通过该元素的属性或方法来引用。其引用的基本格式见下:formName.elements[].methadName(窗体名.元素名或数组.方法)formName.elemaent[].propertyName(窗体名.元素名或数组.属性)901、Text单行单列输入元素功能:对Text标识中的元素实施有效的控制。基本属性:Name:设定提交信息时的信息名称。对应于HTML文档中的Name。Value:用以设定出现在窗口中对应HTML文档中Value的信息。defaultvalue:包括Text元素的默认值基本方法:blur():将当前焦点移到后台。select():加亮文字。主要事件:onFocus:当Text获得焦点时,产生该事件。OnBlur:从元素失去焦点时,产生该事件。Onselect:当文字被加亮显示后,产生该文件。onchange:当Text元素值改变时,产生该文件。例:...<Formname="test"><inputtype="text"name="test"value="thisisajavascript"></form>...<scriptlanguage="Javascirpt">document.mytest.value="thatisaJavascript";document.mytest.select();document.mytest.blur();</script>
912、textarea多行多列输入元素功能:实施对Textarea中的元素进行控制。基本属性name:设定提交信息时的信息名称,对应HTML文档Textarea的Name。Value:用以设定出现在窗口中对应HTML文档中Value的信息。Defaultvalue:元素的默认值。方法:blur():将输入焦点失去select():将文字加亮后事件:onBlur:当失去输入焦点后产生该事件onFocus:当输入获得焦点后,产生该文件Onchange:当文字值改变时,产生该事件Onselect:当文字加亮后,产生该文件
923、Select选择元素功能:实施对滚动选择元素的控制。属性:name:设定提交信息时的信息名称,对应文档select中的name。Length:对应文档select中的lengthoptions:组成多个选项的数组selectIndex;该下标指明一个选项select在中每一选项都含有以下属性:Text:选项对应的文字selected:指明当前选项是否被选中Index:指明当前选项的位置defaultselected:默认选项事件:OnBlur:当select选项失去焦点时,产生该文件。onFocas:当select获得焦点时,产生该文件。Onchange:选项状态改变后,产生该事件。
934、Button按钮功能:实施对Button按钮的控制。属性:Name:设定提交信息时的信息名称,对应文档中button的Name。Value:用以设定出现在窗口中对应HTML文档中Value的信息。方法:click()该方法类似于一个按下的按钮。事件:onclick当单击button按钮时,产生该事件。例:<Formname="test"><inputtype="button"name="testcall"onclick=tmyest()></form>...<scriptlanguage="javascirpt">document.elements[0].value="mytest";//通过元素访问或document.testcallvalue="mytest";//通过名字访问</script>
945、checkbox检查框功能:实施对一个具有复选框中元素的控制。属性:name:设定提交信息时的信息名称。Value:用以设定出现在窗口中对应HTML文档中Value的信息。Checked:该属性指明框的状态true/false.defauitchecked:默认状态方法:click()该方法使得框的某一个项被选中。事件:onclick:当框的选被选中时,产生该事件。956、radio无线按钮功能:实施对一个具单选功能的无线按钮控制。属性:name:设定提交信息时的信息名称,对应HTML文档中的radio的name相同value:用以设定出现在窗口中对应HTML文档中Value的信息,对应HTML文档中的radio的name。length:单选按钮中的按钮数目。defalechecked:默认按钮。checked:指明选中还是没有选中。index:选中的按钮的位置。方法:chick():选定一个按钮。事件:onclick:单击按钮时,产生该事件。
967、hidden:隐藏功能:实施对一个具有不显示文字并能输入字符的区域元素的控制。属性:name:设定提交信息时的信息名称,对应HTML文档的hidden中的Name。Value:用以设定出现在窗口中对应HTML文档中Value的信息,对应HTML文档hidden中的value。defaleitvalue:默认值978、Password口令功能:实施对具有口令输入的元素的控制。属性:Name:设定提交信息时的信息名称,对应HTML文档中password中的name。Value:用以设定出现在窗口中对应HTML文档中Value的信息,对应HTML文档中password中的Value。defaultvalu:默认值方法select():加亮输入口令域。blur():使这丢失passward输入焦点。focus():获得password输入焦点。
989、submit提交元素功能:实施对一个具有提交功能按钮的控制。属性:name:设定提交信息时的信息名称,对应HTML文档中submit。Value:用以设定出现在窗口中对应HTML文档中Value的信息,对应HTML文档中value。方法click()相当于按下submit按钮。事件:onclick()当按下该按钮时,产生该事件。99三、范例
test8_1.htm<html><head><ScriptLanguage="JavaScript">//原来的颜色document.bgColor="blue";document.vlinkColor="white";document.linkColor="yellow";document.alinkcolor="red";//动态改变颜色functionchangecolor(){document.bgColor="red";document.vlinkColor="blue";document.linkColor="green";document.alinkcolor="blue";}</script></HEAD><bodybgColor="White"><Ahref="test8_2.htm">调用动态按钮文档</a><form><Inputtype="button"Value="red"onClick="changecolor()"></form></BODY></HTML>100动态按钮程序。test8_2.htm<HTML><HEAD></HEAD><palign="center">
</p><divalign="center"><center><tableborder="0"cellspacing="0"cellpadding="0"><tr><tdwidth="100%"><formname="form2"onSubmit="null"><p><inputtype="submit"name="banner"VALUE="Submit"onClick="alert('Youhavetoputan\'action=[url]\'ontheformtag!!')"><br><scriptlanguage="JavaScript">varid,pause=0,position=0;functionbanner(){//variablesdeclarationvari,k,msg="这里输入你要的内容";//increasemsgk=(30/msg.length)+1;for(i=0;i<=k;i++)msg+=""+msg;//showittothewindowdocument.form2.banner.value=msg.substring(position,position-30);//setnewpositionif(position++==msg.length)position=0;//repeatatenteredspeedid=setTimeout("banner()",60);}//end-->banner();</script></p></form></td></tr></table></center></div><p>
</p><BODY><Ahref="test8_1.htm">返回</a></BODY></HTML>1014.3JSP注释隐藏注释HTML注释Java注释102隐藏注释隐藏注释也是JSP的标准注释,写在JSP程序中,在发布网页时完全被忽略,不发给客户,当希望隐藏JSP程序的注释时是很有用的。其语法格式为:<%--comment--%>,comment为想要添加的文本注释。103HTML注释HTML注释在发布网页时可以在浏览器源文件窗口中可以看到,并且在这种注释中可以使用JSP的表达式,其语法格式为:<!--comment[<%=expression%>]-->,其中comment可以是文字说明,expression为JSP表达式。104Java注释在JSP程序中,也可以遵循Java语言本身的注释规则对代码进行注释,这样的注释和隐藏注释相似,在发布网页被完全忽略,在浏览器的源文件窗口中看不到这种注释。其语法格式为:<%/*comment*/%>,comment为要添加的注释文本。1054.4变量、方法的声明变量、方法的声明和表达式表达式106变量、方法的声明和表达式JSP中的声明可以用来定义一个或多个合法的变量(包括普通变量和类变量)和方法,并不输出任何的文本到输出流去。在声明元素中声明的变量和方法将在JSP页面初始化时被初始化。JSP声明的语法格式为:<%!declaration;[declaration;]...%>,其中declaration为声明的变量、方法的名称和内容。在声明变量变量和方法时,需要注意以下几点:声明必须以";"结尾。可以直接使用在<%@page%>中被包含进来的已经声明的变量和方法,不需要对它们重新进行声明。一个声明仅在一个页面中有效。如果想每个页面都用到一些声明,最好把它们写成一个单独的文件,然后用<%@include%>或<jsp:include>元素包含进来。107表达式SP中表达式可以将某个计算结果转换成一个字符串并且直接使用在输出网页上。包含一个符合JSP语法的表达式的语法格式为:<%=expression%>。JSP的表达式中没有分号,除非在加引号的字符串部分才使用分号。1084.5JSP指令include指令Page指令taglib指令109include指令在JSP中用include指令包含一个静态的文件,同时解析这个文件中的JSP语句,使用jsp的include指令有助于实现jsp页面的模块化。其语法格式为:<%@includefile=“filename”%>,其中filename指被包含的文件的名称。<%@include%>指令将会在JSP编译时插入一个包含文本或代码的文件,当使用<%@include%>指令时,这个包含的过程是静态的。静态的包含是指这个被包含的文件将会被插入到JSP文件中去,这个包含的文件可以是JSP文件、HTML文件、文本文件。如果包含的是JSP文件,这个包含的JSP文件中的代码将会被执行。110Page指令Page指令用来定义JSP文件中的全局属性,它描述了与页面相关的一些信息,其作用域为它所在的JSP文件页面和其包含的文件,但是<%@page%>指令不能作用于动态的包含文件,例如<jsp:include>。Page指令的语法格式为:<%@page[language="java"][extends="package.class"][import="{package.class|package.*},..."][session="true|false"][buffer="none|8kb|sizekb"][autoFlush="true|false"][isThreadSafe="true|false"][info="text"][errorPage="relativeURL"][contentType="mimeType[;charset=characterSet]"|"text/html;charset=ISO-8859-1"][isErrorPage="true|false"]%>
无论把<%@page%>指令放在JSP的文件的哪个地方,它的作用范围都是整个JSP页面。111taglib指令taglib指令用来定义一个标签库以及其自定义标签的前缀。其语法格式为:<%@tagliburi="tagLibraryURI"prefix="tagPrefix"%>其中,属性uri(UniformResourceIdentifier,统一资源标识符)用来唯一的确定标签库的路径,并告诉JSP引擎在编译JSP程序时如何处理指定标签库中的标签,属性prefix定义了一个指示使用此标签库的前缀。1124.6JSP动作(Action)语法<jsp:include>动作<jsp:useBean>动作<jsp:setProperty>动作<jsp:getProperty>动作<jsp:forward>动作<jsp:plugin>113<jsp:include>动作<jsp:include>动作用来把指定文件插入正在生成的页面。其语法如下:<jsp:includepage=“relativeURL”flush=“true”/><jsp:include>动作允许包含静态文件和动态文件,这两种包含文件的结果是不同的。如果文件仅是静态文件,那么这种包含仅仅是把包含文件的内容加到jsp文件中去,这个文件不会被JSP编译器执行;如果这个文件动态的,那么这个被包含文件也会被JSP编译器执行。114<jsp:useBean>动作<jsp:useBean>动作用来装载一个将在JSP页面中使用的JavaBean。这个功能非常有用,因为它既可以发挥Java组件重用的优势,同时也避免了损失JSP区别于Servlet的方便性。其语法格式为:<jsp:useBeanid="beanInstanceName"scope="page|request|session|application"{class="package.class"|type="package.class"|class="package.class"type="package.class"|beanName="{package.class|<%=expression%>}"type="package.class“}{/>|>otherelements</jsp:useBean>}<jsp:useBean>元素的主体通常包含有<jsp:setProperty>元素,用于设置Bean的属性值。正如上面所说的,<jsp:useBean>的主体仅仅只有在<jsp:useBean>示例Bean时才会被执行,如果这个Bean已经存在,<jsp:useBean>能够定位它,那么主体中的内容将不会起作用,但你可以在<jsp:useBean>元素外用<jsp:setProperty>元素设定JavaBean的属性。115<jsp:setProperty>动作获得Bean实例之后,可以利用<jsp:setProperty>动作设置、修改Bean中的属性值。其语法格式如下:<jsp:setPropertyname="beanInstanceName"{property="*"|property="propertyName"[param="parameterName"]|property="propertyName"value="{string|<%=expression%>}"}/><jsp:setProperty>元素使用Bean给定的setter方法,在Bean中设置一个或多个属性值。在使用这个元素之前必须使用<jsp:useBean>声明此Bean,因为<jsp:useBean>和<jsp:setProperty>是联系在一起的,同时它们使用的Bean实例的名字也应当相匹配。116<jsp:getProperty>动作<jsp:getProperty>动作用来提取指定Bean属性的值,转换成字符串,然后输出。其语法格式为:<jsp:getPropertyname="beanInstanceName"property="propertyName"/><jsp:getProperty>元素可以获取Bean的属性值,并可以将其使用或显示在JSP页面中。在使用<jsp:getProperty>之前,必须用<jsp:useBean>创建它。117<jsp:forward>动作<jsp:forward>用于引导客户端的请求到另一个页面或者是另一个Servlet去。其语法格式为:<jsp:forwardpage={"relativeURL"|"<%=expression%>"}/><jsp:forward>动作可以包含一个或几个<jsp:param>子动作,用于向要引导进入的页面传递参数。需要注意,当<jsp:forward>动作发生的时候,如果已经有文本被写入输出流而且页面没有设置缓冲,那么将抛出一个IllegalStateException的异常。118<jsp:plugin>在JSP处理这个动作的时候,将根据客户端浏览器的不同,JSP在执行以后将分别输出为OBJECT或EMBED这两个不同的HTML元素。其语法格式为:<jsp:plugintype="bean|applet"code="classFileName"codebase="classFileDirectoryName"[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"]>[<jsp:params>[<jsp:paramname="parameterName"value="{parameterValue|<%=expression%>}"/>]</jsp:params>][<jsp:fallback>textmessageforuser</jsp:fallback>]</jsp:plugin>1204.7JSP脚本JSP脚本即Scriptlet,也就是JSP中的代码部分,是java程序的一段代码,几乎可以使用任何java语法,它是在请求时期执行的,它可以使用jsp页面所定义的变量、方法、表达式或JavaBeans。脚本的语法格式为:<%scriptlet%>如果要在Scriptlet内部使用字符“%>”,必须写成“%\>”
121第六讲使用内部对象系统一、浏览器对象层次及其主要作用除了前面提到过的文档document对象外,Navigator浏览器中还提供了窗口(Window)对
象以及历史(History)和位置(Location)对象。浏览器对象(Navigator)
提供有关浏览器的信息窗口对象(Windows)Window对象处于对象层次的最顶端,它提供了处理Navigator窗口的方法和属性。位置对象(Location)Location对象提供了与当前打开的URL一起工作的方法和属性,它是一个静态的对象。历史对象(History)History对象提供了与历史清单有关的信息。文档对象(Document)document对象包含了与文档元素(elements)一起工作的对象,它将这些元素封装起来
供编程人员使用。122二、文档对象功能及其作用在Navigator浏览器中,document文档对象是核心是,同时也是最重要的。见图所示。
LinksAnchorFormMethodProp
链接对象锚对象窗体对象方法对象从图中可以看出,document对象的主要作用就是把这些基本的元素(如links,anchor等)包装起来,提供给编程人员使用。从另一个角度看,document对象中又是由属性和方法组成。1231、document中三个主要的对象在document中主要有:links,anchor,form等三个最重要的对象:(1)anchor锚对象:
anchor对象指的是<AName=...></A>标识在HTML源码中存在时产生的对象。它包含着文档中所有的anchors信息。(2)链接links对象
link对象指的是用<AHref=...></A>标记的连接一个超文本或超媒体的元素作为一个特定的URL。(3)窗体(Form)对象窗体对象是文档对象的一个元素,它含有多种格式的对象储存信息,使用它可以在JavaScript脚本中编写程序进行文字输入,并可以用来动态改变文档的行为。通过document.Forms[]数组来使得在同一个页面上可以有多个相同的窗体,使用forms[]数组要比使用窗体名字要方便得多。124例:下面就是一个使用窗体数组和窗体名字的例子。该程序使得两个窗体中的字段内容保持一致。
Test6_1.htm<Html><head></head><body><form><inputtype=textonChange="document.my.elements[0].value=this.value;"></form><formNAME="my"><inputtype=textonChange="document.forms[0].elements[0].value=this.value;"></form></body></html>1252、文档对象中的attribute属性
document对象中的attribute属性,主要用于在引用Href标识时,控制着有关颜色的格式和有关文档标题、文档原文件的URL以及文档最后更新的日期。这部分元素的主要含义如下:(1)链接颜色:alinkcolor
这个元素主要用于,当选取一个链接时,链接对象本身的颜色就按alinkcolor指定改变。(2)链接颜色:linkcolor
当用户使用<AHref=...>Textstring</A>链接后,Textstring的颜色就会按Linkcolor所指定的颜色更新。(3)浏览过后的颜色:VlinkColor该属性表示的是已被浏览存储为已浏
温馨提示
- 1. 本站所有资源如无特殊说明,都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
- 2. 本站的文档不包含任何第三方提供的附件图纸等,如果需要附件,请联系上传者。文件的所有权益归上传用户所有。
- 3. 本站RAR压缩包中若带图纸,网页内容里面会有图纸预览,若没有图纸预览就没有图纸。
- 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
- 5. 人人文库网仅提供信息存储空间,仅对用户上传内容的表现方式做保护处理,对用户上传分享的文档内容本身不做任何修改或编辑,并不能对任何下载内容负责。
- 6. 下载文件中如有侵权或不适当内容,请与我们联系,我们立即纠正。
- 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。
最新文档
- 《光电子学》课程教学大纲
- 《社会保障学》课程教学大纲
- 2024年低价别墅出卖合同范本
- 2024年出售安建回迁房合同范本
- 2024年承接墙安装工程合同范本
- 光学镜片加工培训
- 统编版五年级语文上册第三次月考综合测试卷(含答案)
- 冠脉支架术及护理
- 做幸福的教师培训
- 2024标准正规借款合同范文
- 光伏业务员合同协议书
- 大学生职业生涯规划书内容完整
- 出租车行业服务标准制定
- 办公室租赁合同德文版
- 职业中专学生感恩教育主题班会省公开课一等奖全国示范课微课金奖课件
- 八年级上册语文《富贵不能淫》文言文翻译、注释、古汉语知识及赏析
- 开放大学毕业自我鉴定5篇
- 高考日语宣讲课件【知识精讲精研】开学第一课课件
- 2024年安徽省皖能能源交易有限公司招聘笔试参考题库附带答案详解
- (2024年)知识产权全套课件(完整)
- 劳务派遣 投标方案(技术方案)
评论
0/150
提交评论