实验三 web前端技术应用.docx
- 文档编号:23089395
- 上传时间:2023-04-30
- 格式:DOCX
- 页数:17
- 大小:89.82KB
实验三 web前端技术应用.docx
《实验三 web前端技术应用.docx》由会员分享,可在线阅读,更多相关《实验三 web前端技术应用.docx(17页珍藏版)》请在冰豆网上搜索。
实验三web前端技术应用
实验三Web前端技术应用
一、实验目的:
1.进一步熟悉DreamweaverCS5的应用
2.进一步练习CSS的应用
3.进一步练习浏览器端动态脚本语言JavaScript的应用
4.学习正则表达式
二、实验时间:
2013.9.25
三、实验地点:
C2-101
四、实验内容:
(一)掌握以下三个知识点
知识点1:
静态页面用样式修饰
[实践后回答:
如何在HTML页面中使用CSS层叠样式表,即CSS的格式与应用形式有哪些?
HTML和CSS的注释方式是什么?
]
1.请完成“030059-03.pdf”文件中的CSS_1.html、CSS_2.html和CSS_3.html三个任务。
2.分析以下内容,找出错误之处。
图1(原图)
--将样式表login.css引入到HTML文件中-->
注意:
以下注册表单通过post方法提交给“check.jsp”文件处理!
用户名:
140px;height: 30;"class="ys"> 密 码: 140px;height: 30;"class="ys"> 确认密码: 140px;height: 30;"class="ys"> 性别: 职业: 可选项目为: 学生,军人,经理,自由人,默认选择“学生” 个人爱好: 个人说明: 15行,40列 图2(加入CSS后) login.css的内容如下: .ys{color: red} .td{font-size: 14pt;color: #3300CC} 知识点2: 使用JavaScrip在客户端进行数据验证 functioncheck() { if(form1.username.value.length<5||form1.username.value.length>20) { alert("姓名长度不符合要求"); returnfalse } } 注意: 以下注册表单通过post方法提交给“check.jsp”文件处理! 用户名: 密码: …… …… [思考后回答: JavaScrip代码可以放在HTML文件的何处? 以上代码的功能是什么? 使用JavaScrip进行数据验证有何优势? ] 知识点3: 在某表单中有以下内容: [思考后回答: label标签可用于所有的HTML标记中么? ] (二)4.9.1注册表单验证的实例——请注释 参考阅读: (三)4.9.2根据输入值自动计算的实例——请注释 (四)正则表达式的应用 学习: 验证数字: ^[0-9]*$ 验证n位的数字: ^\d{n}$ 验证至少n位数字: ^\d{n,}$ 验证m-n位的数字: ^\d{m,n}$ 验证零和非零开头的数字: ^(0|[1-9][0-9]*)$ 验证有两位小数的正实数: ^[0-9]+(.[0-9]{2})? $ 验证有1-3位小数的正实数: ^[0-9]+(.[0-9]{1,3})? $ 验证非零的正整数: ^\+? [1-9][0-9]*$ 验证非零的负整数: ^\-[1-9][0-9]*$ 验证非负整数(正整数+0)^\d+$ 验证非正整数(负整数+0)^((-\d+)|(0+))$ 验证长度为3的字符: ^.{3}$ 验证由26个英文字母组成的字符串: ^[A-Za-z]+$ 验证由26个大写英文字母组成的字符串: ^[A-Z]+$ 验证由26个小写英文字母组成的字符串: ^[a-z]+$ 验证由数字和26个英文字母组成的字符串: ^[A-Za-z0-9]+$ 验证由数字、26个英文字母或者下划线组成的字符串: ^\w+$ 验证用户密码: ^[a-zA-Z]\w{5,17}$正确格式为: 以字母开头,长度在6-18之间,只能包含字符、数字和下划线。 验证是否含有^%&',;=? $\"等字符: [^%&',;=? $\x22]+ 验证汉字: ^[\u4e00-\u9fa5],{0,}$ 验证Email地址: ^\w+[-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$ 验证InternetURL: ^http: //([\w-]+\.)+[\w-]+(/[\w-./? %&=]*)? $;^[a-zA-z]+: //(w+(-w+)*)(.(w+(-w+)*))*(? S*)? $ 验证电话号码: ^(\(\d{3,4}\)|\d{3,4}-)? \d{7,8}$: --正确格式为: XXXX-XXXXXXX,XXXX-XXXXXXXX,XXX-XXXXXXX,XXX-XXXXXXXX,XXXXXXX,XXXXXXXX。 验证身份证号(15位或18位数字): ^\d{15}|\d{}18$ 验证一年的12个月: ^(0? [1-9]|1[0-2])$正确格式为: “01”-“09”和“1”“12” 验证一个月的31天: ^((0? [1-9])|((1|2)[0-9])|30|31)$正确格式为: 01、09和1、31。 整数: ^-? \d+$ 非负浮点数(正浮点数+0): ^\d+(\.\d+)? $ 正浮点数^(([0-9]+\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\.[0-9]+)|([0-9]*[1-9][0-9]*))$ 非正浮点数(负浮点数+0)^((-\d+(\.\d+)? )|(0+(\.0+)? ))$ 负浮点数^(-(([0-9]+\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\.[0-9]+)|([0-9]*[1-9][0-9]*)))$ 浮点数^(-? \d+)(\.\d+)? 详细出处参考: 五、实验课后总结: 1、HTML几个需要注意的地方 2、Jquery是什么? 拓展阅读 (1)创建名称为“UserInfo.java”类文件,该文件的主要代码如下: packagecom; publicclassUserInfo{ privateStringusername=""; privateStringpassword=""; privateStringrepassword=""; privateStringrealname=""; privateStringsex=""; privateStringage=""; privateStringborn=""; privateStringaddress=""; privateStringintroduce=""; publicStringgetUsername(){ returnusername; } publicvoidsetUsername(Stringusername){ this.username=username; } publicStringgetPassword(){ returnpassword; } publicvoidsetPassword(Stringpassword){ this.password=password; } publicStringgetRepassword(){ returnrepassword; } publicvoidsetRepassword(Stringrepassword){ this.repassword=repassword; } publicStringgetRealname(){ returnrealname; } publicvoidsetRealname(Stringrealname){ this.realname=realname; } publicStringgetSex(){ returnsex; } publicvoidsetSex(Stringsex){ this.sex=sex; } publicStringgetAge(){ returnage; } publicvoidsetAge(Stringage){ this.age=age; } publicStringgetBorn(){ returnborn; } publicvoidsetBorn(Stringborn){ this.born=born; } publicStringgetAddress(){ returnaddress; } publicvoidsetAddress(Stringaddress){ this.address=address; } publicStringgetIntroduce(){ returnintroduce; } publicvoidsetIntroduce(Stringintroduce){ this.introduce=introduce; } } (2)用户注册页面的代码如下: <%@pagecontentType="text/html;charset=gb2312"language="java" import="java.sql.*"errorPage=""%>
functionuserCheck(){
if(document.form1.username.value==""){
window.alert("请输入用户名");
returnfalse;
}
if(document.form1.password.value==""){
window.alert("请输入用户密码");
returnfalse;
}
if(document.form1.repassword.value==""){
window.alert("请输入密码确认");
returnfalse;
}
if(document.form1.repassword.value!
=document.form1.password.value){
window.alert("您输入的两次密码并不相同");
returnfalse;
}
if(document.form1.realname.value==""){
window.alert("请输入用户真实姓名!
");
returnfalse;
}
if(document.form1.realname.value==""){
window.alert("请输入用户真实姓名!
");
returnfalse;
}
if(document.form1.age.value==""){
window.alert("请输入用户年龄!
");
returnfalse;
}
if(document.form1.born.value==""){
window.alert("请输入出生日期");
returnfalse;
}
if(document.form1.address.value==""){
window.alert("请输入地址");
returnfalse;
}
if(document.form1.introduce.value==""){
window.alert("请输入自我介绍");
returnfalse;
}
returntrue;
}
type="reset"name="Submit2"value="重置"> (3)显示用户注册信息的页面代码如下: <%@pagecontentType="text/html;charset=gb2312"language="java" import="java.sql.*"errorPage=""%>
<%request.setCharacterEncoding("gb2312");%>
useBeanid="userInfo"scope="request"class="com.UserInfo"/> setPropertyname="userInfo"property="*"/>用户名: <%=userInfo.getUsername()%>
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 实验三 web前端技术应用 实验 web 前端 技术 应用