網(wǎng)頁前端開發(fā)筆試題

說說網(wǎng)頁前端開發(fā)工程師筆試題目HTML&&CSS

1.Doctype?嚴格模式與混雜模式-如何觸發(fā)這兩種模式，區(qū)分它們有何意義?行內(nèi)元素有哪些？塊級元素有哪些？CSS的盒模型？

2.CSS引入的方式有哪些?link和@import的區(qū)別?

3.CSS選擇符有哪些？哪些屬性可以繼承？優(yōu)先級？內(nèi)聯(lián)和important哪個優(yōu)先級高？4.經(jīng)常遇到的瀏覽器的兼容性有哪些？怎么會出現(xiàn)？解決方法是什么？5.如何居中一個浮動元素?6.HTML5和CSS3的了解情況7.你怎么來實現(xiàn)下面這個設計圖

Javascript

1.怎樣添加、移除、移動、復制、創(chuàng)建和查找節(jié)點

2.怎樣使用事件以及IE和DOM事件模型之間存在哪些主要差別3.面向?qū)ο缶幊?b怎么繼承a4.看看下面alert的結(jié)果是什么functionb(x,y,a){arguments[2]=10;alert(a);}

b(1,2,3);

如果函數(shù)體改成下面，結(jié)果又會是什么？a=10;

alert(arguments[2]);

5.請編寫一個JavaScript函數(shù)parseQueryString，它的用途是把URL參數(shù)解析為一個對象，如：varurl=”key2=2…..”varobj=parseQueryString(url);alert(obj.key0)//輸出0(來自淘寶網(wǎng)校園招聘筆試題)

6.ajax是什么?ajax的交互模型?同步和異步的區(qū)別?如何解決跨域問題?7.什么是閉包？下面這個ul，如何點擊每一列的時候alert其index?

這是第一條這是第二條這是第三條

8.最近看的一篇Javascript的文章9.你如何去實現(xiàn)這個Tabview

10.常使用的庫有哪些？常用的前端開發(fā)工具？開發(fā)過什么應用或組件？11.性能-Yslow

這份面試題涵蓋了很多方面的內(nèi)容，基礎的html+css,語義化，js的基本功，js的庫和框架，以及前端工程師的學習能力.不錯！如果可以搞定這份面試題，你的月薪基本上上萬了~~

擴展閱讀：Web前端開發(fā)筆試題集錦

[筆試問答]Web前端開發(fā)筆試題集錦

以下為Web前端開發(fā)筆試題集錦之Javascript篇，移步HTML/CSS篇

1,判斷字符串是否是這樣組成的，第一個必須是字母，后面可以是字母、數(shù)字、下劃線，總長度為5-20

varreg=/^[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，判斷一個字符串中出現(xiàn)次數(shù)最多的字符，統(tǒng)計這個次數(shù)//將字符串的字符保存在一個hashtable中，key是字符，value是這個字符出現(xiàn)的次數(shù)

varstr="abcdefgaddda";varobj={};

for(vari=0,l=str.length;i

/*遍歷這個hashtable，獲取value最大的key和value*/varmax=-1;varmax_key="";varkey;

for(keyinobj){if(max

alert("max:"+max+"max_key:"+max_key);4，IE與FF腳本兼容性問題(1)window.event：

表示當前的事件對象，IE有這個對象，F(xiàn)F沒有，F(xiàn)F通過給事件處理函數(shù)傳遞事件對象(2)獲取事件源

IE用srcElement獲取事件源，而FF用target獲取事件源(3)添加，去除事件

IE：element.attachEvent(“onclick”,function)element.detachEvent(“onclick”,function)FF：element.addEventListener(“click”,function,true)element.removeEventListener(“click”,function,true)(4)獲取標簽的自定義屬性

IE：div1.value或div1[“value”]

FF：可用div1.getAttribute(“value”)

(5)document.getElementByName()和document.all[name]

IE;document.getElementByName()和document.all[name]均不能獲取div元素FF：可以

(6)input.type的屬性IE：input.type只讀FF：input.type可讀寫

(7)innerTexttextContentouterHTMLIE：支持innerText,outerHTMLFF：支持textContent

(8)是否可用id代替HTML元素IE：可以用id來代替HTML元素FF：不可以

這里只列出了常見的，還有不少，更多的介紹可以參看JavaScript在IE瀏覽器和Firefox瀏覽器中的差異總結(jié)

5，規(guī)避javascript多人開發(fā)函數(shù)重名問題

(1)可以開發(fā)前規(guī)定命名規(guī)范，根據(jù)不同開發(fā)人員開發(fā)的功能在函數(shù)前加前綴(2)將每個開發(fā)人員的函數(shù)封裝到類中，調(diào)用的時候就調(diào)用類的函數(shù)，即使函數(shù)重名只要類名不重復就ok

6，javascript面向?qū)ο笾欣^承實現(xiàn)

javascript面向?qū)ο笾械睦^承實現(xiàn)一般都使用到了構(gòu)造函數(shù)和Prototype原型鏈，簡單的代碼如下：

functionAnimal(name){this.name=name;}

Animal.prototype.getName=function(){alert(this.name)}functionDog(){};

Dog.prototype=newAnimal("Buddy");Dog.prototype.constructor=Dog;vardog=newDog();7，F(xiàn)F下面實現(xiàn)outerHTML

FF不支持outerHTML，要實現(xiàn)outerHTML還需要特殊處理思路如下：

在頁面中添加一個新的元素A，克隆一份需要獲取outerHTML的元素，將這個元素append到新的A中，然后獲取A的innerHTML就可以了。SPANDIVSPANP

8，編寫一個方法求一個字符串的字節(jié)長度假設：

一個英文字符占用一個字節(jié)，一個中文字符占用兩個字節(jié)functionGetBytes(str){varlen=str.length;varbytes=len;for(vari=0;i

if(str.charCodeAt(i)>255)bytes++;}

returnbytes;}

alert(GetBytes("你好,as"));

9，編寫一個方法去掉一個數(shù)組的重復元素vararr=[1,1,2,3,3,2,1];Array.prototype.unique=function(){varret=[];varo={};

varlen=this.length;for(vari=0;ivarv=this;if(!o[v]){o[v]=1;ret.push(v);}}

returnret;};

alert(arr.unique());

10，寫出3個使用this的典型應用(1)在html元素事件屬性中使用，如(2)構(gòu)造函數(shù)

functionAnimal(name,color){this.name=name;this.color=color;}(3)

(4)CSSexpression表達式中使用this關(guān)鍵字divelement

12，如何顯示/隱藏一個DOM元素?el.style.display="";el.style.display="none";el是要操作的DOM元素

13，JavaScript中如何檢測一個變量是一個String類型?請寫出函數(shù)實現(xiàn)String類型有兩種生成方式：(1)Varstr=“helloworld”;

(2)Varstr2=newString(“helloworld”);functionIsString(str){

return(typeofstr=="string"||str.constructor==String);}

varstr="";

alert(IsString(1));alert(IsString(str));

alert(IsString(newString(str)));14，網(wǎng)頁中實現(xiàn)一個計算當年還剩多少時間的倒數(shù)計時程序，要求網(wǎng)頁上實時動態(tài)顯示“××年還�！痢撂臁痢習r××分××秒”

15，補充代碼，鼠標單擊Button1后將Button1移動到Button2的后面16，JavaScript有哪幾種數(shù)據(jù)類型

簡單：Number，Boolean，String，Null，Undefined復合：Object，Array，F(xiàn)unction17，下面css標簽在JavaScript中調(diào)用應如何拼寫，border-left-color，-moz-viewportborderLeftColormozViewport

18，JavaScript中如何對一個對象進行深度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;};

19，如何控制alert中的換行\(zhòng)\nalert(“p\\np”);

20，請實現(xiàn)，鼠標點擊頁面中的任意標簽，alert該標簽的名稱.(注意兼容性)SPANDIVSPANP21，請編寫一個JavaScript函數(shù)parseQueryString，它的用途是把URL參數(shù)解析為一個對象，如：

varurl=“;key1=1&key2=2″;functionparseQueryString(url){varparams={};

vararr=url.split("?");if(arr.lengthfor(vari=0,l=ul.childNodes.length;i

alert(index);}}}})();

24，請給出異步加載js方案，不少于兩種默認情況javascript是同步加載的，也就是javascript的加載時阻塞的，后面的元素要等待javascript加載完畢后才能進行再加載，對于一些意義不是很大的javascript，如果放在頁頭會導致加載很慢的話，是會嚴重影響用戶體驗的。異步加載方式：

(1)defer，只支持IE(2)async：

(3)創(chuàng)建script，插入到DOM中，加載完畢后callBack，見代碼：functionloadScript(url,callback){

varscript=document.createElement("script")script.type="text/javascript";if(script.readyState){//IE

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

25，請設計一套方案，用于確保頁面中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,如何擴展prototype?

Ele.className=“***”;//***在css中定義，形式如下：.***{…}A.prototype.B=C;A是某個構(gòu)造函數(shù)的名字B是這個構(gòu)造函數(shù)的屬性C是想要定義的屬性的值

27，如何添加html元素的事件,有幾種方法.(1)為HTML元素的事件屬性賦值

(2)在JS中使用ele.on***=function(){…}

(3)使用DOM2的添加事件的方法addEventListener或attachEvent28，documen.write和innerHTML的區(qū)別document.write只能重繪整個頁面innerHTML可以重繪頁面的一部分29，多瀏覽器檢測通過什么?(1)navigator.userAgent

(2)不同瀏覽器的特性，如addEventListener

30，js的基礎對象有那些,window和document的常用的方法和屬性列出來String,Number,BooleanWindow:

方法：setInterval,setTimeout,clearInterval,clearTimeout,alert,confirm,open屬性：name,parent,screenLeft,screenTop,self,top,statusDocument方法：createElement,execCommand,getElementById,getElementsByName,getElementByTagName,write,writeln

屬性：cookie,doctype,domain,documentElement,readyState,URL,31，前端開發(fā)的優(yōu)化問題

(1)減少http請求次數(shù)：cssspirit,datauri(2)JS，CSS源碼壓縮

(3)前端模板JS+數(shù)據(jù)，減少由于HTML標簽導致的帶寬浪費，前端用變量保存AJAX請求結(jié)果，每次操作本地變量，不用請求，減少請求次數(shù)

(4)用innerHTML代替DOM操作，減少DOM操作次數(shù)，優(yōu)化javascript性能(5)用setTimeout來避免頁面失去響應(6)用hash-table來優(yōu)化查找

(7)當需要設置的樣式很多時設置className而不是直接操作style(8)少用全局變量

(9)緩存DOM節(jié)點查找的結(jié)果(10)避免使用CSSExpression(11)圖片預載

(12)避免在頁面的主體布局中使用table，table要等其中的內(nèi)容完全下載之后才會顯示出來，顯示比div+css布局慢

32，如何控制網(wǎng)頁在網(wǎng)絡傳輸過程中的數(shù)據(jù)量啟用GZIP壓縮

保持良好的編程習慣，避免重復的CSS，JavaScript代碼，多余的HTML標簽和屬性33，F(xiàn)lash、Ajax各自的優(yōu)缺點，在使用中如何取舍?Ajax的優(yōu)勢(1)可搜索型(2)開放性(3)費用(4)易用性(5)易于開發(fā)Flash的優(yōu)勢(1)多媒體處理(2)兼容性

(3)矢量圖形比SVG，Canvas優(yōu)勢大很多(4)客戶端資源調(diào)度，比如麥克風，攝像頭

筆試問答]軟件開發(fā)階段筆試題

軟件開發(fā)的階段，軟件測試的階段，以及每個階段的任務;{RAD(rapapplicationdevelopment),就是軟件開發(fā)過程中的一個重要模型，稱為快速應用開發(fā)模型。其模型構(gòu)圖形似字母V，所以又稱V模型。他通過開發(fā)和測試同時進行的方式來縮短開發(fā)周期，提高開發(fā)效率。

V模型大體可以劃分為下面幾個不同的階段步驟，既需求分析、概要設計、祥細設計、編碼、單元測試、集成測試、系統(tǒng)測試、驗收測試。}⑴需求分析：明確客戶需要，按需求寫出規(guī)格文檔說明書;⑵概要設計：構(gòu)建框架，描述模塊功能及接口;⑶祥細設計：設計模塊的具體實現(xiàn)方式及模塊的組合方式(把程序的具體實現(xiàn)的功能，現(xiàn)象等描述出來);⑷編碼：按照祥細設計好的模塊功能表，編寫出實際的代碼;①單元測試(模塊測試)：按照設定好的最小測試單元進行按單元測試，主要是測試程序代碼;②集成測試(也叫組裝測試，聯(lián)合測試)：集成測試是在軟件系統(tǒng)集成過程中所進行的測試，其主要目的是檢查軟件單位之間的接口是否正確;③系統(tǒng)測試：是對已經(jīng)集成好的軟件系統(tǒng)進行徹底的測試，以驗證軟件系統(tǒng)的正確性和性能等滿足其指定的要求;④驗收測試：驗收測試的目的是確保軟件準備就緒，并且可以讓最終用戶將其用于執(zhí)行軟件的既定功能和任務。

友情提示：本文中關(guān)于《網(wǎng)頁前端開發(fā)筆試題》給出的范例僅供您參考拓展思維使用，網(wǎng)頁前端開發(fā)筆試題：該篇文章建議您自主創(chuàng)作。

來源：網(wǎng)絡整理 免責聲明：本文僅限學習分享，如產(chǎn)生版權(quán)問題，請聯(lián)系我們及時刪除。

《網(wǎng)頁前端開發(fā)筆試題》由互聯(lián)網(wǎng)用戶整理提供,轉(zhuǎn)載分享請保留原作者信息,謝謝!
鏈接地址：http://www.seogis.com/gongwen/713192.html

• 上一篇：web appmobile web開發(fā)入門
• 下一篇：實驗2-Web開發(fā)