java Script複習總結

時間 2019-12-11

標籤 java script 複習總結欄目 Java 简体版

原文原文鏈接

一：基礎知識

一、JavaScript語言的歷史

l 早期名稱：livescriptjavascript

l 開發公司：網景公司（netscape）html

二、JavaScript語言的基本特色

l 基於對象java

l 事件驅動編程

l 解釋性語言數組

l 實時性瀏覽器

l 動態性安全

l 跨平臺app

l 開發使用簡單框架

l 安全性dom

l 腳本語言

l 弱類型

三、JavaScript語言的組成

l ECMAScript

l DOM

l BOM

四、JavaScript經常使用的輸入輸出語句

l alert() 警告對話框

l prompt() 提示對話框

l confirm() 消息對話框

l document.write() 向頁面裏輸出內容

l console.log() 向控制檯輸出內容

l innerHTML 向標籤裏輸出內容

五、JavaScript能作什麼，使用什麼環境，如何引用js文件

l 能作什麼：

n 客戶端表單驗證

n 頁面動態效果

n 動態改變頁面內容

l 使用環境：

n 瀏覽器內執行

l 如何引用：

n <script src="index.js"></script>

n <script src="test.js" language="JavaScript"></script>

六、JavaScript的代碼寫在哪兒，放在網頁的什麼位置？

l 寫在哪裏：

n js文件中

n js標籤中

l 放在哪裏：

n 標準位置：head標籤中或者body標籤中

n 籠統說法：頁面任意位置

七、JavaScript常見的數據類型及特色

n JS數據類型的分類：

u 基本數據類型：（注意大小寫，它們不同）

l string （字符串類型）

l number （數值類型）

l boolean （布爾類型）

l null （空類型）

l object （對象類型）

l undefined （未定義類型）

u 引用數據類型：（注意大小寫，它們不同）

l Array （數組類型）

l Boolean （布爾類型）

l Date （日期類型）

l Math （數學運算）

l Number （數值類型）

l String （字符串類型）

l RegExp （正則類型）

l Function （函數類型）

n JS數據類型的特色：

u 一切變量都用var來定義

八、JavaScript中經常使用的類型轉換函數

l parseInt() 轉換爲數字

l parseFloat() 轉換爲小數

l Number() 轉換爲數字

l Boolean() 轉換爲布爾值

l String() 轉化爲字符串

l toString() 轉換爲字符串

九、JavaScript中Date對象的建立及其經常使用的屬性和方法

l 如何建立：

var myDate=new Date();

l 經常使用屬性：

暫不經常使用

l 經常使用方法：取值範圍

getFullYear() 獲取年份（四位數字）

getMonth() 獲取月份（0 ~ 11）

getDate() 獲取天數（1 ~ 31）

getHours() 獲取小時（0 ~ 23）

getMinutes() 獲取分鐘（0 ~ 59）

getSeconds() 獲取秒數（0 ~ 59）

getMilliseconds() 獲取毫秒（0 ~ 999）

十、JavaScript中Math對象的建立及其經常使用的屬性和方法

l 如何使用：

var pi_value=Math.PI;

var sqrt_value=Math.sqrt(15);

l 經常使用屬性：

PI 返回圓周率（約等於3.14159）

l 經常使用方法：

floor(數字) 對數進行下舍入

ceil(數字) 對數進行上舍入

max(數字1,數字2) 返回兩個數字中的最大值

min(數字1,數字2) 返回兩個數字中的最小值

random() 返回 0 ~ 1 之間的隨機數

round(數字) 把數四捨五入爲最接近的整數

十一、JavaScript中String對象的建立及其經常使用的屬性和方法

l 如何建立：

var str = new String(s);

l 經常使用屬性：

length 返回字符串的長度

l 經常使用方法：

charAt() 返回在指定位置的字符

indexOf() 返回字符或字符串從前向後搜索第一次出現的下標位置

lastIndexOf() 返回字符或字符串從後向前搜索第一次出現的下標位置

replace() 替換字符串

split() 分割字符串

toLowerCase() 把字符串轉換爲小寫

toUpperCase() 把字符串轉換爲大寫

十二、JavaScript中數組的概念，數組經常使用的屬性方法

1) 數組的概念

l 數組對象是使用單獨的變量名來存儲一系列的值

2) 經常使用屬性

length

設置或返回數組中元素的數目。

3) 經常使用方法

concat()	鏈接兩個或更多的數組，並返回結果。
join()	把數組的全部元素放入一個字符串。元素經過指定的分隔符進行分隔。
pop()	刪除並返回數組的最後一個元素
push()	向數組的末尾添加一個或更多元素，並返回新的長度。
reverse()	顛倒數組中元素的順序。
shift()	刪除並返回數組的第一個元素
slice()	從某個已有的數組返回選定的元素
sort()	對數組的元素進行排序
splice()	刪除元素，並向數組添加新元素。
toSource()	返回該對象的源代碼。
toString()	把數組轉換爲字符串，並返回結果。
toLocaleString()	把數組轉換爲本地數組，並返回結果。
unshift()	向數組的開頭添加一個或更多元素，並返回新的長度。
valueOf()	返回數組對象的原始值

1三、JavaScript中建立節點，增長節點，刪除節點，複製節點的方法

1) 建立節點

l document.createElement() 建立元素節點，參數爲標籤名

2) 增長節點

l m.appendChild(n) 爲m元素在末尾添加n節點

l m.insertBefore(k,n) 在m元素的k節點前添加n節點

3) 刪除節點

l m.removeChild(n) 刪除m元素中的n節點

l m.replaceChild(k,n) 用n節點取代m元素中的k節點

4) 複製節點

l m.cloneChild() 複製m節點並將複製出來的節點做爲返回值

l 參數爲true時，則將m元素的後代元素也一併複製。不然，僅複製m元素自己

1四、JavaScript中常見的事件有哪些，何時、什麼狀況觸發。

1) 鼠標事件

屬性	描述	DOM
onclick	當用戶點擊某個對象時調用的事件句柄。	2
oncontextmenu	在用戶點擊鼠標右鍵打開上下文菜單時觸發
ondblclick	當用戶雙擊某個對象時調用的事件句柄。	2
onmousedown	鼠標按鈕被按下。	2
onmouseenter	當鼠標指針移動到元素上時觸發。	2
onmouseleave	當鼠標指針移出元素時觸發	2
onmousemove	鼠標被移動。	2
onmouseover	鼠標移到某元素之上。	2
onmouseout	鼠標從某元素移開。	2
onmouseup	鼠標按鍵被鬆開。	2

2) 鍵盤事件

屬性	描述	DOM
onkeydown	某個鍵盤按鍵被按下。	2
onkeypress	某個鍵盤按鍵被按下並鬆開。	2
onkeyup	某個鍵盤按鍵被鬆開。	2

3) 表單事件

屬性	描述	DOM
onblur	元素失去焦點時觸發	2
onchange	該事件在表單元素的內容改變時觸發( <input>, <keygen>, <select>, 和 <textarea>)	2
onfocus	元素獲取焦點時觸發	2
onfocusin	元素即將獲取焦點時觸發	2
onfocusout	元素即將失去焦點時觸發	2
oninput	元素獲取用戶輸入時觸發	3
onreset	表單重置時觸發	2
onsearch	用戶向搜索域輸入文本時觸發 ( <input="search">)
onselect	用戶選取文本時觸發 ( <input> 和 <textarea>)	2
onsubmit	表單提交時觸發	2

1五、瀏覽器對象（BOM）的分層結構，window對象的屬性，經常使用方法

1) BOM和DOM的分層結構

2) window對象的屬性

屬性	描述
closed	返回窗口是否已被關閉。
defaultStatus	設置或返回窗口狀態欄中的默認文本。
document	對 Document 對象的只讀引用。請參閱 Document 對象。
history	對 History 對象的只讀引用。請參數 History 對象。
innerheight	返回窗口的文檔顯示區的高度。
innerwidth	返回窗口的文檔顯示區的寬度。
length	設置或返回窗口中的框架數量。
location	用於窗口或框架的 Location 對象。請參閱 Location 對象。
name	設置或返回窗口的名稱。
Navigator	對 Navigator 對象的只讀引用。請參數 Navigator 對象。
opener	返回對建立此窗口的窗口的引用。
outerheight	返回窗口的外部高度。
outerwidth	返回窗口的外部寬度。
pageXOffset	設置或返回當前頁面相對於窗口顯示區左上角的 X 位置。
pageYOffset	設置或返回當前頁面相對於窗口顯示區左上角的 Y 位置。
parent	返回父窗口。
Screen	對 Screen 對象的只讀引用。請參數 Screen 對象。
self	返回對當前窗口的引用。等價於 Window 屬性。
status	設置窗口狀態欄的文本。
top	返回最頂層的先輩窗口。
window	window 屬性等價於 self 屬性，它包含了對窗口自身的引用。
screenLeft screenTop screenX screenY	只讀整數。聲明瞭窗口的左上角在屏幕上的的 x 座標和 y 座標。IE、Safari 和 Opera 支持 screenLeft 和 screenTop，而 Firefox 和 Safari 支持 screenX 和 screenY。

3) window對象的方法

方法	描述
alert()	顯示帶有一段消息和一個確認按鈕的警告框。
blur()	把鍵盤焦點從頂層窗口移開。
clearInterval()	取消由 setInterval() 設置的 timeout。
clearTimeout()	取消由 setTimeout() 方法設置的 timeout。
close()	關閉瀏覽器窗口。
confirm()	顯示帶有一段消息以及確認按鈕和取消按鈕的對話框。
createPopup()	建立一個 pop-up 窗口。
focus()	把鍵盤焦點給予一個窗口。
moveBy()	可相對窗口的當前座標把它移動指定的像素。
moveTo()	把窗口的左上角移動到一個指定的座標。
open()	打開一個新的瀏覽器窗口或查找一個已命名的窗口。
print()	打印當前窗口的內容。
prompt()	顯示可提示用戶輸入的對話框。
resizeBy()	按照指定的像素調整窗口的大小。
resizeTo()	把窗口的大小調整到指定的寬度和高度。
scrollBy()	按照指定的像素值來滾動內容。
scrollTo()	把內容滾動到指定的座標。
setInterval()	按照指定的週期（以毫秒計）來調用函數或計算表達式。
setTimeout()	在指定的毫秒數後調用函數或計算表達式。

1六、文檔對象模型DOM裏document的經常使用的查找訪問節點的方法及含義（getElement系列）

l document.getElementById()

l document.getElementsByClassName()

l document.getElementsByName()

l document.getElementsByTagName()

l document.getElementsByTagNameNS()

1七、獲取滾動條距離頁面頂端的距離 scrollTop

1八、隱式類型轉換：如字符+數值結果是字符

1) typeof運算符

l typeof "John" // 返回 string 字符型

l typeof 3.14 // 返回 number 數值型

l typeof NaN // 返回 number

l typeof false // 返回 boolean布爾型

l typeof [1,2,3,4] // 返回 object

l typeof {name:'John', age:34} // 返回 object空值

l typeof new Date() // 返回 object

l typeof function () {} // 返回 function

l typeof myCar // 返回 undefined (若是 myCar 沒有聲明)

l typeof null // 返回 object

2) 常考題型

l 轉換1：字符串+數值=》數值，結果爲NAN（parseInt(「abc」+10) == NAN）

l 轉換2：數值+字符串=》數值，結果爲數值（parseInt(10+」abc」) == 10）

1九、變量的聲明使用、js語法基礎、js的註釋

1) JS的變量聲明

第一種

var 變量名稱;

變量名稱 = 變量值;

第二種

var 變量名稱 = 變量值;

2) JS的註釋

第一種（單行註釋）

// 註釋內容

第二種（文檔註釋）

/**

* 註釋內容

20、switch語句、for語句、if語句

1) switch語句格式或者實例

2) for語句格式或者實例

3) if語句格式或者實例

2一、break 、continue的含義

l break：直接結束循環

l continue：跳過本次循環，進行下一次

2二、typeof用法

（1）typeof運算符

l typeof "John" // 返回 string

l typeof 3.14 // 返回 number

l typeof NaN // 返回 number

l typeof false // 返回 boolean

l typeof [1,2,3,4] // 返回 object

l typeof {name:'John', age:34} // 返回 object

l typeof new Date() // 返回 object

l typeof function () {} // 返回 function

l typeof myCar // 返回 undefined (若是 myCar 沒有聲明)

l typeof null // 返回 object

2三、isNaN（）函數的用法意義

是否不是一個數字，若是真，則證實不是數字，若是假，則證實是數字

二：編程題目

一、動態顯示當前時間

代碼截圖：（爲了更好的演示，請用谷歌運行頁面）

代碼文本：

<!DOCTYPE html>

<html>

<head>

</head>

<body>

// 每隔1秒鐘，獲取一次當前時間，而後輸出

setInterval(function() {

// 建立日期對象

var nowDate = new Date();

// 獲取時間的值

var year = nowDate.getFullYear(); // 獲取年份，例如（2018）

var month = nowDate.getMonth(); // 獲取月份，範圍（0~11）

var day = nowDate.getDate(); // 獲取日份，範圍（1~31）

var hour = nowDate.getHours(); // 獲取小時，範圍（0~23）

var minute = nowDate.getMinutes(); // 獲取分鐘，範圍（0~59）

var second = nowDate.getSeconds(); // 獲取秒數，範圍（0~59）

// 控制檯輸出

console.log(year + "-" + (month + 1) + "-" + day + " " + hour + ":" + minute + ":" + second);

}, 1000);

</script>

</body>

</html>

二、倒計時

代碼截圖：（爲了更好的演示，請用谷歌運行頁面）

代碼文本：

<!DOCTYPE html>

<html>

<head>

</head>

<body>

// 定義時間變量，保存須要倒計時幾秒

var time = 5;

// 每隔1秒鐘，執行一次，若是當前時間等於1，中止計時

var sid = setInterval(function() {

// 判斷是否中止計時器，若是時間爲1，則直接清除計時器

if(time == 1) {

clearInterval(sid);

}

// 輸出當前時間

console.log("當前時間：" + time);

// 時間減小1秒鐘

time = time - 1;

}, 1000);

</script>

</body>

</html>

三、開關燈

代碼截圖：（爲了更好的演示，請用谷歌運行頁面）

代碼文本：

<!DOCTYPE html>

<html>

<head>

</head>

<body>

var dengpao = document.getElementById("dengpao"); //獲取圖片框

var btn = document.getElementById("btn"); //獲取按鈕框

// 當按鈕被單擊的時候，觸發事件

btn.onclick = function(){

// 判斷當前是否是開燈

if(btn.innerHTML == '開燈') {

dengpao.src = "img/dengpao_on.gif";

btn.innerHTML = "關燈";

} else {

dengpao.src = "img/dengpao_off.gif";

btn.innerHTML = "開燈";

}

};

</script>

</body>

</html>

四、全選反選

代碼截圖：（爲了更好的演示，請用谷歌運行頁面）

代碼文本：

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<hr />

</div>

</body>

var zhuangtai = document.getElementById("zhuangtai"); // 獲取狀態框

var qbxz = document.getElementById("qbxz"); // 所有選中按鈕

var qbbx = document.getElementById("qbbx"); // 所有不選按鈕

var fxcz = document.getElementById("fxcz"); // 反選操做按鈕

var inputs = document.getElementById("box").getElementsByTagName("input"); // 複選框的數組

/*功能介紹：所有選中*/

qbxz.onclick = function() {

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

inputs[i].checked = true;

}

zhuangtai.checked = true;

};

/*功能介紹：所有不選*/

qbbx.onclick = function() {

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

inputs[i].checked = false;

}

zhuangtai.checked = false;

};

/*功能介紹：反選操做*/

fxcz.onclick = function() {

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

if(inputs[i].checked == true) {

inputs[i].checked = false;

} else {

inputs[i].checked = true;

}

// 更改狀態框

zhuangtai.checked = checkAllChoice();

};

/*功能介紹：複選框單擊事件*/

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

inputs[i].onclick = function() {

zhuangtai.checked = checkAllChoice();

};

}

/*功能介紹：檢查是否所有選中*/

function checkAllChoice() {

// 設置標記，記錄是否所有選中，默認所有選中

var flag = true;

// 循環判斷是否所有選中，若是有一個沒有選中，則標記位置就爲false

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

if(inputs[i].checked == false) {

flag = false;

}

// 返回結果（true或者false）

return flag;

}

</script>

</html>

五、圖片輪播

直接查看附件：圖片輪播

六、選項卡

直接查看附件：選項卡

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。

java Script複習總結

一：基礎知識

一、JavaScript語言的歷史

二、JavaScript語言的基本特色

三、JavaScript語言的組成

四、JavaScript經常使用的輸入輸出語句

五、JavaScript能作什麼，使用什麼環境，如何引用js文件

六、JavaScript的代碼寫在哪兒，放在網頁的什麼位置？

七、JavaScript常見的數據類型及特色

八、JavaScript中經常使用的類型轉換函數

九、JavaScript中Date對象的建立及其經常使用的屬性和方法

十、JavaScript中Math對象的建立及其經常使用的屬性和方法

十一、JavaScript中String對象的建立及其經常使用的屬性和方法

十二、JavaScript中數組的概念，數組經常使用的屬性方法

1三、JavaScript中建立節點，增長節點，刪除節點，複製節點的方法

1四、JavaScript中常見的事件有哪些，何時、什麼狀況觸發。

1五、瀏覽器對象（BOM）的分層結構，window對象的屬性，經常使用方法

1六、文檔對象模型DOM裏document的經常使用的查找訪問節點的方法及含義（getElement系列）

1七、獲取滾動條距離頁面頂端的距離 scrollTop

1八、隱式類型轉換：如字符+數值 結果是字符

1九、變量的聲明使用、js語法基礎、js的註釋

20、switch語句、for語句、if語句

2一、break 、continue的含義

2二、typeof用法

2三、isNaN（）函數的用法意義

二：編程題目

一、動態顯示當前時間

二、倒計時

三、開關燈

四、全選反選

五、圖片輪播

六、選項卡

1八、隱式類型轉換：如字符+數值結果是字符