一：基礎知識 1、JavaScript語言的歷史 l 早期名稱：livescript l 開發公司：網景公司（netscape） 2、JavaScript語言的基本特點 l 基於對象 l 事件驅動 l 解釋性語言 l 實時性 l 動態性 l 跨平臺 l 開發使用簡單 l 安全性 l 腳本語言 l 弱 ...
一：基礎知識
1、JavaScript語言的歷史
l 早期名稱：livescript
l 開發公司：網景公司（netscape）
2、JavaScript語言的基本特點
l 基於對象
l 事件驅動
l 解釋性語言
l 實時性
l 動態性
l 跨平臺
l 開發使用簡單
l 安全性
l 腳本語言
l 弱類型
3、JavaScript語言的組成
l ECMAScript
l DOM
l BOM
4、JavaScript常用的輸入輸出語句
l alert() 警告對話框
l prompt() 提示對話框
l confirm() 消息對話框
l document.write() 向頁面里輸出內容
l console.log() 向控制台輸出內容
l innerHTML 向標簽里輸出內容
5、JavaScript能做什麼，使用什麼環境，如何引用js文件
l 能做什麼：
n 客戶端表單驗證
n 頁面動態效果
n 動態改變頁面內容
l 使用環境：
n 瀏覽器內執行
l 如何引用：
n <script src="index.js"></script>
n <script src="test.js" language="JavaScript"></script>
6、JavaScript的代碼寫在哪兒，放在網頁的什麼位置？
l 寫在哪裡：
n js文件中
n js標簽中
l 放在哪裡：
n 標準位置：head標簽中或者body標簽中
n 籠統說法：頁面任意位置
7、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來定義
8、JavaScript中常用的類型轉換函數
l parseInt() 轉換為數字
l parseFloat() 轉換為小數
l Number() 轉換為數字
l Boolean() 轉換為布爾值
l String() 轉化為字元串
l toString() 轉換為字元串
9、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）
10、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(數字) 把數四捨五入為最接近的整數
11、JavaScript中String對象的創建及其常用的屬性和方法
l 如何創建：
var str = new String(s);
l 常用屬性：
length 返回字元串的長度
l 常用方法：
charAt() 返回在指定位置的字元
indexOf() 返回字元或字元串從前向後搜索第一次出現的下標位置
lastIndexOf() 返回字元或字元串從後向前搜索第一次出現的下標位置
replace() 替換字元串
split() 分割字元串
toLowerCase() 把字元串轉換為小寫
toUpperCase() 把字元串轉換為大寫
12、JavaScript中數組的概念，數組常用的屬性方法
1) 數組的概念
l 數組對象是使用單獨的變數名來存儲一系列的值
2) 常用屬性
|
設置或返回數組中元素的數目。 |
3) 常用方法
|
連接兩個或更多的數組，並返回結果。 |
|
|
把數組的所有元素放入一個字元串。元素通過指定的分隔符進行分隔。 |
|
|
刪除並返回數組的最後一個元素 |
|
|
向數組的末尾添加一個或更多元素，並返回新的長度。 |
|
|
顛倒數組中元素的順序。 |
|
|
刪除並返回數組的第一個元素 |
|
|
從某個已有的數組返回選定的元素 |
|
|
對數組的元素進行排序 |
|
|
刪除元素，並向數組添加新元素。 |
|
|
返回該對象的源代碼。 |
|
|
把數組轉換為字元串，並返回結果。 |
|
|
把數組轉換為本地數組，並返回結果。 |
|
|
向數組的開頭添加一個或更多元素，並返回新的長度。 |
|
|
返回數組對象的原始值 |
13、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元素本身
14、JavaScript中常見的事件有哪些，什麼時候、什麼情況觸發。
1) 滑鼠事件
|
屬性 |
描述 |
DOM |
|
當用戶點擊某個對象時調用的事件句柄。 |
2 |
|
|
在用戶點擊滑鼠右鍵打開上下文菜單時觸發 |
|
|
|
當用戶雙擊某個對象時調用的事件句柄。 |
2 |
|
|
滑鼠按鈕被按下。 |
2 |
|
|
當滑鼠指針移動到元素上時觸發。 |
2 |
|
|
當滑鼠指針移出元素時觸發 |
2 |
|
|
滑鼠被移動。 |
2 |
|
|
滑鼠移到某元素之上。 |
2 |
|
|
滑鼠從某元素移開。 |
2 |
|
|
滑鼠按鍵被鬆開。 |
2 |
2) 鍵盤事件
|
屬性 |
描述 |
DOM |
|
某個鍵盤按鍵被按下。 |
2 |
|
|
某個鍵盤按鍵被按下並鬆開。 |
2 |
|
|
某個鍵盤按鍵被鬆開。 |
2 |
3) 表單事件
|
屬性 |
描述 |
DOM |
|
元素失去焦點時觸發 |
2 |
|
|
該事件在表單元素的內容改變時觸發( <input>, <keygen>, <select>, 和 <textarea>) |
2 |
|
|
元素獲取焦點時觸發 |
2 |
|
|
元素即將獲取焦點時觸發 |
2 |
|
|
元素即將失去焦點時觸發 |
2 |
|
|
元素獲取用戶輸入時觸發 |
3 |
|
|
表單重置時觸發 |
2 |
|
|
用戶向搜索域輸入文本時觸發 ( <input="search">) |
|
|
|
用戶選取文本時觸發 ( <input> 和 <textarea>) |
2 |
|
|
表單提交時觸發 |
2 |
15、瀏覽器對象（BOM）的分層結構，window對象的屬性，常用方法
1) BOM和DOM的分層結構
2) window對象的屬性
|
屬性 |
描述 |
|
返回視窗是否已被關閉。 |
|
|
設置或返回視窗狀態欄中的預設文本。 |
|
|
對 Document 對象的只讀引用。請參閱 Document 對象。 |
|
|
對 History 對象的只讀引用。請參數 History 對象。 |
|
|
返回視窗的文檔顯示區的高度。 |
|
|
返回視窗的文檔顯示區的寬度。 |
|
|
length |
設置或返回視窗中的框架數量。 |
|
用於視窗或框架的 Location 對象。請參閱 Location 對象。 |
|
|
設置或返回視窗的名稱。 |
|
|
對 Navigator 對象的只讀引用。請參數 Navigator 對象。 |
|
|
返回對創建此視窗的視窗的引用。 |
|
|
返回視窗的外部高度。 |
|
|
返回視窗的外部寬度。 |
|
|
pageXOffset |
設置或返回當前頁面相對於視窗顯示區左上角的 X 位置。 |
|
pageYOffset |
設置或返回當前頁面相對於視窗顯示區左上角的 Y 位置。 |
|
parent |
返回父視窗。 |
|
對 Screen 對象的只讀引用。請參數 Screen 對象。 |
|
|
返回對當前視窗的引用。等價於 Window 屬性。 |
|
|
設置視窗狀態欄的文本。 |
|
|
返回最頂層的先輩視窗。 |
|
|
window |
window 屬性等價於 self 屬性，它包含了對視窗自身的引用。 |
|
只讀整數。聲明瞭視窗的左上角在屏幕上的的 x 坐標和 y 坐標。IE、Safari 和 Opera 支持 screenLeft 和 screenTop，而 Firefox 和 Safari 支持 screenX 和 screenY。 |
3) window對象的方法
|
方法 |
描述 |
|
顯示帶有一段消息和一個確認按鈕的警告框。 |
|
|
把鍵盤焦點從頂層視窗移開。 |
|
|
取消由 setInterval() 設置的 timeout。 |
|
|
取消由 setTimeout() 方法設置的 timeout。 |
|
|
關閉瀏覽器視窗。 |
|
|
顯示帶有一段消息以及確認按鈕和取消按鈕的對話框。 |
|
|
創建一個 pop-up 視窗。 |
|
|
把鍵盤焦點給予一個視窗。 |
|
|
可相對視窗的當前坐標把它移動指定的像素。 |
|
|
把視窗的左上角移動到一個指定的坐標。 |
|
|
打開一個新的瀏覽器視窗或查找一個已命名的視窗。 |
|
|
列印當前視窗的內容。 |
|
|
顯示可提示用戶輸入的對話框。 |
|
|
按照指定的像素調整視窗的大小。 |
|
|
把視窗的大小調整到指定的寬度和高度。 |
|
|
按照指定的像素值來滾動內容。 |
|
|
把內容滾動到指定的坐標。 |
|
|
按照指定的周期（以毫秒計）來調用函數或計算表達式。 |
|
|
在指定的毫秒數後調用函數或計算表達式。 |
16、文檔對象模型DOM里document的常用的查找訪問節點的方法及含義（getElement系列）
l document.getElementById()
l document.getElementsByClassName()
l document.getElementsByName()
l document.getElementsByTagName()
l document.getElementsByTagNameNS()
17、獲取滾動條距離頁面頂端的距離 scrollTop
18、隱式類型轉換：如字元+數值 結果是字元
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）
19、變數的聲明使用、js語法基礎、js的註釋
1) JS的變數聲明
|
第一種 |
var 變數名稱; 變數名稱 = 變數值; |
|
第二種 |
var 變數名稱 = 變數值; |
2) JS的註釋
|
第一種（單行註釋） |
// 註釋內容 |
|
第二種（文檔註釋） |
/** * 註釋內容 */ |
20、switch語句、for語句、if語句
1) switch語句格式或者實例
2) for語句格式或者實例
3) if語句格式或者實例
21、break 、continue的含義
l break：直接結束迴圈
l continue：跳過本次迴圈，進行下一次
22、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
23、isNaN（）函數的用法意義
是否不是一個數字，如果真，則證明不是數字，如果假，則證明是數字
二：編程題目
1、動態顯示當前時間
代碼截圖：（為了更好的演示，請用谷歌運行頁面）
代碼文本：
|
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> </head> <body> <script type="text/javascript"> // 每隔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> |
2、倒計時
代碼截圖：（為了更好的演示，請用谷歌運行頁面）
代碼文本：
|
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <script type="text/javascript"> // 定義時間變數，保存需要倒計時幾秒 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> |
3、開關燈
代碼截圖：（為了更好的演示，請用谷歌運行頁面）
代碼文本：
|
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <!-- 用來存放小燈泡的圖片 --> <img src="img/dengpao_off.gif" id="dengpao" /> <!-- 用來控制小燈泡的開關 --> <button id="btn">開燈</button>
<!-- JavaScript代碼 --> <script type="text/javascript"> 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> |
4、全選反選
代碼截圖：（為了更好的演示，請用谷歌運行頁面）
代碼文本：
|
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <!-- 選擇框狀態 --> <input type="checkbox" id="zhuangtai" /> <button id="qbxz">全部選中</button> <button id="qbbx">全部不選</button> <button id="fxcz">反選操作</button> <hr />
<!-- 選擇框容器 --> <div id="box"> <input type="checkbox" /> 計算1701班 <br/> <input type="checkbox" /> 計算1702班 <br/> <input type="checkbox" /> 計算1703班 <br/> <input type="checkbox" /> 計算1801班 <br/> <input type="checkbox" /> 計算1802班 <br/> <input type="checkbox" /> 計算1803班 <br/> </div> </body>
<!-- JavaScript代碼 --> <script type="text/javascript"> 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(); };
  更多相關文章
一周排行
 所有分類
|