实验一 Web客户端编程

最新推荐文章于 2023-02-14 19:48:51 发布

玳宸

最新推荐文章于 2023-02-14 19:48:51 发布

阅读量541

点赞数

分类专栏：课程作业

本文链接：https://blog.csdn.net/zeroheitao/article/details/108970021

版权

课程作业专栏收录该内容

15 篇文章 3 订阅

订阅专栏

一、实验目的：

使用HTML超文本标记语言制作简单页面，要求通过实验能够掌握HTML文件的基本结构和文档的创建、编辑及保存。
验证并掌握HTML超文本标记语言的文本、图像、超链接、表格、表单等标记的使用。
通过实验掌握层叠样式表CSS的创建及应用，掌握在网页中插入层叠样式表CSS的常用方法，掌握层叠样式表CSS的主要基本属性的使用。
通过实验了解JavaScript的编程规范及基本语法，能够分析JavaScript程序的功能，可以在网页制作中使用JavaScript程序。
通过实验了解Ajax的编程方法，掌握Ajax编程技巧。

二、实验环境：

Eclipse

三、实验内容：

(写出主要的内容)
1）请参考教材的第2-4章内容，认真阅读分发的源代码，并根据教材上的提示，完成源代码中没有实现的功能。
2）开发一个用户注册界面，要求：用户名基于Ajax检测是否重复，年龄需用JavaScript检查格式是否正确。

编写用户注册页面步骤：
1.先写好整体的DIV框架

<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户注册表单验证代码</title>
    <link href="login.css" rel="stylesheet" />
    <script language='javascript' src="login.js"></script>
</head>

<body>
    <div class='body_main'>
        <!-- start main content -->
        <div class='index_box' style='margin-top:20px;'>
            <div class='box_title'>
                <div class='text_content'>
                    <h1>用户注册表单验证代码</h1>
                </div>
            </div>
            <div class='box_main'>
                <div id="register" class="register">
                    <!-- <form id="form" action="http://sc.chinaz.com/" method="post" onSubmit="return check();"> -->
                    <div id="form_submit" class="form_submit">
                        <div class="fieldset">
                            <!-- 用户名 -->
                            <div class="field-group">
                                <label class="required title">用户名</label>
                                <span class="control-group" id="name_input">
                                   <div class="input_add_long_background">
                                      <input class="register_input" type="text" id="name" name="name" maxLength="11" value="" >
                                    </div>
                               </span>
                                <label class="tips">请输入您的用户名，3~16位小写字母或数字组成</label>
                            </div>
                            <!-- 年龄 -->
                            <div class="field-group">
                                <label class="required title">年龄</label>
                                <span class="control-group" id="age_input">
                                    <div class="input_add_long_background">          
                                      <input class="register_input" type="text" id="age" name="age" maxLength="11" value="" >
                                   </div>
                               </span>
                                <label class="tips">仅用于注册使用</label>
                            </div>
                            <!-- 电话号码 -->
                            <div class="field-group">
                                <label class="required title">手机号码</label>
                                <span class="control-group" id="mobile_input">
                                  <div class="input_add_long_background">
                                    <input class="register_input" type="text" id="mobile" name="mobile" maxLength="11" value="" >
                                  </div>
                                </span>
                                <label class="tips">仅用于发送服务开通与到期提醒以及紧急故障方便联系到您，绝对保密</label>
                            </div>
                            <!-- 邮箱 -->
                            <div class="field-group">
                                <label class="required title">邮箱</label>
                                <span class="control-group" id="email_input">
                                  <div class="input_add_long_background">
                                     <input class="register_input" type="text" id="email" name="email" maxLength="50" value="" >
                                   </div>
                               </span>
                                <label class="tips">请输入您常用的邮箱</label>
                            </div>
                            <!-- 设置密码 -->
                            <div class="field-group">
                                <label class="required title">设置密码</label>
                                <span class="control-group" id="password1_input">
                                   <div class="input_add_long_background">
                                     <input class="register_input" type="password" id="password" name="password" maxLength="20" value="" />
                                  </div>
                                </span>
                                <label class="tips">请使用6~20个英文字母（区分大小写）、符号或数字</label>
                            </div>
                        </div>
                    </div>
                    <div id="div_submit" class="div_submit">
                        <div class='div_submit_button'>
                            <input id="submit" type="submit" value="注册" class='button_button disabled'>
                        </div>
                    </div>
                </div>
            </div>
            <div class='box_bottom'></div>
        </div>
    </div>

</body>
 
</html>

2.将写好的框架进行CSS美化

body {
    margin: 0;
    padding: 0;
    background: url("../images/body_bg.png") repeat 0 0 #F2F2F2;
    width: 100%;
    height: 166px;
    color: #333333;
    font: 12px/18px "tahoma", "Microsoft YaHei", "arial", "SimHei", "SimSun";
}

input.button_button {
    background: url('../images/buttom.png') no-repeat;
    margin: 0;
    width: 106px;
    height: 35px;
    border: 0;
    font-size: 15px;
    font-weight: 600;
    color: #FFFFFF;
    text-shadow: 0 -1px 0 #535353;
    padding: 0 0 3px 0;
    text-align: center;
    font-weight: bold;
    line-height: 33px;
    text-indent: 20px;
}


/*index start*/

.body_main {
    margin: 0 auto;
    width: 992px;
}

.index_box .box_title {
    background: url('../images/box_top.png') no-repeat scroll center top transparent;
    width: 991px;
    height: 80px;
    padding: 0;
}

.index_box .box_title .text_content {
    text-align: center;
    padding: 20px 0 10px 0;
}

.index_box .box_title .text_content h1 {
    font-weight: normal;
}

.index_box .box_main {
    border: solid #D0D0D0;
    background: #ffffff;
    border-width: 0 1px 0 1px;
    width: 988px;
    ;
    min-height: 50px;
    overflow: hidden ;
}

.index_box .box_bottom {
    background: url('../images/box_bottom.png') no-repeat scroll center top transparent;
    width: 991px;
    height: 7px;
    padding: 0;
}


/*regist*/

.register {
    float: left;
    padding: 25px 50px;
}

.register .form_submit {
    float: left;
    border-bottom: 1px solid #bfbfbf;
    width: 888px;
}

.register .form_submit .fieldset {
    float: left;
}

.register .form_submit .fieldset .field-group {
    float: left;
    height: 55px;
}

.register .form_submit .fieldset .field-group .title {
    float: left;
    width: 120px;
    text-align: right;
    margin: 4px 0 0 0;
    font-size: 14px;
}

.register .form_submit .fieldset .field-group .control-group {
    float: left;
    width: 350px;
    margin: 0 10px;
}

.register .form_submit .fieldset .field-group .tips {
    float: left;
    width: 250px;
    color: #bfbfbf;
}

.wrong {
    float: left;
    width: 250px;
    color: red;
}

.register .div_submit {
    float: left;
    width: 875px;
    margin: 10px 5px;
}

.register .div_submit .div_submit_button {
    float: right;
}


/*end regist*/

.fieldset .input_add_background {
    background: url("../images/input.jpg") no-repeat scroll 100% 100% transparent;
    background-position: center;
    height: 30px;
    width: 157px;
    float: left;
    margin: 0 2px 0 0;
}

.fieldset .input_add_background input.register_input_ot {
    background-color: #f9f9f9;
    border: 0 none;
    color: #4F4F4F;
    font-size: 12px;
    height: 18px;
    outline: medium none;
    width: 145px;
    padding: 1px;
    margin: 5px;
}

.fieldset .input_add_long_background {
    background: url("../images/input_long.jpg") no-repeat scroll 100% 100% transparent;
    background-position: center;
    height: 30px;
    width: 286px;
    float: left;
    margin: 0 0 15px 0;
}

.fieldset .input_add_long_light_background {
    background: url("../images/input_long_light.jpg") no-repeat scroll 100% 100% transparent;
    background-position: center;
    height: 30px;
    width: 286px;
    float: left;
}

.fieldset .input_add_long_background input.register_input {
    background-color: #f9f9f9;
    border: 0 none;
    color: #4F4F4F;
    font-size: 12px;
    height: 18px;
    outline: medium none;
    width: 270px;
    padding: 1px;
    margin: 5px;
}

.fieldset .input_text {
    display: inline-block;
    position: absolute;
    vertical-align: top;
    margin: 6px 0 0 10px;
    z-index: 2;
    font-style: italic;
    color: #BFBFBF;
}

3.进行表单验证

window.onload = function() {
    var age = document.querySelector("#age");
    var name = document.querySelector("#name");
    var mobile = document.querySelector("#mobile");
    var email = document.querySelector("#email");
    var password = document.querySelector("#password");
    var submit = document.querySelector("#submit");
    var regname = /^[a-z0-9_-]{3,16}$/;
    var regage = /^[0-9]{1,3}$/;
    var regmobile = /^1([38][0-9]|4[579]|5[0-3,5-9]|6[6]|7[0135678]|9[89])\d{8}$/;
    var regemail = /^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/;
    var regpassword = /^[a-zA-Z0-9_-]{6,18}$/;
    name.onblur = function() {
        if (!regname.test(name.value)) {
            alert("请按要求输入3~16位小写字母或数字组成的用户名");
            // this.parent.sibling(".tips").style.color = red;
            // 
            // tips.className = ".wrong";
        }
        console.log(regname.test(name.value));
    }
    age.onblur = function() {
        if (!regage.test(age.value)) {
            alert("请输入正确的年龄");
            // tips.className = ".wrong";
        }
    }
    mobile.onblur = function() {
        if (!regmobile.test(mobile.value)) {
            alert("请输入正确的手机号");
            // tips.className = ".wrong";
        }
    }
    email.onblur = function() {
        if (!regemail.test(email.value)) {
            alert("请按格式输入常用的邮箱");
            // tips.className = ".wrong";
        }
    }
    password.onblur = function() {
        if (!regpassword.test(password.value)) {
            alert("请输入3~16位由字母或数字组成的密码");
            // tips.className = ".wrong";
        }
    }
    submit.onclick = function() {
        if (regname.test(name.value) & regage.test(age.value) & regmobile.test(mobile.value) & regemail.test(email.value) & regpassword.test(password.value)) {
            alert("注册成功");
            
        } else {
            alert("请重新检查信息");
        }
    }
}

现阶段效果图：
在这里插入图片描述

4.进行Tomcat安装及配置
链接：
5.ajax的实现
后续补充

四、思考并回答问题

（1）超文本标记语言的文档主要由哪些标记构成？缺少任何一部份会对文件产生什么影响？不带任何标记的文档又会怎样？

答：< html>< head>< body>< form>

（2）要想使浏览器中显示的文字分行排列，应使用何种标记处理？

答：用< table>< tr>< td>< th>

（3）HTML语言中表格、表单分别有什么作用？

答：表格是使显示规范，而表单用于提交数据

（4）层叠样式表CSS的主要作用是改变什么？

答：层叠样式表CSS主要用于改变数据的显示方式，不改变内容

（5）JavaScript语言和Java语言的主要区别有哪些？

答：使用变量不需要事先声明，变量没有类型的区别，java是面向对象的。JavaScript是基于对象的。

玳宸

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
打赏
0
评论
实验一 Web客户端编程

一、实验目的：使用HTML超文本标记语言制作简单页面，要求通过实验能够掌握HTML文件的基本结构和文档的创建、编辑及保存。验证并掌握HTML超文本标记语言的文本、图像、超链接、表格、表单等标记的使用。通过实验掌握层叠样式表CSS的创建及应用，掌握在网页中插入层叠样式表CSS的常用方法，掌握层叠样式表CSS的主要基本属性的使用。通过实验了解JavaScript的编程规范及基本语法，能够分析JavaScript程序的功能，可以在网页制作中使用JavaScript程序。通过实验了解Ajax的编程方法，掌
复制链接

扫一扫