资源描述
第2章JSP预备知识,HTML是学习JSP必须掌握的，因为JSP程序就是Java代码或者JSP标签，然后由JSP引擎翻译成Servlet，由Web容器编译执行。JavaScript实际上JSP知识体系中一个可选的知识模块。,2.1HTML快速入门2.2JavaScript技术,2.1HTML快速入门,HTML使Web获得奇迹般的发展有以下三个主要原因：首先是通过设计，HTML能普遍地访问所有计算机平台,从最强劲的UNIX系统到普遍流行的Windows和Macintosh个人计算机。第二是HTML容易使用，你不需要输入一系列复杂而深奥的计算机指令，只要使用一列标记来组成文本，使得创造Web页面变得相当简单。HTML的强劲访问能力推动了Web的流行，使数以万计的个人Web站点如雨后春笋般地涌现。,最后一点是HTML使你能在一个Web站点与另一个Web站点之间建立链接。当你用鼠标点到这些链接中的一个时(它可能是一个短语或是一幅图画)你就能轻易跳到其它Web站点上，进入到一个广阔而又在不断发展的互连的和交互的知识库中。,2.1.1HTML基本结构,一个HTML文件应具有下面的基本的结构：HTML文件开始文件头开始文件头内容文件头结束文件体开始文件体内容文件体结束HTML文件结束,2.1.2HTML常用标签,1.单标签“+字母”常用单标签：1)，换行标签，强制文本换行，不在行与行之间增加空行2)，水平线标签，成一条水平线,2.双标签格式：1）开始标签“+字母”2）结束标签“+/+字母”3）常用双标签简介,注：表示该标记属围堵标记，即需要关闭标记如。表示该标记属空标记，即不需要关闭标记。IE表示该标记只适用于InternetExplorer。NC表示该标记只适用于NetscapeCommunicator。反对表示该标记不为W3C所赞同，通常这标记是IE或NC自订，且己为众所支持，只是HTML标准中有其它同功能或更好的选择。弃用表示该标记己为W3C所弃用，是过时的标记，但HTML具向下兼容的特性，不用担心新浏览器不支援旧标记。新表示该标记是HTML4.0中新增的。,图2-17表单示例,20,2.1.4XML与XHTML,XML（ExtensibleMarkupLanguage）即可扩展标记语言，它与HTML一样，都是SGML(StandardGeneralizedMarkupLanguage，标准通用标记语言)。XML是Internet环境中跨平台的、依赖于内容的技术，是当前处理结构化文档信息的有力工具。XML是一种简单的数据存储语言，使用一系列简单的标签描述数据，而这些标签可以很方便的建立，虽然XML占用的空间比二进制数据要占用更多的空间，但XML极其简单并易于掌握和使用。XML是一种元标签语言，没有许多固定的标签，为Web开发人员提供了更多了灵活性。当使用HTML时，标签只是简单地表示内容的显示形式，而与表示的内容没有任何关联，为文档的进一步处理带来极大的不便。,1.XML,21,比如要表示个人简历，用HTML的表示方式如下（文件名resume.html）：,姓名性别出生日期专业张三男1991.8.12软件开发,22,上述html文件无法从标签、等得知其内容表示什么，如果用XML，相应的文档（文件名resume.xml）就可以写成如下形式：,张三男1991.8.12软件开发,这里，version规定了XML文档的版本，encoding规定了XML文档的编码类型，此处取值gb2312表示简体中文。对比两个例子，使用XML可以做到自定义标签，用标签表明内容的含义。这就为在网络上交流资料时用计算机处理文档提供了极大的方便，也增加了源文件的可读性。,23,resumedisplay:block;namedisplay:block;font-size:120%;sexdisplay:block;text-indent:2embirthdaydisplay:block;text-indent:2emmajordisplay:block;text-indent:2em建立文件resume.css后，在个人简历.xml文件的第一行后添加以下文字：,当然resume.xml能以表格形式运行的前提是必须自定义好形式，定义其显示形式的文件css文件。,另一种方式：定义其显示形式的文件如下（文件名resume.xsl，在xml文件的第二行引入了该xsl文件）：,姓名性别生日专业,25,XSL之于XML，就像CSS之于HTML。它是指可扩展样式表语言(ExtensibleStylesheetLanguage)，这是一种用于以可读格式呈现XML数据的语言。有了resume.xsl定义显示形式，文件resume.xml在浏览器中显示的形式和resume.xml形式相同（如图2-18所示），不过它给程序员提供了更大的灵活性，也更易于数据交换。,图2-18浏览xml文件,26,2.XHTML,可扩展超文本标记语言（eXtensibleHyperTextMarkupLanguage，XHTML），与超HTML类似，不过语法上更加严格。HTML语法要求比较松散，这样对网页编写者来说比较方便，但对于机器来说，语言的语法越松散，处理起来就越困难，对于传统的计算机来说，还有能力兼容松散语法，但对于许多其他设备，比如手机，难度就比较大。因此产生了由DTD定义规则，语法要求更加严格的XHTML，XHTML1.0在2000年1月26日成为W3C的推荐标准。和CSS（CascadingStyleSheets，层叠式样式表）结合后，XHTML能发挥真正的威力；这在实现样式和内容分离的同时，又能有机地组合网页代码，在另外的单独文件中，还可以混合各种XML应用。,27,XHTML与HTML的重要区别,1在XHTML中标记名称必须小写2在XHTML中属性名称必须小写3在XHTML中标记必须严格嵌套4在XHTML中标记必须封闭5在XHTML中即使是空元素的标记也必须封闭6在XHTML中属性值用双引号括起来7在XHTML中属性值必须使用完整形式,2.2JavaScript技术,JavaScript是由Netscape公司开发的一种网页的脚本编程语言，它支持客户端与服务器端的应用程序以及构件的开发。JavaScript是一种解释性的语言，它的基本结构形式与其他编程语言相似，需要先编译后执行。,什么是JavaScript,JavaScript是一种脚本语言提供用户交互动态更改内容数据验证,将JavaScript嵌入网页,可以将JavaScript语句插入HTML文档，方式如下：使用标签将语句嵌入文档将JavaScript源文件链接到HTML文档中,使用Script标签,JavaScript代码,document.write(欢迎来到JavaScript世界);尽情享受学习的快乐!,脚本代码,设置语言,使用外部JS文件,外部JavaScript文件可以链接到HTML文档中SCRIPT标签的SRC（源文件）属性可用于包括此外部文件,使用外部JS文件,JavaScript代码(test.htm),使用外部文件以上文本是通过访问外部JavaScript文件显示的,35,浏览器对象简介2-1,Window窗口对象,location地址对象,document文档对象,FORM表单对象,浏览器对象的分层结构,window.document.myform.text1,对象JavaScript的一个重要功能就是面向对象的功能，通过基于对象的程序设计，可以用更直观、模块化和可重复使用的方式进行程序开发。一组包含数据的属性和对属性中包含数据进行操作的方法，称为对象。比如要设定网页的背景颜色，所针对的对象就是document，所用的属性名是bgcolor，如document.bgcolor=blue，就是表示使背景的颜色为蓝色。,36,37,浏览器对象简介2-2,浏览器对象的分层结构,变量,变量名必须以字母或下划线（_）开头变量可以包含数字、从A至Z的大小写字母JavaScript区分大小写，即变量myVar、myVAR和myvar是不同的变量,声明变量,vara;“var”用于声明变量的关键字“a”变量名,同时声明和初始化变量vara=10;,a=10;,声明变量,声明多个变量varx,y,z=10;,赋值,声明变量,使用变量varx;x=prompt(淘宝网竟拍，请出一口价,1);document.write(拍卖价格+x+)/+用来连接多个字符串document.write(恭喜您，您以最高价拍卖成功！);alert(欢迎下次光临！);,定义变量,赋值,输出,prompt(“提示信息”,”默认值”)将弹出提示对话框，接受用户的输入。点击确定返回输入的字符串，点击取消反馈空字符串。,变量a、b和c只能在其各自的函数中被访问,变量的作用域,脚本,函数function1局部变量a,函数function2局部变量b,函数function3局部变量c,可由函数1、函数2和函数3访问,全局变量gg,全局变量不需要以var关键字进行声明，但局部变量则必须以此关键字来声明,常量,整型浮点型字符串型,和C语言一样，js也有转义字符，常用的就是：“n”,数据类型,varx=100;vary;varz;document.write(竞拍SONY数码相机600万像素+x+$起价);y=prompt(加多少银子？,1);z=x+y;alert(您最终的出价n+z+$);/”n”用于换行显示,Prompt函数返回输入的字符串,“+”号的用法-1,10020?bug,+字符串相连：100+”200”,200,varx=100;vary;varz;document.write(竞拍SONY数码相机600万像素+x+$起价);y=prompt(加多少银子？,1);z=x+parseFloat(y);alert(您最终的出价n+z+$);/”n”用于换行显示,parseFloat()函数将字符串转换为float数据parseInt()函数将字符串转换为int数据如果转换失败，返回NaN值(notanumber),“+”号的用法-2,运算符,运算符对一个或多个变量或值（操作数）进行运算，并返回一个新值根据所执行的运算，运算符可分为以下类别：算术运算符比较运算符逻辑运算符,运算符,算术运算符-1,实现步骤：1.使用DreamWeaver设计页面2.指定各个文本框的名称3.切换为代码视图，编写脚本代码4.浏览并调试,functioncalcu()varnumb1=document.calc.num1.value;varnumb2=document.calc.num2.value;vartotal=parseFloat(numb1)*parseFloat(numb2);document.calc.result.value=total;,计算总价并显示,添加单击事件，单击按钮时调用“calcu()”函数,算术运算符-2,获取表单中输入的数据：document.表单名.表单元素名.value,定义calcu()计算函数,实现两个数相乘的功能.定义函数的语法：function函数名(参数列表)/JavaScript语句；,比较运算符,比较运算符2-1,functioncalcu()varnumb1=document.calc.num1.value;varnumb2=document.calc.num2.value;vartotal=parseFloat(numb1)*parseFloat(numb2);document.calc.result.value=total;if(total500)alert(购买总价超过500n支付时将赠送超级Q币2枚！);.其他代码略，同上例,比较运算符,购买总价超过500，赠送超级Q币2枚！,运算符,逻辑运算符,functioncalcu()varnumb1=document.calc.num1.value;varnumb2=document.calc.num2.value;vartotal=parseFloat(numb1)*parseFloat(numb2);document.calc.result.value=total;if(total500).其他代码略，同上例,逻辑运算符,5001000之间，赠送超级Q币两枚；10002000之间，赠送IBM智能鼠标一只；2000以上，直接与贵宾台联系。,条件语句用于测试条件。,if(条件)JavaScript代码;,语法：,if语句2-1,如果要执行多个语句，必须将这些语句放在一对大括号()内。但如果只要执行一个语句，则可以省略大括号,functioncalcu()varnumb1=document.calc.num1.value;varnumb2=document.calc.num2.value;if(numb1!=).其他代码略，同上例,If语句2-2,如果输入框中的数据用户漏填了，出现NaN的bug为什么呢?,ifelse语句2-1,if(条件)/JavaScript代码;else/JavaScript代码;,语法：,functioncalcu()varnumb1=document.calc.num1.value;varnumb2=document.calc.num2.value;if(numb1!=),If-else语句2-2,提示没有填写购买数量或者竞拍价格?,if(条件1)if(条件2)/JavaScript代码;,语法：,嵌套if语句2-1,functioncalcu()varnumb1=document.calc.num1.value;varnumb2=document.calc.num2.value;if(numb1!=).,嵌套If语句2-2,购买数量无意中输入负数，出现bug怎么办?,switch语句2-1,switch(表达式)case常量1:JavaScript语句;break;case常量2:JavaScript语句;break;.default:JavaScript语句;,语法：,switch语句2-2,.varf=document.calc.pay.value;/支付方式代号vargrade;/折扣率vartotal=parseFloat(numb1)*parseFloat(numb2);switch(parseInt(f)case1:grade=0.6;/打6折优惠break;case2:.同理其他方式打7折、八折case4:grade=0.9;/打9折优惠break;default:alert(请重新选择支付方式！);return;varmoney=total*grade;/根据折扣率，计算实际总价document.calc.result.value=money;alert(您享受了+grade*10+折优惠！);.,银行转帐打6折电话支付打7折邮政汇款打8折Q币支付打9折,下拉列表框pay的选项和值,JavaScript核心语言对象,目标,使用数组使用循环语句控制应用程序创建自定义函数理解JavaScript对象使用String、Math和Date等对象,数组4-1,声明数组var数组名=newArray(数组大小);例：varemp=newArray(3)添加元素emp0=“AA;emp1=“BB;emp2=“CC;,emp,也可以声明数组并赋初值：例：varemp=newArray(“AA”，“BB”，“CC”)；,使用数组varemp=newArray(3);emp0=RyanDias;emp1=GrahamBrowne;emp2=DavidGreene;document.write(数组emp中的数据为:);document.write(emp0+);document.write(emp1+);document.write(emp2+);,数组4-2,数组4-3,常用属性length：返回数组中元素的个数常用方法,varemp=newArray(3);emp0=RyanDias;emp1=GrahamBrowne;emp2=DavidGreene;emp.sort();document.write(“排序结果是：);document.write(emp0+);document.write(emp1+);document.write(emp2+);,数组排序4-2,循环,for循环do-whilewhile,For循环演示document.write(打印金字塔直线);for(vari=0;i);,for循环例：vari;for(i=0;i=0,Date对象10-7,如何实现,获得当前日期和时间,获得小时，即当前是几点,判断上午、下午还是晚上,月份数字011，注意1,Date对象10-8,setTimeout的用法：setTimeout（“调用的函数”,”定时的时间”）例：varmyTimesetTimeout（”disptime()”,1000）;clearTimeout（myTime）;,本例的时间可以采用定时显示，使用定时器函数，每隔1秒调用disptime()函数显示时间,每隔1000毫秒调用函数disptime()执行,关闭定时器,Date对象10-8,varmyTime=setTimeout(disptime(),1000);设置定时器每隔1秒（1000毫秒），调用函数disptime()执行，刷新时钟显示,Date对象10-10,设置样式：无边框的文本框,Onload()事件，页面加载就调用函数：disptime（显示时间）,目标,理解事件处理程序的概念了解JavaScript中的常用事件掌握常用的浏览器对象：windowdocumenthistory,事件处理,事件是发生并得到处理的操作,事件：电话振铃,处理事件,JavaScript事件处理程序,JavaScript事件处理程序就是一组语句，在事件（如点击鼠标或移动鼠标等）发生时执行,事件,处理事件,事件处理程序的基本语法是：事件名=JavaScript代码或调用函数例如：表示鼠标按下时，将调用执行函数check()。,JavaScript事件,functionmyfun1()if(document.myform.card.value=请注意格式：10 xxxxxx)document.myform.card.value=;functionmyfun2()vara=document.myform.card.value;if(a.substr(0,2)!=10|isNaN(a)alert(格式错误，请重新输入);document.myform.card.focus();,onFocus和onBlur事件-1,文本框获得鼠标焦点时（onFocus）调用的函数：清空卡号文本框,文本框失去鼠标焦点时（onBlur）调用的函数：判断格式是否正确,focus()方法再次获得焦点，即鼠标光标回到卡号文本框,卡号：密码：,onFocus和onBlur事件-2,表单元素样式,添加事件处理,onMouseOver和onMouseDown事件,图片切换低价转让哈士奇弟弟移过来看看俺啊,添加事件处理：切换图片,onMouseOver=src=dog2.jpg表示本图片的图片名称替换为dog2.jpg。请注意：由于外面两端已有双引号，为区别起见，dog2.jpg改用为单引号括起来。,Window对象7-1,属性,Window对象7-2,方法,Window对象7-3,functionopenwindow()window.open(google.htm);functionclosewindow()window.close();,使用Open方法打开新窗口,使用Close方法关闭窗口,添加单击事件,因为window是最顶层的根，所以可以省略window.open(google.htm);可简写为：open(google.htm);close（）方法也是如此。,open（”打开窗口的url”，”窗口名”，”窗口特征”）窗口的特征如下，可以任意组合：height：窗口高度；width：窗口宽度；top：窗口距离屏幕上方的象素值；left：窗口距离屏幕左侧的象素值；toolbar：是否显示工具栏，yes为显示；menubar，scrollbars表示菜单栏和滚动栏。resizable：是否允许改变窗口大小，yes或1为允许location：是否显示地址栏，yes或1为允许status：是否显示状态栏内的信息，yes或1为允许；,Window对象7-4,我们需要预先制作好广告页面，假设为adv.htm，打开广告窗口的语句如下：open(“adv.htm”,“”,“toolbars=0,scrollbars=0,location=0,statusbars=0,menubars=0,resizable=0,width=650,height=150”);,functionopenwindow()open(adv.htm,toolbars=0,scrollbars=0,location=0,statusbars=0,menubars=0,resizable=0,width=650,height=150);看看和我一起打开的广告窗口,Window对象7-5,使用Open方法打开广告新窗口,添加页面加载事件,1.插入一个层Layer1，z-index=1；2.层中插入一幅图片。,3.定时器函数setTimeout（）的用法：setTimeout（“调用的函数名”，间隔的毫秒数）表示每隔多少毫秒，就循环调用某个函数来执行清除某个定时器：clearTimeout（）方法。例如：varmyclocksetTimeout（”move()”,500）;if()clearTimeout（myclock）;；,Window对象7-6,functionmove()document.getElementById(Layer1).style.left=Math.random()*500;document.getElementById(Layer1).style.top=Math.random()*500;setTimeout(move(),1000);随机漂浮的广告,Window对象7-7,定义层图片移动的函数move(),每隔1秒调用move()函数随机改变层的位置，从而实现随机漂浮的效果,getElementById(“ID名称”)方法：根据ID名称获取HTML元素，这里表示获取层对象Layer1。left和top表示层Layer1的左边距和上边距，设定为随机的值。,Document对象3-1,属性,Document对象3-2,方法,Document对象3-3,无标题文档functionchange(color)document.bgColor=color;移过来我变色给你看看！变红色|变蓝色|变黄色,利用document对象的bgColor属性改变背景色,添加鼠标悬停事件,History对象4-1,history对象方法,Back()方法相当于后退按钮forward()方法相当于前进按钮go(1)代表前进1页，等价于forward()方法；go(-1)代表后退1页，等价于back()方法；,Location对象4-2,Location对象属性,方法,History对象和Location对象4-3,下拉菜单menu1,History和Location对象4-4,functionjump()location.href=document.myform.menu1.value;.-请选择季节景色-春天美景夏天一色,根据用户的选择，修改跳转的网址,添加选项改变事件,处理表单和表单元素事件,目标,使用与以下各项关联的事件处理程序：文本框文本区域命令按钮复选框单选按钮组合框编写用于验证表单的JavaScript代码,事件处理程序和表单元素简介2-1,当事件发生时，将执行与之相关的JavaScript代码,当发生特定事件时，事件处理程序指定要执行哪些JavaScript代码,事件处理程序和表单元素简介2-2,当用户单击“注册”按钮时，将弹出一条消息。,functionbutton_click()alert(“请向本网站注册);,文本框对象,文本框元素用于在表单中输入字、词或一系列数字可以通过将HTML的INPUT标签中的type设置为“text”，以创建文本框元素,文本框对象事件处理程序,文本框对象,card,price,number,tot,myform,文本框对象,添加无边框样式,文本框对象-onChange事件处理程序,functionclearText()if(document.myform.card.value=输入您的会员帐号)document.myform.card.value=;functioncheck()vara=document.myform.card.value;if(a.substr(0,2)!=10|isNaN(a)alert(格式错误，请重新输入);document.myform.card.focus();document.myform.card.select();functioncompute()varprice=document.myform.price.value;varnumber=document.myform.number.value;document.myform.tot.value=price*number;,onFocus事件调用的函数clearText（）清空帐号文本框中的内容,onBlur事件调用的函数check（）检查输入的帐号是否是“10”打头，并且是数字,onChange事件调用的函数compute()用来计算总价,文本框对象,.帐号：.单价：￥.数量：个总价：￥.,帐号文本框添加onFocus和onBlur焦点事件,价格只读属性,数量文本框添加onChange事件,命令按钮对象,命令按钮对象是网页中最常用的元素之一,“按钮-事件处理程序,onSubmit事件处理代码：如果函数返回true，则向远程服务器提交表单；如果函数返回false，则取消提交。,命令按钮事件处理程序,userName,pass1,pass2,type=reset,type=submit,myform,命令按钮对象,functioncheck()varuserName=document.myform.userName.value;varpass1=document.myform.pass1.value;varpass2=document.myform.pass2.value;if(pass1=pass2)if(pass1.length!=0)document.write(恭喜您，注册成功！欢迎+userName+光临！);returntrue;elsealert(密码不能为空！n请输入密码);returnfalse;elsealert(确认码必须和输入的密码相同！);returnfalse;,onSubmit事件调用的函数：输入数据检查,如果输入格式正确，返回true，提交表单信息；如果格式错误，返回false，取消提交，提醒用户重填,复选框对象,当用户需要在选项列表中选择多项时，可以使用复选框对象要创建复选框对象，请使用标签,请选择您的爱好电影电影,复选框-事件处理程序,复选框-事件处理程序,checkbox1,checkbox2,checkbox3,设置复选框的值,checkbox4,myform,复选框-事件处理程序,functionbuy()vars=;if(document.myform.checkbox1.checked=true)/如果被选中s=s+document.myform.checkbox1.value+“n”;/累计选中的商品if(document.myform.checkbox2.checked=true)s=s+document.myform.checkbox2.value+n;if(document.myform.checkbox3.checked=true)s=s+document.myform.checkbox3.value+n;if(document.myform.checkbox4.checked=true)s=s+document.myform.checkbox4.value+n;/if(confirm(您定购了以下物品，确定吗？：n+s)=true)document.write(您定购了以下物品:+s+);,单击”成交“按钮调用的函数：检查每个复选框的选中情况，累计用户选中的商品,是为了原样显示字符串中的换行”n”格式,onClick=buy()“,复选框-事件处理程序,functionbuy()vars=;for(vari=0;i+s+);/其他代码略/其他代码略,2.使用数组和for循环大大简化代码,1.修改每个复选框的名称都为mybox，使这4个复选框构成一个数组mybox,单选按钮对象,当用户只需要从选项列表中选择一个选项时，可以使用单选按钮对象要创建单选按钮对象，请使用标签,男女,单选按钮-事件和属性,单选按钮-事件处理程序,为了保证单选，两个单选按钮的名称都为myradio，组成了myradio数组,单选按钮事件处理程序,functionbuy()vars=;for(vari=0;i+s+);elseif(confirm(您准备卖出下物品，确定吗？：n+s)=true)document.write(您卖出了以下物品:+s+);,根据用户是买家还是卖家，弹出不同的确认信息框,判断是否选中第一个单选按钮(买家),下拉列表框,-请选择开户帐号的城市-北京市上海市重庆市天津市四川省山东省湖北省,下拉列表框-事件和属性,options0,options1,selectedIndex属性：表示被选中的索引号：3,value属性：被选中选项的值,下拉列表框-事件处理程序,下拉列表框-事件处理程序,userName,myselect,mycity,myform,下拉列表框-事件处理程序,functionmyfun1()vard=document.myform.myselect.selectedIndex;if(d=1|d=2|d=3|d=4)/北京、上海、重庆、天津document.myform.city.value=document.myform.myselect.optionsd.text;functionmyfun2()varuserName=document.myform.userName.value;varprovince=document.myform.myselect.value;varcity=document.myform.city.value;document.write();document.write(您的注册信息如下：);document.write();document.write(姓名：+userName);document.write(帐号开户省份：+province);document.write(帐号开户城市：+city);,.,下拉列表框onChange事件调用的函数：判断选择的省份是否是直辖市,单击”快速注册“图片时调用的函数myfun2()，显示注册信息,表单验证2-1,JavaScript最常见的用法之一就是验证表单对于检查用户输入是否存在错误和是否疏漏了必选项，JavaScript是一种十分便捷的方法,表单验证2-2,functionvalidate()varf=document.reg_form;if(f.uname.value=)alert(请输入姓名);f.uname.focus();returnfalse;if(f.gender0.checked=false,检查姓名,检查性别,检查密码,表单验证2-2,q=f.email.value.indexOf();if(q=-1)alert(请输入有效的电子邮件地址);f.email.focus();returnfalse;if(f.age.value99|isNaN(f.age.value)alert(请输入有效的年龄！);f.age.focus();returnfalse;,检查邮件地址,检查年龄,【例2-16】验证表单（formtest.html）。,JavaScript验证表单字段请填入个人信息：员工号：（员工号必须输入四位数字）必填，四位数字,146,姓名：（姓名必须输入两到三位汉字）必填，两到三位汉字邮件：（请输入正确格式的邮件）必填,147,费用：（请输入合法的费用格式，如1.23）,148,!-/提交前检查functioncheck(vform)/遍历表单中每个表单域for(vari=0;i,150,该例子依然是表单验证，在表单每个项中设置validChar属性来记录此文本框中允许输入的字符的正则表达式，设置isRequired属性来记录该项是否为必须的，这些都需要在JavaScript代码中判断，请大家认真阅读程序以及注释。例如表单项“员工号”中，validChar=d4表示员工号必须输入4位数字，isRequired=true表示该项必须输入。更多常用正则表达式详见表2-5。网页浏览结果如图2-21所示。,图2-21表单验证,151,另外，该程序中，一旦表单项内容出错，则在其后出现红色提示文字，提示性红色文字是否显示通过CSS文件来设置，相应的文件保存为Style.css，文件内容如下。,.feedbackShowvisibility:visible;.feedbackHidevisibility:hidden;,152,表2-5常用正则表达式举例,153,2.3小结,HTML和JavaScript这两项技术是学习JSP的基础，希望大家对其能够有所了解和掌握。其中HTML更是写好JSP程序的最基础和不可或缺的技术，读者必须能够熟练地制作HTML静态网页，而不仅仅局限于本书介绍内容。而JavaScript作为客户端的脚本语言，在实际项目中的应用也比较多，不过读者没必要记住JavaScript语法的每个细节，能够做到基本读懂就行，在实际需要时可以有目标的在网上查找相关资料。,154,
展开阅读全文