web前端開發面試題

web前端開發面試題集錦

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

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

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

　　reg.test("a1a__a1a__a1a__a1a__");

　　2，截取字符串abcdefg的efg

　　var str = "abcdefg";

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

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

　　alert(efg);

　　}

　　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) innerText textContent outerHTML

　　IE：支持innerText, outerHTML

　　FF：支持textContent

　　(8) 是否可用id代替HTML元素

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

　　FF：不可以

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

　　5，規避javascript多人開發函數重名問題

　　(1) 可以開發前規定命名規范，根據不同開發人員開發的功能在函數前加前綴

　　(2) 將每個開發人員的函數封裝到類中，調用的時候就調用類的函數，即使函數重名只要類名不重復就ok

　　6，javascript面向對象中繼承實現

　　javascript面向對象中的繼承實現一般都使用到了構造函數和Prototype原型鏈，簡單的代碼如下：

　　function Animal(name) {

　　this.name = name;

　　}

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

　　function Dog() {};

　　Dog.prototype = new Animal("Buddy");

　　Dog.prototype.constructor = Dog;

　　var dog = new Dog();

　　7，FF下面實現outerHTML

　　FF不支持outerHTML，要實現outerHTML還需要特殊處理

　　思路如下：

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

　　SPANDIV

　　SPAN

　　P

　　8，編寫一個方法 求一個字符串的字節長度

　　假設：

　　一個英文字符占用一個字節，一個中文字符占用兩個字節

　　function GetBytes(str){

　　var len = str.length;

　　var bytes = len;

　　for(var i=0; i

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

　　}

　　return bytes;

　　}

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

　　9，編寫一個方法 去掉一個數組的重復元素

　　var arr = [1 ,1 ,2, 3, 3, 2, 1];

　　Array.prototype.unique = function(){

　　var ret = [];

　　var o = {};

　　var len = this.length;

　　for (var i=0; i

　　var v = this[i];

　　if (!o[v]){

　　o[v] = 1;

　　ret.push(v);

　　}

　　}

　　return ret;

　　};

　　alert(arr.unique());

　　10，寫出3個使用this的典型應用

　　(1)在html元素事件屬性中使用，如

　　(2)構造函數

　　function Animal(name, color) {

　　this.name = name;

　　this.color = color;

　　}

　　(3)

　　(4)CSS expression表達式中使用this關鍵字

　　div element

　　12，如何顯示/隱藏一個DOM元素?

　　el.style.display = "";

　　el.style.display = "none";

　　el是要操作的DOM元素

　　13，JavaScript中如何檢測一個變量是一個String類型?請寫出函數實現

　　String類型有兩種生成方式：

　　(1)Var str = “hello world”;

　　(2)Var str2 = new String(“hello world”);

　　function IsString(str){

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

　　}

　　var str = "";

　　alert(IsString(1));

　　alert(IsString(str));

　　alert(IsString(new String(str)));

　　14，網頁中實現一個計算當年還剩多少時間的倒數計時程序，要求網頁上實時動態顯示“××年還�！痢撂臁痢習r××分××秒”

　　15，補充代碼，鼠標單擊Button1后將Button1移動到Button2的后面

　　16，JavaScript有哪幾種數據類型

　　簡單：Number，Boolean，String，Null，Undefined

　　復合：Object，Array，Function

　　17，下面css標簽在JavaScript中調用應如何拼寫，border-left-color，-moz-viewport

　　borderLeftColor

　　mozViewport

　　18，JavaScript中如何對一個對象進行深度clone

　　function cloneObject(o) {

　　if(!o || 'object' !== typeof o) {

　　return o;

　　}

　　var c = 'function' === typeof o.pop ? [] : {};

　　var p, v;

　　for(p in o) {

　　if(o.hasOwnProperty(p)) {

　　v = o[p];

　　if(v && 'object' === typeof v) {

　　c[p] = Ext.ux.clone(v);

　　}

　　else {

　　c[p] = v;

　　}

　　}

　　}

　　return c;

　　};

　　19，如何控制alert中的換行

　　\n alert(“p\np”);

　　20，請實現，鼠標點擊頁面中的任意標簽，alert該標簽的名稱.(注意兼容性)

　　SPANDIV

　　SPAN

　　P

　　21，請編寫一個JavaScript函數 parseQueryString，它的用途是把URL參數解析為一個對象，如：

　　var url = “http://witmax.cn/index.php?key0=0&key1=1&key2=2″;

　　function parseQueryString(url){

　　var params = {};

　　var arr = url.split("?");

　　if (arr.length <= 1)

　　return params;

　　arr = arr[1].split("&");

　　for(var i=0, l=arr.length; i

　　var a = arr[i].split("=");

　　params[a[0]] = a[1];

　　}

　　return params;

　　}

　　var url = "http://witmax.cn/index.php?key0=0&key1=1&key2=2";

　　var ps = parseQueryString(url);

　　alert(ps["key1"]);

【web前端開發面試題】相關文章：

web前端面試題201611-17

Web前端開發筆試題集錦11-21

芒果Web前端開發面試經歷11-07

凡客誠品面試經歷 web前端開發11-19

網易web前端開發師面試問答經歷11-20

應聘web前端開發凡客誠品面試經歷11-14

網易web開發工程師的筆試題分享11-21

面試題精選02-18

分享面試題目 教育職業面試題11-20

熱門就業行業面試題精選：編輯行業面試題！11-19