2jsp软件界面原型设计

第2章软件界面原型设计Web应用程序设计课堂案例思考：软件原型设计的重要性；如何设计Web应用程序原型课堂案例界面原型在需求阶段是与用户交流的工具；在设计阶段是设计的依据Web应用的界面原型需要使用Html、JavaScript设计一个完整的网站Web应用软件原型设计基础HTMLCSSJavaScript1HTML表格的应用页面布局数据列表页面的设计表单及表单组件的应用输入页面的设计框架的应用Web应用主界面的设计1.1表格table、tr、td标记tableborder=0width=80%trtd内容/tdtd/td……/trtrtd内容/tdtd/td……/tr……/tabletr：行标注tdwidth=align=colspan=rowspan=：单元格标注eg.图书馆管理系统原型-图书信息列表、添加图书信息1.2表单及其组件Html表单formname=“表单名”action=“处理程序”method=“get/post”数据输入标记数据提交手段/formeg.图书馆管理系统原型-添加读者信息、添加管理员信息inputtype=标记文本框：inputtype=“text”name=value=size=密码框：inputtype=“password”name=value=size=单选按钮：一组单选按钮名称必须相同inputtype=“radio”name=“age”value=checkedinputtype=“radio”name=“age”value=复选框：一组复选框可以单独命名，也可同一命名方便处理inputtype=“checkbox”name=“ch”value=checkedinputtype=“checkbox”name=“ch”value=提交按钮：inputtype=“submit”value=复位按钮：inputtype=“reset”value=命令按钮：inputtype=“button”name=value=OnClick=隐藏域：inputtype=“hidden”name=value=列表框：select、option标记selectname=size=[multiple]optionvalue=[selected]列表显示项1/optionoptionvalue=[selected]列表显示项2/option……/selectmultiple：是否能多选selected：当前项是否被选中size：1相当于下拉组合框1.3框架和浮动窗口窗口框架framesetrows=行高列表“|cols=列宽列表frameborder=0|1border=nbordercolor=颜色…/frameset子窗口framesrc=url“name=本帧的名称……/frameeg.补充源码\02\frame\index.html浮动窗口iframename=“float“浮动窗口/iframeeg.补充源码\02\frame\iframe.html样式表的使用结构多个网页文件共享样式文件多个样式文件套用在一个网页文件上HTML文件1HTML文件NCSS样式文件HTMLCSS样式文件NCSS样式文件12样式表及其应用定义样式格式选择器{规则}选择器(Selector)规则(Rule)eg.补充源码\02\css\ex01_定义样式格式.html应用CSS样式的4种方式直接定义style属性在HTML文档内定义内部样式表嵌入式样式单外部(链接)样式单eg.补充源码\02\css\...3JavaScript脚本语言JavaScript脚本语言概述在JSP中引入JavaScriptJavaScript的数据类型与运算符JavaScript的流程控制语句函数的定义和调用事件JavaScript常用对象的应用3.1JavaScript脚本语言概述通常编写客户端的脚本程序，由Web浏览器解释执行编写在服务器端执行的脚本程序，在服务器端处理用户提交的信息并动态地向浏览器返回处理结果(Ajax技术)。3.2引入JavaScript1．在页面中直接嵌入JavaScriptscriptlanguage=javascript…/scripteg.图书馆管理系统原型\index.html2．链接外部JavaScriptscriptlanguage=javascriptsrc=javascript.js/scripteg.图书馆管理系统原型\后台管理的菜单管理页面3.3数据类型与运算符类型含义说明示例int数值整型整数，可以为正数、负数或017，80，0float浮点型浮点数，可以使用实数的普通形式或科学计数法表示3.14159.27，6.16e4string字符串类型字符串，是用单引号或双引号括起来的一个或多个字符'wgh'，平平淡淡才是真boolean布尔型只有true或false两个值true，falseobject对象类型null空类型没有任何值undefined未定义类型指变量被创建，但未赋值时所具有的值JavaStript有6种数据类型，如下表所示。变量varvariable;varvariable=11;JavaScript采用弱类型的形式，变量的类型将根据其变量赋值来确定。例如：varvarible=17;//数值型varstr=爱护地球;//字符型varcat;cat.age=1;cat.name=“小黄”;变量abstractcontinuefinallyinstanceofprivatethisbooleandefaultfloatintpublicthrowbreakdoforinterfacereturntypeofbytedoublefunctionlongshorttruecaseelsegotonativestaticvarcatchextendsimplementsnewsupervoidcharfalseimportnullswitchwhileclassfinalinpackagesynchronizedwith但是变量命名必须遵循以下规则：（2）不能使用JavaScript中的关键字。JavaScript的关键字如下表所示。（1）必须以字母或下划线开头，中间可以是数字、字母或下划线，但是不能有空格或加号、减号等符号。运算符运算符描述示例+加运算符1+6//返回值为7－减运算符5-2//返回值为3*乘运算符7*3//返回值为21/除运算符9/3//返回值为3%求模运算符6%4//返回值为2++自增运算符。该运算符有两种情况：i++（在使用i之后，使i的值加1）；++i（在使用i之前，先使i的值加1）i=1;j=i++//j的值为1，i的值为2i=1;j=++i//j的值为2，i的值为2--自减运算符。该运算符有两种情况：i--（在使用i之后，使i的值减1）；--i（在使用i之前，先使i的值减1）i=6;j=i--//j的值为6，i的值为5i=6;j=--i//j的值为5，i的值为5（1）算术运算符运算符（2）关系运算符（3）逻辑运算符运算符描述运算符描述运算符描述!逻辑非&&逻辑与||逻辑或（4）字符串运算符==、+、+=（5）赋值运算符=、+=、-=、*=、/=、、=、=、==运算符运算符描述运算符描述运算符描述&与运算符|或运算符^异或运算符左移带符号右移填0右移（6）位操作运算符（7）条件运算符操作数?结果1:结果23.4流程控制if条件判断语句for循环语句while循环语句do…while循环语句switch语句if条件判断语句if(条件表达式){语句序列1//条件满足时执行}else{语句序列2//条件不满足时执行}for循环语句for(循环变量赋初值;循环条件;循环变量增值){循环体}while循环语句while(条件表达式){循环体}do…while循环语句do{循环体}while(条件表达式);switch语句switch(expression){casejudgement1:statement1;break;casejudgement2:statement2;break;…default:defaultstatement;break;}expression：任意的表达式或变量judgement：任意的常数表达式3.5函数functionfunctionName([parameter1,parameter2,…]){statements[returnexpression]}函数名要符合命名规则参数和返回值不带类型3.6事件事件处理程序何时触发bluronblur元素或窗口本身失去焦点时触发changeonchange选中select元素中的选项或其他表单元素失去焦点时，并且在其获取焦点后内容发生过改变时触发clickonclick单击鼠标左键时触发focusonfocus任何元素或窗口本身获得焦点时触发keydownonkeydown键盘键被按下时触发，如果一直按着某键，则会不断触发；当返回false时，取消默认动作loadonload页面完全载入后，在window对象上触发；所有框架都载入后，在框架集上触发；img标记指定的图像完全载入后，在其上触发；或object标记指定的对象完全载入后，在其上触发selectonselect选中文本时触发submitonsubmit单击提交按钮时，在form上触发unloadonunload页面完全卸载后，在window对象上触发；或者所有框架都卸载后，在框架集上触发1．事件类型3.6事件2．分配事件处理程序（1）在JavaScript中分配事件处理程序imgsrc=images/download.GIFid=img_downloadscriptlanguage=javascriptvarimg=document.getElementById(img_download);img.onclick=function(){alert(单击了图片);}/script在页面中加入这段代码并运行，则当单击图片img_download时，将弹出“单击了下载图片”对话框。（2）在HTML中分配事件处理程序imgsrc=images/download.GIFonClick=alert('您单击了图片');在页面中加入上面的代码，并运行，则当单击图片img_download时，将弹出“您单击了图片”对话框。3.7常用对象属性/方法说明length用于返回String对象的长度split(separator,limit)用separator分隔符将字符串划分成子串并将其存储到数组中，如果指定了limit，则数组限定为limit给定的数，separator分隔符可以是多个字符或一个正则表达式，它不作为任何数组元素的一部分返回substr(start,length)返回字符串中从startIndex开始的length个字符的子字符串substring(from,to)返回以from开始、以to结束的子字符串replace(searchValue,replaceValue)将searchValue换成replaceValue并返回结果charAt(index)返回字符串对象中的指定索引号的字符组成的字符串，位置的有效值为0到字符串长度减1的数值；一个字符串的第一个字符的索引位置为0，第二个字符位于索引位置1，依次类推；当指定的索引位置超出有效范围时，charAt方法返回一个空字符串toLowerCase()返回一个字符串，该字符串中的所有字母都被转换为小写字母toUpperCase()