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

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

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

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

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

Javascript

1.怎樣添加、移除、移動(dòng)、復(fù)制、創(chuàng)建和查找節(jié)點(diǎn)

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

b(1,2,3);

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

alert(arguments[2]);

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

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

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

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

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

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

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

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

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

1,判斷字符串是否是這樣組成的，第一個(gè)必須是字母，后面可以是字母、數(shù)字、下劃線，總長(zhǎng)度為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，判斷一個(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

/*遍歷這個(gè)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：

表示當(dāng)前的事件對(duì)象，IE有這個(gè)對(duì)象，F(xiàn)F沒有，F(xiàn)F通過給事件處理函數(shù)傳遞事件對(duì)象(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)獲取標(biāo)簽的自定義屬性

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)將每個(gè)開發(fā)人員的函數(shù)封裝到類中，調(diào)用的時(shí)候就調(diào)用類的函數(shù)，即使函數(shù)重名只要類名不重復(fù)就ok

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

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

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下面實(shí)現(xiàn)outerHTML

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

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

8，編寫一個(gè)方法求一個(gè)字符串的字節(jié)長(zhǎng)度假設(shè)：

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

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

returnbytes;}

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

9，編寫一個(gè)方法去掉一個(gè)數(shù)組的重復(fù)元素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個(gè)使用this的典型應(yīng)用(1)在html元素事件屬性中使用，如(2)構(gòu)造函數(shù)

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

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

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

13，JavaScript中如何檢測(cè)一個(gè)變量是一個(gè)String類型?請(qǐng)寫出函數(shù)實(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)頁中實(shí)現(xiàn)一個(gè)計(jì)算當(dāng)年還剩多少時(shí)間的倒數(shù)計(jì)時(shí)程序，要求網(wǎng)頁上實(shí)時(shí)動(dòng)態(tài)顯示“××年還剩××天××?xí)r××分××秒”

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

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

18，JavaScript中如何對(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;};

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

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

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

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

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

24，請(qǐng)給出異步加載js方案，不少于兩種默認(rèn)情況javascript是同步加載的，也就是javascript的加載時(shí)阻塞的，后面的元素要等待javascript加載完畢后才能進(jìn)行再加載，對(duì)于一些意義不是很大的javascript，如果放在頁頭會(huì)導(dǎo)致加載很慢的話，是會(huì)嚴(yán)重影響用戶體驗(yàn)的。異步加載方式：

(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，請(qǐng)?jiān)O(shè)計(jì)一套方案，用于確保頁面中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元素的事件,有幾種方法.(1)為HTML元素的事件屬性賦值

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

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

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

30，js的基礎(chǔ)對(duì)象有那些,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請(qǐng)求次數(shù)：cssspirit,datauri(2)JS，CSS源碼壓縮

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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