經典的阿里前端筆試題

1 請說明下面各種情況的執行結果，並注明產生對應結果的理由。

function doSomething() {  
  alert(this);  
}   

① element.onclick = doSomething，點擊element元素后。

② element.onclick = function() {doSomething()}， 點擊element元素后。

③ 直接執行doSomething()。

參考答案：

1、element：調用執行時直接指向事件元素。

2、window：函數調用中的 this 綁定到全局對象。

3、window：函數調用中的this綁定到全局對象。

評分要點：

同參考答案

2 請用JavaScript語言實現 sort 排序函數，要求：

sort([5, 100, 6, 3, -12]) // 返回 [-12, 3, 5, 6, 100]

如果你有多種解法，請闡述各種解法的思路及優缺點。（僅需用代碼實現一種解法，其它解法用文字闡述思路即可）

參考答案：

有冒泡、插入、選擇、快速、歸並等各種排序算法。如果能闡述兩種以上排序算法的思路和優缺點，就非常不錯了。

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> 

 

寬度值不必精確到像素，示意即可。

4 閱讀以下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的默認值

閱卷說明：

合格：a正確，b能命中2個要點

良好：d正確，b能命中3個要點

優秀：d正確，b能命中4個要點

5 請編寫一個JavaScript 函數toRGB，它的作用是轉換CSS中常用的顏色編碼。 要求：

alert(toRGB("#0000FF"));          // 輸出 rgb(0, 0, 255)

alert(toRGB("invalid"));          // 輸出 invalid

alert(toRGB("#G00"));              // 輸出 #G00

參考答案：

    function toRGB(val) {
        var reg1 = /^#([0-9A-F]{2})([0-9A-F]{2})([0-9A-F]{2})$/i,
             reg2 = /^#([0-9A-F])([0-9A-F])([0-9A-F])$/i,
            reg3 = /[0-9A-F]{2}/g,
             m;
        if(reg2.test(val)) {
            val = val.replace(reg2, "#$1$1$2$2$3$3");
        }
        if(reg1.test(val)) {
            m  = val.match(reg3);
            val = "rgb(" + [
                     parseInt(m[0], 16),
                     parseInt(m[1], 16),
                      parseInt(m[2], 16)
                  ].join(", ") + ")";
        }
        return val;
}

 

閱卷說明：

合格：程序邏輯正確

良好：使用parseInt, 正則

優秀：性能優異，比如使用join, exec, PARSE_INT

注：如果良好4分，優秀5分，上面的參考代碼約4.5分

6 嘗試實現注釋部分的Javascript代碼，可在其他任何地方添加更多代碼（如不能實現，說明一下不能實現的原因）：var Obj = function(msg){

this.msg = msg;
this.shout = function(){
alert(this.msg);
}
this.waitAndShout = function(){
//隔五秒鍾后執行上面的shout方法
}
}

參考答案：

this.waitAndShout = function(){
//隔五秒鍾后執行上面的shout方法
var _self = this;
setTimeout(function(){
_self.shout();
},5000);
}

7 請編寫一個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);
}

關鍵評分看能否寫出正則表達式，考慮多種情況即可。

8 請分別列出HTML、JavaScript、CSS、Java、php、python的注釋代碼形式。

參考答案 Js：

 單行 // 注釋內容

多行 

/*

注釋內容

*/

Css：/* 注釋內容 */ 

Html：<!--注釋的內容-->

PHP： //單行注釋內容 

/*

多行注釋內容

*/

Python：

#單行注釋內容

9 根據下圖，編寫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>

閱卷說明：

合格：結構與class命名的語義化

良好：img的alt屬性，del 和 em/strong 標簽的使用

10 請編寫一段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);

評分要點：

1、 創建元素的DOM方法 – createElement；

2、 設置元素屬性的DOM方法 – setAttribute； 

3、 添加到元素上的DOM方法 – appendChild；

4、 創建文字的DOM方法 -  createTextNode；

5、 設置樣式的DOM屬性 – className（HTML DOM屬性）

或者:

if(isIE) {//
oDiv.setAttribute(“className”, ” box”);
} else {
oDiv.setAttribute(“class”, ” box”);
}

11 請列舉7種以上常用的HTML標簽，說明其語義：

參考答案

標簽	語義
p	段落
Strong	加重
Li	無序列表
Ol	有序列表
Span	定義文檔中的節。
h1-h6	標題
img	圖片
Br	換行
Hr	水平分割線
dl dt dd	定義條目

 

12 請用CSS定義 <p> 標簽，要求實現以下效果: 字體顏色在IE6下為黑色(#000000)；IE7下為紅色(#ff0000)；而其他瀏覽器下為綠色(#00ff00)。

參考答案

p {

color:#0f0;

*color:#f00;

_color:#000;

}

ie6 

* html p{

color:#000;

}

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;
}

如果div.container和#news-list li背景圖合並，使用

div.container,#news-list li{ background: url(/img/sprite.png)};

也正確。

14 對於下面這段代碼：

<a href=”somewhere.html” onclick=”dosomething()”>

問題一：請列舉其優缺點，說說你的看法。

問題二：請編寫一個通用的事件注冊函數（請看下面的代碼）。 

function addEvent(element, type, handler) {

// 在此輸入你的代碼，實現預定功能

}

參考答案

function addEvent(element, type, handler) {
// 在此輸入你的代碼，實現預定功能
if (element.addEventListener) {
element.addEventListener(type, handler, false);
} else if (element.attachEvent) { //for IE
element.attachEvnet(“on” + type, handler);
} else {
element[“on”+ type] = handler;
}
}

15 下面是個輸入框，當沒有獲取焦點時，顯示灰色的提示信息：

當用戶輸入時，隱藏提示文字，且恢復為默認色：

當輸入框失去焦點，如果輸入為空，需還原提示信息：

要求：

a) 寫出HTML和CSS代碼

b) 用JavaScript實現功能

參考答案：

<style type="text/css">
    .tip { color: gray; }
</style>
<input type="text" id="test" class="tip" value="請輸入內容" />
<script type="text/javascript">
(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>

閱卷說明：

合格：HTML和CSS代碼正確，JS功能正確

良好：事件注冊采用addEventListener或attachEvent；樣式和行為分離，JS代碼中通過class改變樣式

優秀：事件注冊兼容主流瀏覽器；根據className而不是value值來判斷切換；封裝成通用util

注：如果優良4分，優秀5分，上面的參考代碼約4.5分

16 請給JavaScript的String 原生對象添加一個名為trim 的原型方法，用於截取空白字符。要求：

alert(" taobao".trim());     // 輸出 "taobao"

alert(" taobao ".trim());    // 輸出 "taobao"

參考答案：

String.prototype.trim = function() {

        return this.replace(/^\s+|\s+$/g, "");

    };

閱卷說明：

合格：程序邏輯正確

良好：用正則實現，方法添加在String.prototype上

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 ( name ){
  name = name.replace(/[\[]/,"\\\[");
  var regexS = "[\\?&]"+name+"=([^&#]*)";
  var regex = new RegExp( regexS );
  var results = regex.exec( window.location.href );
  if( results == null )
    return "";
  else
    return results[1];
}

18  根據下圖，編寫HTML結構。要求：符合xHTML 1.0規范。

參考答案：

有正確使用 <thead>,<th>,<tbody>標簽。如果表頭使用caption，添加summary屬性。更好

19 根據下圖，編寫HTML結構。要求：遵循xHTML 1.0規范且符合Web語義。

參考答案

評分要點：

1、 表單：form

2、 表單元素：input(type=text;type=password)、select、button

3、 分組信息和標題: fieldset、legend

4、 label標簽以及其for屬性和表單元素關聯

20 請指出下面代碼中不符合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元素包含p元素，理由：h1元素內不能包含其他塊級元素；

2、 dt元素包含p元素和div元素，理由：dt元素內不能包含其他塊級元素；

3、 p元素包含div元素，理由：p元素內不能包含其他塊級元素；

4、 i元素，理由：i表樣式斜體，不符合語義化。

5、 b元素，理由：b表樣式粗體，不符合語義化。

<h1><span>小明的表白</span></h1>
<dl>
<dt><span>小明說：</span></dt>
<dd>”淘寶網，<em>天天上</em>。”</dd>
<dd><strong>”淘我喜歡！”</strong></dd>
</dl>

21 請把以下用於連接字符串的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>’;

參考答案：

原方法每運行一次“+”會生成新的string對象。改用數組進行join。

22 請給Array本地對象增加一個原型方法，它用於刪除數組條目中重復的條目(可能有多個)，返回值是一個包含被刪除的重復條目的新數組。

參考答案

Array.prototype.distinct = function() {
    var result = [];
    for (var i = 0; i < this.length; i++) {
        if (result.indexOf(this[i]) == -1) {
            result.push(this[i]);
        }
    }
    return result;
}

//for test
alert(['a', 'b', 'c', 'd', 'b', 'a', 'e'].distinct());

23 請根據下面的描述，用JSON語法編寫一個對象:

“小明今年22歲，來自杭州。興趣是看電影和旅游。他有兩個姐姐，一個叫小芬，今年25歲，職業是護士。還有一個叫小芳，今年23歲，是一名小學老師。”

var person = ?

參考答案

var person = {
"name": "小明", "age": 22, 
"city": "杭州", 
"interest": ["電影", "旅游"],
"sisters": [
{"name": "小芬", "age": 25, "job": "護士"}, 
{"name": "小芳", "age": 23, "job": "小學老師"}
]
};

24 請改善以下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>

1. 標簽小寫（包括onclick）
2. 屬性名要使用引號(單雙不限)
3. 必須閉合標簽