2014阿里巴巴WEB前端实习生在线笔试题
2014-06-05 17:24
471 查看
2014年3月31日晚,我怀着略微忐忑的心情(第一次在线笔试^_^!!)进行了笔试,阿里巴巴的笔试题共有10道,几乎包含了Web前端开发的各个方面,有程序题、有叙述题,时间非常紧张,只完成了大概6道题。下面把遇到的题目跟大家分享一下!
1、
问:为什么以上两个<p> 标签中的文字颜色都是橙色的?
这里涉及到了CSS中的层叠和特殊性问题,首先按照上下顺序,第一个<p>元素它的样式很明显是由div.outer p 定义的,所以是橙色。第二个<p>元素的样式是由样式表中的两个样式同时定义,而且同样是color样式。根据《CSS权威指南》中的介绍,当CSS样式发生层叠时,要通过层叠规则来安排最终元素匹配的样式。CSS2.1的层叠规则中的规定,在没有!important标志时,要按照特殊性排序,如果还不能比较完,就后面覆盖前面。可以参考:CSS层叠规则
2、请实现一个Event类,继承自此类的对象都会拥有两个方法on和trigger,类声明如下,请写出完整代码:
[javascript] view
plaincopy
function Event() {}
Event.prototype.on = function(eventName, callback) {
//注册事件监听
}
Event.prototype.trigger = function(eventName, data) {
//触发事件
}
要求实现一个多行文本输入框,固定宽度。可根据用户输入的内容多少进行高度自适应变化。如,用户输入了1行文字,则输入框显示为1行,而有2行文字,就显示2行。如微博的评论回复。
[javascript] view
plaincopy
<!DOCTYPE html>
<html>
<head>
<title>文本框换行</title>
<meta charset="utf-8">
<style>
.txt {
border: 1px solid #CCC;
width: 200px;
padding: 3px;
font: 12px/16px Simsun;
outline: none;
resize: none;
word-wrap: break-word;
word-break: break-all;
overflow: hidden;
}
</style>
<script>
window.addEventListener('load', function () {
(function (o, e, t) {
//创建一个pre标签,用来计算文字应有高度
e = document.createElement("pre");
//给pre添加上和文本域一样的样式
e.className = "txt";
//设置绝对定位到屏幕外来隐藏它
e.style.position = "absolute";
e.style.left = "-9999px";
//创建一个文本节点来操作,避免直接操作HTML
e.appendChild(t = document.createTextNode(""));
//给pre的末尾添加一个换行,因为pre会吞掉末尾的一个换行
e.appendChild(document.createTextNode("\n"));
//把pre放入文档中
document.body.appendChild(e);
//文本域键盘事件时计算高度
o.onkeydown = o.onkeyup = function () {
//IE8下\r\n在PRE标签中会被解析为两行,所以需要一个替换
//如果觉得这样会影响效率可以先判断浏览器
t.data = o.value.replace(/\r\n/g, "\n");
o.style.height = e.offsetHeight - 8 + "px";
};
//初始时计算一次
o.onkeydown();
//为了避免换行时闪的太厉害,稍微阻止下滚动
o.onscroll = function () {
o.scrollTop = 0
};
})(document.getElementById("o"));
}, false);
</script>
</head>
<body>
<textarea id="o" class="txt">来呀,来编辑我呀~</textarea>
</body>
</html>
4、
编写一个JavasSript函数,给定一个DOM节点node和一个正整数n,返回node的所有第n代后代节点(直接子节点为第1代)
[javascript] view
plaincopy
function getDescendants(node, n) {
// return an Array
}
[javascript] view
plaincopy
<script type="text/javascript" >
function getDescendants(node, n) {
//node, n
var childArr = [];
var len,tempArr,childNodelist;
childArr.push(node);
for(var i = 0; i<n ; i++){
len = childArr.length;
tempArr = [];
for(var j = 0;j<len;j++){
childNodeList = makeArray(childArr[j].childNodes);
tempArr = tempArr.concat(childNodeList);
}
childArr = tempArr;
}
return childArr;
}
var makeArray = function(obj){
return Array.prototype.slice.call(obj,0);
}
var result = getDescendants(document.getElementById("content"),2);
alert(result);
</script>
5、有2个int型已经去重的数组a和b,都是已经从小到大排序好的。要求遍历b数组的数字,如果这个数字出现在a中,就将其从a删去;反之将其插入到a的适当位置,使a保持排序状态。
[javascript] view
plaincopy
<script type="text/javascript" charset="utf-8">
//有2个int型已经去重的数组a和b,都是已经从小到大排序好的。要求遍历b数组的数字,
//如果这个数字出现在a中,就将其从a删去;反之将其插入到a的适当位置,使a保持排序状态。
var mySort = {};
mySort.sortArr = function(a, b) {
var pos = 0;
for (var i = 0; i < b.length; i++) {
pos = mySort.checkRepeat(a, b[i],pos);
}
}
mySort.checkRepeat = function(a, v, pos) {
var isChanged = false;
if (a != null && a != undefined && a.length > 0) {
for (var j = pos; j < a.length; j++) {
if (a[j] == v) {
a.splice(j, 1);
break;
} else if (a[j] > v) {
a.splice(j, 0, v);
break;
}
}
if(j == a.length){
a.push(v);
}
return j;
}
}
var a = [2,7,12,25,36,64];
var b = [2,3,9,32,36,56,87];
document.write("合并前数组a为:"+a.toString()+"<br>");
document.write("合并前数组b为:"+b.toString()+"<br>");
mySort.sortArr(a,b);
document.write("合并后数组a为:"+a.toString());
//结果是:
合并前数组a为:2,7,12,25,36,64
合并前数组b为:2,3,9,32,36,56,87
合并后数组a为:3,7,9,12,25,32,56,64,87
6、请描述一下从用户输入网址开始,到网页最后呈现出来的全过程,越详细越好,包括各种事件等。
7、
8、请评价以下代码并给出改进意见。
问:1、为什么最终小狗叫了200声汪?请详细说明为什么。2、修改代码setTimeout部分代码,实现每隔1秒调用i(从1到10递增)次dog()。
1、第一题重点在于函数作用域的问题。
2、 修改后的setTimeout函数是
[javascript] view
plaincopy
for (var i = 0; i < 10; i++) {
(function(a) {
setTimeout(function() {
for (var j = 1; j <= a; j++) {
document.write(dog()+" "+a+"<br>");
}
}, 1000);
})(i+1);
}
1、
<pre name="code" class="html"><!doctype html> <html> <head> <style type="text/css"> div:not(.outer) p { color: purple; } div.outer p { color: orange; } </style> </head> <body> <div class="outer"> <p> 我是 outer 里面的字 </p> <div class="inner"> <p> 我是 inner 里面的字 </p> </div> </div> </body> </html>
问:为什么以上两个<p> 标签中的文字颜色都是橙色的?
这里涉及到了CSS中的层叠和特殊性问题,首先按照上下顺序,第一个<p>元素它的样式很明显是由div.outer p 定义的,所以是橙色。第二个<p>元素的样式是由样式表中的两个样式同时定义,而且同样是color样式。根据《CSS权威指南》中的介绍,当CSS样式发生层叠时,要通过层叠规则来安排最终元素匹配的样式。CSS2.1的层叠规则中的规定,在没有!important标志时,要按照特殊性排序,如果还不能比较完,就后面覆盖前面。可以参考:CSS层叠规则
2、请实现一个Event类,继承自此类的对象都会拥有两个方法on和trigger,类声明如下,请写出完整代码:
[javascript] view
plaincopy
function Event() {}
Event.prototype.on = function(eventName, callback) {
//注册事件监听
}
Event.prototype.trigger = function(eventName, data) {
//触发事件
}
<span style="font-family: Arial, Helvetica, sans-serif;">3、</span>
要求实现一个多行文本输入框,固定宽度。可根据用户输入的内容多少进行高度自适应变化。如,用户输入了1行文字,则输入框显示为1行,而有2行文字,就显示2行。如微博的评论回复。
[javascript] view
plaincopy
<!DOCTYPE html>
<html>
<head>
<title>文本框换行</title>
<meta charset="utf-8">
<style>
.txt {
border: 1px solid #CCC;
width: 200px;
padding: 3px;
font: 12px/16px Simsun;
outline: none;
resize: none;
word-wrap: break-word;
word-break: break-all;
overflow: hidden;
}
</style>
<script>
window.addEventListener('load', function () {
(function (o, e, t) {
//创建一个pre标签,用来计算文字应有高度
e = document.createElement("pre");
//给pre添加上和文本域一样的样式
e.className = "txt";
//设置绝对定位到屏幕外来隐藏它
e.style.position = "absolute";
e.style.left = "-9999px";
//创建一个文本节点来操作,避免直接操作HTML
e.appendChild(t = document.createTextNode(""));
//给pre的末尾添加一个换行,因为pre会吞掉末尾的一个换行
e.appendChild(document.createTextNode("\n"));
//把pre放入文档中
document.body.appendChild(e);
//文本域键盘事件时计算高度
o.onkeydown = o.onkeyup = function () {
//IE8下\r\n在PRE标签中会被解析为两行,所以需要一个替换
//如果觉得这样会影响效率可以先判断浏览器
t.data = o.value.replace(/\r\n/g, "\n");
o.style.height = e.offsetHeight - 8 + "px";
};
//初始时计算一次
o.onkeydown();
//为了避免换行时闪的太厉害,稍微阻止下滚动
o.onscroll = function () {
o.scrollTop = 0
};
})(document.getElementById("o"));
}, false);
</script>
</head>
<body>
<textarea id="o" class="txt">来呀,来编辑我呀~</textarea>
</body>
</html>
4、
编写一个JavasSript函数,给定一个DOM节点node和一个正整数n,返回node的所有第n代后代节点(直接子节点为第1代)
[javascript] view
plaincopy
function getDescendants(node, n) {
// return an Array
}
[javascript] view
plaincopy
<script type="text/javascript" >
function getDescendants(node, n) {
//node, n
var childArr = [];
var len,tempArr,childNodelist;
childArr.push(node);
for(var i = 0; i<n ; i++){
len = childArr.length;
tempArr = [];
for(var j = 0;j<len;j++){
childNodeList = makeArray(childArr[j].childNodes);
tempArr = tempArr.concat(childNodeList);
}
childArr = tempArr;
}
return childArr;
}
var makeArray = function(obj){
return Array.prototype.slice.call(obj,0);
}
var result = getDescendants(document.getElementById("content"),2);
alert(result);
</script>
5、有2个int型已经去重的数组a和b,都是已经从小到大排序好的。要求遍历b数组的数字,如果这个数字出现在a中,就将其从a删去;反之将其插入到a的适当位置,使a保持排序状态。
[javascript] view
plaincopy
<script type="text/javascript" charset="utf-8">
//有2个int型已经去重的数组a和b,都是已经从小到大排序好的。要求遍历b数组的数字,
//如果这个数字出现在a中,就将其从a删去;反之将其插入到a的适当位置,使a保持排序状态。
var mySort = {};
mySort.sortArr = function(a, b) {
var pos = 0;
for (var i = 0; i < b.length; i++) {
pos = mySort.checkRepeat(a, b[i],pos);
}
}
mySort.checkRepeat = function(a, v, pos) {
var isChanged = false;
if (a != null && a != undefined && a.length > 0) {
for (var j = pos; j < a.length; j++) {
if (a[j] == v) {
a.splice(j, 1);
break;
} else if (a[j] > v) {
a.splice(j, 0, v);
break;
}
}
if(j == a.length){
a.push(v);
}
return j;
}
}
var a = [2,7,12,25,36,64];
var b = [2,3,9,32,36,56,87];
document.write("合并前数组a为:"+a.toString()+"<br>");
document.write("合并前数组b为:"+b.toString()+"<br>");
mySort.sortArr(a,b);
document.write("合并后数组a为:"+a.toString());
//结果是:
合并前数组a为:2,7,12,25,36,64
合并前数组b为:2,3,9,32,36,56,87
合并后数组a为:3,7,9,12,25,32,56,64,87
6、请描述一下从用户输入网址开始,到网页最后呈现出来的全过程,越详细越好,包括各种事件等。
7、
8、请评价以下代码并给出改进意见。
<pre name="code" class="javascript">if (window.addEventListener) { var addListener = function (el, type, listener, useCapture) { el.addEventListener(type, listener, useCapture); }; } else if (document.all) { addListener = function (el, type, listener) { el.attachEvent("on" + type, function () { listener.apply(el); }); }; }
问:1、为什么最终小狗叫了200声汪?请详细说明为什么。2、修改代码setTimeout部分代码,实现每隔1秒调用i(从1到10递增)次dog()。
1、第一题重点在于函数作用域的问题。
2、 修改后的setTimeout函数是
[javascript] view
plaincopy
for (var i = 0; i < 10; i++) {
(function(a) {
setTimeout(function() {
for (var j = 1; j <= a; j++) {
document.write(dog()+" "+a+"<br>");
}
}, 1000);
})(i+1);
}
相关文章推荐
- 2014阿里巴巴WEB前端实习生在线笔试题
- 2014阿里巴巴WEB前端实习生在线笔试题
- 2014阿里巴巴WEB前端实习生在线笔试题
- 阿里巴巴2014实习生前端招聘在线笔试题
- 2015阿里巴巴前端实习生在线笔试题
- 2015阿里巴巴前端实习生在线笔试考后总结
- 2014阿里巴巴web前端实习生试题分析(1)
- 2014阿里巴巴前端在线笔试题及自己所做解答
- 2015阿里巴巴前端实习生在线笔试题
- 2015阿里巴巴前端实习生在线笔试题
- 阿里巴巴2015校园招聘前端在线笔试题
- 阿里巴巴2014实习生招聘笔试题
- 2015阿里巴巴秋季校园招聘前端在线笔试题个人参考答案--第二波
- 阿里巴巴2014实习生笔试题-研发工程师-北京站
- 记2012年百度web前端研发实习生的笔试面试经历
- 阿里巴巴2015秋季校园招聘前端开发工程师在线笔试题及答案
- 2014阿里巴巴实习生招聘-研发工程师笔试题/网络编程小结
- 2014阿里巴巴前端开发工程师暑期实习在线测试题目及答案思路
- 2011年腾讯实习生应聘(软件开发>Web前端>flash方向)笔试面试经历
- 2014阿里巴巴实习生笔试题目