WEB前端面試2014阿里旺旺

NO1.下圖綠色區域的寬度爲100%，其中有三個矩形，第一個矩形的寬度是200px，第二個和第三個矩形的寬度相等。請使用css3中的功能實現它們的佈局。

已知HTML結構是：

<div class="box"> <div class="item">column 1</div> <div class="item">column 2</div> <div class="item">column 3</div> </div>

此題的目的本身認爲是主要考察開啓盒佈局，以及彈性空間分配–box-flex屬性。

.box { background-color:#4dadda; display:-moz-box; display:-webkit-box; display:box; height:50px; line-height:30px; text-indent:10px; } .item { box-flex:1; -moz-box-flex:1; -webkit-box-flex:1; margin:10px; background:#fff; text-align:center } .item:first-child { box-flex:0; -moz-box-flex:0; -webkit-box-flex:0; width:200px; background:#fff; margin:10px; text-align: left; } .item:nth-child(2) { margin:10px 0 }

注：對column1設置固定寬度，box-flex：0（表示固定寬度，不參與自適應寬度）width:200px;

NO2.有兩個盒子 A、B，B 在 A 盒子中，它們的 css 是這麼定義的：

.A { position:relative; width:500px; height: 500px; background-color:green; } .B { position:absolute; max-width:300px; max-height:300px; background-color:blue; }

如何實現 B 在 A 中水平方向和垂直方向居中？

若是B沒有進行絕對定位，能夠用css中的box-algin和box-pack來實現。沒定位實現水平垂直居中的css完整代碼以下：

.A { position:relative; width:500px; height: 500px; background-color:green; display:-webkit-box; display:-moz-box; display:box; -webkit-box-align:center; -moz-box-align:center; box-align:center; -webkit-box-pack:center; -moz-box-pack:center; box-pack:center; } .B { max-width:300px; max-height:300px; background-color:blue; }

但題目中對B進行了絕對定位，這樣用js能夠實現：

var b=document.getElementsByClassName("B")[0]; var l=b.offsetWidth; var t=b.offsetHeight; console.log(l); b.style.left = (500-l)/2 + 'px'; b.style.top = (500-t)/2 + 'px';

NO3.常常在SNS中看到以下圖所示的功能：

請經過代碼完成它，它至少應該：
1. 良好結構、語義化的HTML
2. 兼容主流的瀏覽器；
3. JS應該包括： 1) 實時計數功能 2)校驗字數限制 3) 防止重複提交；
4. 若是時間所限，沒法100%，但請說明實現方案及思路；

以爲主要考察了計數的功能以及字數的限制功能。

實現代碼以下：

html代碼

<textarea id="b" rows="4" cols="20" ></textarea> <div><span id="a">0</span>/150</div>

js代碼

var maxlen = 150; document.onkeyup = function(){ var len = document.getElementById('b').value.length; if(len > maxlen){ document.getElementById('b').value = document.getElementById('b').value.substring(0,maxlen - 1); }else{ document.getElementById('a').innerHTML = len; } }

這裏用到了substring方法來實現把超過限制的內容去掉，取0到最大限制的範圍的內容。

寫到這兒發現若是是一個漢字算2個字符，字母數字等算一個字符，那麼能夠用charAt()或者charCodeAt()方法實現。

用charAt()方法：

var maxlen = 150; function getByteLen(val){ var len = 0; for(var i = 0; i < val.length; i++){ if(val.charAt(i).match(/[^\x00-\xff]/ig) != null){ len += 2; }else{ len += 1; } } return len; } document.onkeyup = function(){ var textareaValue = document.getElementById('b').value; var len = getByteLen(textareaValue); if(len > maxlen){ textareaValue = textareaValue.substring(0,maxlen - 1); }else{ document.getElementById('a').innerHTML = len; } }

說明下：[^\x00-\xff]表示ASCII 編碼不在0-255的字符

用charCodeAt()方法：

function getByteLen(val){ var len = 0; for (var i = 0; i < val.length; i++) { if (val.charCodeAt(i) > 255){ len += 2; }else{ len += 1; } } return len; }

NO4.以下代碼：

function test() { var a = 1; setTimeout(function() { alert(a); a = 3; }, 1000); a = 2; setTimeout(function() { alert(a); a = 4; }, 3000); } test(); alert(0);

請注意,代碼中有三處alert.他們分別會alert出什麼值,時間上的順序是怎樣的?
請詳述獲得這個答案的緣由,特別是test函數的局部變量a是對運行結果的影響.
運行結果：0 2 3

 

NO5.當咱們使用CSS3新屬性，好比：box-shadow或者transition時，咱們怎麼檢測瀏覽器是否支持這些屬性？
請設計一個javascript函數，該函數接受一個CSS屬性名做爲參數，並返回一個boolean值，代表瀏覽器是否支持這個屬性。

var supports = (function() { var div = document.createElement('div'), vendors = 'Khtml Ms O Moz Webkit'.split(' '), len = vendors.length; return function(prop) { if ( prop in div.style ) return true; prop = prop.replace(/^[a-z]/, function(val) { return val.toUpperCase(); }); while(len--) { if ( vendors[len] + prop in div.style ) { // browser supports box-shadow. Do what you need. // Or use a bang (!) to test if the browser doesn't. return true; } } return false; }; })(); if ( supports('textShadow') ) { document.documentElement.className += ' textShadow'; }

這就是最終代碼，原理是：

• 建立一個div，而後能夠得到div.style，這是它所支持的屬性的數組列表。
• 檢查text是否包含在數組中，若是是，直接返回true。
• 檢查各類前綴，好比Webkit加上text，即webkitTransition，若是包含在style中，返回true。
• 值得注意的是在CSS中屬性名爲：-webkit-transition，可是在DOM的style中 ，倒是對應webkitTransition。

參考地址：Quick Tip: Detect CSS3 Support in Browsers with JavaScript

 

NO6.解釋一下下面兩句話

alert(Function instanceof Object); alert(Object instanceof Function);

Object, Function, Array等等這些都被稱做是構造「函數」，他們都是函數。而全部的函數都是構造函數Function的實例。從原型鏈機制的的角度來講，那就是說全部的函數都能經過原型鏈找到建立他們的Function構造函數的構造原型Function.protorype對象，因此：

alert(Object instanceof Function);// return true

與此同時，又由於Function.prototype是一個對象，因此他的構造函數是Object. 從原型鏈機制的的角度來講，那就是說全部的函數都能經過原型鏈找到建立他們的Object構造函數的構造原型Object.prototype對象，因此： 

alert(Function instanceof Object);// return true

 

NO7.現有代碼以下

var foo = 1; function main(){ alert(foo); var foo = 2; alert(this.foo) this.foo = 3; }

//1.請給出如下兩種方式調用函數時，alert的結果，並說明緣由。
var m1 = main();
var m2 = new main();
//2.若是想要var m1 = main()產生的m1和前面的m2徹底一致,又該如何改造main函數?

在調用的時候，第一次輸出爲undefined，由於局部變量 foo 尚未被賦值，第二次輸出爲1，由於此時在非嚴格模式下 this 指代 window 對象。this.foo 即爲全局變量的 foo 。

當new一個實例對象的時候，第一次輸出的仍是undefined，可是第二次也是輸出的undefined。由於this.foo中的this指向的是實例對象的prototype對象，裏面的this.foo沒有定義爲空。

若是想要m1獲得的結果和m2徹底一致，那簡單的方法就是給m1中原型鏈中添加prototype對象就能夠實現 例如：main.prototype.foo=1;

 

NO8.實現以下圖所示的佈局

要求：
sidebar 固定寬度200px，content和header寬度自適應
當window寬度小於600px時，變成三行佈局
默認以下:

寬度小於600px時以下:

下面是html結構：

<div class='header'> <h1>header</h1> </div> <div class="sidebar"> <h1">sidebar"</h1> </div> <div class="content"> <h1>content</h1> </div>

請寫出其css代碼：（提示，可使用media query來檢測瀏覽器窗口寬度）

這裏涉及到CSS的media query檢測，針對這個題來講，只要用到 screen and (min-width) 便可。代碼以下：

h1 { margin: 0; } div{ height: 100px; } div:nth-of-type(n+2) { margin-top: 20px; } .header { background-color: red; } .sidebar { background-color: green; } .content { background-color: blue; } @media screen and (min-width: 600px) { .sidebar { width: 200px; position: absolute; } .content { margin-left: 220px; } }

 

NO9.寫一段腳本，實現：當頁面上任意一個連接被點擊的時候，alert出這個連接在頁面上的順序號，如第一個連接則alert(1), 依次類推。

方法一：

var body=document.getElementsByTagName("body")[0]; var links=document.getElementsByTagName("a"); var len=links.length; var foo=function(e){ e=e||window.event; e.target=e.target||e.srcElement; var tagName=e.target.tagName.toLowerCase(); if((tagName==='a'||tagName==='area')&& e.target.href){ for(var i=0;i<len;i++){ if(links[i]===e.target){ alert(i+1); } } } } if(body.addEventListener){ body.addEventListener('click',foo,false); } else if(body.attachEvent){ body.attachEvent('click',foo); }

方法二：

var links = document.getElementsByTagName("a"); for (var i=0; i<links.length; i++){ document.links[i].onclick = (function(x){ return function(){ alert(x+1); } })(i); }

 

NO10.html5標準頁面佈局

<header></header> <nav></nav> <aside></aside> <section></section> <footer></footer>

 

NO11.在CSS樣式中常使用px、em兩種長度單位，各有什麼優劣，在表現上有什麼區別？

px與em的區別
em有以下特色：
1. em的值並非固定的;
2. em會繼承父級元素的字體大小。

 

NO12.(new Date).getTime() 和 +new Date() 均可以取到當前時間戳，它們的實現原理是什麼，哪一個效率更高？

發現這個函數自己實際上等價於 valueOf ，那麼結論也呼之欲出了。由於第一種方法實際上直接調用了 valueOf ，而第二種方法涉及到JS內部的類型轉換

，儘管最終的結果也是調用了 valueOf 函數，可是畢竟有個轉換的過程，因此效率理應比前者要來的低下吧。

alert( new Date().getTime() );

alert( typeof ( new Date().getTime() ) );alert( + new Date() );

alert( typeof ( + new Date() ) );
+new Date() 這裏可能涉及類型轉換吧。效率會低點。我以爲是這樣。+會把Date對象轉換成數字，Date對象轉換成數字就是毫秒數。

 

NO13.請寫一個 getParents 方法讓它能夠獲取某一個 DOM 元素的全部父親節點。

function getParents(ele) { var matched = [] // 防止獲取 document while ( (ele = ele.parentNode) && ele.nodeType !== 9) { matched.push(ele) } return matched }

 

NO14.請寫出至少5個html5新增的標籤，並說明其語義和應用場景

HTML5標籤
<header></header>

<nav></nav>

<aside></aside>

<article></article>

<section></section>

<footer></footer>

 

NO15.有哪些前端代碼優化/性能優化的方法？

前端優化的主要方法：

1.減小http請求次數。（包括 優化圖片，合併腳本和樣式表，關注Expires頭的設置等。）

2.充分利用並行下載。（試用2個主機名；將腳本放到底部，以免對並行下載的影響。）

3.減少元素的大小。（精簡腳本；優化css；試用Gzip對腳本，樣式表，html文檔進行壓縮，一般能減小60%的數據量；）

 

NO16.有一個數組，其中保存的都是小寫英文字符串，如今要把它按照除了第一個字母外的字符的字典順序(字典順序就是按首字母從a-z順序排列，若是首字母相同則按第二個字母……)排序，請編寫代碼：

例： [「abd」,」cba」,」ba」]
排序後 [「ba」,」cba」,」abd」]

var bySecLetter=function(x,y){ if(typeof x==='string' && typeof y==='string'){ var a=x.slice(1), b=y.slice(1); if(a>b){return 1;} else if(a<b){return -1;} else if(a==b){return 0;} } } var a=['abd','cba','ba','ba']; console.log(a.sort(bySecLetter)); //["ba", "ba", "cba", "abd"]

這裏只須要調用sort的比較函數，大於返回正數，小於返回負數，等於返回0便可。而做爲字符串，自己的比較順序就是字典順序，因此只須要截取從第二個字符開始的字串進行比較，就能夠得出比較結果。

 

NO17.

①.你瞭解arguments對象麼,它有哪些屬性?
②.arguments是數組麼?若是不是請寫一段代碼將其轉化爲真正的數組,什麼狀況下須要這麼作?
③.arguments有什麼特性,能夠用這些特性作什麼?

在函數代碼中，使用特殊對象 arguments，開發者無需明確指出參數名，就能訪問它們。
例如，在函數 sayHi() 中，第一個參數是 message。用 arguments[0] 也能夠訪問這個值，即第一個參數的值（第一個參數位於位置 0，第二個參數位於位置 1，依此類推）。

檢測參數個數
還能夠用 arguments 對象檢測函數的參數個數，引用屬性 arguments.length 便可。

arguments.callee表明當前的函數體.

arguments轉數組
var arr = Array.prototype.slice.call(arguments,0);

 

NO18.僞類與僞元素的區別

僞類和僞元素的根本區別在於：它們是否創造了新的元素(抽象)。從咱們模仿其意義的角度來看，若是須要添加新元素加以標識的，就是僞元素，反之，若是隻須要在既有元素上添加類別的，就是僞類。
僞類一開始單單只是用來表示一些元素的動態狀態，典型的就是連接的各個狀態(LVHA)。隨後CSS2標準擴展了其概念範圍，使其成爲了全部邏輯上存在但在文檔樹中卻無須標識的「幽靈」分類。
僞元素則表明了某個元素的子元素，這個子元素雖然在邏輯上存在，但卻並不實際存在於文檔樹中。
CSS Selector Level 3 爲了區分這二者的混淆，而特地用冒號加以區分：
僞類用一個冒號表示 :first-child
僞元素則使用兩個冒號表示 ::first-line

 

NO19.頁面中有個id爲J_banner的區塊，請使用CSS實如今普通屏幕上使用圖片banner.png爲背景，在retina屏幕上顯示更高分辨率的圖片banner_retina.png做爲背景

<div id=」J_banner」> … </div>

retina屏幕:指Iphone 4代所採用的IPS屏幕，分辨率達960×640，像素密度提升了4倍

@media screen and (min-width: 960px)｛
.J_banner{background:url(../images/banner.png) no-repeat;} ｝ @media screen and (max-width: 960px)｛ .J_banner{background:url(../images/banner_retina.png) no-repeat;} ｝

查看屏幕分辨率的方法：console.log(window.screen.width)

 

NO20.

var a = [-3,-1,0,1,3,5,7,9], b = [-4,-2,0,2,3,4,5,6,7,8];
//返回一個合併過的數組[-4,-3,-2,-1,0,0,1,2,3,3,4,5,5,6,7,7,8,9]

解答：

var a = [-3,-1,0,1,3,5,7,9], b = [-4,-2,0,2,3,4,5,6,7,8]; var c = a.concat(b); var d = c.sort(function(a,b){return a-b;}) console.log(d);

 

NO21.

//請補全下面的函數，僅當p爲數組時返回true.
//可給出多種實現方式,每種實現方式不必定完美,若是不完美,須要說明每種實現的限制

function isArray(p) { 　　//你的代碼在這裏 }

解答：

if(p instanceof Array){return true;}

 

NO22.請讓頁面中的一個元素（10px*10px）圍繞座標(200, 300) 作圓周運動

html代碼：

<div id="div"></div> <div id="center"></div>

css代碼：

#div { position: absolute; width: 10px; height: 10px; top: 295px; left: 95px; border-radius: 5px; background-color: red; } #center { position: absolute; width: 6px; height: 6px; left: 197px; top: 297px; border-radius: 3px; background-color: black; }

js代碼：

var div=document.getElementById("div"); var r=100; var x,y; left=div.offsetLeft; top=div.offsetTop; //運動的這個div的點的座標爲： x=left+5; y=top+5; dir= true; //下半弧線的運行函數 function cir0(){ x=x+0.1; y=300+Math.pow(r*r-Math.pow(200-x,2),0.5); div.style.left=(x-5)+"px"; div.style.top=(y-5)+"px"; dir=true; if(x>300){ dir=false; } } //上半弧線的運行函數 function cir1(){ x=x-0.1; y=300-Math.pow(r*r-Math.pow(x-200,2),0.5); div.style.left=(x-5)+"px"; div.style.top=(y-5)+"px"; dir=false; if(x<100){ dir=true; } } setInterval(function(){ if(dir){ cir0(); }else{ cir1(); } },0);

 

NO23.‘data-’屬性的做用是什麼？

data-爲前端開發者提供自定義的屬性，這些屬性集能夠經過對象的dataset屬性獲取，不支持該屬性的瀏覽器能夠經過 getAttribute方法獲取。ppk提到過使用rel屬性，lightbox庫推廣了rel屬性，HTML5提供了data-作替代，這樣能夠更好 地使用自定義的屬性。

須要注意的是，data-以後的以連字符分割的多個單詞組成的屬性，獲取的時候使用駝峯風格。

<div data-author=」david」 data-time=」2011-06-20″ data-comment-num=」10″ data-category=」javascript」> …. </div>

 

NO24.請列舉CSS中用於隱藏元素的兩個屬性？二者的差別？

display:none和visibility: hidden;前者不佔位，後者佔位。

 

NO25.在jquery中，選擇器使用的是sizzle，sizzle的基本原理是」從後往前查找」，好比選擇器「 .a > .b > .c」，是先查找」.c」而不是」.a」。請解釋爲何大部分狀況下「從後往前」比「從前日後」查找速度更快

於普通的解析過程，咱們遵循着從左到右的順序便可完成咱們的目標。
讓咱們總結下步驟：
1.先查找頁面上全部的div

2.循環全部的div，查找每一個div下的p

3.合併結果
Sizzle用了截然相反的步驟：
1.先查找頁面上全部的p

2.循環全部的p，查找每一個p的父元素

1.若是不是div，遍歷上一層。

2.若是已是頂層，排除此p。

3.若是是div，則保存此p元素。

由子元素來查找父元素，能獲得更好的效率。看，打破常規思惟後不只步驟更簡單了，並且效率上也獲得了些許提高。
全部的選擇器均可以這樣解析嗎？不是，採用right -> left的順序是有前提條件的：沒有位置關係的約束。

 

NO26.

現有代碼以下

var a = 1; var obj = { b : 2 }; var fn = function(){}; fn.c = 3; function test(x, y, z) { x = 4; y.b = 5; z.c = 6; return z; } test(a, obj, fn); alert(a + obj.b + fn.c);

//這段代碼可以正常運行麼?若是不能正常運行,請說明緣由.
//若是能夠運行,最後一行alert的值是多少,並請說明緣由.

運行結果是12

1 + 5 + 6 這個是值傳遞和地址傳遞的問題, 在js裏面 基礎數據類型參數就是值傳遞

值傳遞：

var a = 1; function test(b) { //這裏的b是另一個變量，a的值傳遞給了b而已 b = 2; } test(a); alert(a); // 1

地址傳遞：

var a = {}; function test(b) { //地址傳遞，b的內存地址指向的是a的，也就是a和b都是指向的同一個內存，能夠理解成就是一個東西 b.v = 2; } test(a); alert(a.v); // 2

 

NO27.解釋一下strong和em標籤用法有何不一樣？

em 表示強調，strong 表示更強烈的強調。言簡意賅，代表了 em 和 strong 的命名來歷。而且在瀏覽器中，em 默認用斜體表示，strong 用粗體表示。這是第一個層次上的區別。

em 用來局部強調，strong 則是全局強調。從視覺上考慮，em 的強調是有順序的，閱讀到某處時，纔會注意到。strong 的強調則是一種隨意無順序的，看見某文時，馬上就凸顯出來的關鍵詞句。斜體和粗體恰好知足了這兩種視覺效果，所以也就成了 em 和 strong 的默認樣式。
em 是句意強調，加與不加會引發語義變化。
strong 是重要性強調，和局部仍是全局無關，局部強調用strong也能夠，strong強調的是重要性，不會改變句意。

 

NO28.請用實現一個最簡單的輸入框提示功能

要求：
1.輸入框內默認顯示提示文案，當用戶點擊輸入框後，光標定位到輸入框最前，並繼續顯示提示文案，當用戶輸入後替換默認提示文案，當用戶清空輸入框後重新顯示默認提示文案
2.要求支持ie（6，7，8，9），firefox，chrome等瀏覽器
3.請寫出html結構，javascript代碼邏輯部分寫出實現思路便可（有時間能寫出代碼者最佳，可使用js庫）

最簡單的方法：用html5中的placeholder屬性，可是這種方案就是不支持低版本IE瀏覽器。

例如：

<form action="demo_form.asp" method="get"> <input type="search" name="user_search" placeholder="Search W3School" /> <input type="submit" /> </form>

通常的答案：（這種方式又不知足第一條）

用戶名：<input type="text" name="txt" value="請輸入用戶名" id="txt01"/>

var s=document.getElementsByTagName("input")[0]; s.onfocus=function (e){ e=e||window.event; if(s.value=='請輸入用戶名'){s.value=' '}; }; s.onblur=function (e){ e=e||window.event; if(s.value==' '){s.value='請輸入用戶名'}; }

最終實現方式可參考《jQuery封裝placeholder效果，讓低版本瀏覽器支持該效果》