阿里前端面试题
萌新突然接到阿里前端的内推，不想放弃这次机会，所以提交了简历，当晚接到了面试电话，周四进行笔试，但是时间紧促，而我又准备不足，找了些以前的面试题做做，真的好像要阿里的offer~~~~~
1.请说明下列个各种情况的执行结果，并注明产生的理由
function doSomething(){
alert(this);
}
[1].element.onclick = doSomething,点击元素后
element ：调用执行时直接指向事件元素
[2].element.onclick = function(){doSomething()},点击element元素后
window：函数调用中的 this 绑定到全局对象。
[3].直接执行doSomething()
函数调用中的this绑定到全局对象。
2.使用JavaScript 实现sort排序函数，要求sort([5,100,6,3,-12],返回[-12,3,5,6,100].
冒泡排序法
function sort(elements){
for(var i=0;i<elements.length-1;i++)
for(var j = 0;j<elements.length-i-1;j++){
if(elements[j] > elements[j+1]){
var swap = elements[j];
elements[j] = elements[j+1];
elements[j+1] = swap;
}
}
}
var elements = new Array(100,5,6,3,-12);
console.log('before:'+elements);
sort(elements);
console.log('after:'+elements);
3.根据HTML和css代码画出布局示意图
<div id="page">
<div class="main"><div class="sub"></div></div>
<div class="nav"></div>
</div>
<style type="text/css">
#page { width: 520px; }
.nav { width: 200px; float: right; }
.main { width: 200px; float: left; padding-left: 110px; }
.sub { width: 100px; float: left; margin: 10px 0 10px -100px; }
.main { border: 1px solid #000; }
.nav, .sub { border: 1px dashed #000; height: 300px; }
.sub { height: 280px; }
</style>
布局示意图
图片.png
4.阅读以下js代码
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);
});
};
}
请阐述
a) 代码的功能；
这段代码的功能是事件注册
b) 代码的优点和缺点；
优点：跨浏览器，特性探测，性能优化
缺点：document.all
c) listener.apply(el) 在此处的作用；
使得IE 中的listener的this为el，与其他浏览器一致
d) 如果有可改进之处，请给出改进后的代码，并说明理由。
可将document.all 改为window.attachEvent； useCpature 为默认值
5.五秒后执行方法
var msg = 'hello';
this.msg = msg;
this.shout = function(){
console.log(this.msg);
}
this.waitAndShout = function(){
var _self = this;
setTimeout(() => {
_self.shout();
}, 5000);
}
this.waitAndShout();
6.请分别列出HTML、JavaScript、CSS、Java、php、python的注释代码形式。
参考答案 Js：
单行 // 注释内容
多行
/*
注释内容
*/
Css：/* 注释内容 */
Html：<!--注释的内容-->
PHP： //单行注释内容
/*
多行注释内容
*/
Python：
#单行注释内容
7.请编写一段JavaScript脚本生成下面这段DOM结构。要求：使用标准的DOM方法或属性。
<div id=”example”>
<p class=”slogan”>淘！你喜欢</p>
</div
答案
var oDiv = document.createElement(“div”); oDiv.setAttribute(“id”, ”example”); oDiv.className = “box”; var oP = document.createElement(“p”); oDiv.appendChild(oP); var oText = document.createTextNode(“淘宝前端笔试题”) oP.appendChild(oText); document.body.appendChild(oDiv);
8.下面是个输入框，当没有获取焦点时，显示灰色的提示信息：
当用户输入时，隐藏提示文字，且恢复为默认色：
当输入框失去焦点，如果输入为空，需还原提示信息：
要求：
a) 写出HTML和CSS代码
b) 用JavaScript实现功能
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.tip{
color: gray;
}
</style>
</head>
<body>
<input type="text" id="test" class="tip" value="输入内容">
</body>
</html>
<script>
(function(){
var test = document.getElementById('test'),
REG = /(^|\s+)tip(\s+|$)/,
TIP_CLS = "tip"
TIP_STR = "请输入内容";
test.addEventListener("focus",function(){
var className = this.className;
if(className.match(REG)){
this.value = "";
this.className = className.replace(TIP_CLS,"");
}
},false);
test.addEventListener("blur",function(){
if(this.value.length == 0){
this.value = TIP_STR;
this.className+=" "+TIP_CLS;
}
},false);
})();
</script>
