阿里巴巴2011前端工程师笔试卷
2015-12-07 14:22
369 查看
1.请列举7种以上常用的HTML标签,说明其语义。
div:容器,块级元素,可以放块级元素和行内元素;
p:段落,块级元素;
h1~h6:标题,块级元素;
span:行内文字,行内元素
img:图片,行内元素;
table:表格,块级元素;
br:换行,行内元素;
hr:分割线,块级元素;
a:超链接,行内元素;
ul:无序列表,块级元素;
2.请说明下面各种情况的执行结果,并注明产生对应结果的理由。
问题
解析
3.阅读以下JavaScript代码:
题目
解析
4.请编写一个JavaScript 函数toRGB,它的作用是转换CSS中常用的颜色编码。 要求:
题目
解析
5.尝试实现注释部分的Javascript代码,可在其他任何地方添加更多代码(如不能实现,说明一下不能实现的原因):
题目
解析
6.请编写一个JavaScript函数,它的作用是校验输入的字符串是否是一个有效的电子邮件地址。
要求: a) 使用正则表达式。 b) 如果有效返回true ,反之为false。
解析
7.请编写一段JavaScript脚本生成下面这段DOM结构。要求:使用标准的DOM方法或属性。
题目
解析
8.请用CSS定义p标签,要求实现以下效果: 字体颜色在IE6下为黑色(#000000);IE7下为红色(#ff0000);而其他浏览器下为绿色(#00ff00)。
解析
9.请简化以下的CSS代码,并给出简单的说明。
题目
解析
10.请编写一个通用的事件注册函数(请看下面的代码)。
题目
解析
11.请给JavaScript的String 原生对象添加一个名为trim 的原型方法,用于截取空白字符。要求
题目
解析
12.请编写一个JavaScript函数 parseQueryString,它的用途是把URL参数解析为一个对象,如:
题目
解析
13.请根据下面的描述,用JSON语法编写一个对象: “小明今年22岁,来自杭州。兴趣是看电影和旅游。他有两个姐姐,一个叫小芬,今年25岁,职业是护士。还有一个叫小芳,今年23岁,是一名小学老师。”var person = ?
解析
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":"小学老 师"}]};
相关文章推荐
- AngularJS Module类的方法
- Unable to compile class for JSP 错误的解决过程。
- 谁对EXTJS熟悉,有关关闭panel的问题?
- 关于前端和后台服务器协调开发的几点建议
- 改善javaScript118个建议-检测内置的数据类型
- JavaScript基础——使用JavaScript对象
- jsp页面整体无法居中问题的解决方案
- ace admin模板实现伪无刷新模式的方法
- react native 中es6语法解析
- EXTJS
- 安装Mysql 5.7 on fedora23 kde
- JSP内置对象
- jQuery实现的虚拟键盘
- 一个靠谱的自动悬浮的导航栏(笔记)
- jQuery高亮显示文本中重要的关键字
- js 获得日期相差天数
- css基础
- Angular.js学习笔记(五)
- js格式化日期 年月日
- js 精确小数俩位