有哪些經(jīng)典的 Web 前端或者 JavaScript 面試筆試題

博客園上的一篇關(guān)于js的面試題：

創(chuàng)新互聯(lián)建站服務(wù)項(xiàng)目包括永興網(wǎng)站建設(shè)、永興網(wǎng)站制作、永興網(wǎng)頁(yè)制作以及永興網(wǎng)絡(luò)營(yíng)銷策劃等。多年來，我們專注于互聯(lián)網(wǎng)行業(yè)，利用自身積累的技術(shù)優(yōu)勢(shì)、行業(yè)經(jīng)驗(yàn)、深度合作伙伴關(guān)系等，向廣大中小型企業(yè)、政府機(jī)構(gòu)等提供互聯(lián)網(wǎng)行業(yè)的解決方案，永興網(wǎng)站推廣取得了明顯的社會(huì)效益與經(jīng)濟(jì)效益。目前，我們服務(wù)的客戶以成都為中心已經(jīng)輻射到永興省份的部分城市，未來相信會(huì)繼續(xù)擴(kuò)大服務(wù)區(qū)域并繼續(xù)獲得客戶的支持與信任！

Web前端面試題目匯總

望采納

JavaScript筆試，根據(jù)代碼求結(jié)果？

!doctype html

html lang="en"

head

meta charset="UTF-8"

titleDemo/title

script

//試著編寫一個(gè)程序，根據(jù)學(xué)生考試成績(jī)，輸出其總評(píng)的級(jí)別

var rank = function(n){

var rules = {

59:'不及格',

69:'一般',

79:'中等',

89:'良好',

100:'優(yōu)秀'

};

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中的任何一個(gè)數(shù)字，輸出相應(yīng)的星期

var week = function(n){

return {

1:'星期一',

2:'星期二',

3:'星期三',

4:'星期四',

5:'星期五',

6:'星期六',

7:'星期日'

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

};

//輸入1－12中的任何一個(gè)數(shù)字，輸出相應(yīng)的季節(jié)

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!';

};

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

var sayHello = function(){

alert('Hello,welcome you!');

};

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

var cube = function(){

var n = parseInt(prompt('請(qǐng)輸入整數(shù)',0));

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

};

// 定義一個(gè)函數(shù)名稱為opt，其作用是計(jì)算1到n之間所有整數(shù)之和，將結(jié)果作為函數(shù)返回值返回

var opt = function(n){

var sum = 0;

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

sum +=i;

return sum;

};

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

//調(diào)用函數(shù)sayHello（）

sayHello();

//調(diào)用函數(shù)cube()，并輸入整數(shù)25,查看計(jì)算結(jié)果

cube();

//調(diào)用函數(shù)opt()，計(jì)算1到20之間所有整數(shù)的和，并使用document.write()方法輸出計(jì)算結(jié)果

document.write(opt(20));

});

/script

/head

body

/body

/html

JavaScript面試筆試題都有哪些？誰(shuí)能分享分享？

出個(gè)考察執(zhí)行順序的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)

出個(gè)考察作用域的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();

經(jīng)典的 Web 前端或者 JavaScript 面試筆試題有哪些？

一、不定項(xiàng)選擇題 （每題3分，共30分）

1. 聲明一個(gè)對(duì)象，給它加上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. 以下關(guān)于Array數(shù)組對(duì)象的說法不正確的是（ CD ）

A. 對(duì)數(shù)組里數(shù)據(jù)的排序可以用sort函數(shù)，如果排序效果非預(yù)期，可以給sort函數(shù)加一個(gè)排序函數(shù)的參數(shù)

B. reverse用于對(duì)數(shù)組數(shù)據(jù)的倒序排列

C. 向數(shù)組的最后位置加一個(gè)新元素，可以用pop方法

D. unshift方法用于向數(shù)組刪除第一個(gè)元素

3. 要將頁(yè)面的狀態(tài)欄中顯示“已經(jīng)選中該文本框”，下列JavaScript語(yǔ)句正確的是（ A ）

A. window.status=”已經(jīng)選中該文本框”

B. document.status=”已經(jīng)選中該文本框”

C. window.screen=”已經(jīng)選中該文本框”

D. document.screen=”已經(jīng)選中該文本框”

4. 點(diǎn)擊頁(yè)面的按鈕，使之打開一個(gè)新窗口，加載一個(gè)網(wǎng)頁(yè)，以下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向網(wǎng)頁(yè)中輸出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. 在頁(yè)面的第二個(gè)文本框中輸入內(nèi)容后，當(dāng)鼠標(biāo)離開第二個(gè)文本框時(shí)，第一個(gè)文本框的內(nèi)容不變

B. 在頁(yè)面的第一個(gè)文本框中輸入內(nèi)容后，當(dāng)鼠標(biāo)離開第一個(gè)文本框時(shí)，將在第二個(gè)文本框中復(fù)制第一個(gè)文本框的內(nèi)容

C. 在頁(yè)面的第二個(gè)文本框中輸入內(nèi)容后，當(dāng)鼠標(biāo)離開第二個(gè)文本框時(shí)，將在第一個(gè)文本框中復(fù)制第二個(gè)文本框的內(nèi)容

D. 在頁(yè)面的第一個(gè)文本框中輸入內(nèi)容后，當(dāng)鼠標(biāo)離開第一個(gè)文本框時(shí)，第二個(gè)文本框的內(nèi)容不變

7. 下面的JavaScript語(yǔ)句中，（ D ）實(shí)現(xiàn)檢索當(dāng)前頁(yè)面中的表單元素中的所有文本框，并將它們?nèi)壳蹇?/p>

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)中有一個(gè)文本框元素(fname)，用于輸入電話號(hào)碼，格式如：010-82668155，要求前3位是010，緊接一個(gè)“-”，后面是8位數(shù)字。要求在提交表單時(shí)，根據(jù)上述條件驗(yàn)證該文本框中輸入內(nèi)容的有效性，下列語(yǔ)句中，（ A ）能正確實(shí)現(xiàn)以上功能

A. var str= form1.fname.value;

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

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

alert(“無(wú)效的電話號(hào)碼！”);

B. var str= form1.fname.value;

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

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

alert(“無(wú)效的電話號(hào)碼！”);

C. var str= form1.fname.value;

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

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

alert(“無(wú)效的電話號(hào)碼！”);

D. var str= form1.fname.value;

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

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

alert(“無(wú)效的電話號(hào)碼！”);

9. 關(guān)于正則表達(dá)式聲明6位數(shù)字的郵編，以下代碼正確的是（ C ）

A. var reg = /\d6/;

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

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

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

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

A. Xml是種可擴(kuò)展標(biāo)記語(yǔ)言，格式更規(guī)范，是作為未來html的替代

B. Xml一般用于傳輸和存儲(chǔ)數(shù)據(jù)，是對(duì)html的補(bǔ)充，兩者的目的不同

C. 在JavaScript里解析和處理xml數(shù)據(jù)時(shí)，因?yàn)闉g覽器的不同，其做法也不同

D. 在IE瀏覽器里處理xml，首先需要?jiǎng)?chuàng)建ActiveXObject對(duì)象

二、問答題

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

對(duì)象：Window document location screen history navigator

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

2. 簡(jiǎn)述列舉文檔對(duì)象模型DOM里document的常用的查找訪問節(jié)點(diǎn)的方法并做簡(jiǎn)單說明 （10分）

Document.getElementById 根據(jù)元素id查找元素

Document.getElementByName 根據(jù)元素name查找元素

Document.getElementTagName 根據(jù)指定的元素名查找元素

三、程序題

1、補(bǔ)充按鈕事件的函數(shù)，確認(rèn)用戶是否退出當(dāng)前頁(yè)面，確認(rèn)之后關(guān)閉窗口； （10分）

html

head

script type=”text/javascript”

function closeWin(){

//在此處添加代碼

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

window.close();

}

}

/script

/head

body

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

/body

/html

2、寫出簡(jiǎn)單描述html標(biāo)簽（不帶屬性的開始標(biāo)簽和結(jié)束標(biāo)簽）的正則表達(dá)式，并將以下字符串中的html標(biāo)簽去除掉（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()函數(shù)的內(nèi)容，要求能夠彈出對(duì)話框提示當(dāng)前選中的是第幾個(gè)單選框。（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)+”個(gè)單選框”);

}

}

}

/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、完成函數(shù)showImg()，要求能夠動(dòng)態(tài)根據(jù)下拉列表的選項(xiàng)變化，更新圖片的顯示 （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“都市早報(bào)/option

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

/select/body

javascript筆試題

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

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

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

var foo={ //聲明類foo

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

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

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

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

}

};

alert(foo.bar());//這個(gè)好理解，調(diào)用foo的bar方法嗎。當(dāng)然是輸出了foo.x = 20啦。

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

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

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

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

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