web第04章 输入.ppt

第4章 输入模块,,WEB系统开发与设计,2,主要内容,一、输入方式 二、常用表单元素 三、form元素 四、信息验证,WEB系统开发与设计,3,一、输入方式,输入方式 用户如何把信息提交给服务器 所有的Web应用均相同 可以采用如下的输入方式 （1）通过浏览器的地址栏（可以使用“？”） （2）通过超链接或者按钮 （3）通过表单提交,目录,WEB系统开发与设计,4,二、常用表单元素,1、单行文本框 2、密码框 3、单选按钮 4、复选框 5、下拉框 6、文本域 7、按钮 8、其他,WEB系统开发与设计,5,1、单行文本框,输入少量信息时使用，例如用户名等信息 基本格式 例如： 注册功能中，用户名的输入：,,用户名：,WEB系统开发与设计,6,2、密码框,输入密码时使用，显示“*”或者“.” 提交至服务器的并非“*”或者“.” 基本格式 例如： 注册功能中，用户输入的密码,,密 码：,WEB系统开发与设计,7,3、单选按钮,需要多选一的情况下使用 同组“name”相同，“value”不同 选中按钮的“value”信息值可传至服务器 注意value值与界面上显示的信息区分 需要默认，使用checked属性 基本格式 例如：,显示的信息,男 女,WEB系统开发与设计,8,4、复选框,与单选按钮相似，但复选框主要用于多个选择的情况 基本格式： 例如,显示的信息,运动 看电影 读书 听音乐,WEB系统开发与设计,9,对于复选框和单选按钮,注意： （1）同组复选框或者单选按钮，名字（name）必须相同。

（2）值必须指定，且值和显示的内容无关，和提交至服务器的信息有关 （3）选定哪些或者哪个内容，对应的值将被提交给服务器（点击“提交”按钮后）WEB系统开发与设计,10,5、下列框,可单选也可多选 基本格式,运动 显示的值1 显示的2 显示的3 …… , 浙江 江苏 安徽 北京 上海 ,WEB系统开发与设计,11,6、文本域,输入多行文本时使用 基本格式 例如：,默认值,默认值,表示文本区域每行最多20个字符（中文10个），无滚动条情况下显示8行WEB系统开发与设计,12,7、按钮,“提交”按钮 “重置”按钮 普通按钮,,,,WEB系统开发与设计,13,8、其他,图像域 文件域,目录,WEB系统开发与设计,14,三、form元素,需要提交到服务器的信息，都要放在form（表单）内 同个页面可以有多个表单，各自独立，点击的“提交”按钮在哪个表单中即提交该表单的信息 基本格式： action：指出提交给服务器哪个文件处理 method：提交的方式 get：少量信息时 post：信息量大时, 各种表单元素 ,目录,WEB系统开发与设计,15,四、信息验证,可以利用Javascript语言在客户端实现信息验证。

信息验证主要用于确保用户输入的信息合乎一些规范和要求，例如 输入的用户名和密码字符长度是不是符合要求 输入的日期格式是否正确 按钮组有没有进行选择等 通过信息验证后再将信息提交至服务器，可以确保用户输入的信息是有效的，此举可以提高总体效率WEB系统开发与设计,16,1、信息验证的基本过程：,点击提交,触发事件,调用事件处理程序,错误：返回警告 正确：什么都不做,其间调用各个处理方法,非空验证方法 字符串长度验证方法 日期验证方法 电子邮件验证方法 数字验证方法 ……,,WEB系统开发与设计,17,2、涉及的相关内容,Javascript语言 在网页中嵌入Javascript语言的方法：P52 函数：P52 事件和响应 事件：JavaScript中的事件 引用表单： 调用验证,WEB系统开发与设计,18,3、 JavaScript脚本语言概述,JavaScript是一种基于对象和事件驱动并具有安全性能的解释型脚本语言，在Web应用中得到了非常广泛的应用 它不但可以用于编写客户端的脚本程序，由Web浏览器解释执行，而且还可以编写在服务器端执行的脚本程序，在服务器端处理用户提交的信息并动态地向浏览器返回处理结果。

通常在JSP中应用JavaScript编写客户端脚本程序WEB系统开发与设计,19,（1）在JSP中引入JavaScript,有以下两种方法： 一种是在JSP页面中直接嵌入JavaScript 另一种是链接外部JavaScriptA、在页面中直接嵌入JavaScript, … ,WEB系统开发与设计,20,说明：在外部JS文件中，不需要将脚本代码用和标记括起来2）在JSP中引入JavaScript,B、链接外部JavaScript,使用情况： 脚本代码比较复杂； 同一段代码可以被多个页面所使用 放置这些脚本代码的文件的扩展名为.js在需要使用该代码的Web页面中链接该JavaScript文件即可语法格式如下：,,WEB系统开发与设计,21,（3） JavaScript的数据类型与运算符,（A）数据类型 （B）变量 （C）运算符,,WEB系统开发与设计,22,（A）数据类型,JavaScript有6种数据类型，如下表所示WEB系统开发与设计,23,（B）变量,在JavaScript中，可以使用命令var声明变量，语法格式如下：,var variable;,在声明变量的同时也可以对变量进行赋值：,var variable=11;,JavaScript采用弱类型的形式，在声明变量时，不需要指定变量的类型，而变量的类型将根据其变量赋值来确定。

例如：,var varible=17; //数值型 var str=“爱护地球“; //字符型,WEB系统开发与设计,24,（B）变量,但是变量命名必须遵循以下规则：,B、不能使用JavaScript中的关键字JavaScript的关键字如下表所示A、必须以字母或下划线开头，中间可以是数字、字母或下划线，但是不能有空格或加号、减号等符号注意：关键字同样不可用作函数名、对象名及自定义的方法名等WEB系统开发与设计,25,（C）运算符,在JavaScript中提供了算术运算符、关系运算符、逻辑运算符、字符串运算符、位操作运算符、赋值运算符和条件运算符等7种运算符下面进行详细介绍算术运算符等同于数学运算，即在程序中进行加、减、乘、除等运算在JavaScript中常用的算术运算符如下表所示1）算术运算符,WEB系统开发与设计,26,运算符,WEB系统开发与设计,27,运算符,关系运算符的基本操作过程是：首先对操作数进行比较，这个操作数可以是数字也可以是字符串，然后返回一个布尔值true或falseJavaScript支持的常用关系运算符与Java中的常用关系运算符相同2）关系运算符,（3）逻辑运算符,逻辑运算符返回一个布尔值，通常和比较运算符一起使用，用来表示复杂的比较运算，常用于if、while和for语句中。

JavaScript中常用的逻辑运算符如下表所示WEB系统开发与设计,28,运算符,（4）字符串运算符,字符串运算符是用于两个字符型数据之间的运算符，除了比较运算符外，还可以是+和+=运算符其中，+运算符用于连接两个字符串（例如，“World“+“Dream“），而+=运算符则连接两个字符串，并将结果赋给第一个字符串（例如，var a=“One“;a+=“Dream“;）5）赋值运算符,WEB系统开发与设计,29,运算符,（6）位操作运算符,位操作运算符用于对数值的位进行操作，如向左或向右移位等JavaScript中常用位操作运算符如下表所示最基本的赋值运算符是等于号“=”，用于对变量进行赋值，而其他运算符可以和赋值运算符“=”联合使用，构成组合赋值运算符JavaScript支持的常用赋值运算符与Java中的常用赋值运算符相同WEB系统开发与设计,30,运算符,条件运算符是JavaScript支持的一种特殊的3目运算符，同Java中的3目运算符类似，其语法格式如下：,（7）条件运算符,如果“操作数”的值为true，则整个表达式的结果为“结果1”，否则为“结果2”操作数?结果1:结果2,,WEB系统开发与设计,31,（4） JavaScript的流程控制语句,（1）if条件判断语句 （2）for循环语句 （3）while循环语句 （4）do…while循环语句 （5）switch语句,WEB系统开发与设计,32,if条件判断语句,对变量或表达式进行判定并根据判定结果进行相应的处理，可以使用if语句。

if语句的语法格式如下：,if(条件表达式){ 语句序列1 //条件满足时执行 }else{ 语句序列2 //条件不满足时执行 },执行上述if语句时，首先计算“条件表达式（任意的逻辑表达式）”的值，如果为true，就执行“语句序列1”，执行完毕后结束该if语句；否则执行“语句序列2”，执行后同样结束该if语句WEB系统开发与设计,33,for循环语句,for语句是JavaScript语言中应用比较广泛的条件语句通常for语句使用一个变量作为计数器来执行循环的次数，这个变量就称为循环变量for语句的语法格式如下：,for(循环变量赋初值;循环条件;循环变量增值){ 循环体 },循环变量赋初值：一条初始化语句，用来对循环变量进行初始化赋值 循环条件：一个包含比较运算符的表达式，用来限定循环变量的边限如果循环变量超过了该边限，则停止该循环语句的执行 循环变量增值：用来指定循环变量的步幅WEB系统开发与设计,34,for循环语句,for语句可以使用break语句来中止循环语句的执行break语句默认情况下是终止当前的循环语句WEB系统开发与设计,35,while循环语句,while循环语句是另一种基本的循环语句，其结构和for循环语句有些类似，但是while语句不包含循环变量的初始化及循环变量的步幅。

其语法格式如下：,while (条件表达式){ 循环体 },使用while语句时，必须先声明循环变量并且在循环体中指定循环变量的步幅，否则while语句将成为一个死循环WEB系统开发与设计,36,do…while循环语句,do…while循环语句和while循环语句非常相似，所不同的是它是在循环底部检测循环表达式，而不是像while循环语句那样在循环顶部进行检测这就保证了循环体至少被执行一次do…while语句的语法格式如下：,do{ 循环体 } while (条件表达式);,【例2-11】 分别利用for、while和do…while循环语句将数字7格式化为00007，并输出到页面上WEB系统开发与设计,37,switch语句,switch是典型的多路分支语句，其作用与嵌套使用if语句基本相同，但switch语句比if语句更具有可读性，而且switch语句允许在找不到一个匹配条件的情况下执行默认的一组语句switch语句的语法格式如下：,switch (expression){ case judgement1: statement1; break; case judgement2: statement2; break; … default: defaultstatement; break; },WEB系统开发与设计,38,switch语句,expression：任意的表达式或变量。

judgement：任意的常数表达式当expression的值与某个judgement的值相等时，就执行此case后的statement语句，如果expression的值与所有的judgement的值都不相等时，则执行default后面的defaultstatement语句 break：用于结束switch语句，从而使JavaScript只执行匹配的分支如果没有了break语句，则该switch语句的所有分支都将被执行，switch语句也就失去了使用的意义WEB系统开发与设计,39,（5）函数的定义和调用,在JavaScript中，函数可以分为定义和。