Web前端開(kāi)發(fā)筆試題集錦(已讀)解析

Web前端開(kāi)發(fā)筆試題集錦來(lái)源:過(guò)來(lái)人求職網(wǎng) 時(shí)間:2011-12-06以下為Web前端開(kāi)發(fā)筆試題集錦之Javascript篇，移步HTML/CSS篇1,判斷字符串是否是這樣組成的，第一個(gè)必須是字母，后面可以是字母、數(shù)字、下劃線，總長(zhǎng)度為5-20varreg=/"[a-zA-Z][a-zA-Z_0-9]{4,19}$/;reg.test("a1a__a1a__a1a__a1a__");2，截取字符串a(chǎn)bcdefg的efgvarstr="abcdefg";if(/efg/.test(str))(varefg=str.substr(str.indexOf("efg"),3);alert(efg);}3,判斷一個(gè)字符串中出現(xiàn)次數(shù)最多的字符，統(tǒng)計(jì)這個(gè)次數(shù)//將字符串的字符保存在一個(gè)hashtable中，key是字符，value是這個(gè)字符出現(xiàn)的次數(shù)varstr="abcdefgaddda";varobj={};for(vari=0,l=str.length;i<l;i++)(varkey=str[i];if(!obj[key])(obj[key]=1;}else(obj[key]++;}}/*遍歷這個(gè)hashtable，獲取value最大的key和value*/varmax=-1;varmax_key— ;

varkey;for(keyinobj)(if(max<obj[key])(max=obj[key];max_key=key;}}alert(〃max:〃+max+〃max_key:〃+max_key);4，IE與FF腳本兼容性問(wèn)題window.event:表示當(dāng)前的事件對(duì)象，IE有這個(gè)對(duì)象，F(xiàn)F沒(méi)有，F(xiàn)F通過(guò)給事件處理函數(shù)傳遞事件對(duì)象獲取事件源IE用srcElement獲取事件源，而FF用target獲取事件源添加，去除事件IE：element.attachEvent("onclick”，function)element.detachEvent("onclick”，function)FF：element.addEventListener("click”，function,true)element.removeEventListener("click”，function,true)獲取標(biāo)簽的自定義屬性IE:div1.value或div1["value”]FF：可用div1.getAttribute("value”)document.getElementByName()和document.all[name]IE;document.getElementByName()和document.all[name]均不能獲取div元素FF：可以input.type的屬性IE:input.type只讀FF:input.type可讀寫(xiě)innerTexttextContentouterHTML況：支持innerText,outerHTML

FF：支持textContent是否可用id代替HTML元素IE：可以用id來(lái)代替HTML元素FF：不可以這里只列出了常見(jiàn)的，還有不少，更多的介紹可以參看 JavaScript在IE瀏覽器和Firefox瀏覽器中的差異總結(jié)5，規(guī)避javascript多人開(kāi)發(fā)函數(shù)重名問(wèn)題可以開(kāi)發(fā)前規(guī)定命名規(guī)范，根據(jù)不同開(kāi)發(fā)人員開(kāi)發(fā)的功能在函數(shù)前加前綴將每個(gè)開(kāi)發(fā)人員的函數(shù)封裝到類(lèi)中，調(diào)用的時(shí)候就調(diào)用類(lèi)的函數(shù)，即使函數(shù)重名只要類(lèi)名不重復(fù)就ok6，javascript面向?qū)ο笾欣^承實(shí)現(xiàn)javascript面向?qū)ο笾械睦^承實(shí)現(xiàn)一般都使用到了構(gòu)造函數(shù)和 Prototype原型鏈，簡(jiǎn)單的代碼如下：functionAnimal(name)(=name;}Atotype.getName=function(){alert()}functionDog()(};Dtotype=newAnimal(〃Buddy〃)；Dtotype.constructor=Dog;vardog=newDog();7，F(xiàn)F下面實(shí)現(xiàn)outerHTMLFF不支持outerHTML，要實(shí)現(xiàn)outerHTML還需要特殊處理思路如下：在頁(yè)面中添加一個(gè)新的元素A，克隆一份需要獲取outerHTML的元素，將這個(gè)元素append到新的A中，然后獲取A的innerHTML就可以了。SPANDIVSPANP編寫(xiě)一個(gè)方法求一個(gè)字符串的字節(jié)長(zhǎng)度假設(shè)：

一個(gè)英文字符占用一個(gè)字節(jié)，一個(gè)中文字符占用兩個(gè)字節(jié)functionGetBytes(str)(varlen=str.length;varbytes=len;for(vari=0;iif(str.charCodeAt(i)>255)bytes++;}returnbytes;}alert(GetBytes("你好,as"));編寫(xiě)一個(gè)方法去掉一個(gè)數(shù)組的重復(fù)元素vararr=[1,1,2,3,3,2,1];Atotype.unique=function()(varret=[];varo={};varlen=this.length;for(vari=0;ivarv=this[i];if(!o[v]){o[v]=1;ret.push(v);}}returnret;};alert(arr.unique());寫(xiě)出3個(gè)使用this的典型應(yīng)用(1)在html元素事件屬性中使用，如⑵構(gòu)造函數(shù)functionAnimal(name,color)(

=name;=name;this.color=color;}(3)CSSexpression表達(dá)式中使用this關(guān)鍵字divelement12，如何顯示/隱藏一個(gè)DOM元素？el.style.display=〃〃；el.style.display="none";el是要操作的DOM元素JavaScript中如何檢測(cè)一個(gè)變量是一個(gè)String類(lèi)型？請(qǐng)寫(xiě)出函數(shù)實(shí)現(xiàn)String類(lèi)型有兩種生成方式：Varstr=“helloworld";Varstr2=newString("helloworld");functionIsString(str)(return(typeofstr=="string"||str.constructor==String);}一」…—〃〃一varstr— ;alert(IsString(1));alert(IsString(str));alert(IsString(newString(str)));網(wǎng)頁(yè)中實(shí)現(xiàn)一個(gè)計(jì)算當(dāng)年還剩多少時(shí)間的倒數(shù)計(jì)時(shí)程序，要求網(wǎng)頁(yè)上實(shí)時(shí)動(dòng)態(tài)顯示“XX年還剩乂乂天乂乂時(shí)XX分XX秒”補(bǔ)充代碼，鼠標(biāo)單擊Button1后將Button1移動(dòng)到Button2的后面JavaScript有哪幾種數(shù)據(jù)類(lèi)型簡(jiǎn)單：Number,Boolean,String,Null,Undefined復(fù)合：Object,Array,Function下面css標(biāo)簽在JavaScript中調(diào)用應(yīng)如何拼寫(xiě)，border-left-color,-moz-viewport

borderLeftColormozViewportJavaScript中如何對(duì)一個(gè)對(duì)象進(jìn)行深度clonefunctioncloneObject(o)(if(!o||'object'!==typeofo)(returno;}varc='function'===typeofo.pop?[]:(};varp,v;for(pino)(if(o.hasOwnProperty(p))(v=o[p];if(v&&'object'===typeofv)(c[p]=Ext.ux.clone(v);}else(c[p]=v;}}}returnc;};如何控制alert中的換行\(zhòng)nalert("p\np”)；20，請(qǐng)實(shí)現(xiàn)，鼠標(biāo)點(diǎn)擊頁(yè)面中的任意標(biāo)簽，alert該標(biāo)簽的名稱(chēng).(注意兼容性)SPANDIVSPANP21，請(qǐng)編寫(xiě)一個(gè)JavaScript函數(shù)parseQueryString，它的用途是把URL參數(shù)解析為一個(gè)對(duì)象，如：

varurl=“/index.php?key0=0&key1=1&key2=2〃；varurl=functionparseQueryString(url){varparams={};vararr=url.split(〃？〃)；if(arr.length<=1)returnparams;arr=arr[1].split(〃&〃)；for(vari=0,l=arr.length;ivara=arr[i].split(〃二〃)；params[a[0]]=a[1];}returnparams;}varurl=〃/index.php?key0=0&key1=1&key2=2〃；varps=parseQueryString(url);alert(ps[〃key1〃]);ajax是什么？ajax的交互模型？同步和異步的區(qū)別？如何解決跨域問(wèn)題？Ajax是多種技術(shù)組合起來(lái)的一種瀏覽器和服務(wù)器交互技術(shù)，基本思想是允許一個(gè)互聯(lián)網(wǎng)瀏覽器向一個(gè)遠(yuǎn)程頁(yè)面/服務(wù)做異步的http調(diào)用，并且用收到的數(shù)據(jù)來(lái)更新一個(gè)當(dāng)前web頁(yè)面而不必刷新整個(gè)頁(yè)面。該技術(shù)能夠改進(jìn)客戶端的體驗(yàn)。包含的技術(shù)：XHTML:對(duì)應(yīng)W3C的XHTML規(guī)范，目前是XHTML1.0。CSS:對(duì)應(yīng)W3C的CSS規(guī)范，目前是CSS2.0DOM:這里的DOM主要是指HTMLDOM，XMLDOM包括在下面的XML中JavaScript:對(duì)應(yīng)于ECMA的ECMAScript規(guī)范XML:對(duì)應(yīng)W3C的XMLDOM、XSLT、XPath等等規(guī)范XMLHttpRequest:對(duì)應(yīng)WhatWG的WebApplications].。規(guī)范(http:///specs/web-apps/current-work/)AJAX交互模型

時(shí)間 客戶：ffl 罪務(wù)耕屈同步：腳本會(huì)停留并等待服務(wù)器發(fā)送回復(fù)然后再繼續(xù)異步：腳本允許頁(yè)面繼續(xù)其進(jìn)程并處理可能的回復(fù)跨域問(wèn)題簡(jiǎn)單的理解就是因?yàn)镴S同源策略的限制，域名下的JS無(wú)法操作或下的對(duì)象，具體場(chǎng)景如下：hbihttp://www.kuqin.：:uHylab/adsh knqin.romfscript/hj?甬一姓藝NI'-FlAft1兄注httpy/www,kuc|in:匚if.六http!/,?kuqin.Em/可t同一雌下允許httpz/Aww.kuciin.cciyi:aODOj3jsi*h■'■Ai°j i hc、r、rvr、.■%r、r、r、*、、。、l、。l、o、l、。e e-.■,..,,..,,..,■.『、e■.t、nr、/irnnr、」、r、t、r、t、rr、r、r、r、r、r、r、wnnr、r\<\<\itr、ryir、、htt召加g.kLinin.rnm/tijs，=、.■,..,,..■,.r切％『fr*_、『，—、『、—、『，—、w、、i■?<\<■?i、、?、rhrrwwrwr，wror『=、「r r 、?riwriwri、‘fr??%『J f、se、e■、■m［牛'%f5V、■―5VV，f■..,■..,■..,,..■■..■s氣。■.irtr、ftr\nrtr、rtr、r、r、rr、r'r『%r?rti+、rr.■■-rr■-■.rrrr、'、￡、￡、￡、［t、3、3、3、3、3、3、%『*、'■ihttpL/Aww.kuciin.ccm/a.jshtlprJ/vjwui薄ijqin/同一土住.不同粘聚不允許htlp^/AviTiW.kuqin.ternAa.js站虧n睡名對(duì)應(yīng)jf不)滸hUtp^/AvA^.kLiqin.rnrYi7a_ishttp://￡rrtptkuqin_rom/h.jjR土叫出日,子岫日不.MhttpVAwtW.htiGl jsknqin.rnm/'b.js不同域芒不簡(jiǎn)干

PS：(1)如果是端口或者協(xié)議造成的跨域問(wèn)題前端是無(wú)能為力的在跨域問(wèn)題上，域僅僅通過(guò)URL的首部來(lái)識(shí)別而不會(huì)嘗試判斷相同的IP地址對(duì)應(yīng)的域或者兩個(gè)域是否對(duì)應(yīng)一個(gè) IP前端對(duì)于跨域的解決辦法：document.domain+iframe動(dòng)態(tài)創(chuàng)建script標(biāo)簽什么是閉包？下面這個(gè)ul，如何點(diǎn)擊每一列的時(shí)候alert其index?這是第一條這是第二條這是第三條內(nèi)部函數(shù)被定義它的函數(shù)的外部區(qū)域調(diào)用的時(shí)候就產(chǎn)生了閉包。(functionA()(varindex=0;varul=document.getElementById(〃test〃)；varobj={};for(vari=0,l=ul.childNodes.length;i<l;i++)(if(ul.childNodes[i].nodeName.toLowerCase()==〃li〃)(varli=ul.childNodes[i];li.onclick=function()(index++;alert(index);}}}})();請(qǐng)給出異步加載js方案，不少于兩種默認(rèn)情況javascript是同步加載的，也就是javascript的加載時(shí)阻塞的，后面的元素要等待javascript加載完畢后才能進(jìn)行再加載，對(duì)于一些意義不是很大的javascript，如果放在頁(yè)頭會(huì)導(dǎo)致加載很慢的話，是會(huì)嚴(yán)重影響用戶體驗(yàn)的。異步加載方式：

defer，只支持IEasync:創(chuàng)建script，插入到DOM中，加載完畢后callBack，見(jiàn)代碼：functionloadScript(url,callback)(varscript=document.createElement(〃script〃)script.type="text/javascript";if(script.readyState){//IEscript.onreadystatechange=function()(if(script.readyState=="loaded"||script.readyState=="complete"){script.onreadystatechange=null;callback();}};}else(//Others:Firefox,Safari,Chrome,andOperascript.onload=function()(callback();};}script.src=url;document.body.appendChild(script);}請(qǐng)?jiān)O(shè)計(jì)一套方案，用于確保頁(yè)面中 JS加載完全。varn=document.createElement("script");n.type="text/javascript";〃以上省略部分代碼//ie支持script的readystatechange屬性(IEsupportthereadystatechangeeventforscriptandcssnodes)if(ua.ie)(n.onreadystatechange=function()(

varrs=this.readyState;if('loaded'===rs||'complete'===rs){n.onreadystatechange=null;f(id,url);//回調(diào)函數(shù)}};//省略部分代碼//safari3.xsupportstheloadeventforscriptnodes(DOM2)n.addEventListener('load',function(){f(id,url);});//firefoxandoperasupportonload(butnotdom2inff)handlersfor//scriptnodes.opera,butnoff,supporttheonloadeventforlink//nodes.}else(n.onload=function()(f(id,url);};}26，js中如何定義class,如何擴(kuò)展prototype?Ele.className="***”；//***在css中定義，形式如下：.***{…}A.prototype.B=C;A是某個(gè)構(gòu)造函數(shù)的名字B是這個(gè)構(gòu)造函數(shù)的屬性C是想要定義的屬性的值27，如何添加html元素的事件，有幾種方法.為HTML元素的事件屬性賦值在JS中使用ele.on***=function(){…}使用DOM2的添加事件的方法addEventListener或attachEvent

documen.write和innerHTML的區(qū)別document.write只能重繪整個(gè)頁(yè)面innerHTML可以重繪頁(yè)面的一部分多瀏覽器檢測(cè)通過(guò)什么？navigator.userAgent不同瀏覽器的特性，如addEventListener30，js的基礎(chǔ)對(duì)象有那些，wind