zoukankan      html  css  js  c++  java

  • 2014阿里巴巴WEB前端实习生在线笔试题

    2014年3月31日晚，我怀着稍微忐忑的心情（第一次在线笔试^_^!!）进行了笔试。阿里巴巴的笔试题共同拥有10道，差点儿包括了Web前端开发的各个方面，有程序题、有叙述题。时间很紧张，仅仅完毕了大概6道题。

    以下把遇到的题目跟大家分享一下！

    1、

    <pre name="code" class="html"><!doctype html>  
<html>      
    <head>  
        <style type="text/css">  
            div:not(.outer) p { color: purple; }   
            div.outer p { color: orange; }  
        </style>  
    </head>  
  
    <body>  
        <div class="outer">  
            <p>  
                我是 outer 里面的字  
            </p>  
            <div class="inner">  
                <p>  
                    我是 inner 里面的字  
                </p>  
            </div>  
        </div>  
    </body>  
</html>  


    

    

    
问：为什么以上两个<p> 标签中的文字颜色都是橙色的？
    

    
这里涉及到了CSS中的层叠和特殊性问题。首先依照上下顺序，第一个<p>元素它的样式非常明显是由div.outer p 定义的，所以是橙色。第二个<p>元素的样式是由样式表中的两个样式同一时候定义，并且相同是color样式。依据《CSS权威指南》中的介绍，当CSS样式发生层叠时，要通过层叠规则来安排终于元素匹配的样式。
    CSS2.1的层叠规则中的规定。在没有!important标志时，要依照特殊性排序，假设还不能比較完，就后面覆盖前面。
    能够參考：CSS层叠规则
    

    
2、请实现一个Event类。继承自此类的对象都会拥有两个方法on和trigger，类声明例如以下，请写出完整代码：
    

    

    

    

    

    
[javascript] view
 plaincopy在CODE上查看代码片派生到我的代码片

    

    

    

    

      

    1. 
function Event() {}  
    2. 
Event.prototype.on = function(eventName, callback) {  
    3. 
//注冊事件监听  
    4. 
}  
    5. 
Event.prototype.trigger = function(eventName, data) {  
    6. 
//触发事件  
    7. 
}  
    

    

    <span style="font-family: Arial, Helvetica, sans-serif;">3、</span>
    

    
要求实现一个多行文本输入框，固定宽度。可依据用户输入的内容多少进行高度自适应变化。如。用户输入了1行文字，则输入框显示为1行。而有2行文字，就显示2行。如微博的评论回复。
    

    

    

    

    

    
[javascript] view
 plaincopy在CODE上查看代码片派生到我的代码片

    

    

    

    

      

    1. 
<!DOCTYPE html>  
    2. 
<html>  
    3. 
  
    4. 
<head>  
    5. 
    <title>文本框换行</title>  
    6. 
    <meta charset="utf-8">  
    7. 
    <style>  
    8. 
        .txt {  
    9. 
            border: 1px solid #CCC;  
    10. 
             200px;  
    11. 
            padding: 3px;  
    12. 
            font: 12px/16px Simsun;  
    13. 
            outline: none;  
    14. 
            resize: none;  
    15. 
            word-wrap: break-word;  
    16. 
            word-break: break-all;  
    17. 
            overflow: hidden;  
    18. 
        }  
    19. 
    </style>  
    20. 
  
    21. 
    <script>  
    22. 
        window.addEventListener('load', function () {  
    23. 
  
    24. 
            (function (o, e, t) {  
    25. 
                //创建一个pre标签，用来计算文字应有高度  
    26. 
                e = document.createElement("pre");  
    27. 
                //给pre加入上和文本域一样的样式  
    28. 
                e.className = "txt";  
    29. 
                //设置绝对定位到屏幕外来隐藏它  
    30. 
                e.style.position = "absolute";  
    31. 
                e.style.left = "-9999px";  
    32. 
                //创建一个文本节点来操作，避免直接操作HTML  
    33. 
                e.appendChild(t = document.createTextNode(""));  
    34. 
                //给pre的末尾加入一个换行。由于pre会吞掉末尾的一个换行  
    35. 
                e.appendChild(document.createTextNode("
"));  
    36. 
                //把pre放入文档中  
    37. 
                document.body.appendChild(e);  
    38. 
                //文本域键盘事件时计算高度  
    39. 
                o.onkeydown = o.onkeyup = function () {  
    40. 
                    //IE8下
在PRE标签中会被解析为两行，所以须要一个替换  
    41. 
                    //假设认为这样会影响效率能够先推断浏览器  
    42. 
                    t.data = o.value.replace(/
/g, "
");  
    43. 
                    o.style.height = e.offsetHeight - 8 + "px";  
    44. 
                };  
    45. 
                //初始时计算一次  
    46. 
                o.onkeydown();  
    47. 
                //为了避免换行时闪的太厉害。略微阻止下滚动  
    48. 
                o.onscroll = function () {  
    49. 
                    o.scrollTop = 0  
    50. 
                };  
    51. 
            })(document.getElementById("o"));  
    52. 
  
    53. 
        }, false);  
    54. 
    </script>  
    55. 
</head>  
    56. 
  
    57. 
<body>  
    58. 
    <textarea id="o" class="txt">来呀。来编辑我呀～</textarea>  
    59. 
</body>  
    60. 
  
    61. 
</html>  
    

    

    

    

    

    
4、
    

    
编写一个JavasSript函数。给定一个DOM节点node和一个正整数n,返回node的全部第n代后代节点（直接子节点为第1代）
    

    

    

    

    

    
[javascript] view
 plaincopy在CODE上查看代码片派生到我的代码片

    

    

    

    

      

    1. 
function getDescendants(node, n) {  
    2. 
// return an Array  
    3. 
}  
    

    

    

    

    

    

    

    

    
[javascript] view
 plaincopy在CODE上查看代码片派生到我的代码片

    

    

    

    

      

    1. 
<script type="text/javascript" >  
    2. 
    function getDescendants(node, n) {   
    3. 
        //node, n  
    4. 
        var childArr = [];  
    5. 
        var len,tempArr,childNodelist;                
    6. 
        childArr.push(node);  
    7. 
  
    8. 
        for(var i = 0; i<n ; i++){   
    9. 
            len = childArr.length;  
    10. 
            tempArr = [];  
    11. 
            for(var j = 0;j<len;j++){  
    12. 
                childNodeList = makeArray(childArr[j].childNodes);  
    13. 
                tempArr = tempArr.concat(childNodeList);  
    14. 
            }  
    15. 
            childArr = tempArr;  
    16. 
        }  
    17. 
        return childArr;  
    18. 
    }  
    19. 
    var makeArray = function(obj){  
    20. 
        return Array.prototype.slice.call(obj,0);  
    21. 
    }  
    22. 
    var result = getDescendants(document.getElementById("content"),2);  
    23. 
    alert(result);  
    24. 
</script>  
    

    

    

    
5、有2个int型已经去重的数组a和b。都是已经从小到大排序好的。
    要求遍历b数组的数字，假设这个数字出如今a中，就将其从a删去。反之将其插入到a的适当位置，使a保持排序状态。
    

    

    

    

    

    
[javascript] view
 plaincopy在CODE上查看代码片派生到我的代码片

    

    

    

    

      

    1. 
<script type="text/javascript" charset="utf-8">  
    2. 
//有2个int型已经去重的数组a和b，都是已经从小到大排序好的。
      要求遍历b数组的数字。  
    3. 
//假设这个数字出如今a中，就将其从a删去。反之将其插入到a的适当位置，使a保持排序状态。  
    4. 
var mySort = {};  
    5. 
  
    6. 
mySort.sortArr = function(a, b) {  
    7. 
    var pos = 0;  
    8. 
    for (var i = 0; i < b.length; i++) {  
    9. 
        pos = mySort.checkRepeat(a, b[i],pos);  
    10. 
    }  
    11. 
}  
    12. 
  
    13. 
mySort.checkRepeat = function(a, v, pos) {  
    14. 
    var isChanged = false;                
    15. 
    if (a != null && a != undefined && a.length > 0) {      
    16. 
        for (var j = pos; j < a.length; j++) {  
    17. 
            if (a[j] == v) {  
    18. 
                a.splice(j, 1);   
    19. 
                break;  
    20. 
            } else if (a[j] > v) {  
    21. 
                a.splice(j, 0, v);  
    22. 
                break;  
    23. 
            }   
    24. 
        }     
    25. 
        if(j == a.length){  
    26. 
            a.push(v);  
    27. 
        }         
    28. 
        return j;  
    29. 
    }     
    30. 
  
    31. 
}  
    32. 
  
    33. 
var a = [2,7,12,25,36,64];  
    34. 
var b = [2,3,9,32,36,56,87];  
    35. 
  
    36. 
document.write("合并前数组a为："+a.toString()+"<br>");  
    37. 
document.write("合并前数组b为："+b.toString()+"<br>");  
    38. 
  
    39. 
mySort.sortArr(a,b);  
    40. 
  
    41. 
document.write("合并后数组a为："+a.toString());  
    

    
//结果是:

    

    

    
合并前数组a为：2,7,12,25,36,64
    
合并前数组b为：2,3,9,32,36,56,87
    
合并后数组a为：3,7,9,12,25,32,56,64,87
    

    

    

    

    
6、请描写叙述一下从用户输入网址開始。到网页最后呈现出来的全过程。越具体越好。包含各种事件等。
    

    
7、131234iosoos0hscs0w0lz8、请评价下面代码并给出改进意见。
    

    <pre name="code" class="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、为什么终于小狗叫了200声汪？请具体说明为什么。2、改动代码setTimeout部分代码，实现每隔1秒调用i（从1到10递增）次dog()。
    

    
1、第一题重点在于函数作用域的问题。
    

    
2、 改动后的setTimeout函数是
    

    

    

    

    
[javascript] view
 plaincopy在CODE上查看代码片派生到我的代码片

    

    

    

    

      

    1. 
for (var i = 0; i < 10; i++) {  
    2. 
    (function(a) {  
    3. 
        setTimeout(function() {  
    4. 
            for (var j = 1; j <= a; j++) {  
    5. 
                document.write(dog()+" "+a+"<br>");  
    6. 
            }  
    7. 
        }, 1000);  
    8. 
    })(i+1);  
    9. 
}  
    

    

    
   

    

    
    
                
    
                
              
    • 
              
    
              
  • 

                相关阅读:
    
                
                  C++对象模型与内存位对齐的简单分析（GNU GCC&VS2015编译器） 
                    
    [GeekBand] C++学习笔记（2）——BigThree、OOP 
                    
    [GeekBand] C++ 高级编程技术   (1) 
                    
    [GeekBand]C++高级编程技术（2） 
                    
    C++中引用的本质分析 
                    
    函数的重载(1) 
                    
    C++的特点 
                    
    布尔类型和三目运算符 
                    
    Linux客户端下的latex相关操作 
                    
    无光驱上网本上安装win7 
                    
                        
              
    • 
              
    
              
  • 
                原文地址：https://www.cnblogs.com/wzjhoutai/p/6888287.html
              
    • 

            

          



          
          

            

            

          

        

      

      



      

      

        

          Copyright © 2011-2022 走看看