阿里巴巴2011前端工程师笔试卷
- 1.请列举7种以上常用的HTML标签，说明其语义。
div：容器，块级元素，可以放块级元素和行内元素；
p：段落，块级元素；
h1~h6：标题，块级元素；
span：行内文字，行内元素
img：图片，行内元素；
table：表格，块级元素；
br：换行，行内元素；
hr：分割线，块级元素；
a：超链接，行内元素；
ul：无序列表，块级元素；
- 2.请说明下面各种情况的执行结果，并注明产生对应结果的理由。
问题
function doSomething() {
alert(this);
}
① element.onclick = doSomething，点击element元素后。
② element.onclick = function() {doSomething()}， 点击element元素后。
③ 直接执行doSomething()。
解析
① 弹出 element object，通过函数赋值方式，this 指向 element 对象。
② 弹出 window object，this 是写在 doSomething 函数里面，而这种方式没有讲 element 对象传给 this，而在默认情况下，this 指向 window。
③ 弹出 window object，没有绑定对象的情况下 this 默认指向 window。
- 3.阅读以下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);
});
};
}
请阐述
a) 代码的功能；
b) 代码的优点和缺点；
c) listener.apply(el) 在此处的作用；
d) 如果有可改进之处，请给出改进后的代码，并说明理由。
解析
a) 功能：事件注册；
b) 优点：跨浏览器，特性探测，性能优化。缺点：document.all；
c) 作用：使得IE中listener的this 为 el，与其它浏览器一致；
d) 改进：document.all改成window.attachEvent; useCapture的默认；
- 4.请编写一个JavaScript 函数toRGB，它的作用是转换CSS中常用的颜色编码。 要求：
题目
alert(toRGB("#0000FF")); // 输出 rgb(0, 0, 255)
alert(toRGB("invalid")); // 输出 invalid
alert(toRGB("#G00")); // 输出 #G00
解析
function toRGB(color) {
var regex = /^#([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})$/;
match = color.match(regex);
return match ? 'rgb('+parseInt(match[1], 16)+','+parseInt(match[2], 16)+','+parseInt(match[3], 16)+')' : color;
}
- 5.尝试实现注释部分的Javascript代码，可在其他任何地方添加更多代码（如不能实现，说明一下不能实现的原因）：
题目
var Obj = function(msg){
this.msg = msg;
this.shout = function(){
alert(this.msg);
}
this.waitAndShout = function(){
//隔五秒钟后执行上面的shout方法
}
}
解析
var Obj = function(msg){
this.msg = msg;
this.shout = function(){
alert(this.msg);
}
this.waitAndShout = function(){
//隔五秒钟后执行上面的shout方法
var that = this;
setTimeout(that.shout, 5000);
}
return this;
}
Obj("shouting").waitAndShout();
- 6.请编写一个JavaScript函数，它的作用是校验输入的字符串是否是一个有效的电子邮件地址。
要求： a) 使用正则表达式。 b) 如果有效返回true ，反之为false。
解析
var checkEmail = function(email){
var preg = "(^[a-zA-Z]|^[\\w-_\\.]*[a-zA-Z0-9])@(\\w+\\.)+\\w+$",
pregObj =new RegExp(preg);
return pregObj.test(email);
}
- 7.请编写一段JavaScript脚本生成下面这段DOM结构。要求：使用标准的DOM方法或属性。
题目
<div id="example>
<p class="slogan">淘！你喜欢</p>
</div>
解析
window.onload = function() {
var div = document.createElement("div");
div.id = "example"
var p = document.createElement("p");
p.className = "slogan";
p.innerHTML = "淘！你喜欢"
div.appendChild(p);
document.body.appendChild(div);
};
- 8.请用CSS定义p标签，要求实现以下效果: 字体颜色在IE6下为黑色(#000000)；IE7下为红色(#ff0000)；而其他浏览器下为绿色(#00ff00)。
解析
p{
color:#0f0;
_color:#000; /*ie6*/
}
/*ie7*/
*+html p{
color:#f00;
}
- 9.请简化以下的CSS代码，并给出简单的说明。
题目
div.container {
width: 500px;
background-image: url(/img/sprite.png);
background-repeat: no-repeat;
background-position: 0px -78px;
}
div.container ul#news-list, div.container ul#news-list li {
margin: 0px;
padding: 0px;
}
div.container ul#news-list li {
padding-left: 20px;
background-image: url(/img/sprite.png);
background-repeat: no-repeat;
background-position: -120px 0px;
}
A {
font-size: 14px;
font-weight：bold；
line-height: 150%;
color: #000000;
}
解析
/*没有必要在class加上标签，会影响页面加载性能*/
.container {
width: 500px;
background: url(/img/sprite.png) 0 -78px no-repeat;/*背景实现可以缩写为一句话，以空格隔开，当为0像素时可将单位去掉，能精简两个字节。*/
}
/*当使用id选择器的时候没有必要加父级class,id选择器是唯一的，不会在同一个页面中出现多次，同样前面的ul也没有必要，影响性能，为0时的单位可以省略。*/
#news-list,
#news-list li {
margin: 0;
padding: 0;
}
#news-list li {
padding-left: 20px;
background: url(/img/sprite.png) -120px 0 no-repeat;
}
/*所有标签均为小写*/
a{
font-size: 14px;
font-weight：bold；
line-height: 150%;/*文字如果没有设置字体的时候不能进行缩写*/
color: #000;/*色彩每两位相同可以缩写为一位*/
}
- 10.请编写一个通用的事件注册函数（请看下面的代码）。
题目
function addEvent(element, type, handler)
{
// 在此输入你的代码，实现预定功能
}
解析
function addEvent(element, type, handler) {
if (element.addEventListener) {
element.addEventListener(type, handler, false);
} else if (element.attachEvent) {
element.attachEvent("on" + type, handler);
} else {
element["on" + type] = handler;
}
}
- 11.请给JavaScript的String 原生对象添加一个名为trim 的原型方法，用于截取空白字符。要求
题目
alert(" taobao".trim()); // 输出 "taobao"
alert(" taobao ".trim()); // 输出 "taobao"
解析
String.prototype.trim = function() {
return this.replace(/^\s+|\s+$/g, "");
};
- 12.请编写一个JavaScript函数 parseQueryString，它的用途是把URL参数解析为一个对象，如：
题目
var url = “http://www.taobao.com/index.php?key0=0&key1=1&key2=2.....”
var obj = parseQueryString(url);
alert(obj.key0) // 输出0
解析
function parseQueryString ( name ){
name = name.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");
var regexS = "[\\?&]"+name+"=([^&#]*)";
var regex = new RegExp( regexS );
var results = regex.exec( window.location.href );
if( results == null )
return "";
else
return results[1];
}
- 13.请根据下面的描述，用JSON语法编写一个对象: “小明今年22岁，来自杭州。兴趣是看电影和旅游。他有两个姐姐，一个叫小芬，今年25岁，职业是护士。还有一个叫小芳，今年23岁，是一名小学老师。”var person = ?
解析
var person = {"name":"小明","age":"22","form":"杭州","interest":["电影","旅游"],"sister":
[{"name":"小芬","age":"25","job":"护士"},{"name":"小芳","age":"23","job":"小学老
师"}]};
