阿里巴巴2016前端工程师面试题-白红宇

强烈建议你试试无所不能的chatGPT，快点击我

阿里巴巴2016前端工程师面试题

阅读量：5046 次

发布时间：2019-06-12

本文共 7885 字，大约阅读时间需要 26 分钟。

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

1)div标签，是一个块元素，就像一个大盒子，可以放各式各样的东西；

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

3)h1,h2,h3,…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()。**

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

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

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

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

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

var arr=[5,100,6,3,-12]; var result=arr.sort(function(a,b) { return a-b; }); console.log(result);

1

2

3

4

5

4、请根据下面的HTML和CSS代码，画出布局示意图

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

这里写图片描述

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

1

2

3

4

5

6

7

8

9

10

11

请阐述 a) 代码的功能; b) 代码的优点和缺点; c) listener.apply(el) 在此处的作用; d) 如果有可改进之处，请给出改进后的代码，并说明理由。

a) 功能：事件注册

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

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

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

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

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

1

2

3

function toRGB(color) {    var str="";    var result=[];    var reg=/^#[0-9a-zA-Z]{3}$/;    if(color=="invalid") { return "invalid";} if(reg.test(color)) { return color;} else { for(vari=1;i<=6;i=i+2){ str=color.sub(i,2); var ss=str.parseInt(str,16); result.push(ss); } } return result; } console.log(toRGB("#0000ff")); // 输出 rgb(0, 0, 255) console.log(toRGB("invalid"));// 输出 invalid console.log(toRGB("#G00")); // 输出 #G00

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

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

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

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

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

function mail(email) {    var reg=/^\w+([\.-_]?\w+)*@\w+([\.-_]?\w+)*(\.\w{2,3})+$/; var tag=reg.test(email); if(tag) { return true; }else { return false; } } mail("794857535@qq.com");

1

2

3

4

5

6

7

8

9

10

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

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

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

这里写图片描述


            
     
      
     
 
     
      联想IdeaPad U130 红色至尊 高性价比
     
 
     
      ￥ 8888.00

1

2

3

4

5

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


          
     京东商城

1

2

3

indow.onload=init;    function init() {        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); }

1

2

3

4

5

6

7

8

9

10

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

1

2

3

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

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

简化

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

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

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

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

1

2

3

4

function addEvent(element,type,handler) {    // 在此输入你的代码，实现预定功能 if(element.addEventListener) { //存在的是DOM2级方法 element.addEventListener(type,handler,false); }else if(element.attachEvent) { //存在的是IE的方法 element.attachEvent("on"+type,handler); }else { //存在的是DOM0级方法 element["on"+type]=handler; } }

1

2

3

4

5

6

7

8

9

10

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

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

1

2

String.prototype.trim = function() {              return this.replace(/^\s+$/g, ""); }; console.log(" taobao".trim()); // 输出 "taobao" console.log(" taobao ".trim()); // 输出 "taobao"

1

2

3

4

5

16、请编写一个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

1

2

3

function parseQueryString(url) {    var result=[]; var arr=url.split("?")[1].split("&"); var len=arr.length; for(var i=0;i

1

2

3

4

5

6

7

8

9

10

11

12

13

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

这里写图片描述


    
                    国家        网站名        URL        Alexa排名       
      
                    中国        淘宝名        www.taobao.com        38       
              美国        Ebay        www.ebay.com        22       
              Amazon        www.amazon.com        27       
      
                    Alexa.com

1

2

3

4

5

6

7

8

9

10

11

12

13

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

小明的表白
 
     
     
      
      
       小明说：
      
      
     
 
     
      ”淘宝网，
      天天上。”
     
 
     
      ”淘我喜欢！”

1

2

3

4

5

6

改为：

小明的表白
 
     
     
      小明说：
     
 
     
      ”淘宝网，
      天天上。”
     
 
     
      ”淘我喜欢！”

1

2

3

4

5

6

说明：

1)h1元素包含p元素，理由：h1元素不能包含其他块级元素；

2)dt元素包含p元素和div元素，理由：dt元素内不能包含其他块级元素；

3)p元素包含div元素，理由：p元素内不能包含其他块级元素；

4)i元素，理由：i表样式斜体，不符合语义化；

5)b元素，理由：b表样式粗体，不符合语义化。

var htmlString =    "
    
     " + "
     
      "; for (var i = 0; i < NEWS.length; i++) { htmlString += "
      " + NEWS[i].TITLE + "
"; } htmlString += "
     
    
";

1

2

3

4

5

6

7

8

改为：

var htmlString=[];htmlString.push("
    
     " + "
     
      ");var len=NEWS.length; for(var i=0;i
      
       "+ new.TITLE + ""); } htmlString=htmlString.join("");

1

2

3

4

5

6

7

8

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

Array.prototype.method=function() {    var result=[]; len=this.length; for(var i=0;i

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

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

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

1

2

3

4

5

6

7

8

9

22、请改善以下HTML代码，使其符合xHTML 1.0规范

1

2

3

4

改为：

1

2

3

4

说明：

1)标签小写（包括onclick）；

2)属性名要是用引号（单双引号不限）;

3)必须闭合标签。

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

这里写图片描述


            
                 
      
       您的基本信息
      
 
      
       姓名：
       
      
 
      
       性别：
       
      
 
      
       设置密码
      
 
      
       密码：
       
      
 
      
       再输一遍：
       
      
 
     
 
      
      
    
 来源 https://blog.csdn.net/lijiajun95/article/details/54783433?ref=myrecommend

转载于:https://www.cnblogs.com/lizhiwei8/p/9578618.html

你可能感兴趣的文章

dijkstra （模板）

python小记（3）

编译Linux驱动程序遇到的问题

大型分布式网站架构技术总结

HDU 1017[A Mathematical Curiosity]暴力，格式

[算法之美] KMP算法的直观理解

EntityFramework 性能优化

【ASP.NET开发】菜鸟时期的ADO.NET使用笔记

android圆角View实现及不同版本号这间的兼容

OA项目设计的能力③

Cocos2d-x3.0 文件处理

全面整理的C++面试题

Activity和Fragment生命周期对比

OAuth和OpenID的区别

android 分辨率自适应

查找 EXC_BAD_ACCESS 问题根源的方法

国外媒体推荐的5款当地Passbook通行证制作工具

喝酒易醉，品茶养心，人生如梦，品茶悟道，何以解忧？唯有杜康！-- 愿君每日到此一游！

当前时间: 2024-11-15 00:49:23 当前IP: 18.116.80.217 联系邮箱:javaeecc@qq.com Copyright © 2020 - 2022 baihongyu.com 京ICP备2021015314号-2

强烈建议你试试无所不能的CHAT-GPT，快点击我

强烈建议你试试无所不能的CHAT-GPT，快点击我