实验1Web客户端编程

最新推荐文章于 2023-05-18 11:05:59 发布

uvyodoytl

最新推荐文章于 2023-05-18 11:05:59 发布

阅读量516

点赞数

分类专栏： javaweb

本文链接：https://blog.csdn.net/ctaloguesofivoy/article/details/109371554

版权

javaweb 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

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

二、实验环境：

IntelliJ IDEA

三、实验内容：
1）使用frameset标签，以及搭配使用DIV+CSS，设计并布局一个简单的页面。
2）在其中的一个页面里面，开发一个用户注册界面，要求：使用JavaScript检查格式是否正确。
代码：

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>XX论坛注册</title>
    <style type="text/css">
        body{
            front-family:Arial,Helvetica,sans-serif;
            front-size:12px;
            margin:0px auto;
            height:auto;
            width:800px;
            border:1px solid #006633;
        }
        #head{
            height:100px;
            width:800px;
            background-repeat:no-repeat;
            margin:0px 0px 3px 0px;
        }
        #navigator li{
            float:left;
        }
        #navigator li a{
            color:#000000;
            text-decoration:none;
            padding-top:4px;
            display:block;

            width:131px;
            height:22px;
            text-align:center;
            background-color:#CCCCFF;
            margin-left:2px;
        }
        #navigator li a:hover{
            background-color:#0066CC;
            margin-left:2px;
        }
        #content{
            height:auto;
            width:780px;
            line-height:1.5em;
            padding:10px;
        }
        #content p{
            front-size:16px;
            margin:10px;
        }
        #footer{
            height:50px;
            width:780px;
            line-height:2em;
            text-align:center;
            background-color:#CCCCFF;
            padding:10px;
        }
        *{
            margin:0px;
            padding:0px;
        }
    </style>
    <script type="text/javascript">
        function check(form){
            if(form.password.value.length==0){
                alert("Password is valid!");
                form.password.focus();
                return false;
            }
            if(form.password.value.length<6){
                alert("Password is small than 6 characters!");
                form.password.focus();
                return false;
            }
            var exp=/^[a-z0-9]+$/;
            if(!exp.test(form.password.value)){
                alert("Password contains illegal characters!");
                form.password.focus();
                return false;
            }
            alert("OK!");
            return true;
        }
    </script>
</head>
<body>
<div id="header"></div>
<div id="navigator">
    <ul id="navigator">
        <li><a href="#">Home</a></li>
        <li><a href="#">Forum</a></li>
        <li><a href="#">Help</a></li>
        <li><a href="#">Register</a></li>
        <li><a href="#">Log In</a></li></br></br>
    </ul>
</div>
<div id="content">
    <h3 align="left">REGISTER</h3>
    <tr>
        <td align="center">
            <form name="" action="demo01.html" onsubmit="return check(this)">
                User Name:<input type="text" name="user"value=""><br>
                Password:<input type="password" name="password"value=""><br>
                <input type="submit"value="Register"/>
                <input type="reset" value="Reset"/>
            </form>
        </td>
    </tr>
</div>
<div id="footer">
    <p>About|Ad|Customer Service|Management</p>
</div>
</body>
</html>

uvyodoytl

关注

0
点赞
踩
0

收藏

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

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

扫一扫