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

web前端开发技术储久良第三版答案整理(下:附录模拟试卷)_诗和远方_弈心博客

web前端开发技术储久良第三版答案整理(中:10-17章)_诗和远方_弈心博客

web前端开发技术储久良第三版答案整理(上:1-9章)_诗和远方_弈心博客

P168-第10章 练习与实验答案

练习12
1.选择题
(1)B (2)A (3)C (4)D (5)A
2.简答题
(1)略
(2) display: none让对象不显示,原来不存在。 display:block—作用是显示特定对象;visibility: visible—作用是让特定对象可视(说明原来就存在,只是不可视),对使用visibility: hidden : 可以让对象隐藏起来。
实验12
1、源代码:

exp_10_1演示

HTML文件

<!-- exp_10_1.html -->
<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>Web页面设计实例</title>
    <link href="exp_10_1.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
        <div id="Container">
          <div id="Header">
          <img src="Header.jpg">
          <h4>
        <span>首页</span>
          <span>|</span>
          <span>博客</span>
          <span>|</span>
          <span>设计</span>
          <span>|</span>
          <span>论坛</span>
          <span>|</span>
          <span>关于</span>
        </h4>
          </div>
          <div id="PageBody">
            <div id="SideBar">
             <ul>
                <li><a href="#">首页</a></li>
                  <li><a href="#">博客</a></li>
                <li><a href="#">设计</a></li>
                <li><a href="#">论坛</a></li>
                <li><a href="#">关于</a></li>
             </ul>
            </div>
            <div id="MainBody">
            <h3>欢度新春佳节</h3>            
<img src="huanduchunji.jpg" width="694" height="308" border="0" alt="">
            </div>
          </div>
          <div id="Footer">
          <p>Copyrights 2015-2020  Web前端开发工作室&copy; All rights reserved.  中国江苏</p>      
          </div>
        </div>
    </body>
</html>

CSS文件

/* exp_10_1.css */
/* 应用对象:edu_10_1.html*/

body { 
    font-family:Verdana; 
    font-size:16px; 
    margin:0;
    text-align:center;
}
h4{float:left;margin:45px auto;padding-left:50px;}
p{margin:2px;font-size:14px;
}
#Container {margin:0 auto; 
    width:900px;
}
#Header { 
    height:118px;  
    border-bottom:5px;
    background-color:rgb(230,230,230);
    border-bottom:5px solid #FFFFFF;   
}
#PageBody { 
    height:380px; 
    border-bottom:5px solid #FFFFFF;
}
#SideBar { 
    float:left; 
    width:200px; 
    height:380px; 
    background:#Dff100;
    text-align:center;
    padding:50px auto;    
    border-right:5px solid #FFFFFF;
}
#MainBody { 
    float:right; 
    width:695px; 
    height:380px; 
    background:#cff000;
}
#Footer { 
    height:60px; 
    background-color:rgb(230,230,230);
    text-align:center;
    font-family:"Courier New";
    font-size:12px;
    padding-top:10px;
}
#Header img{
    float:left;    
}
 span{margin-top:45px;width:50px;height:30px;font-size:20px;font-family:"华文新魏";padding:45px 10px; 
 vertical-align:middle;text-align:center;
 }

a{width:48px;height:24px;    
    font-size:20px;
    font-family:"华文新魏";    text-align:center;
}
ul{list-style-type:none;margin:0px;padding:35px;text-align:center;}
li{ width:50px;height:30px;
    font-size:20px;
    font-family:"华文新魏";    
    padding:10px 35px;
}
h3{text-align:center;color:red;font-size:24px;
background:#CFF000;padding:6px auto;}
a:link,a:visited,a:active{text-decoration:none;display:block; }
a:hover{border-bottom:2px solid #FF0000;background:#55A0FF;color:#FFFFFF;}

2.Exp_10_2.html exp_10_2演示

<!-- exp_10_2.html -->
<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
<title>DIV+CSS布局</title>
<style type="text/css">
*{font:24px/1.5em 黑体;margin:0 auto;padding:0px;}
#Container{
    width:1006px;
    margin:0 auto;/*设置整个容器在浏览器中水平居中*/   
}
#Header{
    height:120px;
    background:#093;
}
#logo{
    height:80px;
        background:#5f5;
        border-bottom:2px solid white;
}
#nav{
     height:40px;
    background:#3f5;
    border-bottom:2px solid white;
}
#Content{   
    width:100%;
    height:400px;
    background:#00EEFF;     
}
/*设置浮动,实现多列效果,div+Css布局中很重要的*/
#Content-left{
    height:400px;
    width:250px;  
    float:left;
    background:#66ff66;
    border-right:2px solid white;
}
#Content-center-left{
    height:400px;
    width:250px;   
    float:left;
    background:#77ff66;
    border-right:2px solid white;
}
#Content-center-right{
    height:400px;
    width:250px;
    float:left;
    background:#88ffDD;
    border-right:2px solid white;
}
#Content-right{
    height:400px;
    width:250px;   
    float:left;
    background:#99ff66;
}
#Footer{
    height:40px;
    background:#6FC;
    border-top:2px solid white;
   }
.Clear{
        clear:both;
        margin:0 auto;
        padding:0px;
}
</style>
</head> 
<body>
<div id="Container">
    <div id="Header">           
        <div id="logo">logo</div>
        <div id="nav">nav</div>
    </div>
    <div id="Content">
        <div id="Content-left">Content-left</div>
        <div id="Content-center-left">Content-center-left</div>
        <div id="Content-center-right">Content-center-right</div>
        <div id="Content-right">Content-right</div>
    </div>
    <div class="Clear"><!--如何你上面用到float,下面布局开始前最好清除一下。--></div>
    <div id="Footer">Footer</div>
</div>
</body>
</html>

P189-第11章 练习与实验答案

练习11
1.选择题
(1)B (2)D (3)D (4)B (5)D (6)B
2.填空题
(1)<table></table><tr></tr><th></th>
(2) rowspan 、3、 Colspan 、 5
(3) frame、rules
(4) cellspacing、cellpadding
3.简答题
答案略,见教材。
实验11
1、源代码: exp_11_1演示
------------------- exp_11_1.html -----------------

<!-- exp_11_1.html -->
<html>
    <head>
        <title> 表格实验 </title>
        <style type="text/css">
            table{border:10px  groove #ff0000;}
            td{border:1px solid black ;text-align:center;}
        </style>
    </head>
    <body>
        <table width=300 border="1" align=center >
        <tr>
            <td rowspan="2" ><b>A</b></td>
            <td colspan="2" height="100" ><b>B</b></td>
        <tr align="center">
            <td height="100"><b>E</b></td>
            <td rowspan="2"><b>C</b></td>
        <tr align=center>
            <td colspan="2" height="100"><b>D</b></td>
        </tr>
        </table>
    </body>
</html>

2、源代码: exp_11_2演示

<!-- exp_11_2.html -->
<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
        <title>div与表格应用实例——计算器布局</title>
        <style type="text/css">
            #wrap{
                width:410px;
                height:450px;
                background-color:rgb(230,230,130);
                z-index:0;
            }
            
            #result{            
                height:60px;
                width:390px;
                border:solid 1px;    
                z-index:1;
                position:absolute;
                top:50px;
                left:20px;
                background-color:white;
            }
            
            #op{            
                height:310px;
                width:390px;                
                z-index:1;
                position:absolute;
                top:115px;
                left:20px;
            }
            
            td{
                border:solid 1px black;
                width:58px;
                height:40px;
                margin:10px;  /*margin表示边距*/
                cursor:pointer;  /*设置鼠标指针变成手的形状*/
            }
        </style>
    </head>
    <body>
        <div id="wrap">
        <img src="casio.bmp"></img>
            <div id="result"></div>
            <div id="op">
                <table cellspacing="30" border="1">
                    <tr align="center">
                        <td>1</td>
                        <td>2</td>
                        <td>3</td>
                        <td>+</td>
                    </tr>    
                    <tr align="center">
                        <td>4</td>
                        <td>5</td>
                        <td>6</td>
                        <td>-</td>
                    </tr>    
                    <tr align="center">
                        <td>7</td>
                        <td>8</td>
                        <td>9</td>
                        <td>*</td>
                    </tr>    
                    <tr align="center">
                        <td>0</td>
                        <td>=</td>
                        <td>CE</td>
                        <td>/</td>
                    </tr>
                </table>
            </div>
        </div>
    </body>
</html>

P208-第12章 练习与实验答案

额,书找不到了。有需要12章答案的同学辛苦把题目拍照发我,我做一份。

P208-第13章 练习与实验答案

练习13
1.选择题
(1) D (2) C (3) B (4) C (5) A
2.填空题
(1)post、get
(2)浏览器、服务器
(3)<option>、name、size、multiple
(4)textarea、rows、cols
(5)reset、submit、button
(6)不相同、不相同;相同、不相同
(7)checked、selected
(8)fieldset、legend

实验13

1、源代码: exp_13_1演示

<!-- exp_13_1.html 实验13-1 -->
<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
        <title>登录页面</title>
        <style type="text/css">
            fieldset{width:300px;height:150px;border:1px double #0033ff;text-align:center;}
        </style>
    </head>
    <body>
        <form name="form1" method="post" action="">
            <fieldset>
                <legend>登录页面</legend>
                用户名:<input type="text" name="username"><br>
            密&nbsp;&nbsp;&nbsp;&nbsp;码:<input type="password" name="pwd"><br>
            类&nbsp;&nbsp;&nbsp;&nbsp;型:
                <input type="radio" name="r" value="r1">管理员
                <input type="radio" name="r" value="r2">普通用户<br>    
                <input type="checkbox" name="cb" value="cb1">记住密码
                <input type="checkbox" name="cb" value="cb2">自动登录<br>
             &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <input type="submit" name="submit" value="提交">
                &nbsp;&nbsp;&nbsp;
                <input type="reset" name="reset" value="重置">
            </fieldset>
        </form>
    </body>
</html> 

2、源代码: exp_13_2演示

<!-- exp_13_2.html 实验13-2 -->
<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
        <title>应聘页面</title>
    </head>
    <body>
        <form>
            <strong>希望工作地点:</strong>
            <select name="hangye" size=1>
                <option value="北京" selected>北京</option>
                <option value="上海">上海</option>
                <option value="广州">广州</option>
                <option value="西安">西安</option>
                <option value="杭州">杭州</option>
                <option value="南京">南京</option>
                <option value="重庆">重庆</option>
                <option value="天津">天津</option>
            </select>            
            <strong>月薪要求:</strong>
            <input type="text" size=10>
            <input type="checkbox">要求提供过度住房<br>
            <strong>请选择应聘行业:</strong><br>
            <select name="hangye" size=8 multiple>
                <option value="C1" selected>计算机软件</option>
                <option value="C2">计算机硬件</option>
                <option value="C3">计算机服务</option>
                <option value="C4">通信/电信/网络设备</option>
                <option value="C5">互联网/电子商务</option>
                <option value="C6">网络游戏</option>
                <option value="C7">电子技术/半导体/集成电路</option>
                <option value="C8">仪器仪表/工业自动化</option>
            </select>            
            <input type="submit" value="提交">
            <input type="reset" value="重置">
        </form>
    </body>
</html>

P317-第14章 练习与实验答案

练习14
1.选择题
(1) A (2) C (3) B (4) C (5) C (6) A (7) D
2.填空题
(1) <script type="text/javascript"></script>
(2) 告警框、确认框、提示框
(3) Infinity
(4) true
(5) 5、7、2
3.简答题
略。

实验14
1.代码 exp_14_1演示

<!-- exp_14_1.html 实验14-1 -->
<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
        <title>九九乘法表</title>
    </head>
    <body>
    <h4>九九乘法表</h4>
        <script type="text/javascript">
            var i,j;
            for(i=1;i<10;i++) {
                for(j=1;j<=i;j++) {
                    document.write(j);
                    document.write('*');
                    document.write(i);
                    document.write('=');
                    document.write(i*j);
                    document.write('&nbsp;');
                }
                document.write('<br/>');
            }
        </script>
    </body>
</html>

2.代码 exp_14_2演示

<!-- exp_14_2.html -->
<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">  
  <title>找出符合条件的数</title> 
  </head>
  <body>
       <h3>找出1000-9999之间能够被17和13同时整除的整数的个数及累加和</h3>
     <script type="text/javascript">
     <!--
             document.write("区间中符合条件的数有(输出格式:10个1行):<br>");
             var count=0;//定义符合条件的数的计数器,兼做分行变量
               for (var sum=0,i=1000;i<=9999 ;i++ )
               {
                      if (i%17==0 && i%13==0)
                      {
                             document.write(i+"  ");
                             count++;                               
                             if (count%10==0)
                             { 
                   document.write("<br>");
                             }                                
                             sum=sum+i;
                      }
               }
                 document.write("<br>区间中符合条件的数共有"+count+"个");
                 document.write("<br>区间中符合条件的数的累加和为"+sum);
     //-->
     </script>
  </body>
</html>

P336-第15章 练习与实验答案

练习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>

P380-第16章 练习与实验答案

练习16
1.选择题
(1) C (2) A (3) A (4) D (5) A (6) A (7) A (8) C (9) A (10) D (11) C
2.填空题
(1)length
(2)random()、PI
(3)true、false
(4)文档对象模型(Document Object Model)、元素节点、文本节点、属性节点
(5)getElementById()、getElementsByName()、getElementsByTagName()
(6) createElement()、removeChild()、appendChild()
(7) innerText()、innerHTML()
(8) window、history、location、screen、navigator, window
(9) confirm()、alert()、prompt()
(10) navigator
3.问答题
见教材。

实验16

  1. 代码 exp_16_1演示
<!-- exp_16_1.html  -->
<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">  
    <title>猜字游戏</title>
        <script type="text/javascript">
            var win_rate=0;        //赢率
            var play_times=0;    //总次数
            var wins=0;            //赢的次数
            var last_digits;    //上次数字串
            var last_win;       //上次是否赢?
            function playOnce()
            {//模拟玩一次数字机游戏
                    var i,digit;
                    play_times++;
                    last_digits="";
                    last_win=false;
                    for(i=0;i<3;i++)
                    {
                            digit = Math.floor(Math.random()*9)+1;
                            last_digits += digit;
                            if (digit==8)
                                    last_win=true;
                    }
                            if(last_win)
                                    wins++;
                            win_rate = Math.floor(100*(wins/play_times));
            }
        </script>
    </head>
    <body>    
                    <script language="javascript">
                            while(true)
                            {
                                    playOnce();
                                    if (!confirm(last_digits +"\n" +(last_win?"赢":"输") + "\n您累计玩了"+play_times+"次,赢了"+wins+"次,胜率"+win_rate+"%,继续吗?" )) break;
                            }
                    </script>            
    </body>
</html>

2.代码 exp_16_2演示

<!-- exp_16_2.html -->
<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8"> 
    <title>随机产生20个4位整数并从小到大进行排序</title>  
    <script type="text/javascript">    
        var numlist=new Array();//定义存放整数的数组
        function $(id){return document.getElementById(id);}
        function createNum(){
           for (var i=0;i<20 ;i++ )
           {
                  numlist[i]=Math.floor(Math.random()*9000+1000);
           }
             $("display").value="随机产生20个4位整数,分别如下:"+"\n"+numlist.join(",");
             $("display").value=$("display").value+"\n从小到大排序后结果为:\n"+numlist.sort();
        }    
        function findNum(){
           var find_5time=new Array();
             var i=0,j=0;
             while (i<numlist.length)
             {
                 if (numlist[i]%5==0)
                 {
                   find_5time[j]=numlist[i];
                        j++;
                 }
                 i++;
             }
             $("display").value+="\n能被5整除的整数有:\n"+find_5time.join(",");
        }
    </script> 
 </head>
 <body>
   <form method="post" action="">          
             <textarea id="display" name="" rows="10" cols="50"></textarea>
    <br><br>
        <input type="button" value="随机产生20个整数" onclick="createNum();">
        <input type="button" value="找出能被5整除的整数" onclick="findNum();">
             <input type="reset"></form>
 </body>
</html>    

P420-第17章 练习与实验答案

练习16
1.选择题
(1) A (2) D (3) C (4) A (5) B (6) D (7) B (8) D (9) A (10) C

2.填空题
(1)context.drawImage(image,x,y,width,height)、
context.drawImage(image,sx,sy,sw,sh,dx,dy,dw,dh)
(2)ondragover、ondrop
(3)draggable、ondragstart
(4)ondrop
(5)new
(6)JavaScript脚本
(7)onmessage、postMessage(data)
(8)terminate()
(9) localStorage、sessionStorage、setItem(key,value)、getItem(key)、clear()、key(i)、removeItem(key)。

3.问答题
见教材。

实验17
1.代码 prj_17_1演示

<!--  prj_17_1.html -->
<!DOCTYPE html>
<html>
    <head>
    <meta charset="UTF-8">
    <title>简易手机通讯录</title>        
    <script>        
        //保存一条通讯记录数据,同时显示在div中 
        function $(id){return document.getElementById(id);}
        function saveInfo(){
            var name1=$("username").value;//取姓名
            var phone1=$("userphone").value;    //取电话
            if (name1!="" && phone1!="")  //不为空处理
            {
                localStorage.setItem(name1,phone1);
                loadAllInfo();
                alert("添加成功"); 
      $("username").value="";//添加成功后置空
      $("username").focus();//获得焦点
            $("userphone").value="";    //添加成功后置空
            }else{//姓名或电话为空,告警并获得焦点
                alert("请输入姓名和电话!");
                $("username").focus();
            }             
        }
        //以姓名查找通讯录信息  
        function findForName(){  
            var searchname = $("username").value;  
            var searchphone = localStorage.getItem(searchname); //取电话 
            $("userphone").value=searchphone; //填充电话
        }
        //从localStorage中取出所有通讯录中信息,并展现到界面上
        function loadAllInfo(){
            // localStorage.clear();
            var result = ""; 
            if(localStorage.length>0){ 
                result += "姓名&nbsp;&nbsp;&nbsp;&nbsp;电话\n";  
                for(var i=0;i<localStorage.length;i++){  
                    var name= localStorage.key(i);  
                    var phone = localStorage.getItem(name);  
                    result += name+"   ---   "+phone+"\n";  
                }               
                $("phoneset").innerHTML = result;  
            }else{  
                $("phoneset").innerHTML = "通讯录为空……";  
            }  
        }
        //删除某一条通讯信息
        function deleteName(){
      $("userphone").readonly="readonly";
            localStorage.removeItem($("username").value); //按姓名删除通讯录 
            $("userphone").value=""; //填充电话
            $("username").value=""; //填充电话
            $("username").focus(); //填充电话
            loadAllInfo();
        }    
    </script>
    </head>
    <body onload="loadAllInfo();">         
        <article style="width:350px;height:450px;text-align:center;border:12px groove #0099cc;margin:0 auto;padding:20px;">
        <header>
            <h3 style="background:#ededed;padding:10px auto;">手机通讯录管理器</h3>
        </header>
            <form method="post" action="">
                <fieldset style="width:300px;text-align:center;">
            <legend>简易手机通讯录</legend><label for="name">姓名:</label>  
            <input type="text" id="username" name="username" required/><br/>  
            <label for="telphone">电话:</label>  
            <input type="text" id="userphone" name="userphone" required/><br/>  
            <br><input type="button" onclick="saveInfo()" value="添加"/>            
            <input type="button" onclick="findForName()" value="查询"/>
            <input type="button" onclick="deleteName()" value="删除"/>             
            <input type="reset">            
            </form>
            <div id="displayallinfo" name="displayallinfo">
               <textarea name="" rows="8" cols="30" id="phoneset"></textarea>
            </div>
        </fieldset>        
            <footer style="background:#ededed;height:40px;">
            <p><strong>前端工作室设计</strong><br>
         <strong>版权所有&copy;,2017-2020</strong></p>
        </footer>
        </article>
    </body> 
</html>

2.代码省略(可参照【例17-1-10】或17.5综合实例)。

版权声明

弈心博客


本文首发site_name,转载请附上博文链接!