關於Web前端及百度web前端筆試面試題目javascript
隨着各大互聯網公司設立了Web前端開發工程師、設計工程師等職位，web前端愈來愈獲得互聯網企業的承認。並且其重視程度與地位也隨着瀏覽器 端的富客戶端的體現而日益提升。 眼前對HTML5的將來和走向，業內的預測是會和Flash、Silverlight等相結合，從而取代傳統的客戶端應用程序。而實現這個目標的客戶端核 心工做是有Web前端工程師來完成的。 從另外一個角度，對於web產品來講，交互和用戶體驗是產品的第一價值，這部分價值的體現就是在web前端。能夠說web前端是一個web產品的長相和談 吐、行爲。css
下面就簡單的說明一下web前端的組成部分。html
1. UI設計部分前端
這是web產品化的第一步。這個部分一般在稍大型的公司裏，被單獨設立爲一個部門或者一些人來工做。主要是要掌握Photo, AI,能夠很快的將創意轉化爲平面設計圖，並製做PNG等小圖片。 同時，UI設計還要預包含用戶交互設計的元素，如何和用戶交互的基本原型等。java
2. HTML/CSS,頁面靜態化jquery
這是web產品化的2步，就是將UI設計師的設計圖切成靜態頁面。這裏的「切」不是單純的切，而是使用css裏面背景色和邊框樣式等方式對設計原稿 進行解讀，並造成符合web標準的html代碼。這裏web前端還須要將圖片、html頁面以及css樣式進行合理的文件分佈安排等web
3.Javascript, AS 客戶端動態化面試
這是web產品化的3步，工程師使用DOM操做、AJAX，實現數據和服務端的通訊以及本地樣式的切換。同時，因爲Javascript、 AS是一門動態語言，因此這部分的編碼要求web前端工程師有較好的編碼習慣，能寫高效率的OOP代碼，並對代碼進行壓縮上線以下降帶寬消耗等。ajax
4.Flash、Silverlight、Video 多媒體化正則表達式
這部分針對不一樣web產品有不一樣的要求，一般要求是可使用Flash和web、Server進行交互，並對Flash進行設計與開發。
5.PHP、Java等CGI, 服務端通訊基本知識和編碼
這部分主要是更好的使用Ajax等技術，瞭解服務端的工做方式將更有利於web前端工程師工做的開展。一般優秀的web前端工程師都是對服務端的一 種開發語言很瞭解。
下面是webryan整理的百度web前端筆試和麪試的一些題目和過程，提供給你們借鑑。
百度web前端筆試試卷上的題目：
1.判斷字符串是不是這樣組成的，第一個必須是字母，後面能夠是字母、數字、下劃線，總長度爲5-20
2.截取字符串abcdefg的efg
3.讓一個input的背景顏色變成紅色
4。給一個頁面，寫html css
5。div的高寬等於瀏覽器可見區域的高寬，瀏覽器滾動，div始終覆蓋瀏覽器的整個可見區域
6。判斷一個字符串中出現次數最多的字符，統計這個次數
7。IE與FF腳本兼容性問題
又從新問的是1，4，6，7，此次問出題者的意圖，而且讓給出7的更多答案，以及IE FF不兼容的緣由
而後看了看簡歷，沒有問簡歷上的項目，而是讓本身隨便談談
1對於web客戶端技術將來趨勢發展談談見解
javascript + ajax=RIA
Adobe Flash AS 3
Flex
Sliveright
2web開發團隊人員應該如何分工協做
佈局 CSS 腳本
好比腳本人員長期的積累可能鑄造類型YUI這樣的產品級腳本庫（亮點）
3web開發曾經的團隊有沒有別人遇到問題，什麼問題，向你請教
4若是要實習，何時能夠
5本身在開發的過程當中遇到什麼問題，談談見解
6web開發腳本開發環境用什麼、調試用什麼
試過aptana，如今就用editplus
調試確定用firebug，ie下看頁面DOM用IEInspector
7若是有個新技術，如今須要掌握，你會怎麼作
新技術的發現我通常是經過RSS工具，好比我用GoogleReader
天天有半個小時左右在看最新的資訊、技術走向
發現新技術，首先有個大概瞭解，若是有深刻的必要
我通常會看他的官網，好比jquery，我會搜索到www.jquery.com，而後看Docs、samples
若是要用到項目中，有困難的問題，我會svn獲得最新的這個技術的源碼，深刻跟蹤進去，看實現原理
通常如今涌現的技術都是opensource
提問時間
1百度web開發腳本是否有作相似YUI庫的打算
2百度web開發工程師打算招多少人
百度電話二面回憶 web開發部–web開發工程師
首先是自我介紹
而後談談作的web項目
而後開始問技術問題
前端開發的優化問題
答:
產品發佈時，js的壓縮，即函數名替換、整個文件壓縮成一行
css開發的時候 註釋寫清楚，先有個base.css，而後根據不一樣頁面須要再加css，發佈的時候將css中的一個定義寫成一行，目的是壓縮文件大小
最終發佈的時候甚至能夠將css，js分別壓縮成一個文件，甚至css、js經過技巧壓縮到一個裏邊（亮點）
這樣的目的是，減小用戶訪問web產品的http鏈接數
web前端產品的開發流程
答:首先根據產品的定位、用戶羣，肯定配色，而後紙上設計總體佈局，而後png或者psd出效果圖，切出須要的小圖片，而後手寫代碼div+css構造出 頁面，而後根據功能寫腳本
參考126郵箱首頁，將全部小圖片放到一個圖片中，經過css的background-position實現頁面，仍是爲了優化，減小http鏈接數
規避javascript多人開發函數重名問題
答:首先是經過命名規範，好比根據不一樣的開發人員實現的功能，在函數名加前綴，雖然函數名看起來複雜，發佈的時候仍是能夠替換，從而優化。
還有一種辦法是，每一個開發人員都把本身的函數封裝到類中，而後調用的時候即便函數名相同，可是由於是要類.函數名來調用，因此也減小了重複的可能性。
javascript面向對象中繼承實現
答：我是用prototype.js extend.js擴展
而後子類中parent.initialize()…
答的很差
正確答案：
// 1. 構造器
function Animal() {};
function Mammal() {};
function Canine() {};
function Dog() {};
// 2. 原型鏈表
Mammal.prototype = new Animal();
Canine.prototype = new Mammal();
Dog.prototype = new Canine();
prototype.js實現的基本原理
答：
將功能封裝
好比Ajax.Request，仍是有判斷瀏覽器的代碼；Position這樣的實現頁面元素位置的計算
prototye太大，若是一個頁面功能不須要這樣的，本身實現，怎麼作
答：首先頁面、css、腳本分離以後，腳本中將整個模塊功能寫成一個類var Do={}
其中初始化函數init:function(){}，而後最後作Do.init()
其中init會對頁面上form中須要交互的元素綁定事件，好比$(’input1′).onclick=function(){}
IE、FF下面腳本的區別
答：
1.IE有outerHTML，FF沒有
2.頁面元素id，IE能夠直接取，FF必須document.getElementById()
3.Ajax裏邊FF是new XMLHttpRequest，而IE是
try new ActiveXObject(’Msxml2.XMLHTTP’) try new ActiveXObject(’Microsoft.XMLHTTP’)
FF下面實現outerHTML
答：.parenet.firstChild .parent.innerHTML
這個沒答好
正確答案：原理是，get：取到這個標籤的tagname，而後屬性循環構形成這個標籤的屬性
set：把字符串用insertBefore插入到這個元素前面，而後removeChild這個元素
<head>
<SCRIPT LANGUAGE=」JavaScript」>
<!–
if(typeof(HTMLElement)!=」undefined」 && !window.opera)
{
HTMLElement.prototype.__defineGetter__(」outerHTML」,function()
{
var a=this.attributes, str=」<」+this.tagName, i=0;
for(;i<a.length;i++)
if(a[i].specified)
str+=」 「+a[i].name+’=」‘+a[i].value+’」‘;
if(!this.canHaveChildren)
return str+」 />」;
return str+」>」+this.innerHTML+」</」+this.tagName+」>」;
});
HTMLElement.prototype.__defineSetter__(」outerHTML」,function(s)
{
var d = document.createElement(」DIV」); d.innerHTML = s;
for(var i=0; i<d.childNodes.length; i++)
this.parentNode.insertBefore(d.childNodes[i], this);
this.parentNode.removeChild(this);
});
HTMLElement.prototype.__defineGetter__(」canHaveChildren」,function()
{
return !/^(area|base|basefont|col|frame|hr|img|br|input|isindex|link|meta|param)$/.test(this.tagName.toLowerCase());
});
}
//–>
</SCRIPT>
IE、FF下面CSS的解釋區別
答：
1.png透明背景，FF下面沒有問題，IE須要用濾鏡通道
2.z-index在IE、FF下面的解釋問題，
IE會認爲第一個z-index=0
3.長字符串，word-wrap:break-all能夠解決IE，可是FF須要overflow:hidden才行
馮舒婭補充：
一、有些標籤在ff中不能用，好比button
二、濾鏡
三、鼠標cursor:hand cursor:pointer
四、div的高度自適應
五、對box模型解析不同
六、ul、ol的padding和margin
IE都能識別*，標準瀏覽器（如FF）不能識別*；
IE6能識別*，但不能識別 !important；
IE7能識別*，也能識別 !important；
FF不能識別*，但能識別 !important；
例如style=」*width:10px;!important width:20px;」
這樣在IE6下寬度爲10px,在IE7下寬度時20px
web前端技術的展望
答：javascript ajax；flash AS；Flex；Sliveright
附上網上的百度web開發工程師筆試問題集
1編寫一個方法 求一個字符串的字節長度
<script language=」javascript」 type=」text/javascript」>
new function(s)
{
if(!arguments.length||!s) return null;
if(」"==s) return 0;
var l=0;
for(var i=0;i<s.length;i++)
{
if(s.charCodeAt(i)>255) l+=2;
else l++;
}
alert(l);
}(」hello你好，我好,你們好！world!」);
</script>
2編寫一個方法 去掉一個數組的重複元素
<script language=」javascript」 type=」text/javascript」>
Array.prototype.strip=function()
{
if(this.length<2) return [this[0]]||[];
var arr=[];
for(var i=0;i<this.length;i++)
{
arr.push(this.splice(i–,1));
for(var j=0;j<this.length;j++)
{
if(this[j]==arr[arr.length-1])
{
this.splice(j–,1);
}
}
}
return arr;
}
var arr=["abc",85,"abc",85,8,8,1,2,5,4,7,8];
alert(arr.strip());
</script>
3說出3條以上ff和ie的腳本兼容問題
IE 有children，FF沒有；IE有parentElement，FF沒有；IE有innerText,outerText,outerHTML，FF 沒有；FF有HTMLElement,HTMLDivElement,XMLDocument,DocumentFragment,Node, Event,Element等等，IE沒有；IE有數據島，FF沒有；IE跟FF建立HttpRequest實例的方法不同。。等等。。
4用腳本寫去除字符串的先後空格
String.prototype.trim = function(mode)
{//先後去空格
if (mode==’left’) {
return ((this.charAt(0) == 」 「 && this.length > 0) ? this.slice(1).trim(’left’) : this);
} else
if (mode == ’right’) {
return ((this.charAt(this.length - 1) == 」 「 && this.length > 0) ? this.slice(0, this.length - 1).trim(’right’) : this);
} else {
return this.trim(’left’).trim(’right’);
}
};
5算出字符串中出現次數最多的字符是什麼，出現了多少次
<script type=」text/javascript」>
//<![CDATA[var str ="adadfdfseffserfefsefseeffffftsdg"; //命名一個變量放置給出的字符串
var maxLength = 0; //命名一個變量放置字母出現的最高次數並初始化爲0
var result = ''; //命名一個變量放置結果輸入
while( str != '' ){ //循環迭代開始，並判斷字符串是否爲空
oldStr = str; //將原始的字符串變量賦值給新變量
getStr = str.substr(0,1); //用字符串的substr的方法獲得第一個字符（首字母）
eval("str = str.replace(/"+getStr+"/g,'')"); //詳細如補充
if( oldStr.length-str.length > maxLength )
{ //判斷原始的字符串的長度減去替代後字符串長度是否大於以前出現的最大的字符串長度
maxLength = oldStr.length-str.length; //兩字符串長度相減獲得最大的字符串長度
result = getStr + "=" + maxLength //返回最大的字符串結果（字母、出現次數）
}
}
alert(result) //彈出結果
//]]>
</script>
6寫出3中使用this的典型應用
在HTML元素事件屬性中inline方式使用this關鍵字：
7.最後一個問題是，如何製做一個combo選項，就是能夠輸入能夠下拉菜單選擇。
這個網上有不少成品，主要是經過絕對定位和相對定位結合的方式，改造原有的select 標籤和input標籤的方法。
附上javascript正則表達式的基本知識：
g: 全局匹配
i: 忽略大小寫
^ 匹配一個輸入或一行的開頭，/^a/匹配」an A」，而不匹配」An a」
$ 匹配一個輸入或一行的結尾，/a$/匹配」An a」，而不匹配」an A」
* 匹配前面元字符0次或屢次，/ba*/將匹配b,ba,baa,baaa
+ 匹配前面元字符1次或屢次，/ba*/將匹配ba,baa,baaa
? 匹配前面元字符0次或1次，/ba*/將匹配b,ba
(x) 匹配x保存x在名爲$1…$9的變量中
x|y 匹配x或y
{n} 精確匹配n次
{n,} 匹配n次以上
{n,m} 匹配n-m次
[xyz] 字符集(character set)，匹配這個集合中的任一一個字符(或元字符)
[^xyz] 不匹配這個集合中的任何一個字符
[b] 匹配一個退格符
b 匹配一個單詞的邊界
B 匹配一個單詞的非邊界
cX 這兒，X是一個控制符，/cM/匹配Ctrl-M
d 匹配一個字數字符，/d/ = /[0-9]/
D 匹配一個非字數字符，/D/ = /[^0-9]/
n 匹配一個換行符
r 匹配一個回車符
s 匹配一個空白字符，包括n,r,f,t,v等
S 匹配一個非空白字符，等於/[^nfrtv]/
t 匹配一個製表符
v 匹配一個重直製表符
w 匹配一個能夠組成單詞的字符(alphanumeric，這是個人意譯，含數字)，包括下劃線，如[w]匹配」$5.98″中的5，等於[a-zA- Z0-9]
W 匹配一個不能夠組成單詞的字符，如[W]匹配」$5.98″中的$，等於[^a-zA-Z0-9
舉例：驗證email
var myReg = /^[_a-z0-9]+@([_a-z0-9]+.)+[a-z0-9]{2,3}$/;
if(myReg.test(strEmail)) return true;
