欢迎来到计算机相关教程网!

JavaScript

当前位置: 主页 > 网页制作 > JavaScript

网页交互开发高级第十二章课后习题及答案

时间:2022-08-25 10:05:39|栏目:JavaScript|点击:

课后习题:

一、 填空题

1. 面向对象编程优势为:易维护、易复用、______

2. 面向对象的特征是:__________________

3. 类的继承使用______关键字。

4. 用于访问和调用对象在父类上的方法使用的关键字是______

二、 判断题

1. 如果一个类中没有编写constructor()方法,类中会自动创建一个constructor()构造方法。(  )

2. 在类中定义方法时,需要使用function关键字。(  )

3. 继承指的是隐藏内部的实现细节,只对外开放操作接口。(  

4. ES 6增加了Class关键字,用来定义一个类。(  )

三、 选择题

1. 下列选项中,不是面向对象的特征的是(  )。

A. 封装性   B. 跨平台性   C. 继承性   D. 多态性

2. 下面关于类的描述,错误的是(  )。

A. 在命名习惯上,类名使用首字母大写的形式

B. class Person {}表示定义一个Person

C. JavaScript中,子类可以继承父类的一些属性和方法,在继承以后还可以增加自己独有的属性和方法

D. super关键字只能调用父类的构造方法

四、 编程题

请通过面向对象思想实现列表的增删和移动,要求如下

① 在页面中显示一个列表,每一项是一个文本框,可以编辑文本。在每个文本框右边放3个链接,分别是上移”“下移删除

② 在列表底部提供一个添加列表项的功能,用可以添加新的列表项。

③ 页面效果如下图所示

网页交互开发高级第十二章课后习题及答案(图1)

列表的增删和移动

答案:

一、 填空题

1. 易扩展

2. 封装性、继承性、多态性

3. extends

4. super

二、 判断题

1. 

2. 

3. 

4. 

 

三、 选择题

1. B

2. D

四、 编程题

1. 编写页面结构

  <body>

    <form>

      <div class="list">

        <ul class="list-ul">

          <li class="list-option">

            <input class="list-input" type="text" name="list[]">

            <span class="list-btn">

              <span class="list-up">[上移]</span>

              <span class="list-down">[下移]</span>

              <span class="list-del">[删除]</span>

            </span>

          </li>

        </ul>

        <div class="list-bottom">

          <span class="list-add-show"><span>添加项目</span></span>

          <div class="list-add-area list-hide">

            添加到列表:

            <input class="list-add-input" type="text" name="list[]">

            <input class="list-add-add" type="button" value="添加">

            <input class="list-add-cancel" type="button" value="取消">

          </div>

        </div>

      </div>

    </form>

    <script src="SmartList.js"></script>

    <script>

      SmartList('list', ['PHP', 'JavaScript']);

    </script>

  </body>

2. 编写CSS代码:

<style>

    body{background:#ddd;text-align:center}

    .list{display:inline-block;margin-top:20px;padding:40px;

border-radius:8px;background:#fff;color:#333;text-align:left;font-size:13px}

    .list-ul{list-style:none;margin:0;padding:0}

    .list-option{padding:6px 0;}

    .list-input{width:300px;border:1px solid #ccc;

padding:4px;font-size:14px;color:#333}

    .list-input:hover{background:#effaff}

    .list-btn span{color:#0065A0;;cursor:pointer}

    .list-btn span:hover{text-decoration:underline}

    .list-btn b{text-align:center;background-color:#D6EDFF;

border-radius:6px;width:20px;height:20px;display:inline-block;

margin:0 2px;cursor:pointer;color:#238FCE;border:1px solid #B3DBF8;float:left}

    .list-bottom{margin-top:5px}

    .list-add-show{color:#f60;cursor:pointer}

    .list-add-show:before{position:relative;top:1px;

margin-right:5px;content:"+";font-weight:700;font-size:16px;font-family:arial}

    .list-add-show span:hover{text-decoration:underline}

    .list-add-area{margin-top:5px}

    .list-add-add{cursor:pointer;margin-left:5px}

    .list-add-cancel{cursor:pointer;margin-left:4px}

    .list-add-input{width:180px;border:1px solid #ccc;

padding:4px;font-size:14px;color:#333}

    .list-add-input:hover{background:#effaff}

    .list-tmp{display:none}

    .list-hide{display:none}

</style>

 

3. 创建SmartList.js文件,编写JavaScript代码

 (function(window) {

  /**

   * SmartList 智能列表生成

   * @param {String} prefix 前缀

   * @param {Array} defList 默认项数组

   */

  var SmartList = function(prefix, defList) {

    Find.prototype.prefix = prefix;

    var find = new Find(document.getElementsByClassName(prefix)[0]);

    var list = new List(find.className('option'));

    for (var i in defList) {

      list.add(defList[i]);

    }

    var add = {

      'show': find.className('add-show'),

      'area': find.className('add-area'),

      'input': find.className('add-input'),

      'add': find.className('add-add'),

      'cancel': find.className('add-cancel')

    };

    add.show.onclick = function() {

      add.area.classList.remove(prefix + '-hide');

    };

    add.add.onclick = function() {

      list.add(add.input.value);

    };

    add.cancel.onclick = function() {

      add.area.classList.add(prefix + '-hide');

    };

  };

  /**

   * List 生成列表

   * @constructor

   * @param {Object} tmp 模板对象

   */

  function List(tmp) {

    this.tmp = tmp;

    this.obj = tmp.parentNode;

    this.obj.removeChild(tmp);

  }

  List.prototype = {

    /**

     * 向列表中添加项目

     * @param {String} value 新项目的文本值

     */

    add: function(value) {

      var tmp = this.tmp.cloneNode(true);

      // ① value添加到list-inputvalue属性中

      var find = new Find(tmp);

      find.className('input').value = value;

      var obj = this.obj;

      // ② list-up(上移)添加单击事件

      find.className('up').onclick = function() {

        var prev = find.prev();

        if (prev) {

          obj.insertBefore(tmp, prev);

        } else {

          alert('已经是第1');

        }

      };

      // ③ list-down(下移)添加单击事件

      find.className('down').onclick = function() {

        var next = find.next();

        if (next) {

          obj.insertBefore(next, tmp);

        } else {

          alert('已经是最后1');

        }

      };

      // ④ list-del(删除)添加单击事件

      find.className('del').onclick = function() {

        if (confirm('您确定要删除?')) {

          obj.removeChild(tmp);

        }

      };

      // ⑤ 将创建的列表项添加到列表末尾

      this.obj.appendChild(tmp);

    }

  };

  /**

   * Find 查找器

   * @constructor

   * @param {Object} obj 待查找对象所在容器

   */

  function Find(obj) {

    this.obj = obj;

  }

  Find.prototype = {

    prefix: '',  // 待查找的前缀

    /**

     * 按照class查找元素

     * @param {String} className

     */

    className: function(className) {

      return this.obj.getElementsByClassName(this.prefix + '-' + className)[0];

    },

    /**

     * 查找当前元素的前一个兄弟元素节点

     * @returns {Object} 查找结果

     */

    prev: function() {

      var node = this.obj.previousSibling;

      while(node) {

        if (node.nodeType === Node.ELEMENT_NODE) {

          break;

        }

        node = node.previousSibling;

      }

      return node;

    },

    /**

     * 查找当前元素的后一个兄弟元素节点

     * @returns {Object} 查找结果

     */

    next: function() {

      var node = this.obj.nextSibling;

      while(node) {

        if (node.nodeType === Node.ELEMENT_NODE) {

          break;

        }

        node = node.nextSibling;

      }

      return node;

    }

  };

  window['SmartList'] = SmartList;

})(window);




上一篇:网页交互开发高级第十一章课后习题及答案

栏    目:JavaScript

下一篇:网页交互开发高级第十三章课后习题及答案

本文标题:网页交互开发高级第十二章课后习题及答案

本文地址:http://www.wangzhanteacher.com/?m=home&c=View&a=index&aid=231

广告投放 | 联系我们 | 版权申明

重要申明:本站所有的文章、图片、评论等,均由网友发表或上传并维护或收集自网络,属个人行为,与本站立场无关。

如果侵犯了您的权利,请与我们联系,我们将在24小时内进行处理、任何非本站因素导致的法律后果,本站均不负任何责任。

联系QQ:8044517 | 邮箱:8044517@qq.com

Copyright © 2022-2025 计算机相关教程网 版权所有冀ICP备17010187号