【猫厂面试题】——-2016(Web前端)

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代码，画出布局示意图

<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>
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"));          // 输出 invalidalert(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"));// 输出 invalidconsole.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("[e-mail]");
1
2
3
4
5
6
7
8
9
10

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

  <!--html注释--//javascript注释/**javascript多行注释*//*css注释*///java注释/**java多行注释      *///php单行注释            #php单行注释/**php多行注释*/ #Python单行注释      ''' 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语义。 

<div id="nav">        <div class="img"><a href="#"><img src="image/imgs.jpg" alt="联想IdeaPad"></a></div>        <div class="discript"><span>联想IdeaPad U130 红色至尊 高性价比</span></div>        <div class="money"><em>￥ 8888.00</em></div>    </div>
1
2
3
4
5

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

<div id=”example”>      <p class=”slogan”>京东商城</p></div>
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<len;i++) {        var arr1=arr[i].split("=");        result[arr1[0]]=arr1[1];    }    return result;}var url = "http://www.taobao.com/index.php?key0=0&key1=1&key2=2&key3=3&key4=5";var obj = parseQueryString(url);console.log(obj.key0);//输出0
1
2
3
4
5
6
7
8
9
10
11
12
13

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

<table border="1" cellspacing="0" cellpadding="0">        <thead>            <tr><th>国家</th><th>网站名</th><th>URL</th><th>Alexa排名</th></tr>        </thead>        <tbody>            <tr><td>中国</td><td>淘宝名</td><td>www.taobao.com</td><td>38</td></tr>            <tr ><td rowspan="2">美国</td><td>Ebay</td><td>www.ebay.com</td><td>22</td></tr>            <tr ><td>Amazon</td><td>www.amazon.com</td><td>27</td></tr>        </tbody>            <tfoot>            <tr align="right"><td colspan="4">Alexa.com</td></tr>        </tfoot>        </table>
1
2
3
4
5
6
7
8
9
10
11
12
13

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

<h1><p>小明的表白</p></h1><dl>        <dt><p><div>小明说：</div></p></dt>        <dd>”淘宝网，<i>天天上</i>。”</dd>        <dd><b>”淘我喜欢！” </b></dd></dl>
1
2
3
4
5
6

改为：

<h1><span>小明的表白</span></h1><dl><dt><span>小明说：</span></dt><dd>”淘宝网，<em>天天上</em>。”</dd><dd><strong>”淘我喜欢！”</strong></dd></dl>
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 =    "<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>";
1
2
3
4
5
6
7
8

改为：

var htmlString=[];htmlString.push("<div class=”container”>" + "<ul id=”news-list”>");var len=NEWS.length;for(var i=0;i<len;i++) {    var new=NEWS[i];    htmlString.push("<li><a href=" + new.LINK + ">"+ new.TITLE + "</a></li>");}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<len;i++) {        for(var j=i+1;j<len;) {            if(this[i]===this[j]) {                result.push(this.splice(j,1)[0]);            }else {                j++;            }        }    }    return result;}console.log(['a','b','c','e','c','a'].method());
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规范

<A id='go-home' href='http://www.taobao.com'       onClick='doSomething();'>      <IMG src="http://www.taobao.com/logo.png">  </A>
1
2
3
4

改为：

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

说明： 
1)标签小写（包括onclick）； 
2)属性名要是用引号（单双引号不限）; 
3)必须闭合标签。 
23、根据下图，编写HTML结构。要求：遵循xHTML 1.0规范且符合Web语义。 

<form >        <dl>            <dt>您的基本信息</dt>            <dd>姓名：<input type="text"></dd>            <dd>性别：<select name="sex">                        <option value="1" selected="selected" >男性</option>                        <option value="2">女性</option>                </select></dd>            <dt>设置密码</dt>            <dd>密码：<input type="password"></dd>            <dd>再输一遍：<input type="password"></dd>        </dl>        <input type="button" value="确定">        <input type="button" value="取消">    </form>