這里是div

裡面的段落

C. 高級前端面試題目大全(三)

解析： 第 41題

比如 sleep(1000) 意味著等待1000毫秒，可從 Promise、Generator、Async/Await 等角度實現

解析： 第 42 題

解析： 第 43 題

1、客戶端使用https的url訪問web伺服器,要求與伺服器建立ssl連接
2、web伺服器收到客戶端請求後, 會將網站的證書(包含公鑰)傳送一份給客戶端
3、客戶端收到網站證書後會檢查證書的頒發機構以及過期時間, 如果沒有問題就隨機產生一個秘鑰
4、客戶端利用公鑰將會話秘鑰加密, 並傳送給服務端, 服務端利用自己的私鑰解密出會話秘鑰
5、之後伺服器與客戶端使用秘鑰加密傳輸

解析： 第 44 題

解析： 第 45 題

1.使用第一次push，obj對象的push方法設置 obj[2]=1;obj.length+=1
2.使用第二次push，obj對象的push方法設置 obj[3]=2;obj.length+=1
3.使用console.log輸出的時候，因為obj具有 length 屬性和 splice 方法，故將其作為數組進行列印
4.列印時因為數組未設置下標為 0 1 處的值，故列印為empty，主動 obj[0] 獲取為 undefined

解析： 第 46 題

解析： 第 47 題

1、Function.prototype.apply和Function.prototype.call 的作用是一樣的，區別在於傳入參數的不同；
2、第一個參數都是，指定函數體內this的指向；
3、第二個參數開始不同，apply是傳入帶下標的集合，數組或者類數組，apply把它傳給函數作為參數，call從第二個開始傳入的參數是不固定的，都會傳給函數作為參數。
4、call比apply的性能要好，平常可以多用call, call傳入參數的格式正是內部所需要的格式

解析： 第 48 題

解析： 第 49 題

解析： 第 50 題

為什麼在 Vue3.0 採用了 Proxy，拋棄了 Object.defineProperty？

解析： 第 51 題

解析： 第 52 題

解析： 第 53 題

解析： 第 54 題

如下：{1:222, 2:123, 5:888}，請把數據處理為如下結構：[222, 123, null, null, 888, null, null, null, null, null, null, null]。

解析： 第 55 題

解析： 第 56 題

解析： 第 57 題

解析： 第 58 題

解析： 第 59 題

解析： 第 60 題

解析： 第 61 題

解析： 第 62 題

解析： 第 63 題

解析： 第 64 題

解析： 第 65 題

解析： 第 66 題

隨機生成一個長度為 10 的整數類型的數組，例如 [2, 10, 3, 4, 5, 11, 10, 11, 20] ，將其排列成一個新數組，要求新數組形式如下，例如 [[2, 3, 4, 5], [10, 11], [20]] 。

解析： 第 67 題

解析： 第 68 題

解析： 第 69 題

解析： 第 70 題

解析： 第 71 題

[圖片上傳失敗...(image-2eeb30-1575446538468)]

<figcaption></figcaption>

解析： 第 72 題

解析： 第 73 題

解析： 第 74 題

解析： 第 75 題

解析： 第 76 題

示例 1：

示例 2：

解析： 第 77 題

解析： 第 78 題

解析： 第 79 題

解析： 第 80 題

解析： 第 81 題

解析： 第 82 題

解析： 第 83 題

習題： https://blog.csdn.net/qq_37024887/article/details/106784068

解析： 第 84 題

解析： 第 85 題

給定一個整數數組和一個目標值，找出數組中和為目標值的兩個數。

你可以假設每個輸入只對應一種答案，且同樣的元素不能被重復利用。

示例：

解析： 第 86 題

解析： 第 87 題

以下數據結構中，id 代表部門編號，name 是部門名稱，parentId 是父部門編號，為 0 代表一級部門，現在要求實現一個 convert 方法，把原始 list 轉換成樹形結構，parentId 為多少就掛載在該 id 的屬性 children 數組下，結構如下：

解析： 第 88 題

解析： 第 89 題

[圖片上傳失敗...(image-aea64e-1575446538470)]

解析： 第 90 題

解析： 第 91 題

[圖片上傳失敗...(image-21d53f-1575446538470)]

解析： 第 92 題

示例 1：

中位數是 2.0

示例 2：

中位數是(2 + 3) / 2 = 2.5

解析： 第 93 題

解析： 第 94 題

解析： 第 95 題

解析： 第 96 題

解析： 第 97 題

解析： 第 98 題

解析： 第 99 題

解析：[第 100 題]( https://github.com/Advanced-Frontend/Daily-

D. 騰訊WEB前端筆試題和面試題答案

騰訊WEB前端筆試題和面試題答案

能進入騰訊工作是多少人的夢想，下面我為大家搜集的一篇“騰訊WEB前端筆試題和面試題答案”，供大家參考借鑒，希望可以幫助到有需要的朋友!

一、 耐心填一填!(每空4分，共24分)

1. 為span設置類a與b,應編寫HTML代碼_________。

2. 設置CSS屬性clear的值為_both___________時可清除左右兩邊浮動。

3. ____li________標簽必須直接嵌套於ul、ol中。

4. CSS屬性_____margin_______可為元素設置外補丁。

5. 設置CSS屬性float的值為___none_________時可取消元素的浮動。

6. 文字居中的CSS代碼是____text-align:center________。

二、 精心選一選!(每題4分，共16分)

1. 下列哪個樣式定義後,內聯(非塊狀)元素可以定義寬度和高度( C )

A. display:inline B. display:none C. display:block D. display:inheric

2. 選出你認為最合理的定義標題的方法( C )

A. 文章標題

B.

文章標題

C.

文章標題

D. 文章標題

3. br標簽在XHTML中語義為( A )

A.換行 B.強調 C.段落 D.標題

4. 不換行必須設置( AC )

A.word-break B.letter-spacing C.white-space D.word-spacing

5. 在使用table表現數據時，有時候表現出來的'會比自己實際設置的寬度要寬，為此需要設置下面哪些屬性值( AD )

A. cellpadding=”0″ B. padding:0 C. margin:0 D. cellspacing=”0″

三、判斷對或錯!(每題4分，共24分)

1. CSS屬性font-style 用於設置字體的粗細。 ( × )

2. CSS屬性overflow用於設置元素超過寬度時是否隱藏或顯示滾動條。 ( √ )

3. 在不涉及樣式情況下,頁面元素的優先顯示與結構擺放順序無關。 ( × )

4. 在不涉及樣式情況下,頁面元素的優先顯示與標簽選用無關。 ( √ )

5. display:inline兼容所有的瀏覽器。 ( √ )

6. input屬於窗體元素,層級顯示比flash、其它元素都高。 ( × )

;

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

JavaScript面試題:字元串處理
在應聘前端程序員時，在筆試部分經常會考到字元串處理的問題。這些題有一個特點，站在考官的角度去考慮，它考的不是你會不會，而是你能不能在不借用XX手冊或者XX指南再或者網路谷歌的情況下，用比較簡潔的方式寫出答案來。就具體的字元串處理問題，鄭州尚學堂給大家分享一下。
1、字元串轉換

字元串轉換是最基礎的要求和工作，你可以將任何類型的數據都轉換為字元串，你可以用下面三種方法的任何一種：

var num= 19; // 19
var myStr = num.toString(); // "19"

你同樣可以這么做：

var num= 19; // 19
var myStr = String(num); // "19"

或者，再簡單點兒：

var num= 19; // 19
var myStr = "" +num; // "19"

2、字元串分割

字元串分割，即將一個字元串分割為多個字元串，JavaScript中給我們提供了一個非常方便的函數，如：

var myStr = "I,Love,You,Do,you,love,me";
var substrArray = myStr .split(","); // ["I", "Love", "You", "Do", "you", "love", "me"];
var arrayLimited = myStr .split(",", 3); // ["I", "Love", "You"];

split()的第二個參數，表示返回的字元串數組的最大長度。

3、獲取字元串長度

字元串長度是在開發中經常要用到的，非常簡單如下：

var myStr = "I,Love,You,Do,you,love,me";
var myStrLength = myStr.length; //25

4、查詢子字元串

很多人都會忘記這幾個JavaScript的自帶的方法，或者忘記它們的具體用法，從而導致在做題的時候不得不嵌套for循環來做。

第一個函數：indexOf()，它從字元串的開頭開始查找，找到返回對應坐標，找不到返回-1，如下：

var myStr = "I,Love,you,Do,you,love,me";
var index = myStr.indexOf("you"); // 7 ,基於0開始,找不到返回-1

第二個函數：lastIndexOf()，它從字元串的末尾開始查找，找到返回對應坐標，找不到返回-1，如下：

var myStr = "I,Love,you,Do,you,love,me";
var index = myStr.lastIndexOf("you"); // 14

以上兩個函數同樣接收第二個可選的參數，表示開始查找的位置。

5、字元串替換

單單查到字元串應該還不會停止，一般題目都還經常會遇到讓你查到並替換為你自己的字元串，例如：

var myStr = "I,love,you,Do,you,love,me";
var replacedStr = myStr.replace("love","hate");//"I,hate,you,Do,you,love,me"

默認只替換第一次查找到的，想要全局替換，需要置上正則全局標識，如：

var myStr = "I,love,you,Do,you,love,me";
var replacedStr = myStr.replace(/love/g,"hate");//"I,hate,you,Do,you,hate,me"
6、查找給定位置的字元或其字元編碼值

想要查找給定位置的字元，你可以使用如下函數：

var myStr = "I,love,you,Do,you,love,me";
var theChar = myStr.charAt(8);// "o",同樣從0開始

同樣，它的一個兄弟函數就是查找對應位置的字元編碼值，如：

var myStr = "I,love,you,Do,you,love,me";
var theChar = myStr.charCodeAt(8); //111

7、字元串連接

字元串連接操作可以簡單到用一個加法運算符搞定，如：

var str1 = "I,love,you!";
var str2 = "Do,you,love,me?";
var str = str1 + str2 + "Yes!";//"I,love,you!Do,you,love,me?Yes!"

同樣，JavaScript也自帶了相關的函數，如：

var str1 = "I,love,you!";
var str2 = "Do,you,love,me?";
var str = str1.concat(str2);//"I,love,you!Do,you,love,me?"

其中concat()函數可以有多個參數，傳遞多個字元串，拼接多個字元串。

8、字元串切割和提取

有三種可以從字元串中抽取和切割的方法，如：

第一種，使用slice():

var myStr = "I,love,you,Do,you,love,me";
var subStr = myStr.slice(1,5);//",lov"

第二種，使用substring():

var myStr = "I,love,you,Do,you,love,me";
var subStr = myStr.substring(1,5); //",lov"

第三種，使用substr():

var myStr = "I,love,you,Do,you,love,me";
var subStr = myStr.substr(1,5); //",love"

與第一種和第二種不同的是，substr()第二個參數代表截取的字元串最大長度，如上結果所示。

9、字元串大小寫轉換

常用的轉換為大寫或者小寫字元串函數，如下：

var myStr = "I,love,you,Do,you,love,me";
var lowCaseStr = myStr.toLowerCase();//"i,love,you,do,you,love,me";
var upCaseStr = myStr.toUpperCase();//"I,LOVE,YOU,DO,YOU,LOVE,ME"

10、字元串匹配

字元串匹配可能需要你對正則表達式有一定的了解，先來看看match()函數：

var myStr = "I,love,you,Do,you,love,me";
var pattern = /love/;
var result = myStr.match(pattern);//["love"]
console.log(result .index);//2
console.log(result.input );//I,love,you,Do,you,love,me

如你所見，match()函數在字元串上調用，並且接受一個正則的參數。來看看第二個例子，使用exec()函數：

var myStr = "I,love,you,Do,you,love,me";
var pattern = /love/;

F. web前端筆試題(HTML/CSS篇)

web前端筆試題集錦(HTML/CSS篇)

導讀：網頁不再只是承載單一的文字和圖片，各種富媒體讓網頁的內容更加生動，網頁上軟體化的交互形式為用戶提供了更好的使用體驗，這些都是基於前端技術實現的。以下是由我J.L為您整理推薦的前端開發筆試題目，歡迎參考閱讀。

一、HTML/CSS

1，讓一個input的背景顏色變成紅色

2，div的高寬等於瀏覽器可見區域的高寬，瀏覽器滾動，div始終覆蓋瀏覽器的整個可見區域

思路：

(1)先放置一個div1，浮動：position:absolute;top:0px;left:0px;

(2)再放置一個div2，浮動：position:absolute;top:0px;left:0px;width:100%;height:100%;

(3)在div2中放置一個div3，令其高度超過瀏覽器高度，使div2產生滾動條

(4)對html,body進行樣式設置：width:100%;height:100%;overflow:hidden->不讓瀏覽器產生滾動條，避免頁面出現兩個滾動條

(5)編寫JavaScript，另div2的高度等於頁面可見高度，寬度等於頁面可見寬度，注意，在計算完可見高度height和可見寬度width後，要對這兩個值做處理，可見寬度-div2的滾動條的寬度，滾動條的寬度我這里假設是20px

這樣題目基本就完成了，不過瀏覽器的兼容性還不是很好。

3，IE、FF下面CSS的解釋區別

(1) 讓頁面元素居中

ff{margin-left:0px;margin-right:0px;width:***}

ie上面的設置+text-align:center

(2) ff：不支持濾鏡

ie：支持濾鏡

(3) ff：支持!important

ie支持*，ie6支持_

(4) min-width,min-height

FF支持，IE不支持，IE可以用css expression來替代

(5) Css Expression

FF不支持，IE支持

(6) cursor：hand

IE下可以顯示手指狀，FF下不行

(7) UL的默認padding和margin

IE下ul默認有margin，FF下ul默認有padding

(8) FORM的默認margin

IE下FORM有默認margin，FF下margin默認為0

4，一個定寬元素在瀏覽器(IE6，IE7，Firefox)中橫向居中對齊的布局，請寫出主要的.HTML標簽及CSS

思路：

IE6/7：text-align:center

Firefox：margin:0 auto(margin-top和margin-bottom也可以為其他數字，關鍵是margin-left,margin-right為auto)

5，CSS中margin和padding的區別

margin是元素的外邊框，是元素邊框和相鄰元素的距離

Padding是元素的內邊框，是元素邊框和子元素的距離

6，最後一個問題是，如何製作一個combo選項，就是可以輸入可以下拉菜單選擇。

思路：

(1)布局select和input，讓input覆蓋select，除了select的下拉圖標，以方便select選擇

(2)編寫JS，為select添加onchange事件，onchange時將input的value置成select選中的指

7，

中alt和tittle的區別

alt：圖片顯示不出來了就提示alt

title：滑鼠劃過圖片顯示的提示

8，用css、html編寫一個兩列布局的網頁，要求右側寬度為200px，左側自動擴展。

在這里我使用了兩種方式：

(1)使用position

HTML:

left

right

(2) 使用float

HTML:

固定寬度

自適應

二者的CSS公用，如下：

html,body{width:100%;height:100%;margin:0px;padding:0px;}

.container {width:100%;height:400px;position:relative;}

.fl1 {float:left;}

.left {width:100%;height:400px;background:#AFFFD0;position:absolute;}

.right {width:200px;height:400px;background:#F9AFFF;position:absolute;right:0px;top:0px;}

.clear {clear:both;overflow:hidden;height:0px;}

.container2 {width:100%;height:400px;margin-top:100px;}

.left2 {background:#afffd0;height:400px;width:200px;margin-right:-3px;}

.right2 {height:400px;background:#f9afff;}

9，解釋document.getElementByIdx_x_x_x("ElementID").style.fontSize="1.5em"

em是相對長度單位，相當於當前對象內文本的字體尺寸，如果當前行內文本的字體尺寸未被指定，則相對於瀏覽器的默認字體尺寸。

該語句將id為ElementID的元素的字體設置為當前對象內文本的字體尺寸的1.5倍

10，Doctype? 嚴格模式與混雜模式-如何觸發這兩種模式，區分它們有何意義? 行內元素有哪些?塊級元素有哪些?CSS的盒模型?

DOCTYPE是文檔類型，用來說明使用的HTML或者XHTML是什麼版本，其中的DTD叫文檔類型定義，裡麵包含了文檔規則，瀏覽器根據定義的DTD來解析頁面的標識並展現出來

DOCTYPE有兩種用途：一個可以進行頁面的有效性驗證，另一個可以區分瀏覽器使用嚴格模式還是混雜模式來解析CSS。

嚴格模式和混雜模式是瀏覽器解析CSS的兩種模式，目前使用的大部分瀏覽器對這兩種模式都支持，但是IE5隻支持混雜模式。

可那個過DOCTYPE聲明來判斷哪種模式被觸發

(1) 沒有DOCTYPE聲明的網頁採用混雜模式解析

(2) 對使用DOCTYPE聲明的網頁視不同瀏覽器進行解析

(3) 對於瀏覽器不能識別的DOCTYPE聲明，瀏覽器採用嚴格模式解析

(4) 在ie6下，如果在DOCTYPE聲明之前有一個xml聲明比如

，採用混雜模式解析，在IE7，IE8中這條規則不生效。

(5) 在ie下，如果DOCTYPE之前有任何字元，都會導致它進入混雜模式，如：

區分這兩種模式可以理解瀏覽器解析CSS的區別，主要是在盒模式的解釋上。

常見的塊級元素有：DIV,FORM,TABLE,P,PRE,H1~H6,DL,OL,UL等

常見的內聯元素：SPAN,A,STRONG,EM,LABEL,INPUT,SELECT,TEXTAREA,IMG,BR等

CSS盒模型用於描述為一個HTML元素形成的矩形盒子，盒模型還涉及元素的外邊距，內邊距，邊框和內容，具體來講最裡面的內容是元素內容，直接包圍元素內容的是內邊距，包圍內邊距的是邊框，包圍邊框的是外邊距。內邊距，外邊距，邊框默認為0。

11，CSS引入的方式有哪些? link和@import的區別?

引入css的方式有下面四種

(1) 使用style屬性

(2) 使用style標簽

(3) 使用link標簽

(4) 使用@import引入

Link和@import區別：

(1) link屬於XHTML標簽，@import是CSS提供的一種方式。Link除了載入CSS外，還可以做很多事情，如定義RSS，rel連接屬性等;@import只能載入CSS

(2)載入順序不同，當頁面被載入的時候，link載入的CSS隨之載入，而@import引用的CSS會等到頁面完全下載完之後才會載入

(3)兼容性差別，由於@import是CSS2.1提出的，所以老的瀏覽器不支持，IE系列的瀏覽器IE5以上才能識別，而link沒有這個問題

使用DOM控制樣式的差別，使用JavaScript控制DOM去改變樣式的時候，只能操作link，@import不可以被DOM操作。

12，如何居中一個浮動元素?

一個浮動元素裡麵包含的元素可以水平居中，原理如下：

讓浮動元素left相對於父元素container右移50%，浮動元素left的子元素left-child相對於left左移50%就可以實現left-child相對於container水平居中

垂直居中類似，不過操作的不是left而是top

13，HTML5和CSS3的了解情況

有所了解

HTML5和CSS3分別是新推出的HTML和CSS規范，前世是XHTML2和CSS2，目前還在草案階段，不過得到了Apple，Opera，Mozilla，Google，Microsoft不同程度的支持，也開發出了不少基於他們的應用。

HTML5相對於原來的HTML規范有一些變化：

(1)DOCTYPE更簡潔

(2)新增了一些語義化標簽，如article,header,footer,dialog等

(3)新增了一些高級標簽，如,,

CSS3相對於CSS2也新增了不少功能

(1) 選擇器更加豐富

(2) 支持為元素設置陰影

(3) 無需圖片能提供圓角

14，你怎麼來實現下面這個設計圖

(1) 切圖

(2) 布局，採用兩欄布局，分別左浮動

(3) 編寫css代碼

15，css 中id和class如何定義,哪個定義的優先順序別高?

id：#***，***為HTML中定義的id屬性

class:.***，***為HTML中定義的class屬性

id比class的優先順序高

16，用html實現如下表格(不如嵌套實用表格)

三行三列,其中第一行第一列和第二行第一列合並; 第二行第二列和第二行第三列合並(現場畫表)

運行結果如下：

17，web標准網站有那些優點

(1) Web標准網站結構和布局分離，使網站的訪問和維護更加容易

(2) Web標准網站結構，布局以及頁面訪問都標准化，使網站能在更多的web標准設備中訪問，兼容性更好

(3) Web標准網站語義化更好，語義化的XHTML不僅對用戶友好，對搜索引擎也友好。

;

G. web前端筆試題

1. 設置元素浮動後，該元素的 display 值是多少( A )

    A.block B. 不變 C. inline D. inline-block

2. 以下不是 canvas 的⽅方法是( D )

    A.getContext() B. fill() C. stroke() D.controller

3. 不是 input 在 html5 新的類型的是( B )

    A.datetime B. file C. color D. range

4. 對權重排序正確的是( C )

a)  .list .box p

b)  #list .box div span

c)  .list span

d)  #list #box

e)  p:last-child

f)  style

A.f>d>b>a>c>e

C. f>d>b>a>c=e

B. f>d>b>a>e>c

D. f>b>d>a>c=e

5.對 document load 和 document ready 描述正確的是( B )

    A.$(document).ready()是當頁⾯所有資源全部載入完成後，執

    ⾏⼀個函數

    B.如果圖⽚資源較多載入時間較長，onload 後等待執⾏的函數

    需要等待較長時間，所以⼀些效果可能受到影響

    C.onload 是當 DOM ⽂檔樹載入完成後執⾏⼀個函數

    D.⼀般來說 load 會比$(document).ready()較快執⾏

6.["1", "2", "3"].map(parseInt) 答案是多少( A )

    A.[1, NaN, NaN]            B. [1, 2, NaN]

    C.[NaN, NaN, NaN]      D. [1, NaN]

7.以下對 Ajax 描述不正確的是( A )

    A.readyState 屬性請求的狀態，當值為 3 時是正在載入

    B.使用 XML 和 XSLT 進⾏行數據交換及相關操作

    C.總共有 8 種 callback

    D.abort()⽅法，停⽌當前請求

8.var temp=null，alert(typeof temp)彈出的結果是( B )

    A.Null     B. Object     C. Undefined     D. String

1. 對XMLHttpRequest對象的open⽅方法描述錯誤的是(BCD)

    A.在 IE 上使⽤的是 XMLHttpRequest 對象是 ActiveXObject

    B.在 Firefox 上使用的是 XMLHttpRequest 對象是ActiveXObject

    C.XMLHttpRequest 對象只能發送 get 請求

    D.XMLHttpRequest 對象只能發送 post 請求

2. 以下哪些是 javascript 的全局函數(ABC)

    A.parseFloat     B. eval     C. setTimeout     D. alert

3. 對 http 相關內容描述正確的是(BCD)

    A.301 狀態碼是臨時重定向

    B.get ⽅方式只能⽀支持 ASCII 字元

    C.get 在從伺服器上獲取資源，post 重點在向伺服器發送數據

    D.HTTPS 就是 HTTP 加上加密處理理

4. 以下結果正確的是(CD)

    A.typeof undefined= undefined 和 typeof null=null

    B.typeof 「hello」==string typeof 0==Boolean

    C.typeof [1,2,3]=object typeof NaN=undefined

    D.typeof {name:「李華」，age:「23」}=object

5. 以下結果正確的是(AB)

    A.zepto.js 適合移動端的開發，jQuery 適合 PC 端的開發

    B.zepto.js 不支持 ie 瀏覽器器

    C.vue 屬於 mvc 框架

    D.v-bind 實現雙向綁定

6. 對 sass 描述錯誤的是(BD)

    A.sass 和 scss 其實是同⼀一種東⻄，都稱之為 Sass

    B.sass 可以聲明變量符號為&

    C.sass 最終都將轉換成 css ⽂件才被引⽤

    D. sass 不可以擴展和繼承

1. ⽗級⾼寬固定，子級⽔平垂直居中怎麼實現(請用 2 種 flex ⽅

法實現)?

2. 寫出⼀個簡單的$.ajax()的請求方式?

3. 假如移動端設備的尺寸是320px要實現每1rem=16px怎麼實

現?

4.使用 Javascript 列印出 1-10000 之間的所有對稱數(例如 121

1331 等)

5. angular 框架之間的通信⽅式是什麼，⾄少列出三種?

6. vue 的⽣命周期有⼏個階段，簡單說說它們的作用?

H. Web前端開發筆試題

Web前端開發筆試題集錦

Web前端開發筆試題集錦：

1，截取字元串abcdefg的efg

var str = "abcdefg";

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

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

alert(efg);

}

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

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

reg.test("a1a__a1a__a1a__a1a__");

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) 是否可用id代替HTML元素

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

FF：不可以

(8) innerText textContent outerHTML

IE：支持innerText, outerHTML

FF：支持textContent

;

I. 有哪些經典的 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向網頁中輸出<h1>hello</h1>，以下代碼中可行的是（ BD ）
A. <scripttype=」text/javascript」>
document.write(<h1>hello</h1>);
</script>
B. <scripttype=」text/javascript」>
document.write(「<h1>hello</h1>」);
</script>
C. <scripttype=」text/javascript」>
<h1>hello</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;i<document.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;i<document.forms.length; i++){
for(var j=0;j<document.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>這里是div<p>裡面的段落</p></div>」;
//
<scripttype=」text/javascript」>
varreg = /<\/?\w+\/?>/gi;
varstr = 「<div>這里是div<p>裡面的段落</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 ;i<rdo.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>