阿里巴巴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 {
	 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 {
     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":"小学老
师"}]};