二. js相關面試題

阿新 • • 發佈：2021-01-14

1.JS表單彈出對話方塊函式是？獲取輸入焦點函式是?
alert()
focus()

2.JS的轉向函式是？怎麼引入一個外部JS檔案？

location.href
<script src=’xxx’></script>

3.行內元素有哪些?塊級元素有哪些?
行內元素：a、b、span、img、input、strong、select、label、em、button、textarea
塊狀元素：div、ul、li、dl、dt、dd、p、h1-h6、blockquote

4.margin和padding的區別
margin是指從自身邊框到另一個容器邊框之間的距離，就是容器外距離。（外邊距）

padding是指自身邊框到自身內部另一個容器邊框之間的距離，就是容器內距離。（內邊距）

5.介紹一下CSS的盒子模型
CSS css盒子模型又稱框模型 (Box Model) ，包含了元素內容（content）、內邊距（padding）、邊框（border）、外邊距（margin）幾個要素。

6.js什麼是事件冒泡
事件捕獲指的是從document到觸發事件的那個節點，即自上而下的去觸發事件。相反的，事件冒泡是自下而上的去觸發事件。

7.依次寫出下程式碼輸出值

	console.log(a) 
	var a = 100
	fn('zhangsan') 
	function fn(name){
    		age = 20 
    		console.log(name,age)
    		var age
	}

答案： undefined zhangsan age

8.在“？？？”處寫出this指向（1分）
var a = {
name:‘A’,
fn: function(){
console.log(this.name)
}
}
a.fn() // this === ？？？ a
a.fn.call({name : B’}) // this === ？？？{name:B}
var fn1 = a.fn
fn1() // this ===？？？window

9.依次寫出下程式碼輸出值（1分）13524
console.log(1)
setTimeout(function(){
console.log(2)
})

console.log(3)
setTimeout(function(){
console.log(4)
},1000)
console.log(5)

10.一個html頁面的部分結構為：

<div>
	<input type=”text” name=”foo”>
	<input type=”button” value=”反轉” id=”reverseText”>
</div>
使用jquery實現點選按鈕將輸入框內容反轉(2分)
$('#reverseText').click(function(){
		var str = $('input[name=foo]').val();
		var revstr = str.split("").reverse().join("");
		$('input[name=foo]').val(revstr)
	});

11.HTML/CSS和JavaScript對一個前端開發人員分別意味著什麼？你是如何進行學習和實踐的？
HTML：網站結構
CSS：網站的樣式
JS: 網站互動

12.介紹一下你對瀏覽器核心的理解？
瀏覽器核心分為兩部分內容，一部分是渲染引擎，負責生成DOM樹，渲染頁面；另一部分是JS引擎，負責JS的解釋執行。
目前五大瀏覽器核心及代表
1.Trident是IE的核心
2.Gecko是火狐核心
3.Webkit是safari核心
4.Chromium是chrome核心
Presto opera核心

13.移動端的佈局用過媒體查詢嗎？移動頁面和PC頁面有哪些不同？
1.移動端頁面一般加如下程式碼，告訴瀏覽器以何種模式來顯示網頁，手機端一般是按照螢幕等比縮放
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
2.移動端瀏覽器核心比較統一，相容性問題相對少一些
3.移動端增加了觸控、滑動事件

14.為什麼要初始化CSS樣式？什麼是CSS前處理器？
因為瀏覽器的相容的問題，不同瀏覽器有些標籤的預設值是不同的，如果沒有CSS初始化往往會出現瀏覽器之間的頁面顯示差異
CSS前處理器：用一種專門的程式語言，編寫WEB樣式，在編譯成CSS檔案格式
目前主流的前處理器裡最常用的三種有：SASS LESS STYLUS

15.請用程式碼說明JavaScript中undefined和not defined 的區別？
Undefined是js語言中定義的原始型別中的一個，undefined不是程式報錯，而是程式允許的一個值。
Not defined是js在執行程式碼時，遇到未定義就來運算的變數時爆出的錯誤。

var temp;
alert(temp);//undefined，
temp3 = temp4+1;
alert(temp3);// not defined,變數未定義，不能直接拿來運算

16.JavaScript中什麼是閉包？請用程式碼說明。
閉包就是一個函式把外部那些不屬於自己的物件也包含進來了。
Js的閉包，無非就是變數解析的過程。

(
function()
{ 
var hello="hello,world"; 
function welcome(hi)
{ 
alert(hi); //解析到作用域鏈的第一個物件的屬性
alert(hello); //解析到作用域鏈的第二個物件的屬性
 } 
welcome("It's easy"); 
})();

17.JavaScript如何實現繼承？請用程式碼說明。
1.原型鏈繼承

function Animal(name){
    this.name = name || 'animal';
    this.sleep = function(){
    Console.log(this.name+'正在睡覺');
    }
}
Animal.prototype.eat = function(food){
    Console.log(this.name+'正在吃:'+food);
}
function Cat(){
}
Cat.prototype = new Animal();
Cat.prototype.name = 'cat';

2.構造繼承

Function cat(name){
    Animal.call(this);
   this.name = name || 'tom';
}

18.JavaScript和ECMAScript 6 是什麼關係？
ECMAScript 是一個標準，是由Ecma International組織制定的，ECMAScript 6指的是
ECMA-262的第6個版本，與ES2015、ECMAScript2015是同一個意思。
JavaScript遵循ECMAScript標準，JavaScript是ECMAScript的實現

19.請編寫用來驗證郵箱和手機是否有效的JavaScript程式碼。

var h=/^[\u4e00-\u9fa5]{0,}$/;
		var d=/^1[3458]\d{9}$/;
		var y=/^([a-zA-Z0-9_-])[email protected]([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/;
$("[name='phone']").blur(function() {
			var v=$(this).val();
			if (v=='') {
				$("[name='phone']").next().html("手機號不能為空！");
				$(this).prev().css("color","#f00");
			}else if(!v.match(d)){
				$("[name='phone']").next().html("手機號不正確！");
				$("[name='phone']").prev().css("color","#f00");
			}else{
				$(this).prev().css("color","#0EA74A");
				$("[name='phone']").next().html("");
			} 
		});

20.請用JS將陣列a=array（‘a’，‘b’，…）中的元素拼成一個字串
arr.join(".")

21.瞭解ajax嗎？簡述其道理，如何呼叫ajax，如何檢視ajax伺服器端返回的資料？

AJAX 是一種在無需重新載入整個網頁的情況下，能夠更新部分網頁的技術。
通過在後臺與伺服器進行少量資料交換，AJAX 可以使網頁實現非同步更新。這意味著可以在不重新載入整個網頁的情況下，對網頁的某部分進行更新。

1.建立ajax物件
var request; 
if (window.XMLHttpRequest) { 
// IE7+, Firefox, Chrome, Opera, Safari 瀏覽器執行程式碼 
request=new XMLHttpRequest(); } 
else { 
// IE6, IE5 瀏覽器執行程式碼 
request=new ActiveXObject("Microsoft.XMLHTTP");
 }
//2監聽響應狀態變化
request.onreadystatechange=function()
{
if (request.readyState==4 && request.status==200)
{
//將伺服器返回的圖片路徑賦值給img的src屬性
$('#img1').attr('src','/'+request.responseText); 
}
}
//3以post方式向/admin/upload路由傳送請求
request.open("POST", "/admin/upload");
//4傳送請求
request.send(formData);

$.ajax({
type: "POST",  //請求方式
url: "/admin/upload",//傳送請求的地址
data: formData,//傳送到伺服器的資料
contentType: false,//傳送資訊至伺服器時內容編碼型別
processData: false,//預設值: true。預設情況下，通過data選項傳遞進來的資料，如果是一個物件(技術上講只要不是字串)，都會處理轉化成一個查詢字串，以配合預設內容型別 "application/x-www-form-urlencoded"。如果要傳送 DOM 樹資訊或其它不希望轉換的資訊，請設定為 false。
success: function(data) {
},
error: function(XMLHttpRequest, textStatus, errorThrown) {
alert("上傳失敗，請檢查網路後重試");
}
});

22 解釋下面語句的意思：document.form[“formName”].submit。（百度）
獲取 name 為 formName的表單並將該表單資料提交到伺服器。但這行程式碼是不能執行的，有兩處錯誤，一是通過表單名稱來獲取表單得到時候，應該寫成document.forms[‘formName’]，提交表單事件使用 submit 方法，需要加上括號.
document.forms[“formName”].submit();

23 有下面語句：編寫程式碼，當滑鼠劃過文字框，自動選中文字框中的內容。（百度）
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片儲存下來直接上傳(img-dJTqoz89-1610457004776)(http://on64ewxzt.bkt.clouddn.com/blog/20180709/234521948.png)]

24 設計一個網頁，使得開啟它時彈出一個全屏的視窗，該視窗中有一個文字框和一個按鈕。
使用者在文字框中輸入資訊後點擊按鈕就可以把視窗關閉，而輸入的資訊卻在主網頁中顯示。
（新浪）
主視窗：
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片儲存下來直接上傳(img-pHJ5DvzW-1610457004788)(http://on64ewxzt.bkt.clouddn.com/blog/20180709/234630086.png)]
彈出視窗：
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片儲存下來直接上傳(img-8e6l2S2Z-1610457004795)(http://on64ewxzt.bkt.clouddn.com/blog/20180709/234653445.png)]

25 判斷以下程式碼是否正確，如果有錯，請指出錯誤，如果正確，請指出執行結果（酷訊）
var arr = new Array(
new Array(1,2,3,4),
new Array(“abc”, “def”, “xyz”),
);
for(i = 0; i < arr.length; i++) {
document.write(arr[0])
}
懷疑這個程式碼寫錯了，第二個 new array 後面的逗號是多餘的，如果此處沒問題，則代
碼是正確的，輸出的結果是 1,2,3,4 1,2,3,4
注：arr 是一個二維陣列，該陣列有兩個元素，第一個元素是陣列[1,2,3,4]，第二個元素
也是一個數組為[“abc”, “def”, “xyz”]，for 迴圈語句執行了兩次，但都是輸出第一個元素，即
陣列[1,2,3,4]。

26 用 JavaScript 寫一個函式,其功能是可以刪除陣列中重複的元素。
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片儲存下來直接上傳(img-1moDpO7F-1610457004801)(http://on64ewxzt.bkt.clouddn.com/blog/20180709/234834857.png)]

27 以下哪條 JavaScript 語句會產生執行錯誤：（）
A. var obj = ( );
B. var obj = [ ];
C. var obj = { };
D. var obj = //;
答案：A

28 請選擇結果為真的表示式：（）
A. null instanceof Object
B. null === undefined
C. null == undefined
D. NaN == NaN
答案：C

29 foo 物件有 att 屬性，那麼獲取 att 屬性的值，以下哪些做法是可以的：（）
A. foo.att
B. foo(“att”)
C. foo[“att”]
D. foo{“att”}
E. foo[“a”+“t”+“t”]
答案：ACE

30 如何新增 html 元素的事件,有幾種方法，舉例
(1).直接作為元素的屬性，如
(2).使用 DOM 0 級事件，簡單，相容性好，如 img.onclick = function(){}
(3).使用 DOM 2 級事件，功能更強大，在非 IE 等標準瀏覽其中，使用 addEventListener，在
IE 瀏覽器中則使用 attachEvent 來實現。

31 JavaScript 能否定義二維陣列，如果不能你如何解決？
JavaScript 不支援二維陣列定義，可以用 arr[0] = new array()來解決。

32 假設 a.html 和 b.html 在同一個資料夾下面，用 JavaScript 實現當開啟 a.html 五秒鐘後，
自動跳轉到 b.html。
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片儲存下來直接上傳(img-HtNsS0z7-1610457004808)(http://on64ewxzt.bkt.clouddn.com/blog/20180709/235102335.png)]

33 請使用 JavaScript 寫出三種產生一個 image 標籤的方法（提示：從方法、物件、HTML
角度考慮）

(1). var img = new Image();
(2). var img = document.createElement("image")
(3). img.innerHTML = "<img src='https://www.codeleading.com/article/74065156192/xxx.jpg' />"

34 js 中網頁前進和後退的程式碼

前進: history.forward();或者 history.go(1);
後退: history.back (); 或者 history.go(-1);

35 請寫出一條至少 3 個節點的 DOM 樹 (YG)
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片儲存下來直接上傳(img-LicclWlV-1610457004811)(http://on64ewxzt.bkt.clouddn.com/blog/20180709/235139628.png)]

結果 HTML：

<div><a href="http://www.baidu.com"><span>百度</span></a></div>

36 實現點選按鈕彈出視窗的程式碼 (YG)

document.getElementById( 'button' ).onclick = function(){
window.open ('page.html');
}

其中，button 是按鈕的 id，page.html 是要彈出的視窗頁面。

37 JavaScript 包括那些基本資料型別？（小米）
JavaScript 中包括 5 種基本資料型別，分別是 Number，String，Boolean，Null 和 Undefined。

二. js相關面試題

二. js相關面試題

JS基礎相關面試題——回撥函式&&物件

《演算法筆記》6. 連結串列相關面試題總結

OSI七層模型簡單概念及相關面試題

面試題（2020）前端HTTP瀏覽器相關面試題

PHP isset empty函式相關面試題及解析

springmvc如何使用檢視解析器_SpringMVC相關面試題

Java字串相關面試題

dubbo服務相關面試題

jquery相關面試題

資料結構與演算法--單鏈表相關面試題

spring相關面試題

Python-列表相關面試題

Python-數學運算相關面試題

Python-字串相關面試題及答案

Java開發社招面試解答之效能優化，Java二叉樹面試題總結

大廠NODE.js高階面試題和答案，重點難點攻克！

Redis相關面試題

MySQL相關面試題

Mybatis相關面試題

二. js相關面試題

相關推薦