JavaScript自定义对象的单元测试题

最新推荐文章于 2024-11-23 11:16:48 发布

新白者

最新推荐文章于 2024-11-23 11:16:48 发布

阅读量2.8k

点赞数 1

分类专栏： js

本文链接：https://blog.youkuaiyun.com/qq_44830627/article/details/105682440

版权

js 专栏收录该内容

30 篇文章

订阅专栏

单元测试题

一、选择题和填空题

1、创建自定义对象主要有（）种方法。
A、1种
B、2种
C、3种
D、4种
答案：C
2、下面引用对象中的属性或方法的格式中，不正确的（）。
A、对象名.属性名
B、对象名[属性名]
C、对象名.方法名
D、对象名.方法名()
答案：C
3、用来遍历对象属性的语句是（）语句。
A、for
B、for…in
C、with
D、foreach
答案：B
4、直接创建自定义对象时，所有属性都放在大括号中，属性之间用（）分隔。
A、逗号
B、冒号
C、分号
D、空格
答案：A
5、在访问一个对象的属性或方法时可以避免重复引用指定对象名的语句是（）语句。
A、this
B、for…in
C、return
D、with
答案：D
6、在JavaScript中，对象主要包含两个要素：和。
答案：
属性
方法

7、向对象中添加属性或方法使用的是____________属性。
答案：
prototype

8、for…in语句用来遍历对象的__________。
答案：
属性
9、下面代码中应用了with语句，请将代码补充完整。
function Art(name){
this.name = name;
}
var art=new Art(“达芬奇密码”);
with(){
alert(“作品名称：”+);
}
答案：
第一空：
art
第二空：
name
10、下面代码创建了一个film对象，并输出电影名称和影片主演，请将代码补充完整。
function film(moviename,actor){
this.moviename = moviename;
this.actor = actor;
__________ = function(){
document.write(“电影名称：”+this.moviename+" 主演："+this.actor);
}
}
var film1 = new film(“加勒比海盗”,“约翰尼.德普”);
film1.show();
答案：
this.show

二、编程题【自定义对象创建表格】

应用构造函数创建一个自定义对象，通过自定义对象生成指定行数、列数、宽度和高度的表格。
程序开发步骤提示：
（1）定义构造函数Table()，首先在函数中应用this关键字初始化对象中的属性，然后可以应用prototype属性为对象添加属性和方法。
（2）创建不同的对象实例并调用对象中方法生成表格。

初看题，下笔时，我是直接把行数、列数当成属性，宽度和高度当成新增属性，于是就有了原来的代码，看到出来的结果后，越看越不对，宽度和高度就是固定的了，再仔细看题目就出现了优化。

原来的代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body> 
	<table align="center"  border="1" >
		<script type="text/javascript">
			function Table(row, col){
				this.row=row;
				this.col=col;
			}
			Table.prototype.width=50;
			Table.prototype.height=70;
			Table.prototype.show=function(){
					for(var i=1;i<=this.row;i++){
						document.write("<tr >" );
						for(var j=1;j<=this.col;j++){
							document.write("<td align='center' width='"+this.width+"' height='"+this.height+"'>"+j+"</td>");
						}
						document.write("</tr>")
					}
			}
			var test=new Table(2,5);
			var test1=new Table(3,7);
		     test.show();
			 test1.show();
		</script>
		</table>
	</body>
</html>

在这里插入图片描述

优化：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
			//first:定义构造函数Table()，在函数中应用this关键字初始化对象中的属性
			function Table(row, col, width, height) { //row 表示行  col(column):列  width :宽度  height：高度
				this.row = row;
				this.col = col;
				this.width=width;
				this.height=height;
			}
			//second:应用prototype属性为对象添加属性和方法
			Table.prototype.border=1;
			Table.prototype.createTable= function() {
			document.write("<table  align='center' border='" + this.border + "' >");
				for (var i = 1; i <= this.row; i++) {
					document.write("<tr>");
					for (var j = 1; j <= this.col; j++) {
						document.write("<td align='center'   height='"+this.height+"' width='"+this.width+"'>" + j + "</td>");
					}
					document.write("</tr>")
				}
				document.write("</table>");
			}
			//third:创建不同的对象实例并调用对象中方法生成表格
			var test = new Table(7,5,50,60);
			var test1=new Table(4,4,40,40);
			test.createTable();
			test1.createTable();
		</script>
		</table>
	</body>
</html>

在这里插入图片描述

三、自动生成表格

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<table  align="center" >
			<p align="center">请输入数字来创建表格</p>
			<tr>
				<td>行数:</td>
				<td><input type="text" id="row"></td>
			</tr>
			<tr>
				<td>列数:</td>
				<td><input type="text" id="col"></td>
			</tr>
			<tr>
				<td>宽度:</td>
				<td><input type="text" id="width"></td>
			</tr>
			<tr>
				<td>高度:</td>
				<td><input type="text" id="height"></td>
			</tr>
			<tr>
				<td align="center" colspan="2"><input  type="button" id="createTable" onclick="createTable()" value="创建"></td>
			<!--colspan="2" 表格单元横跨两列的表格-->
			</tr>
		</table>
		<script type="text/javascript">
			function createTable() {
				var row = document.getElementById("row").value;
				var col = document.getElementById("col").value;
				var w = document.getElementById("width").value;
				var h = document.getElementById("height").value;
				//border-collapse 属性是用来决定表格的边框是分开的还是合并的,合并（collapsed ）模式,分隔（separated）模式[默认是分隔默认]
				document.write('<table border="1" align="center" style="border-collapse: collapse;" >');
				for (var i = 0; i < row; i++) {//外层循环，输出表格的行
					if (i % 2 != 0) {
							document.write("<tr bgcolor='aqua'>");
					} else {
						document.write("<tr bgcolor='aquamarine'>");
					}
				
					for (var j = 1; j <=col; j++) {//内层循环，输出表格的列
						document.write('<td height = "' + h + '" width = "' + w + '">'+j+'</td>');
					}
				document.write('</tr>');
				}
				document.write('</table>');
			}
          </script>
	</body>
</html>