當前位置:首頁 » 網頁前端 » web前端上機考試
擴展閱讀
webinf下怎麼引入js 2023-08-31 21:54:13
堡壘機怎麼打開web 2023-08-31 21:54:11

web前端上機考試

發布時間: 2023-02-03 09:31:40

⑴ 誰能給我出一兩道 web前端筆試題 上機題啥的,呵呵,比較常考的

[面試題] 某企業前端開發面試題

【HTML & CSS】

1. Doctype? 嚴格模式與混雜模式-如何觸發這兩種模式,區分它們有何意義?

2. 行內元素有哪些?塊級元素有哪些?CSS的盒模型?

3. CSS引入的方式有哪些? link和@import的區別是?

4. CSS選擇符有哪些?哪些屬性可以繼承?優先順序演算法如何計算?內聯和important哪個優先順序高?

5. 前端頁面有哪三層構成,分別是什麼?作用是什麼?

6. css的基本語句構成是?

7. 你做的頁面在哪些流覽器測試過?這些瀏覽器的內核分別是什麼?經常遇到的瀏覽器的兼容性有哪些?怎麼會出現?解決方法是什麼?

8. 如何居中一個浮動元素?

9. 有沒有關注HTML5和CSS3?如有請簡單說一些您對它們的了解情況!

10. 你怎麼來實現下面這個設計圖,主要講述思路 (效果圖省略)

11. 如果讓你來製作一個訪問量很高的大型網站,你會如何來管理所有CSS文件、JS與圖片?

12. 你對前端界面工程師這個職位是怎麼樣理解的?它的前景會怎麼樣?

【Javascript】

1. js是什麼,js和html 的開發如何結合?

2. 怎樣添加、移除、移動、復制、創建和查找節點

3. 怎樣使用事件以及IE和DOM事件模型之間存在哪些主要差別

4. 面向對象編程:b怎麼繼承a

5. 看看下面alert的結果是什麼
view sourceprint?1.function b(x, y, a) {
.arguments[2] = 10;
.alert(a);
}
b(1, 2, 3);
如果函數體改成下面,結果又會是什麼?
a = 10;
alert(arguments[2] );

6. 請編寫一個JavaScript函數 parseQueryString,它的用途是把URL參數解析為一個對象
var obj = parseQueryString(url);
alert(obj.key0) // 輸出0

7. ajax是什麼? ajax的交互模型? 同步和非同步的區別? 如何解決跨域問題?

8. 什麼是閉包?下面這個ul,如何點擊每一列的時候alert其index?
<ul id=」test」>
<li>這是第一條</li><li>這是第二條</li><li>這是第三條</li>
</ul>

9. 最近看的一篇Javascript的文章是?

10. 常使用的庫有哪些?常用的前端開發工具?開發過什麼應用或組件?

11.說說YSlow(可以詳細一點)

答案在參考資料裡面可以找到,答案在參考資料裡面可以找到,答案在參考資料裡面可以找到

⑵ web前端筆試題(HTML/CSS篇)

web前端筆試題集錦(HTML/CSS篇)

導讀:網頁不再只是承載單一的文字和圖片,各種富媒體讓網頁的內容更加生動,網頁上軟體化的交互形式為用戶提供了更好的使用體驗,這些都是基於前端技術實現的。以下是由我J.L為您整理推薦的前端開發筆試題目,歡迎參考閱讀。

一、HTML/CSS

1,讓一個input的背景顏色變成紅色

2,div的高寬等於瀏覽器可見區域的高寬,瀏覽器滾動,div始終覆蓋瀏覽器的整個可見區域

思路:

(1)先放置一個div1,浮動:position:absolute;top:0px;left:0px;

(2)再放置一個div2,浮動:position:absolute;top:0px;left:0px;width:100%;height:100%;

(3)在div2中放置一個div3,令其高度超過瀏覽器高度,使div2產生滾動條

(4)對html,body進行樣式設置:width:100%;height:100%;overflow:hidden->不讓瀏覽器產生滾動條,避免頁面出現兩個滾動條

(5)編寫JavaScript,另div2的高度等於頁面可見高度,寬度等於頁面可見寬度,注意,在計算完可見高度height和可見寬度width後,要對這兩個值做處理,可見寬度-div2的滾動條的寬度,滾動條的寬度我這里假設是20px

這樣題目基本就完成了,不過瀏覽器的兼容性還不是很好。

3,IE、FF下面CSS的解釋區別

(1) 讓頁面元素居中

ff{margin-left:0px;margin-right:0px;width:***}

ie上面的設置+text-align:center

(2) ff:不支持濾鏡

ie:支持濾鏡

(3) ff:支持!important

ie支持*,ie6支持_

(4) min-width,min-height

FF支持,IE不支持,IE可以用css expression來替代

(5) Css Expression

FF不支持,IE支持

(6) cursor:hand

IE下可以顯示手指狀,FF下不行

(7) UL的默認padding和margin

IE下ul默認有margin,FF下ul默認有padding

(8) FORM的默認margin

IE下FORM有默認margin,FF下margin默認為0

4,一個定寬元素在瀏覽器(IE6,IE7,Firefox)中橫向居中對齊的布局,請寫出主要的.HTML標簽及CSS

思路:

IE6/7:text-align:center

Firefox:margin:0 auto(margin-top和margin-bottom也可以為其他數字,關鍵是margin-left,margin-right為auto)

5,CSS中margin和padding的區別

margin是元素的外邊框,是元素邊框和相鄰元素的距離

Padding是元素的內邊框,是元素邊框和子元素的距離

6,最後一個問題是,如何製作一個combo選項,就是可以輸入可以下拉菜單選擇。

思路:

(1)布局select和input,讓input覆蓋select,除了select的下拉圖標,以方便select選擇

(2)編寫JS,為select添加onchange事件,onchange時將input的value置成select選中的指

7,

中alt和tittle的區別

alt:圖片顯示不出來了就提示alt

title:滑鼠劃過圖片顯示的提示

8,用css、html編寫一個兩列布局的網頁,要求右側寬度為200px,左側自動擴展。

在這里我使用了兩種方式:

(1)使用position

HTML:

left

right

(2) 使用float

HTML:

固定寬度

自適應

二者的CSS公用,如下:

html,body{width:100%;height:100%;margin:0px;padding:0px;}

.container {width:100%;height:400px;position:relative;}

.fl1 {float:left;}

.left {width:100%;height:400px;background:#AFFFD0;position:absolute;}

.right {width:200px;height:400px;background:#F9AFFF;position:absolute;right:0px;top:0px;}

.clear {clear:both;overflow:hidden;height:0px;}

.container2 {width:100%;height:400px;margin-top:100px;}

.left2 {background:#afffd0;height:400px;width:200px;margin-right:-3px;}

.right2 {height:400px;background:#f9afff;}

9,解釋document.getElementByIdx_x_x_x("ElementID").style.fontSize="1.5em"

em是相對長度單位,相當於當前對象內文本的字體尺寸,如果當前行內文本的字體尺寸未被指定,則相對於瀏覽器的默認字體尺寸。

該語句將id為ElementID的元素的字體設置為當前對象內文本的字體尺寸的1.5倍

10,Doctype? 嚴格模式與混雜模式-如何觸發這兩種模式,區分它們有何意義? 行內元素有哪些?塊級元素有哪些?CSS的盒模型?

DOCTYPE是文檔類型,用來說明使用的HTML或者XHTML是什麼版本,其中的DTD叫文檔類型定義,裡麵包含了文檔規則,瀏覽器根據定義的DTD來解析頁面的標識並展現出來

DOCTYPE有兩種用途:一個可以進行頁面的有效性驗證,另一個可以區分瀏覽器使用嚴格模式還是混雜模式來解析CSS。

嚴格模式和混雜模式是瀏覽器解析CSS的兩種模式,目前使用的大部分瀏覽器對這兩種模式都支持,但是IE5隻支持混雜模式。

可那個過DOCTYPE聲明來判斷哪種模式被觸發

(1) 沒有DOCTYPE聲明的網頁採用混雜模式解析

(2) 對使用DOCTYPE聲明的網頁視不同瀏覽器進行解析

(3) 對於瀏覽器不能識別的DOCTYPE聲明,瀏覽器採用嚴格模式解析

(4) 在ie6下,如果在DOCTYPE聲明之前有一個xml聲明比如

,採用混雜模式解析,在IE7,IE8中這條規則不生效。

(5) 在ie下,如果DOCTYPE之前有任何字元,都會導致它進入混雜模式,如:

區分這兩種模式可以理解瀏覽器解析CSS的區別,主要是在盒模式的解釋上。

常見的塊級元素有:DIV,FORM,TABLE,P,PRE,H1~H6,DL,OL,UL等

常見的內聯元素:SPAN,A,STRONG,EM,LABEL,INPUT,SELECT,TEXTAREA,IMG,BR等

CSS盒模型用於描述為一個HTML元素形成的矩形盒子,盒模型還涉及元素的外邊距,內邊距,邊框和內容,具體來講最裡面的內容是元素內容,直接包圍元素內容的是內邊距,包圍內邊距的是邊框,包圍邊框的是外邊距。內邊距,外邊距,邊框默認為0。

11,CSS引入的方式有哪些? link和@import的區別?

引入css的方式有下面四種

(1) 使用style屬性

(2) 使用style標簽

(3) 使用link標簽

(4) 使用@import引入

Link和@import區別:

(1) link屬於XHTML標簽,@import是CSS提供的一種方式。Link除了載入CSS外,還可以做很多事情,如定義RSS,rel連接屬性等;@import只能載入CSS

(2)載入順序不同,當頁面被載入的時候,link載入的CSS隨之載入,而@import引用的CSS會等到頁面完全下載完之後才會載入

(3)兼容性差別,由於@import是CSS2.1提出的,所以老的瀏覽器不支持,IE系列的瀏覽器IE5以上才能識別,而link沒有這個問題

使用DOM控制樣式的差別,使用JavaScript控制DOM去改變樣式的時候,只能操作link,@import不可以被DOM操作。

12,如何居中一個浮動元素?

一個浮動元素裡麵包含的元素可以水平居中,原理如下:

讓浮動元素left相對於父元素container右移50%,浮動元素left的子元素left-child相對於left左移50%就可以實現left-child相對於container水平居中

垂直居中類似,不過操作的不是left而是top

13,HTML5和CSS3的了解情況

有所了解

HTML5和CSS3分別是新推出的HTML和CSS規范,前世是XHTML2和CSS2,目前還在草案階段,不過得到了Apple,Opera,Mozilla,Google,Microsoft不同程度的支持,也開發出了不少基於他們的應用。

HTML5相對於原來的HTML規范有一些變化:

(1)DOCTYPE更簡潔

(2)新增了一些語義化標簽,如article,header,footer,dialog等

(3)新增了一些高級標簽,如,,

CSS3相對於CSS2也新增了不少功能

(1) 選擇器更加豐富

(2) 支持為元素設置陰影

(3) 無需圖片能提供圓角

14,你怎麼來實現下面這個設計圖

(1) 切圖

(2) 布局,採用兩欄布局,分別左浮動

(3) 編寫css代碼

15,css 中id和class如何定義,哪個定義的優先順序別高?

id:#***,***為HTML中定義的id屬性

class:.***,***為HTML中定義的class屬性

id比class的優先順序高

16,用html實現如下表格(不如嵌套實用表格)

三行三列,其中第一行第一列和第二行第一列合並; 第二行第二列和第二行第三列合並(現場畫表)

運行結果如下:

17,web標准網站有那些優點

(1) Web標准網站結構和布局分離,使網站的訪問和維護更加容易

(2) Web標准網站結構,布局以及頁面訪問都標准化,使網站能在更多的web標准設備中訪問,兼容性更好

(3) Web標准網站語義化更好,語義化的XHTML不僅對用戶友好,對搜索引擎也友好。

;

⑶ web前端的入門考試有哪些

如今Web前端開發是一門吃香的技術,更多的人選擇了Web前端開發工程師的職業。想要掌握Web前端技術的內容,能夠達到企業的就業要求,需要付出更多的時間及努力。只要真正不斷提升自身的技能,才能走更遠。
如果你想要快速學習Web前端技術,專業全面的學習方式比較好,一般費用在2W左右,4-6個月左右。專業學習適合零基礎的小白迅速成長,學習曲線先快後慢,也適合有一定基礎的學員進階學習,鞏固知識的基礎上,穩步進步突破職業瓶頸。

⑷ web前端 基礎 操作題

<!DOCTYPEhtml>
<html>
<head>
<metacharset="UTF-8">
<title>第一題</title>
<style>
html,body{width:100%;height:100%;}
body{position:relative;margin:0;}
button{position:absolute;top:0;bottom:0;left:0;right:0;margin:auto;width:100px;height:40px;color:#FFF;font-size:16px;font-family:"微軟雅黑";border-radius:8px;background-color:#f49610;}
</style>
</head>
<body>
<formaction="">
<buttononclick="alert('你點我了~~')">點我</button>
</form>
</body>
</html>

第一題如上(保存文件為.html形式)

---------------------------------------------------------------------------

第二題如下(html部分保存文件為.html形式,JS部分保存為.js文件。兩個文件放在同一個文件夾下,因為我的src路徑是這樣寫的,你可以改)

<!DOCTYPEhtml>
<html>
<head>
<metacharset="UTF-8">
<title>第二題</title>
<scriptsrc="pulsate.js"></script>
<style>
html,body{width:100%;height:100%;}
body{position:relative;margin:0;}
button{position:absolute;top:0;bottom:0;left:0;right:0;margin:auto;width:100px;height:40px;color:#FFF;font-size:16px;font-family:"微軟雅黑";border-radius:8px;background-color:#f49610;}
</style>
</head>
<body>
<formaction="">
<button>點我</button>
</form>
</body>
</html>

下面是第二題的,JS部分:

window.onload=function(){
varbtn=document.getElementsByTagName("button")[0];

btn.onclick=function(){
alert("哎呀,你又點我了~");
}
}

加油~

⑸ web前端初級考試得分標準是什麼實操和理論都達到六十分才過嗎

web前端初級考試得分標準是60分,實操和理論都達到60分才可以過關。

⑹ web前端開發面試流程是怎樣的

首先投簡歷,等待hr通知面試,一般情況下先填資料,做測試題,接著開始第一面(一般問經你的個人情況,工作經歷等),資料已經交給技術,等一面通過之後接著二面,二面一般是技術面試,問你開發相關的技術問題(例如布局問題,js,框架之類的),有些公司還需要上機操作(寫一兩個頁面或者開發一個js方法等),有些公司是通過之後直接進行3面有些是改天再進行3面,3面一般就是項目經理或總經理問你一些各種各樣的問題(隨機應變就行,也有一些公司沒有這個環節),如果3面都過了,基本上就是面試成功了,接下來就是4面,也就是人事主管和你談工資待遇等問題了,這個談好之後就會告訴你什麼時候過來上班,要准備什麼東西,當然一般還會有正式的工作邀請函發到你的郵箱。如果沒有3面的公司,那人事這個環節就直接是3面了。
還有一些公司是一面之後等通知,通過的就通知你二面,然後再等通知,然後通過再三面(這樣的公司我一般不會等,太浪費時間)

⑺ 有哪些經典的 Web 前端或者 JavaScript 面試筆試題

HTML、CSS部分

8.html5\CSS3有哪些新特性、移除了那些元素?如何處理HTML5新標簽的瀏覽器兼容問題?如何區分 HTML 和 HTML5?

HTML5 現在已經不是 SGML 的子集,主要是關於圖像,位置,存儲,地理定位等功能的增加。

* 繪畫 canvas 元素

用於媒介回放的 video 和 audio 元素

本地離線存儲 localStorage 長期存儲數據,瀏覽器關閉後數據不丟失;
sessionStorage 的數據在瀏覽器關閉後自動刪除

語意化更好的內容元素,比如 article、footer、header、nav、section

表單控制項,calendar、date、time、email、url、search

CSS3實現圓角,陰影,對文字加特效,增加了更多的CSS選擇器 多背景 rgba

新的技術webworker, websockt, Geolocation

移除的元素

純表現的元素:basefont,big,center,font, s,strike,tt,u;

對可用性產生負面影響的元素:frame,frameset,noframes;

* 是IE8/IE7/IE6支持通過document.createElement方法產生的標簽,
可以利用這一特性讓這些瀏覽器支持HTML5新標簽,

瀏覽器支持新標簽後,還需要添加標簽默認的樣式:

* 當然最好的方式是直接使用成熟的框架、使用最多的是html5shim框架
<!--[if lt IE 9]>
<script> src="http://html5shim.googlecode.com/svn/trunk/html5.js"</script>
<![endif]-->

9.你怎麼來實現頁面設計圖,你認為前端應該如何高質量完成工作? 一個滿屏 品 字布局 如何設計?
* 首先劃分成頭部、body、腳部;。。。。。

*
實現效果圖是最基本的工作,精確到2px;

與設計師,產品經理的溝通和項目的參與

做好的頁面結構,頁面重構和用戶體驗

處理hack,兼容、寫出優美的代碼格式

針對伺服器的優化、擁抱 HTML5。

10.常使用的庫有哪些?常用的前端開發工具?開發過什麼應用或組件?
* 使用率較高的框架有jQuery、YUI、Prototype、Dojo、Ext.js、Mootools等。尤其是jQuery,超過91%。

輕量級框架有Modernizr、underscore.js、backbone.js、Raphael.js等。
(理解這些框架的功能、性能、設計原理)

* Sublime Text 、Eclipse、Notepad、Firebug、HttpWatch、Yslow。

* 城市選擇插件,汽車型號選擇插件、幻燈片插件。彈出層。(寫過開源程序,載入器,js引擎更好)

JavaScript原型,原型鏈 ? 有什麼特點?

* 原型對象也是普通的對象,是對象一個自帶隱式的 __proto__ 屬性,原型也有可能有自己的原型,如果一個原型對象的原型不為null的話,我們就稱之為原型鏈。
* 原型鏈是由一些用來繼承和共享屬性的對象組成的(有限的)對象鏈。

* JavaScript的數據對象有那些屬性值?

writable:這個屬性的值是否可以改。

configurable:這個屬性的配置是否可以刪除,修改。

enumerable:這個屬性是否能在for…in循環中遍歷出來或在Object.keys中列舉出來。

value:屬性值。

* 當我們需要一個屬性的時,Javascript引擎會先看當前對象中是否有這個屬性, 如果沒有的話,就會查找他的Prototype對象是否有這個屬性。

function clone(proto) {

function Dummy() { }

Dummy.prototype = proto;

Dummy.prototype.constructor = Dummy;

return new Dummy(); //等價於Object.create(Person);

}

function object(old) {
function F() {};
F.prototype = old;
return new F();
}
var newObj = object(oldObject);

12.列出display的值,說明他們的作用。position的值, relative和absolute定位原點是?
1. block 象塊類型元素一樣顯示。
none 預設值。向行內元素類型一樣顯示。
inline-block 象行內元素一樣顯示,但其內容象塊類型元素一樣顯示。
list-item 象塊類型元素一樣顯示,並添加樣式列表標記。

2.
*absolute
生成絕對定位的元素,相對於 static 定位以外的第一個父元素進行定位。

*fixed (老IE不支持)
生成絕對定位的元素,相對於瀏覽器窗口進行定位。

*relative
生成相對定位的元素,相對於其正常位置進行定位。

* static 默認值。沒有定位,元素出現在正常的流中
*(忽略 top, bottom, left, right z-index 聲明)。

* inherit 規定從父元素繼承 position 屬性的值。

13.頁面重構怎麼操作?
編寫 CSS、讓頁面結構更合理化,提升用戶體驗,實現良好的頁面效果和提升性能。

14.語義化的理解?
html語義化就是讓頁面的內容結構化,便於對瀏覽器、搜索引擎解析;
在沒有樣式CCS情況下也以一種文檔格式顯示,並且是容易閱讀的。
搜索引擎的爬蟲依賴於標記來確定上下文和各個關鍵字的權重,利於 SEO。
使閱讀源代碼的人對網站更容易將網站分塊,便於閱讀維護理解。

15.HTML5的離線儲存?
localStorage 長期存儲數據,瀏覽器關閉後數據不丟失;
sessionStorage 數據在瀏覽器關閉後自動刪除。

16.為什麼要初始化CSS樣式。

因為瀏覽器的兼容問題,不同瀏覽器對有些標簽的默認值是不同的,如果沒對CSS初始化往往會出現瀏覽器之間的頁面顯示差異。

當然,初始化樣式會對SEO有一定的影響,但魚和熊掌不可兼得,但力求影響最小的情況下初始化。

*最簡單的初始化方法就是: * {padding: 0; margin: 0;} (不建議)
淘寶的樣式初始化:
body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td { margin:0; padding:0; }
body, button, input, select, textarea { font:12px/1.5tahoma, arial, \5b8b\4f53; }
h1, h2, h3, h4, h5, h6{ font-size:100%; }
address, cite, dfn, em, var { font-style:normal; }
code, kbd, pre, samp { font-family:couriernew, courier, monospace; }
small{ font-size:12px; }
ul, ol { list-style:none; }
a { text-decoration:none; }
a:hover { text-decoration:underline; }
sup { vertical-align:text-top; }
sub{ vertical-align:text-bottom; }
legend { color:#000; }
fieldset, img { border:0; }
button, input, select, textarea { font-size:100%; }
table { border-collapse:collapse; border-spacing:0; }

17.(寫)描述一段語義的html代碼吧。
(HTML5中新增加的很多標簽(如:<article>、<nav>、<header>和<footer>等)
就是基於語義化設計原則)

< div id="header">
< h1>標題< /h1>
< h2>專注Web前端技術< /h2>
< /div>

語義 HTML 具有以下特性:

文字包裹在元素中,用以反映內容。例如:
段落包含在 <p> 元素中。
順序表包含在<ol>元素中。
從其他來源引用的大型文字塊包含在<blockquote>元素中。
HTML 元素不能用作語義用途以外的其他目的。例如:
<h1>包含標題,但並非用於放大文本。
<blockquote>包含大段引述,但並非用於文本縮進。
空白段落元素 ( <p></p> ) 並非用於跳行。
文本並不直接包含任何樣式信息。例如:
不使用 <font> 或 <center> 等格式標記。
類或 ID 中不引用顏色或位置。

18.absolute的containing block計算方式跟正常流有什麼不同?
19.position跟display、margin collapse、overflow、float這些特性相互疊加後會怎麼樣?
20.對BFC規范的理解?(W3C CSS 2.1 規范中的一個概念,它決定了元素如何對其內容進行定位,以及與其他元素的關 系和相互作用。)
21.iframe有那些缺點?
*iframe會阻塞主頁面的Onload事件;

*iframe和主頁面共享連接池,而瀏覽器對相同域的連接有限制,所以會影響頁面的並行載入。
使用iframe之前需要考慮這兩個缺點。如果需要使用iframe,最好是通過javascript
動態給iframe添加src屬性值,這樣可以可以繞開以上兩個問題。

22.css定義的權重
以下是權重的規則:標簽的權重為1,class的權重為10,id的權重為100,以下例子是演示各種定義的權重值:

/*權重為1*/
div{
}
/*權重為10*/
.class1{
}
/*權重為100*/
#id1{
}
/*權重為100+1=101*/
#id1 div{
}
/*權重為10+1=11*/
.class1 div{
}
/*權重為10+10+1=21*/
.class1 .class2 div{
}

如果權重相同,則最後定義的樣式會起作用,但是應該避免這種情況出現

23.eval是做什麼的?
它的功能是把對應的字元串解析成JS代碼並運行;
避免使用eval,不安全,非常耗性能(2次,一次解析成js語句,一次執行)。

23.寫一個通用的事件偵聽器函數
`// event(事件)工具集,來源:https://github.com/markyun
markyun.Event = {
// 頁面載入完成後
readyEvent : function(fn) {
if (fn==null) {
fn=document;
}
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = fn;
} else {
window.onload = function() {
oldonload();
fn();
};
}
},
// 視能力分別使用dom0||dom2||IE方式 來綁定事件
// 參數: 操作的元素,事件名稱 ,事件處理程序
addEvent : function(element, type, handler) {
if (element.addEventListener) {
//事件類型、需要執行的函數、是否捕捉
element.addEventListener(type, handler, false);
} else if (element.attachEvent) {
element.attachEvent('on' + type, function() {
handler.call(element);
});
} else {
element['on' + type] = handler;
}
},
// 移除事件
removeEvent : function(element, type, handler) {
if (element.removeEnentListener) {
element.removeEnentListener(type, handler, false);
} else if (element.datachEvent) {
element.detachEvent('on' + type, handler);
} else {
element['on' + type] = null;
}
},
// 阻止事件 (主要是事件冒泡,因為IE不支持事件捕獲)
stopPropagation : function(ev) {
if (ev.stopPropagation) {
ev.stopPropagation();
} else {
ev.cancelBubble = true;
}
},
// 取消事件的默認行為
preventDefault : function(event) {
if (event.preventDefault) {
event.preventDefault();
} else {
event.returnValue = false;
}
},
// 獲取事件目標
getTarget : function(event) {
return event.target || event.srcElement;
},
// 獲取event對象的引用,取到事件的所有信息,確保隨時能使用event;
getEvent : function(e) {
var ev = e || window.event;
if (!ev) {
var c = this.getEvent.caller;
while (c) {
ev = c.arguments[0];
if (ev && Event == ev.constructor) {
break;
}
c = c.caller;
}
}
return ev;
}
};

24.99%的網站都需要被重構是那本書上寫的?
* 網站重構:應用web標准進行設計(第2版)

25.什麼叫優雅降級和漸進增強?
優雅降級:Web站點在所有新式瀏覽器中都能正常工作,如果用戶使用的是老式瀏覽器,則代碼會檢查以確認它們是否能正常工作。由於IE獨特的盒模型布局問題,針對不同版本的IE的hack實踐過優雅降級了,為那些無法支持功能的瀏覽器增加候選方案,使之在舊式瀏覽器上以某種形式降級體驗卻不至於完全失效.

漸進增強:從被所有瀏覽器支持的基本功能開始,逐步地添加那些只有新式瀏覽器才支持的功能,向頁面增加無害於基礎瀏覽器的額外樣式和功能的。當瀏覽器支持時,它們會自動地呈現出來並發揮作用。

26.Node.js的適用場景
高並發、聊天、實時消息推送

27.WEB應用從伺服器主動推送Data到客戶端有那些方式? html5 websoket
WebSocket通過Flash
XHR長時間連接
XHR Multipart Streaming
不可見的Iframe
<script>標簽的長時間連接(可跨域)

⑻ web前端考試的多選只選一個有分嗎

不得分,多選題只有全答對才得分,否則不得分,這是個難點,需要考生全面掌握相關知識以及分析考題,如果有一點錯漏,將面臨著白答的准備,所以考試時,多選題先答有把握的,沒有把握的,等所有題答完後再答,防止浪費時間。

⑼ web前端開發技能等級證書怎麼考需要學什麼課程

web前端開發技能等級證書考試為上機考試,分為理論考試和實操考試兩場,需要學習HTML5+CSS3、JS交互設計、Node開發、前端框架以及小程序與APP開發等課程。

web前端開發技能等級考試注意事項:

1、考生需要攜帶身份證原件並將本人准考證和身份證放在桌面指定位置以備監考人員核對;

2、考生遲到30分鍾禁止進入考場,考試前20分鍾根據監考人員的提示,考生錄入個人信息,登錄考試系統。

⑽ Web前端開發筆試題

Web前端開發筆試題集錦

Web前端開發筆試題集錦:

1,截取字元串abcdefg的efg

var str = "abcdefg";

if (/efg/.test(str)) {

var efg = str.substr(str.indexOf("efg"), 3);

alert(efg);

}

2, 判斷字元串是否是這樣組成的,第一個必須是字母,後面可以是字母、數字、下劃線,總長度為5-20

var reg = /^[a-zA-Z][a-zA-Z_0-9]{4,19}$/;

reg.test("a1a__a1a__a1a__a1a__");

3,判斷一個字元串中出現次數最多的字元,統計這個次數

//將字元串的`字元保存在一個hash table中,key是字元,value是這個字元出現的次數

var str = "abcdefgaddda";

var obj = {};

for (var i = 0, l = str.length; i < l; i++) {

var key = str[i];

if (!obj[key]) {

obj[key] = 1;

} else {

obj[key]++;

}

}

/*遍歷這個hash table,獲取value最大的key和value*/

var max = -1;

var max_key = "";

var key;

for (key in obj) {

if (max < obj[key]) {

max = obj[key];

max_key = key;

}

}

alert("max:"+max+" max_key:"+max_key);

4,IE與FF腳本兼容性 問題

(1) window.event:

表示當前的事件對象,IE有這個對象,FF沒有,FF通過給事件處理函數傳遞事件對象

(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) 是否可用id代替HTML元素

IE:可以用id來代替HTML元素

FF:不可以

(8) innerText textContent outerHTML

IE:支持innerText, outerHTML

FF:支持textContent

;