JSP网页基础知识.ppt

《JSP网页基础知识.ppt》由会员分享，可在线阅读，更多相关《JSP网页基础知识.ppt（154页珍藏版）》请在三一办公上搜索。

1、第2章 JSP预备知识,HTML是学习JSP必须掌握的，因为JSP程序就是Java代码或者JSP标签，然后由JSP引擎翻译成Servlet，由Web容器编译执行。JavaScript实际上JSP 知识体系中一个可选的知识模块。,2.1 HTML快速入门2.2 JavaScript技术,2.1 HTML快速入门,HTML使Web获得奇迹般的发展有以下三个主要原因：首先是通过设计，HTML能普遍地访问所有计算机平台,从最强劲的UNIX系统到普遍流行的Windows和Macintosh个人计算机。第二是HTML容易使用，你不需要输入一系列复杂而深奥的计算机指令，只要使用一列标记来组成文本，使得创造W

2、eb页面变得相当简单。HTML的强劲访问能力推动了Web的流行，使数以万计的个人Web站点如雨后春笋般地涌现。,最后一点是HTML使你能在一个Web站点与另一个Web站点之间建立链接。当你用鼠标点到这些链接中的一个时(它可能是一个短语或是一幅图画)你就能轻易跳到其它Web站点上，进入到一个广阔而又在不断发展的互连的和交互的知识库中。,2.1.1 HTML基本结构,一个HTML文件应具有下面的基本的结构：HTML文件开始 文件头开始 文件头内容 文件头结束 文件体开始 文件体内容 文件体结束 HTML文件结束,2.1.2 HTML常用标签,1.单标签“+字母”常用单标签：1)，换行标签，强制文本

3、换行，不在行与行之间增加空行 2)，水平线标签，成一条水平线,2.双标签格式：1）开始标签“+字母”2）结束标签“+/+字母”3）常用双标签简介,注：表示该标记属围堵标记，即需要关闭标记如。表示该标记属空标记，即不需要关闭标记。IE 表示该标记只适用于 Internet Explorer。NC 表示该标记只适用于 Netscape Communicator。反对 表示该标记不为 W3C 所赞同，通常这标记是 IE 或 NC 自订，且己为众所支 持，只是 HTML 标准中有其它同功能或更好的选择。弃用 表示该标记己为 W3C 所弃用，是过时的标记，但 HTML 具向下兼容的特 性，不用担心新浏览

4、器不支援旧标记。新 表示该标记是 HTML 4.0 中新增的。,图2-17 表单示例,20,2.1.4 XML与XHTML,XML（Extensible Markup Language）即可扩展标记语言，它与HTML一样，都是SGML(Standard Generalized Markup Language，标准通用标记语言)。XML是Internet环境中跨平台的、依赖于内容的技术，是当前处理结构化文档信息的有力工具。XML是一种简单的数据存储语言，使用一系列简单的标签描述数据，而这些标签可以很方便的建立，虽然XML占用的空间比二进制数据要占用更多的空间，但XML极其简单并易于掌握和使用。X

5、ML是一种元标签语言，没有许多固定的标签，为Web开发人员提供了更多了灵活性。当使用HTML时，标签只是简单地表示内容的显示形式，而与表示的内容没有任何关联，为文档的进一步处理带来极大的不便。,1.XML,21,比如要表示个人简历，用HTML的表示方式如下（文件名resume.html）：,姓名性别 出生日期专业 张三男1991.8.12软件开发,22,上述html文件无法从标签、等得知其内容表示什么，如果用XML，相应的文档（文件名resume.xml）就可以写成如下形式：,张三男1991.8.12软件开发,这里，version规定了XML文档的版本，encoding规定了XML文档的编码类

6、型，此处取值gb2312表示简体中文。对比两个例子，使用XML可以做到自定义标签，用标签表明内容的含义。这就为在网络上交流资料时用计算机处理文档提供了极大的方便，也增加了源文件的可读性。,23,resume display:block;name display:block;font-size:120%;sex display:block;text-indent:2embirthday display:block;text-indent:2emmajor display:block;text-indent:2em建立文件resume.css后，在个人简历.xml文件的第一行后添加以下文字：,当然

7、resume.xml能以表格形式运行的前提是必须自定义好形式，定义其显示形式的文件css文件。,另一种方式：定义其显示形式的文件如下（文件名resume.xsl，在xml文件的第二行引入了该xsl文件）：,姓名性别生日专业,25,XSL之于XML，就像 CSS 之于 HTML。它是指可扩展样式表语言(Extensible Stylesheet Language)，这是一种用于以可读格式呈现 XML 数据的语言。有了resume.xsl定义显示形式，文件resume.xml在浏览器中显示的形式和resume.xml形式相同（如图2-18所示），不过它给程序员提供了更大的灵活性，也更易于数据交换。

8、,图2-18 浏览xml文件,26,2.XHTML,可扩展超文本标记语言（eXtensible HyperText Markup Language，XHTML），与超HTML类似，不过语法上更加严格。HTML语法要求比较松散，这样对网页编写者来说比较方便，但对于机器来说，语言的语法越松散，处理起来就越困难，对于传统的计算机来说，还有能力兼容松散语法，但对于许多其他设备，比如手机，难度就比较大。因此产生了由DTD定义规则，语法要求更加严格的XHTML，XHTML 1.0在2000年1月26日成为W3C的推荐标准。和CSS（Cascading Style Sheets，层叠式样式表）结合后，XHT

9、ML能发挥真正的威力；这在实现样式和内容分离的同时，又能有机地组合网页代码，在另外的单独文件中，还可以混合各种XML应用。,27,XHTML与HTML的重要区别,1在XHTML中标记名称必须小写 2在XHTML中属性名称必须小写3在XHTML中标记必须严格嵌套4在XHTML中标记必须封闭5在XHTML中即使是空元素的标记也必须封闭 6在XHTML中属性值用双引号括起来7在XHTML中属性值必须使用完整形式,2.2 JavaScript技术,JavaScript是由Netscape公司开发的一种网页的脚本编程语言，它支持客户端与服务器端的应用程序以及构件的开发。JavaScript是一种解释性的

10、语言，它的基本结构形式与其他编程语言相似，需要先编译后执行。,什么是JavaScript,JavaScript 是一种脚本语言提供用户交互 动态更改内容 数据验证,将JavaScript嵌入网页,可以将 JavaScript 语句插入 HTML 文档，方式 如下：使用 标签将语句嵌入文档将 JavaScript 源文件链接到 HTML 文档中,使用 Script 标签,JavaScript 代码,document.write(欢迎来到 JavaScript 世界);尽情享受学习的快乐!,脚本代码,设置语言,使用外部 JS 文件,外部 JavaScript 文件可以链接到 HTML 文档中SCR

11、IPT 标签的 SRC（源文件）属性可用于包括此外部文件,使用外部 JS 文件,JavaScript 代码(test.htm),使用外部文件以上文本是通过访问外部 JavaScript 文件显示的,35,浏览器对象简介 2-1,Window 窗口对象,location地址对象,document文档对象,FORM表单对象,浏览器对象的分层结构,window.document.myform.text1,对象JavaScript的一个重要功能就是面向对象的功能，通过基于对象的程序设计，可以用更直观、模块化和可重复使用的方式进行程序开发。一组包含数据的属性和对属性中包含数据进行操作的方法，称为对象。比

12、如要设定网页的背景颜色，所针对的对象就是document，所用的属性名是bgcolor，如document.bgcolor=blue，就是表示使背景的颜色为蓝色。,36,37,浏览器对象简介 2-2,浏览器对象的分层结构,变量,变量名必须以字母或下划线（_）开头变量可以包含数字、从 A 至 Z 的大小写字母JavaScript 区分大小写，即变量 myVar、myVAR 和 myvar 是不同的变量,声明变量,var a;“var”用于声明变量的关键字“a”变量名,同时声明和初始化变量var a=10;,a=10;,声明变量,声明多个变量var x,y,z=10;,赋值,声明变量,使用变量va

13、r x;x=prompt(淘宝网竟拍，请出一口价,1);document.write(拍卖价格+x+)/+用来连接多个字符串document.write(恭喜您，您以最高价拍卖成功！);alert(欢迎下次光临！);,定义变量,赋 值,输 出,prompt(“提示信息”,”默认值”)将弹出提示对话框，接受用户的输入。点击确定返回输入的字符串，点击取消反馈空字符串。,变量 a、b 和 c 只能在其各自的函数中被访问,变量的作用域,脚本,函数function1局部变量a,函数function2局部变量b,函数function3局部变量c,可由函数 1、函数 2 和函数 3 访问,全局变量 gg,全

14、局变量不需要以 var 关键字进行声明，但局部变量则必须以此关键字来声明,常量,整型浮点型字符串型,和C语言一样，js也有转义字符，常用的就是：“n”,数据类型,var x=100;var y;var z;document.write(竞拍SONY数码相机 600万像素+x+$起价);y=prompt(加多少银子？,1);z=x+y;alert(您最终的出价n+z+$);/”n”用于换行显示,Prompt函数返回输入的字符串,“+”号的用法-1,10020?bug,+字符串相连：100+”200”,200,var x=100;var y;var z;document.write(竞拍SONY数

15、码相机 600万像素+x+$起价);y=prompt(加多少银子？,1);z=x+parseFloat(y);alert(您最终的出价n+z+$);/”n”用于换行显示,parseFloat()函数将字符串转换为float数据 parseInt()函数将字符串转换为int数据如果转换失败，返回NaN值(not a number),“+”号的用法-2,运算符,运算符对一个或多个变量或值（操作数）进行运算，并返回一个新值根据所执行的运算，运算符可分为以下类别：算术运算符比较运算符逻辑运算符,运算符,算术运算符-1,实现步骤：1.使用DreamWeaver设计页面2.指定各个文本框的名称3.切换为代

16、码视图，编写脚本代码4.浏览并调试,function calcu()var numb1=document.calc.num1.value;var numb2=document.calc.num2.value;var total=parseFloat(numb1)*parseFloat(numb2);document.calc.result.value=total;,计算总价并显示,添加单击事件，单击按钮时调用“calcu()”函数,算术运算符-2,获取表单中输入的数据：document.表单名.表单元素名.value,定义calcu()计算函数,实现两个数相乘的功能.定义函数的语法：funct

17、ion 函数名(参数列表)/JavaScript语句；,比较运算符,比较运算符 2-1,function calcu()var numb1=document.calc.num1.value;var numb2=document.calc.num2.value;var total=parseFloat(numb1)*parseFloat(numb2);document.calc.result.value=total;if(total500)alert(购买总价超过500n支付时将赠送超级Q币2枚！);.其他代码略，同上例,比较运算符,购买总价超过500，赠送超级Q币2枚！,运算符,逻辑运算符,f

18、unction calcu()var numb1=document.calc.num1.value;var numb2=document.calc.num2.value;var total=parseFloat(numb1)*parseFloat(numb2);document.calc.result.value=total;if(total500).其他代码略，同上例,逻辑运算符,5001000 之间，赠送超级Q币两枚；10002000之间，赠送IBM智能鼠标一只；2000以上，直接与贵宾台联系。,条件语句用于测试条件。,if(条件)JavaScript代码;,语法：,if 语句 2-1,如

19、果要执行多个语句，必须将这些语句放在一对大括号()内。但如果只要执行一个语句，则可以省略大括号,function calcu()var numb1=document.calc.num1.value;var numb2=document.calc.num2.value;if(numb1!=).其他代码略，同上例,If语句 2-2,如果输入框中的数据用户漏填了，出现NaN的 bug 为什么呢?,if else 语句 2-1,if(条件)/JavaScript代码;else/JavaScript代码;,语法：,function calcu()var numb1=document.calc.num1.

20、value;var numb2=document.calc.num2.value;if(numb1!=),If-else语句 2-2,提示没有填写购买数量或者竞拍价格?,if(条件1)if(条件2)/JavaScript代码;,语法：,嵌套 if 语句 2-1,function calcu()var numb1=document.calc.num1.value;var numb2=document.calc.num2.value;if(numb1!=).,嵌套If语句 2-2,购买数量无意中输入负数，出现 bug 怎么办?,switch 语句 2-1,switch(表达式)case 常量1:J

21、avaScript语句;break;case 常量2:JavaScript语句;break;.default:JavaScript语句;,语法：,switch语句 2-2,.var f=document.calc.pay.value;/支付方式代号 var grade;/折扣率 var total=parseFloat(numb1)*parseFloat(numb2);switch(parseInt(f)case 1:grade=0.6;/打6折优惠 break;case 2:.同理其他方式打7折、八折 case 4:grade=0.9;/打9折优惠 break;default:alert(请

22、重新选择支付方式！);return;var money=total*grade;/根据折扣率，计算实际总价 document.calc.result.value=money;alert(您享受了+grade*10+折优惠！);.,银行转帐 打6折电话支付 打7折邮政汇款 打8折Q币支付 打9折,下拉列表框pay的选项和值,JavaScript 核心语言对象,目标,使用数组使用循环语句控制应用程序创建自定义函数 理解 JavaScript 对象 使用 String、Math 和 Date 等对象,数组 4-1,声明数组 var 数组名=new Array(数组大小);例：var emp=new

23、Array(3)添加元素 emp0=“AA;emp1=“BB;emp2=“CC;,emp,也可以声明数组并赋初值：例：var emp=new Array(“AA”，“BB”，“CC”)；,使用数组var emp=new Array(3);emp0=Ryan Dias;emp1=Graham Browne;emp2=David Greene;document.write(数组emp中的数据为:);document.write(emp0+);document.write(emp1+);document.write(emp2+);,数组 4-2,数组 4-3,常用属性 length：返回数组中元素的

24、个数常用方法,var emp=new Array(3);emp0=Ryan Dias;emp1=Graham Browne;emp2=David Greene;emp.sort();document.write(“排序结果是：);document.write(emp0+);document.write(emp1+);document.write(emp2+);,数组排序 4-2,循环,for循环do-whilewhile,For 循环演示document.write(打印金字塔直线);for(var i=0;i);,for循环例：var i;for(i=0;i10;i+)/语句;,for 循环

25、,如何实现,当i=5 时，,.myfont font-size:150;color:#c99c96;font-family:Webdings/产生埃及图像的特殊字体 document.write(每个字符都对应一个漂亮的埃及图像);do var c=prompt(输入一个字符，输入N 或n停止,A);document.write(+c+);while(c!=N,while循环 while(循环条件)/语句；dowhile循环 do/语句；while(循环条件);,while和dowhile循环,先执行，后判断循环条件,输入一个字符，直到N停止，用哪个循环,JavaScript 函数,内置函数

26、eval 函数：用于计算字符串表达式的值 isNaN 函数：用于验证参数是否为 NaN（非数字）,自定义函数,定义函数：function 函数名(参数1,参数2，)语句;调用函数：函数调用一般和表单元素的事件一起使用，调用格式为：事件名“函数名”;,function sum(one,two)var result=one+two;return result;,表示单击此按钮时，调用函数sum()执行,函数的应用,num1,num2,result,定义函数,定义函数compute()，完成计算的功能。op参数代表运算符号,调用函数,第一个数 第二个数 计算结果,JavaScript 对象简介 2-

27、1,对象是属性和/方法的组合属性是对象所拥有的一组外观特征，一般为名词 方法是对象可以执行的功能，一般为动词 例如：汽车,对象：汽车,属性：型号：法拉利颜色：绿色,方法：前进、刹车、倒车,JavaScript 对象简介2-2,三类对象,浏览器对象,脚本对象,HTML 对象,浏览器窗口window文档 documenturl地址等,String字符串对象Date日期对象Math数学对象等,各种HTML标签:段落图片超链接等,String 对象 3-1,创建字符串有两种不同方法：使用 var 语句 var newstr=“这是我的字符串创建 String 对象var newstr=new Stri

28、ng(“这是我的字符串),String 对象 3-2,语法：indexOf(“查找的子字符串”，查找的起始位置)返回子字符串所在的位置，如果没找到，返回 1例如：var xvar y=“abcdefg”;x=y.indexOf(“c”,0);/返回结果为2，起始位置是0,function checkEmail()var e=document.myform.email.value;if(e.length=0)/检测长度是否为0，即是否为空 alert(电子邮件不能为空!);return;if(e.indexOf(,0)=-1)/检测是否包含”符号 alert(电子邮件格式不正确n必须包含符号！)

29、;return;if(e.indexOf(.,0)=-1)/检测是否包含”.”符号 alert(电子邮件格式不正确n必须包含.符号！);return;document.write(恭喜您！，注册成功！欢迎进入古城热线！);,检查电子邮件email是否包含“”和”.”,String 对象 3-3,返回结果-1表示没找到“”字符,Math 对象 2-1,Math.random()：产生01的随机小数Math.round()：四舍五入取整，如9.34 取整为9,自动刷新 document.write(2秒自动刷新，随机显示图片);var i=0;i=Math.round(Math.random()*

30、8+1);document.write();,Math 对象 2-2,假定随机产生的数字i=3，上述代码即为：显示第三幅图片（3.jpg）,如何实现,每隔2秒刷新网页,Math.round(Math.random()*8+1)产生1-9的数字,Date 对象10-1,Date 对象存储的日期为自 1970 年 1 月 1 日 00:00:00 以来的毫秒数,var 日期对象=new Date(年、月、日等参数),例：var mydate=new Date(“July 29,1998,10:30:00”)如果没有参数，表示当前日期和时间例：var today=new Date(),Date 对象

31、10-2,Data 方法的分组：,Date 对象10-3,用作 Date 方法的参数的整数：,Date 对象10-4,Set 方法：,Date 对象10-5,Get 方法：,Date 对象10-6,To 方法：,Parse 方法和 UTC 方法,var now=new Date();var hour=now.getHours();if(hour=0,Date对象 10-7,如何实现,获得当前日期和时间,获得小时，即当前是几点,判断上午、下午还是晚上,月份数字011，注意1,Date对象 10-8,setTimeout的用法：setTimeout（“调用的函数”,”定时的时间”）例：var my

32、TimesetTimeout（”disptime()”,1000）;clearTimeout（myTime）;,本例的时间可以采用定时显示，使用定时器函数，每隔1秒调用disptime()函数显示时间,每隔1000毫秒调用函数disptime()执行,关闭定时器,Date 对象10-8,var myTime=setTimeout(disptime(),1000);设置定时器每隔1秒（1000毫秒），调用函数disptime()执行，刷新时钟显示,Date对象 10-10,设置样式：无边框的文本框,Onload()事件，页面加载就调用函数：disptime（显示时间）,目标,理解事件处理程序的概

33、念 了解JavaScript 中的常用事件 掌握常用的浏览器对象：window documenthistory,事件处理,事件是发生并得到处理的操作,事件：电话振铃,处理事件,JavaScript 事件处理程序,JavaScript 事件处理程序就是一组语句，在事件（如点击鼠标或移动鼠标等）发生时执行,事件,处理事件,事件处理程序的基本语法是：事件名=JavaScript 代码或调用函数 例如：表示鼠标按下时，将调用执行函数check()。,JavaScript 事件,function myfun1()if(document.myform.card.value=请注意格式：10 xxxxxx)

34、document.myform.card.value=;function myfun2()var a=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,表单元

35、素样式,添加事件处理,onMouseOver和onMouseDown事件,图片切换 低价转让哈士奇弟弟 移过来看看俺啊,添加事件处理：切换图片,onMouseOver=src=dog2.jpg 表示本图片的图片名称替换为dog2.jpg。请注意：由于外面两端已有双引号，为区别起见，dog2.jpg改用为单引号括起来。,Window 对象 7-1,属性,Window 对象 7-2,方法,Window 对象 7-3,function openwindow()window.open(google.htm);function closewindow()window.close();,使用 Open 方

36、法打开新窗口,使用 Close 方法关闭窗口,添加单击事件,因为window是最顶层的根，所以可以省略window.open(google.htm);可简写为：open(google.htm);close（）方法也是如此。,open（”打开窗口的url”，”窗口名”，”窗口特征”）窗口的特征如下，可以任意组合：height：窗口高度；width：窗口宽度；top：窗口距离屏幕上方的象素值；left：窗口距离屏幕左侧的象素值；toolbar：是否显示工具栏，yes为显示；menubar，scrollbars 表示菜单栏和滚动栏。resizable：是否允许改变窗口大小，yes或1为允许 loca

37、tion：是否显示地址栏，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”);,function openwindow()open(adv.htm,toolbars=0,scrollbars=0,location=0,statusbars=0,me

38、nubars=0,resizable=0,width=650,height=150);看看和我一起打开的广告窗口,Window 对象 7-5,使用 Open 方法打开广告新窗口,添加页面加载事件,1.插入一个层Layer1，z-index=1；2.层中插入一幅图片。,3.定时器函数setTimeout（）的用法：setTimeout（“调用的函数名”，间隔的毫秒数）表示每隔多少毫秒，就循环调用某个函数来执行清除某个定时器：clearTimeout（）方法。例如：var myclocksetTimeout（”move()”,500）;if()clearTimeout（myclock）;；,Win

39、dow 对象 7-6,function move()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

40、。left和top表示层Layer1的左边距和上边距，设定为随机的值。,Document 对象 3-1,属性,Document 对象 3-2,方法,Document 对象 3-3,无标题文档function change(color)document.bgColor=color;移过来我变色给你看看！变红色|变蓝色|变黄色,利用document对象的bgColor属性改变背景色,添加鼠标悬停事件,History对象 4-1,history 对象 方法,Back()方法相当于后退按钮forward()方法相当于前进按钮go(1)代表前进1页，等价于forward()方法；go(-1)代表后退1页

41、，等价于back()方法；,Location对象 4-2,Location 对象 属性,方法,History 对象和 Location 对象 4-3,下拉菜单menu1,History 和 Location 对象 4-4,function jump()location.href=document.myform.menu1.value;.-请选择季节景色-春天美景 夏天一色,根据用户的选择，修改跳转的网址,添加选项改变事件,处理表单和表单元素事件,目标,使用与以下各项关联的事件处理程序：文本框 文本区域 命令按钮 复选框 单选按钮 组合框 编写用于验证表单的 JavaScript 代码,事件处理

42、程序和表单元素简介 2-1,当事件发生时，将执行与之相关的 JavaScript 代码,当发生特定事件时，事件处理程序指定要执行哪些 JavaScript 代码,事件处理程序和表单元素简介 2-2,当用户单击“注册”按钮时，将弹出一条消息。,function button_click()alert(“请向本网站注册);,文本框对象,文本框元素用于在表单中输入字、词或一系列数字可以通过将 HTML 的 INPUT 标签中的 type 设置为“text”，以创建文本框元素,文本框对象 事件处理程序,文本框对象,card,price,number,tot,myform,文本框对象,添加无边框样式,文

43、本框对象-onChange 事件处理程序,function clearText()if(document.myform.card.value=输入您的会员帐号)document.myform.card.value=;function check()var a=document.myform.card.value;if(a.substr(0,2)!=10|isNaN(a)alert(格式错误，请重新输入);document.myform.card.focus();document.myform.card.select();function compute()var price=document.

44、myform.price.value;var number=document.myform.number.value;document.myform.tot.value=price*number;,onFocus事件调用的函数clearText（）清空帐号文本框中的内容,onBlur事件调用的函数check（）检查输入的帐号是否是“10”打头，并且是数字,onChange事件调用的函数compute()用来计算总价,文本框对象,.帐号：.单价：￥.数量：个总价：￥.,帐号文本框添加onFocus和onBlur焦点事件,价格只读属性,数量文本框添加onChange事件,命令按钮对象,命令按钮对象

45、是网页中最常用的元素之一,“按钮-事件处理程序,onSubmit事件处理代码：如果函数返回true，则向远程服务器提交表单；如果函数返回false，则取消提交。,命令按钮事件处理程序,userName,pass1,pass2,type=reset,type=submit,myform,命令按钮对象,function check()var userName=document.myform.userName.value;var pass1=document.myform.pass1.value;var pass2=document.myform.pass2.value;if(pass1=pass2

46、)if(pass1.length!=0)document.write(恭喜您，注册成功！欢迎+userName+光临！);return true;else alert(密码不能为空！n请输入密码);return false;else alert(确认码必须和输入的密码相同！);return false;,onSubmit事件调用的函数：输入数据检查,如果输入格式正确，返回true，提交表单信息；如果格式错误，返回false，取消提交，提醒用户重填,复选框对象,当用户需要在选项列表中选择多项时，可以使用复选框对象要创建复选框对象，请使用 标签,请选择您的爱好 电影 电影,复选框-事件处理程序,复

47、选框-事件处理程序,checkbox1,checkbox2,checkbox3,设置复选框的值,checkbox4,myform,复选框-事件处理程序,function buy()var s=;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.checkb

48、ox3.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()“,复选框-事件处理程序,function buy()va

49、r s=;for(var i=0;i+s+);/其他代码略/其他代码略,2.使用数组和for循环大大简化代码,1.修改每个复选框的名称都为mybox，使这4个复选框构成一个数组mybox,单选按钮对象,当用户只需要从选项列表中选择一个选项时，可以使用单选按钮对象要创建单选按钮对象，请使用 标签,男女,单选按钮-事件和属性,单选按钮-事件处理程序,为了保证单选，两个单选按钮的名称都为myradio，组成了myradio数组,单选按钮事件处理程序,function buy()var s=;for(var i=0;i+s+);else if(confirm(您准备卖出下物品，确定吗？：n+s)=tr

50、ue)document.write(您卖出了以下物品:+s+);,根据用户是买家还是卖家，弹出不同的确认信息框,判断是否选中第一个单选按钮(买家),下拉列表框,-请选择开户帐号的城市-北京市 上海市 重庆市 天津市 四川省 山东省 湖北省,下拉列表框-事件和属性,options0,options1,selectedIndex属性：表示被选中的索引号：3,value属性：被选中选项的值,下拉列表框-事件处理程序,下拉列表框-事件处理程序,userName,myselect,mycity,myform,下拉列表框-事件处理程序,function myfun1()var d=document.myf