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

博客園上的一篇關于js的面試題：

創新互聯建站服務項目包括永興網站建設、永興網站制作、永興網頁制作以及永興網絡營銷策劃等。多年來，我們專注于互聯網行業，利用自身積累的技術優勢、行業經驗、深度合作伙伴關系等，向廣大中小型企業、政府機構等提供互聯網行業的解決方案，永興網站推廣取得了明顯的社會效益與經濟效益。目前，我們服務的客戶以成都為中心已經輻射到永興省份的部分城市，未來相信會繼續擴大服務區域并繼續獲得客戶的支持與信任！

Web前端面試題目匯總

望采納

JavaScript筆試，根據代碼求結果？

!doctype html

html lang="en"

head

meta charset="UTF-8"

titleDemo/title

script

//試著編寫一個程序，根據學生考試成績，輸出其總評的級別

var rank = function(n){

var rules = {

59:'不及格',

69:'一般',

79:'中等',

89:'良好',

100:'優秀'

};

n = Number(n);

n = (isNaN(n) || n 0) ? 0 : n;

n = n 100 ? 100 : n;

for(var limit in rules){

if(n = limit)

return rules[limit];

}

return 'out of rules!';

};

//輸入1－7中的任何一個數字，輸出相應的星期

var week = function(n){

return {

1:'星期一',

2:'星期二',

3:'星期三',

4:'星期四',

5:'星期五',

6:'星期六',

7:'星期日'

}[n] || 'out of rules!';

};

//輸入1－12中的任何一個數字，輸出相應的季節

var season = function(n){

var rules = {

3:'春',

6:'夏',

9:'秋',

12:'冬'

};

n = Number(n);

n = (isNaN(n) || n 1) ? 1 : n;

n = n12 ? 12 : n;

for(var limit in rules){

if(n = limit)

return rules[limit];

}

return 'out of rules!';

};

//定義一個無參數無返回值的名稱為sayHello的函數，其作用是彈出提示框并提示信息“Hello,welcome you!”；

var sayHello = function(){

alert('Hello,welcome you!');

};

//定義一個函數名稱為cube，其作用是彈出輸入框提示用戶輸入一個整數（其方法是parseInt(prompt("請輸入整數",0))），計算該整數的立方，并彈出提示框提示計算的結果

var cube = function(){

var n = parseInt(prompt('請輸入整數',0));

alert(Math.pow(n,3));

};

// 定義一個函數名稱為opt，其作用是計算1到n之間所有整數之和，將結果作為函數返回值返回

var opt = function(n){

var sum = 0;

for(var i=1;i=n;i++)

sum +=i;

return sum;

};

window.addEventListener('load',function(){

//調用函數sayHello（）

sayHello();

//調用函數cube()，并輸入整數25,查看計算結果

cube();

//調用函數opt()，計算1到20之間所有整數的和，并使用document.write()方法輸出計算結果

document.write(opt(20));

});

/script

/head

body

/body

/html

JavaScript面試筆試題都有哪些？誰能分享分享？

出個考察執行順序的setTimeout(() = {

console.log(1)

}, 100)

console.log(2);

new Promise((res) = {

console.log(3)

res(4)

}).then(res = {

console.log(res)

})

setTimeout(() = {

console.log(5)

}, 0)

出個考察作用域的a = 1;

b = 2;

c = 3;

var obj = {

a: 'a',

b: 'b',

c: 'c',

actionA: () = {

console.log(this.a);

},

actionB() {

console.log(this.b);

},

actionC,

}

function actionC() {

console.log(this.c);

}

obj.actionA();

obj.actionB();

obj.actionC();

actionC();

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

一、不定項選擇題 （每題3分，共30分）

1. 聲明一個對象，給它加上name屬性和show方法顯示其name值，以下代碼中正確的是（ D ）

A. var obj = [name:"zhangsan",show:function(){alert(name);}];

B. var obj = {name:”zhangsan”,show:”alert(this.name)”};

C. var obj = {name:”zhangsan”,show:function(){alert(name);}};

D. var obj = {name:”zhangsan”,show:function(){alert(this.name);}};

2. 以下關于Array數組對象的說法不正確的是（ CD ）

A. 對數組里數據的排序可以用sort函數，如果排序效果非預期，可以給sort函數加一個排序函數的參數

B. reverse用于對數組數據的倒序排列

C. 向數組的最后位置加一個新元素，可以用pop方法

D. unshift方法用于向數組刪除第一個元素

3. 要將頁面的狀態欄中顯示“已經選中該文本框”，下列JavaScript語句正確的是（ A ）

A. window.status=”已經選中該文本框”

B. document.status=”已經選中該文本框”

C. window.screen=”已經選中該文本框”

D. document.screen=”已經選中該文本框”

4. 點擊頁面的按鈕，使之打開一個新窗口，加載一個網頁，以下JavaScript代碼中可行的是（ AD ）

A. input type=”button” value=”new”

onclick=”open(‘new.html’, ‘_blank’)”/

B. input type=”button” value=”new”

onclick=”window.location=’new.html’;”/

C. input type=”button” value=”new”

onclick=”location.assign(‘new.html’);”/

D. form target=”_blank”action=”new.html”

inputtype=”submit” value=”new”/

/form

5. 使用JavaScript向網頁中輸出h1hello/h1，以下代碼中可行的是（ BD ）

A. scripttype=”text/javascript”

document.write(h1hello/h1);

/script

B. scripttype=”text/javascript”

document.write(“h1hello/h1”);

/script

C. scripttype=”text/javascript”

h1hello/h1

/script

D. h1

scripttype=”text/javascript”

document.write(“hello”);

/script

/h1

6. 分析下面的代碼：

html

head

script type=”text/javascript”

function writeIt (value) { document.myfm.first_text.value=value;}

/script

/head

body bgcolor=”#ffffff”

form name=”myfm”

input type=”text” name=”first_text”

input type=”text” name=”second_text”

/form

/body

/html

以下說法中正確的是（ CD ）

A. 在頁面的第二個文本框中輸入內容后，當鼠標離開第二個文本框時，第一個文本框的內容不變

B. 在頁面的第一個文本框中輸入內容后，當鼠標離開第一個文本框時，將在第二個文本框中復制第一個文本框的內容

C. 在頁面的第二個文本框中輸入內容后，當鼠標離開第二個文本框時，將在第一個文本框中復制第二個文本框的內容

D. 在頁面的第一個文本框中輸入內容后，當鼠標離開第一個文本框時，第二個文本框的內容不變

7. 下面的JavaScript語句中，（ D ）實現檢索當前頁面中的表單元素中的所有文本框，并將它們全部清空

A. for(vari=0;i form1.elements.length;i++) {

if(form1.elements.type==”text”)

form1.elements.value=”";}

B. for(vari=0;idocument.forms.length;i++) {

if(forms[0].elements.type==”text”)

forms[0].elements.value=”";

}

C. if(document.form.elements.type==”text”)

form.elements.value=”";

D. for(vari=0;idocument.forms.length; i++){

for(var j=0;jdocument.forms.elements.length; j++){

if(document.forms.elements[j].type==”text”)

document.forms.elements[j].value=”";

}

}

8. 在表單(form1)中有一個文本框元素(fname)，用于輸入電話號碼，格式如：010-82668155，要求前3位是010，緊接一個“-”，后面是8位數字。要求在提交表單時，根據上述條件驗證該文本框中輸入內容的有效性，下列語句中，（ A ）能正確實現以上功能

A. var str= form1.fname.value;

if(str.substr(0,4)!=”010-”|| str.substr(4).length!=8 ||

isNaN(parseFloat(str.substr(4))))

alert(“無效的電話號碼！”);

B. var str= form1.fname.value;

if(str.substr(0,4)!=”010-” str.substr(4).length!=8

isNaN(parseFloat(str.substr(4))))

alert(“無效的電話號碼！”);

C. var str= form1.fname.value;

if(str.substr(0,3)!=”010-”|| str.substr(3).length!=8 ||

isNaN(parseFloat(str.substr(3))))

alert(“無效的電話號碼！”);

D. var str= form1.fname.value;

if(str.substr(0,4)!=”010-” str.substr(4).length!=8

!isNaN(parseFloat(str.substr(4))))

alert(“無效的電話號碼！”);

9. 關于正則表達式聲明6位數字的郵編，以下代碼正確的是（ C ）

A. var reg = /\d6/;

B. var reg = \d{6}\;

C. var reg = /\d{6}/;

D. var reg = new RegExp(“\d{6}”);

10. 關于JavaScript里的xml處理，以下說明正確的是（ BCD ）

A. Xml是種可擴展標記語言，格式更規范，是作為未來html的替代

B. Xml一般用于傳輸和存儲數據，是對html的補充，兩者的目的不同

C. 在JavaScript里解析和處理xml數據時，因為瀏覽器的不同，其做法也不同

D. 在IE瀏覽器里處理xml，首先需要創建ActiveXObject對象

二、問答題

1. 列舉瀏覽器對象模型BOM里常用的至少4個對象，并列舉window對象的常用方法至少5個 （10分）

對象：Window document location screen history navigator

方法：Alert() confirm() prompt() open() close()

2. 簡述列舉文檔對象模型DOM里document的常用的查找訪問節點的方法并做簡單說明 （10分）

Document.getElementById 根據元素id查找元素

Document.getElementByName 根據元素name查找元素

Document.getElementTagName 根據指定的元素名查找元素

三、程序題

1、補充按鈕事件的函數，確認用戶是否退出當前頁面，確認之后關閉窗口； （10分）

html

head

script type=”text/javascript”

function closeWin(){

//在此處添加代碼

if(confirm(“確定要退出嗎？”)){

window.close();

}

}

/script

/head

body

input type=”button”value=”關閉窗口”onclick=”closeWin()”/

/body

/html

2、寫出簡單描述html標簽（不帶屬性的開始標簽和結束標簽）的正則表達式，并將以下字符串中的html標簽去除掉（15分）

var str = “div這里是divp里面的段落/p/div”;

//

scripttype=”text/javascript”

varreg = /\/?\w+\/?/gi;

varstr = “div這里是divp里面的段落/p/div”;

alert(str.replace(reg,”"));

/script

3、完成foo()函數的內容，要求能夠彈出對話框提示當前選中的是第幾個單選框。（10分）

html

head

metahttp-equiv=”Content-Type” content=”text/html;charset=utf-8″ /

/head

body

script type=”text/javascript”

function foo() {

//在此處添加代碼

var rdo =document.form1.radioGroup;

for(var i =0 ;irdo.length;i++){

if(rdo.checked){

alert(“您選擇的是第”+(i+1)+”個單選框”);

}

}

}

/script

body

form name=”form1″

input type=”radio” name=”radioGroup”/

input type=”radio” name=”radioGroup”/

input type=”radio” name=”radioGroup”/

input type=”radio” name=”radioGroup”/

input type=”submit”/

/form

/body

/html

4、完成函數showImg()，要求能夠動態根據下拉列表的選項變化，更新圖片的顯示 （15分）

body

script type=”text/javascript”

function showImg (oSel) {

//在此處添加代碼

var str = oSel.value;

document.getElementById(“pic”).src= str+”.jpg”;

}

/script

img id=”pic”src=”img1.jpg”width=”200″ height=”200″ /

br /

select id=”sel”

option value=”img1“城市生活/option

option value=”img2“都市早報/option

option value=”img3“青山綠水/option

/select/body

javascript筆試題

有些地方我也不是太懂。試著給解釋1下巴。

首先是注意javascript里，function即可以是方法也可以是對象。

var x = 10; //聲明全局變量x

var foo={ //聲明類foo

x:20, //聲明foo類成員x。其初始值為20

bar:function(){ //聲明foo類成員bar,其值是個方法

var x = 30; //方法里邊定義1個局部變量x.

return this.x; //返回類成員x的值，注意這里是用了this.代表是返回其所屬類的成員。

}

};

alert(foo.bar());//這個好理解，調用foo的bar方法嗎。當然是輸出了foo.x = 20啦。

alert((foo.bar)());//和上邊一樣，雖然加了括號，但是還是引用的foo.bar。所以輸出也是foo.x = 20.

alert((foo.bar=foo.bar)());//這里和上邊不一樣了。foo.bar = foo.bar 其結果是返回了一個function,function的定義和foo.bar是一樣的，但是這個function不再是屬于foo的。而是屬于整個javascript的。那么這里當要輸出this.x的時候，就是輸出了前邊定義的全局變量x=10

alert((foo.bar,foo.bar)());//同樣，經過運算返回的function不再是foo的成員。所以this指向的是整個javascript.

我自己也有不理解的地方：

(foo.bar, foo.bar)這種運算之前沒看到過。我測試了一下。(1,5)返回的是5,類推(1,5,12)返回12.貌似是返回了最后1個值。

名稱欄目：javascript筆試的簡單介紹
URL鏈接：http://www.yijiale78.com/article18/dsgodgp.html

成都網站建設公司_創新互聯，為您提供用戶體驗、品牌網站制作、品牌網站設計、微信公眾號、搜索引擎優化、移動網站建設

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯