web前端开发技术储久良第三版第15章练习与实验答案

web前端开发技术储久良第三版答案整理(10-17章)

练习15
1.选择题
(1) C (2) D (3) A (4) B (5) A (6) D (7) A

2.填空题

(1) 事件处理代码。
(2) HTML属性的静态指定、JavaScript属性的动态绑定、特定对象的特定事件。
(3) Focus、OnFocus、Submit、OnSubmit。
(4) Click、Load

3.问答题

见教材。
实验15
1. 源代码 exp_15_1演示

<!-- exp_15_1.html 实验15-1 -->
<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
<html>
    <head>
        <title> 表单处理事件 </title>
        <style type="text/css">
            fieldset
            {
                margin:20px auto;
                background:#663399;
                width:300px;
                height:200px;
                padding:20px auto;
                color:white;
                text-align:center;
            }
            legend
            {
                color:white;
                font-size:24px;
                font-weight:bold;
                text-align:center;
            }
        </style>
        <script type="text/javascript">
            function checklogin()
            {
                var username=document.getElementById("myname").value;
                var pwd=document.getElementById("mypwd").value;
                if(username=="")  //两者中有一个为空
                {
                    alert("用户名不能为空!!");
                    document.getElementById("myname").focus();
                    return false;
                }
                else
                {
                    if(username.length<8||username.length>20)
                    {
                        alert("用户名太短,应在8~20个字符之间!!");
                        document.getElementById("myname").focus();
                        return false;
                    }
                }
                if (pwd=="")  //两者中有一个为空
                {
                    alert("密码不能为空!!");
                    document.getElementById("mypwd").focus();
                    return false;
                }
                else
                {
                    if(pwd.length<8||pwd.length>20)
                    { 
                        alert("密码太短,应在6~20个字符之间!!");
                        document.getElementById("mypwd").focus();
                        return false;
                    }
                }
                return true;
            }
        </script>
    </head>
    <body>
        <form name="loginform" method="post" action="loginindex.html" onsubmit="return checklogin()">
            <fieldset>
                <legend>用户登录</legend>
                <br><br>
                <label>用户名</label>
                <input type="text" name="" id="myname" ><br><br>
                <label>密&nbsp;&nbsp;码</label>
                <input type="password" name="" id="mypwd" ><br><br><br>
                <input type="submit" value="提交"><input type="reset">
            </fieldset>
        </form>
    </body>
</html>

2. 源代码 exp_15_2演示

<!-- exp_15_2.html -->
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>显示列表项的内容</title>                
<script type="text/javascript">                          
function disaplayItem(){
var strInfo=""  //存放显示信息
var indexvalue=myform.mysel.selectedIndex;
strInfo="教材名称:"+myform.mysel.options[indexvalue].text+"\n定价:";
strInfo+=myform.mysel.options[indexvalue].value;                             
alert(strInfo);
}
</script>    
</head>
<body>    
<h3>显示列表项的内容</h3>
<form name="myform" method="post" action="">
<select name="mysel"  size="5" onchange="disaplayItem()">
<option value="35元" selected>计算机组成原理
<option value="38元">数据结构
<option value="43元">计算机网络
<option value="40元">Java程序设计
<option value="28元">算法分析
</select>
</form> 
</body>
</html>
版权声明

弈心博客


首发 弈心博客,转载请附链接!

赞赏支持

感谢支持!


建站不易,感谢支持!

推荐阅读