您的位置:首页 > Web前端

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

2015-12-07 14:22 369 查看

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":"小学老
师"}]};
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: