阿里巴巴2011前端工程师笔试卷

1、请列举7种以上常用的HTML标签，说明其语义。
解：
1.div标签，是一个块元素，就像一个大盒子，可以放各式各样的东西，如：图片....
2.p标签，也是一个块元素，它通常是用来放一段话的....
3. h1,h2....h6标签，也是一个块元素，常用来放标题
4.span标签，是一个行内元素，常用来处理一段话中的某几个字符
5.img标签，用来加载图片的标签
6.table标签，用来创建表格的标签
7.br标签，用来换行的标签
8.hr标签，用来画线的标签
9.a一个点击跳转的超链接标签
10.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语言实现 sort 排序函数，要求：sort([5, 100, 6, 3, -12]) // 返回 [-12, 3, 5, 6, 100]。
如果你有多种解法，请阐述各种解法的思路及优缺点。（仅需用代码实现一种解法，其它解法用文字阐述思路即可）
答案：
function sort(arr){
    arr.sort(function(item1,item2){
         return item1-item2;
    });
    return arr;
}
另冒泡排序：时间复杂度O（n*n）,效率太低
4、请根据下面的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>

答案：

注意：元素定义了float会脱离文档流。
5、阅读以下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) 作用：修改了listener的作用域，使得this指向el
d) 改进：document.all改成window.attachEvent; useCapture的默认

var addListener = function(el, type, listener, useCapture) {if (window.addEventListener) {el.addEventListener(type, listener, useCapture); }else if(window.attachEvent){    el.attachEvent("on" + type, listener);    }else{    listener.apply(el); }}

6、请编写一个JavaScript 函数toRGB，它的作用是转换CSS中常用的颜色编码。 要求：
alert(toRGB("#0000FF"));          // 输出 rgb(0, 0, 255)
alert(toRGB("invalid"));          // 输出 invalid
alert(toRGB("#G00"));              // 输出 #G00
答案：

function toRGB(str){    var match=str.match(/^#([a-zA-Z0-9]{2})([a-zA-Z0-9]{2})([a-zA-Z0-9]{2})$/);    if (match) {    return 'rgb('+parseInt(match[1],16)+','+parseInt(match[2],16)+','+parseInt(match[3],16)+')';    }else{    return str;    }}

7、尝试实现注释部分的Javascript代码，可在其他任何地方添加更多代码（如不能实现，说明一下不能实现的原因）：
var Obj = function(msg){
    this.msg = msg;
    this.shout = function(){
        alert(this.msg);
    }  
    this.waitAndShout = function(){
        //隔五秒钟后执行上面的shout方法
    }
}
答案：
var self=this;
setoutTime(self.shout,5000);
8、请编写一个JavaScript函数，它的作用是校验输入的字符串是否是一个有效的电子邮件地址。要求： a)使用正则表达式。 b)如果有效返回true ，反之为false。
答案：
function checkEmail(email){
    return /^\w+(\.\w+)*\@(\w+\.)+\w+$/.test(email)?true:false;
}
9、请分别列出HTML、JavaScript、CSS、Java、php、python的注释代码形式。
答案：
HTML： <!-- HTML 注释 -->
JavaScript：     // 或/* */
CSS： /*  */
Java： // 或/* */
php： // 或/* */或#
python：         # 或'''注释'''
10、根据下图，编写HTML结构。要求：遵循xHTML 1.0规范且符合Web语义。

答案：

<div class="item">    <div class="item-pic">        <a href="path/to/item">            <img src="path/to/img" alt="商品图片" />        </a>    </div>    <div class="item-desc">        <a href="path/to/item/">联想IdeaPad U130红色至尊 高性价比</a>    </div>    <div class="item-price">        <em>￥8888.00</em>    </div></div>

11、请编写一段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);}

12、请用CSS定义p标签，要求实现以下效果: 字体颜色在IE6下为黑色(#000000)；IE7下为红色(#ff0000)；而其他浏览器下为绿色(#00ff00)。
答案：

p{    color:#0f0;    _color:#000; /*ie6*/   }/*ie7*/*+html p{    color:#f00;}

13、请简化以下的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;
}
答案：

div.container {    width: 500px;    background: url(/img/sprite.png) no-repeat 0 -78px;}#news-list, #news-list li {    margin: 0    padding: 0;}#news-list li {    padding-left: 20px;    background: url(/img/sprite.png) no-repeat -120px 0;}a {    font: bold 14px/150%;    color: #000;}

14、请编写一个通用的事件注册函数（请看下面的代码）。
function addEvent(element, type, handler)
{
    // 在此输入你的代码，实现预定功能
}

答案：

function addEvent(element, type, handler){    if (element.addEventListener){        element.addEventListener(type, handler, false);    }else if (element.attachEvent){        element.attachEvnet("on" + type, handler);    }else{     element["on" + type] = handler;}}

15、下面是个输入框 
当没有获取焦点时，显示灰色的提示信息：
当用户输入时，隐藏提示文字，且恢复为默认色：
当输入框失去焦点，如果输入为空，需还原提示信息：
要求： a) 写出HTML和CSS代码 b) 用JavaScript实现功能
答案：
HTML：
<input type="text" id="input" value="请输入内容" />
css：
#input{
    color:gray;
}
JS：

var input = document.getElementById("input");input.onfocus = function(){if(this.value == "请输入内容"){this.value = "";this.style.color = "black";}}input.onblur = function(){if(this.value == ""){this.style.color = "grey";this.value = "请输入内容";}}

16、请给JavaScript的String 原生对象添加一个名为trim 的原型方法，用于截取空白字符。要求
alert(" taobao".trim());     // 输出 "taobao"
alert(" taobao ".trim());    // 输出 "taobao"
答案：

String.prototype.trim = function() {              return this.replace(/^\s+|\s+$/g,"");     };

说明：记住\s表示空格
17、请编写一个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(url){    var temp=url.split('?')[1].split('&');    if(!temp){        return {};    }    var obj={};    for(var i=0;i<temp.length;i++){        var str=temp[i].split('=');        if(!obj[str[0]]){            obj[str[0]]=str[1];        }else{              obj[str[0]]=[obj[str[0]]];            obj[str[0]].push(str[1]);        }    }    return obj;}

18、根据下图，编写HTML结构。要求：符合xHTML 1.0规范。
答案：

<table align="center" border="1" cellspacing="0" cellpadding="0" width="50%">   <tr>    <th>国家</th>    <th>网站名</th>    <th>URL</th>    <th>Alexa排名</th>  </tr>  <tr align="center">    <td>中国</td>    <td>淘宝网</td>    <td>www.taobao.com</td>    <td>38</td>  </tr>  <tr align="center">    <td rowspan="2">美国</td>    <td>Ebay</td>    <td>www.ebay.com</td>    <td>22</td>  </tr>  <tr align="center">    <td>Amazon</td>    <td>www.amazon.com</td>    <td>27</td>  </tr>  <tr align="right">    <td colspan="4">Alexa.com提供</td>  </tr></table>

19、请指出下面代码中不符合xHTML 1.0规范的地方，说明理由，并写出改善后的代码：
<h1><p>小明的表白</p></h1>
<dl>
    <dt><p><div>小明说：</div></p></dt>
    <dd>”淘宝网，<i>天天上</i>。”</dd>
    <dd><b>”淘我喜欢！” </b></dd>
</dl>
答案：不合理的地方： 
1、 h1元素内不能包含其他块级元素； 
2、 dt元素内不能包含其他块级元素； 
3、 p元素内不能包含其他块级元素； 
4、 i表样式斜体，不符合语义化。 
5、 b表样式粗体，不符合语义化。 
代码：

<h1>小明的表白</h1><dl>    <dt>小明说：</dt>    <dd>”淘宝网，<em>天天上</em>。”</dd>    <dd><strong>”淘我喜欢！” </strong></dd></dl>

20、请把以下用于连接字符串的JavaScript代码修改为更有效率的方式
var htmlString ="<div class=”container”>" + "<ul id=”news-list”>";
for (var i = 0; i < NEWS.length; i++) {
    htmlString += "<li><a href=”"
        + NEWS[i].LINK + ">"
        + NEWS[i].TITLE + "</a></li>";
}
htmlString += "</ul></div>";
答案：

JavaScript赋值效率问题：var htmlString = "<div class=”container”>" + "<ul id=”news-list”>";for  (var i  =  0;  i  <  NEWS.length;  i++) {    var newsItem = NEWS[i];    htmlString+="<li><a href=”"+newsItem.LINK+">"+newsItem.TITLE+"</a></li>";}htmlString+="</ul></div>";

21、请给Array本地对象增加一个原型方法，它用于删除数组条目中重复的条目(可能有多个)，返回值是一个包含被删除的重复条目的新数组。
答案：

Array.prototype.delRep=function(){    if(this.length<=1){        return [];    }    this.sort();    var res=[this.shift()];    for(var i=1;i<this.length;i++){        if(this[i]!==res[res.length-1]){            res.push(this.splice(i,1)[0]); //注意此处            i--;        }    }    return this;}

22、请根据下面的描述，用JSON语法编写一个对象: “小明今年22岁，来自杭州。兴趣是看电影和旅游。他有两个姐姐，一个叫小芬，今年25岁，职业是护士。还有一个叫小芳，今年23岁，是一名小学老师。” 
var person = ?
答案：

var person={    "name":"小明",    "from":"杭州",    "interest":["看电影","旅游"],    "sister":[{        "name":"小芬",        "age":"25",        "iob":"护士"       },{        "name":"小芳",        "age":"23",        "iob":"小学教师"    }]};

23、请改善以下HTML代码，使其符合xHTML 1.0规范
<A id='go-home' href='http://www.taobao.com'   
    onClick='doSomething();'>  
    <IMG src="http://www.taobao.com/logo.png">  
</A>
答案：

<a id='go-home' href='http://www.taobao.com' onClick='doSomething();'>      <img src="http://www.taobao.com/logo.png">  </a>

24、根据下图，编写HTML结构。要求：遵循xHTML 1.0规范且符合Web语义。 
答案：

<form><fieldset><legend>您的基本信息</legend><label for="username">姓名：</label><input type="text" name="username"/><br><label for="sex">性别：</label><select name="sex"><option checked="checked">男性</option><option>女性</option></select></fieldset><fieldset><legend>设置密码</legend><label for="password">密码：</label><input type="password" name="password" /><br><label for="repassword">再输一遍：</label><input type="password" name="repassword" /></fieldset><div><input type="button" value="确定"/><input type="button" value="取消" /></div></form>

注意：
 1、表单：form 
 2、表单元素：input(type=text;type=password)、select、button 
 3、分组信息和标题: fieldset、legend 
 4、label标签以及其for属性和表单元素关联