阿里巴巴前端工程师笔试卷-2011年-k6k4.com

1、请列举7种以上常用的HTML标签，说明其语义。

2、请说明下面各种情况的执行结果，并注明产生对应结果的理由。

function doSomething() { 
    alert(this); 
}

① element.onclick = doSomething，点击element元素后。

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

③ 直接执行doSomething()。

3、请用JavaScript语言实现 sort 排序函数，要求：sort([5, 100, 6, 3, -12]) // 返回 [-12, 3, 5, 6, 100]。

如果你有多种解法，请阐述各种解法的思路及优缺点。（仅需用代码实现一种解法，其它解法用文字阐述思路即可）

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>

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) 如果有可改进之处，请给出改进后的代码，并说明理由。

6、请编写一个JavaScript 函数toRGB，它的作用是转换CSS中常用的颜色编码。要求：

alert(toRGB("#0000FF"));          // 输出 rgb(0, 0, 255)
alert(toRGB("invalid"));          // 输出 invalid 
alert(toRGB("#G00"));              // 输出 #G00

7、尝试实现注释部分的Javascript代码，可在其他任何地方添加更多代码（如不能实现，说明一下不能实现的原因）：

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

8、请编写一个JavaScript函数，它的作用是校验输入的字符串是否是一个有效的电子邮件地址。要求： a) 使用正则表达式； b) 如果有效返回true ，反之为false。

9、请分别列出HTML、JavaScript、CSS、Java、php、python的注释代码形式。

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

11、请编写一段JavaScript脚本生成下面这段DOM结构。要求：使用标准的DOM方法或属性。

<div id=”example”>  
    <p class=”slogan”>淘！你喜欢</p> 
</div>

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

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

14、请编写一个通用的事件注册函数（请看下面的代码）。

function addEvent(element, type, handler)
{
    // 在此输入你的代码，实现预定功能
}

15、下面是个输入框
        当没有获取焦点时，显示灰色的提示信息：
        当用户输入时，隐藏提示文字，且恢复为默认色：
        当输入框失去焦点，如果输入为空，需还原提示信息：
    要求： a) 写出HTML和CSS代码 b) 用JavaScript实现功能

16、请给JavaScript的String 原生对象添加一个名为trim 的原型方法，用于截取空白字符。要求

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

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

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

19、请指出下面代码中不符合xHTML 1.0规范的地方，说明理由，并写出改善后的代码：

<h1><p>小明的表白</p></h1>
<dl>
        <dt><p><div>小明说：</div></p></dt>
        <dd>”淘宝网，<i>天天上</i>。”</dd>
        <dd><b>”淘我喜欢！” </b></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>";

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

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

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>

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

参考答案

1、

1）div标签，是一个块元素，就像一个大盒子，可以放各式各样的东西，如：图片....

2）p标签，也是一个块元素，它通常是用来放一段话的....

3）h1,h2....h6标签，也是一个块元素，常用来放标题

4 ）span标签，是一个行内元素，常用来处理一段话中的某几个字符

5）img标签，用来加载图片的标签

6）table标签，用来创建表格的标签

7）br标签，用来换行的标签

8）hr标签，用来画线的标签

9）a一个点击跳转的超链接标签

10）ul一个用来做列表的标签

2、

①弹出element object，通过函数赋值方式，this直接指向element对象

②弹出window object，this是写在doSomething这个函数里面的，而这种方式的事件绑定写法并没有将element对象传递给this，而在默认情况下this指向window

③弹出window object，没有绑定对象的情况下this默认指向window

3、参考代码：

function sort(arr){
    for(var i=0;i<arr.length-1;i++){
        for(var j=0;j<arr.length-i-1;j++){
            if(arr[j]>arr[j+1]){
                var hand=arr[j];
                arr[j]=arr[j+1];
                arr[j+1]=hand;
            }
        }
    }
    return arr;
}

4、布局示意图如下：

5、

a) 功能：事件注册

b) 优点：跨浏览器，特性探测，性能优化。缺点：document.all

c) 作用：使得IE中listener的this 为 el，与其它浏览器一致

d) 改进：document.all改成window.attachEvent; useCapture的默认

6、参考代码：

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
}

7、参考代码：

var Obj = function(msg){
    this.msg = msg;
    this.shout = function(){
        alert(this.msg);
    }    
    this.waitAndShout = function(){
        var that = this;
        setTimeout(that.shout, 5000);
        //隔五秒钟后执行上面的shout方法
    }
    return this;
}
Obj("shouting").waitAndShout();

8、参考代码：

var checkEmail  = function(email){
var preg =  
        "(^[a-zA-Z]|^[\\w-_\\.]*[a-zA-Z0-9])@(\\w+\\.)+\\w+$"，,
    pregObj  =new RegExp(preg); 
    return pregObj.test(email);
}

9、如下所示：

<!-- HTML 注释 --> 

// JavaScript 注释 

/* 
 *   JavaScript 多行注释
 */ 

/* CSS 注释 */ 

// Java 注释 

/** 
 * Java 多行注释 
 */ 

// php 单行注释 

# php 单行注释 

/** 
 * php多行注释 
 */ 

# Python 单行注释 

'''  
Python 多行注释 
'''

10、参考代码：

<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、参考代码：

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、参考代码：

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

13、参考代码：

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)
{
    // 在此输入你的代码，实现预定功能
 
    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、参考代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<style>
    #content{
        color:grey;
    }
</style> 
<body>
    <input type="text" id="content" value="请输入内容">
</body>
<script>
    var input = document.getElementById("content");
    input.onfocus = function(){
        if(this.value == "请输入内容"){
        this.value = "";
        this.style.color = "black";
        }
    }
    input.onblur = function(){
        if(this.value == ""){
            this.style.color = "grey"; 
            this.value = "请输入内容";
        }
     }
</script>
</html>

16、参考代码：

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

17、参考代码：

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

18、参考代码：

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>阿里巴巴面试表格</title>
</head>
<body>
  <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>
</body>
</html>

19、不合理的地方：

h1元素包含p元素，理由：h1元素内不能包含其他块级元素；
dt元素包含p元素和div元素，理由：dt元素内不能包含其他块级元素；
p元素包含div元素，理由：p元素内不能包含其他块级元素；
i元素，理由：i表样式斜体，不符合语义化；
b元素，理由：b表样式粗体，不符合语义化。

20、参考代码：

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.prototype.distinct = function() {
    var ret = [];
    for (var i = 0; i < this.length; i++) 
    {
        for (var j = i+1; j < this.length;) {    
            if (this[i] === this[j]) {
                ret.push(this.splice(j, 1)[0]);
            } else {
                j++;
            }
        }
     }
     return ret;
}
//for test
alert(['a','b','c','d','b','a','e'].distinct());

22、如下：

var person = {"name":"小明","age":"22","form":"杭州","interest":["电影","旅游"],"sister":
[{"name":"小芬","age":"25","job":"护士"},{"name":"小芳","age":"23","job":"小学老
师"}]};

23、1）标签小写（包括onclick）； 2）属性名要使用引号(单双不限)； 3）必须闭合标签

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

24、参考代码：

<!DOCTYPE html >
<html xmlns="http://www.w3.org/1999/xhtml">
 
<head lang="en">
    <meta  http-equiv="content-type" content="text/html; charset=UTF-8"/>
    <title></title>
    <style>
        dt{font-weight: bold}
    </style>
</head>
<body>
<form action="">
    <section>
        <dl>
            <dt>您的基本信息</dt>
            <dd>
                <span>姓名:</span>
                <input type="text">
            </dd>
            <dd>
                <span>性别:</span>
                <select name="sex">
                    <option value="1"  selected="selected">女</option>
                    <option value="2">男</option>
                </select>
            </dd>
        </dl>
    </section>
    <section>
        <dl>
            <dt>设置密码</dt>
            <dd>
                <span>密码:</span>
                <input type="password">
            </dd>
            <dd style="text-indent: -2em">
                <span>再输一遍:</span>
                <input type="password">
            </dd>
        </dl>
        <dl> 
            <dd>
             <input type="submit" value="确定">
             <input type="button" value="取消">
            </dd>
        </dl>
    </section>
</form> 
</body>
</html>

个人资料

Bingo
等级：9
文章：694篇
访问：38.9w
排名： 1

推荐圈子

阿里巴巴笔试面试圈