网页交互开发高级第十二章课后习题及答案
课后习题：
一、 填空题
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. 易扩展
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-input的value属性中
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
您可能感兴趣的文章
- 05-19DOM的元素获取
- 05-07innerText和innerHTML的区别
- 05-05JavaScript的基本变量应用格式
- 04-14利用数学函数随机生成六位数验证码
- 09-26console.dir()是什么意思？
- 09-12js的数组和二维数组教程
- 09-06window.onload事件的用途与格式
- 08-25网页交互开发高级第十四章课后习题及答案
- 08-25网页交互开发高级第十三章课后习题及答案
- 08-25网页交互开发高级第十二章课后习题及答案
阅读排行
推荐教程
- 09-12js的数组和二维数组教程
- 08-25网页交互开发高级第八章课后习题及答案
- 04-14利用数学函数随机生成六位数验证码
- 08-25网页交互开发高级第十四章课后习题及答案
- 08-25网页交互开发高级第九章课后习题及答案
- 05-05JavaScript的基本变量应用格式
- 08-25网页交互开发高级第七章课后习题及答案
- 08-25网页交互开发高级第六章课后习题及答案
- 08-25网页交互开发高级第十一章课后习题及答案
- 08-25网页交互开发高级第十二章课后习题及答案