【JavaScript】JavaScript程式設計
阿新 • • 發佈：2020-09-08
JavaScript 程式設計
1).JavaScript - 基本語法、資料型別、運算子表示式、流程控制
目的：實現網頁動態效果、用輸入資料的格式校驗，減輕伺服器(Tomcat DB)校驗資料的壓力 介紹：①基於瀏覽器執行的面相物件的程式語言 ②弱型別程式語言.[變數型別，引用型別只有一個 var。例如：var a = 1;] （1）JavaScript基本語法 ①javascript可以書寫在*.html網頁中。【瀏覽器執行javascript】 ②程式碼基本格式：<script> JavaScript程式碼 </script> （一般放在head標籤內、和body標籤的底部） ③執行： a. 瀏覽器開啟網頁，解析執行 b. 執行方式: 解釋型語言，直接瀏覽器解釋執行 c. 執行順序： 自上而下解析，執行的 ④瀏覽器輸出： a. 控制檯輸出:console.log("字串")` b. 網頁中輸出內容: document.write("字串") c. 提示框的方式展示: window.alert("字串") （2）資料型別+變數 ①資料型別: number 數字 例如：1、 1.2 string 字串型別 例如："字串" 或 '字串' boolean 布林型別 例如：true false object 物件型別 ②變數: 定義變數: var 變數名; 賦值： 變數名 = 值; 定義變數賦值: var a = 10; ③特殊值： undefined 未定義 場景：定義了變數，沒有賦值。 NaN 非數 場景：將非數字的內容，強行當做數字使用。 null 空值 場景：var a = null; //清空變數。 （3）運算子表示式 ①運算子: + - * / % 、> < >= <= == && || 、 === (全等,不單比較內容還比較型別)，支援位運算子(例如：>>) 注意: 10/3 結果 3.333333 3 == "3" 結果 true 3.0 == “3” 結果 true（主要取決於瀏覽器對浮點數儲存的字面值） 3 === “3” 結果 false 8 >> 2 結果 2 (效率高) ②三元運算子 boolean表示式?值1:值2 （4）流程控制 if () {} If () {} else {} if () {} else if () {} else {} switch - case while ( ){迴圈程式碼} do - while for (初始化; 條件 ; 步長) {迴圈體} 注意: 條件判斷： if('1'==1) true if(1) true if(0) false if(“abc”) true 字串長度不為0 if(“”) false if(undifiend/NaN/null) false
2).JavaScript - 函式(內建函式、自定義函式)
概念： 一組具有特定”功能”的程式碼 （1）內建函式 parseInt(值); 將引數的值轉化為整數 typeof(值); 獲得值的資料型別。 isNaN(值); 判斷值是不是非數，不關係資料型別【是數字 false 不是數字 true】 （2）自定義函式 函式定義： ①定義方式1： function 函式名(引數名1,引數名2) { 函式體 (return 值;) } ②定義方式2 :[匿名函式] var 函式名 = function(形參) {函式體} ③定義方式3：構造方法定義函式 var 變數名/函式名 = new Function("a","b","return a+b"); //函式 函式呼叫： ①函式名(引數) ②函式名() （3）函式特點： ①形參只需要寫形參名，不寫形參的var。例如：function f(a, b){} ②函式宣告，不需要明確返回值型別 ③函式也是一個值[資料]，function型別 （重要） 定義：var 函式名 = function(引數1，引數2){函式體} //此”變數”的型別為function型別 ④函式呼叫的時候，函式傳入引數個數，語法上不限制 說明：如果不傳，使用時會是undefined；若果傳少於引數個數，自動依次賦值，後面的為undefined 如果傳入的引數的個數多與引數表的引數個數，只匹配前面的； 注意：函式體內有一個內建區域性變數arguments，儲存了所有參入方法的引數，⑥ ⑤JavaScript函式，沒有過載。此特性可依據: function f() {} ----> var f = function(){}; function f(a, b) {} ----> var f = function(){a, b}; ⑥函式內部，有一個區域性變數，arguments 儲存函式呼叫的時候，傳入的實際引數。
3).JavaScript - Math、Date、String、陣列
JavaScript物件 （1）Math：數學函式 屬性: Math.屬性名; 例如：Math.PI 圓周率 方法： Math.方法名(); 例如：Math.sqrt(x);//對x求平方根 Math.random();//隨機生成一個0~1的數字 （2）Date：日期 ①建立日期： var d = new Date(); 獲得瀏覽器所在電腦的當前系統時間。 var d = new Date("1999-9-9"); 構造一個指定的日期時間 ②方法： getFullYear(); 獲得4位年份 getMonth(); 獲得月份 1月~12月份對應的0~11 getDate(); 獲得日期 getDay(); 0 (星期日) ~ 6 (星期六) （3）String：字串 ①獲得字串：var a = "zzzzz"; ②屬性：例如length 字串的長度 ③方法：例如charAt(i); 獲得i下標的字元 （4）陣列[重要] ①建立陣列： var as = []; var as = [1,2,3]; 陣列賦值：陣列變數名[下標] = 值; 訪問陣列中的值: 陣列變數[下標] ②屬性: length //陣列的長度; ③JavaScript陣列特點 a. 宣告陣列 []; b. 陣列長度可變; c. 陣列中未賦值的下標上的值：undefined d. 同一個陣列中，元素型別不受限制 ④方法: sort(); 將陣列中的內容，按照字串的方式排序 指定sort排序規則: 方式：按照如下規則排序，會將每兩個比較元素，傳給內部的函式a,b，通過返回值決定排序的順序 sort(function(a,b){ return a-b; //返回值 1 -1 0 }); ⑤遍歷陣列 for(var I = 0; I < 陣列名.length; i++) { 陣列名[i]; //通過下標取值 } 倒著遍歷： for(var I = 陣列名.length - 1; I >= 0; i--) { console.log(陣列名[i]); //控制檯列印 } 4).JavaScript - 面向物件 沒有類概念，沒物件的模板，所有不能new物件 ①建立JavaScript物件 方式1：var p = {}; 方式2：var p = { "屬性名":值, "屬性名":值 }; 例如：var person = { "id" : "10001", "函式名" : function(){} //成員方法 “物件名” : { //方法屬性為一個物件型別 “屬性名” : 值 … }; }; ②給物件新增屬性: 物件.屬性名 = 值; ③訪問物件的屬性： 物件.屬性名 物件["屬性名"] ④呼叫物件的方法 物件.函式屬性名(); ⑤this關鍵字 var person = { "name" : "zhi", "方法名":function(){ console.log(this.name);//this----代表當前person物件 } } ⑥遍歷物件中的所有屬性 語法: for-each for( (var) v in 物件 ) { //v是當前被遍歷到的屬性名, 是String型別，例如：”name"、"id" //獲得屬性值: 物件[v] , 因為-->物件.”name”不能表示屬性 }
5).JavaScript - 事件
事件驅動程式設計
（1）常見的事件
① 滑鼠相關
onclick 單擊事件
ondblclick 雙擊事件
onmouseover 滑鼠移入
onmouseout 滑鼠移出
onmousemove 滑鼠移動
onmousedown 滑鼠按下
onmouseup 滑鼠鬆開
② body相關事件
onKeyDown 鍵盤按鍵按下
onKeyUp 鍵盤按鍵抬起
onload = fun//頁面載入完畢觸發[重要]
onunload 視窗離開時觸發（重新整理，返回，前進，主頁...）
onscroll 頁面滾動 [應用: ]
onresize 縮放頁面
③ form表單控制元件相關事件[最重要]
onblur 當前元素失去焦點 <input>標籤
onchange 當前元素失去焦點，並且值改變時 <input>標籤
onfocus 當前元素獲得焦點時 <input>標籤
onsubmit 表單提交時 <form>標籤
（2）事件注意事項
① 事件監聽器繫結的時間函式內，有一個區域性變數 event
事件物件event:
event.target ---- 事件源(標籤)
event.keyCode ---- 按下了哪個按鍵
event.type ---- 事件名稱("click","dblclick")
② HTML預設事件效果
禁用超連結預設事件:
<a href="http://www.baidu.com" onclick="return false">百度一下</a>
禁用form預設事件。
<form onsubmit="return false" > </form>
③ 事件冒泡：
事件觸發會從子標籤，冒泡方式，逐步觸發父標籤的事件動作
如果防止事件冒泡:
谷歌/FF 瀏覽器: event.stopPropagation();//停止事件冒泡
IE: event.cancleBubble = true;//取消事件冒泡
6).JavaScript - DOM程式設計、開發規範[重要]、基於程式設計的事件繫結
（1）DOM程式設計概要
概念：D(document 網頁) O(Object) M(Model)
一個HTML標籤對應的一個瀏覽器內部的 DOM物件
瀏覽器載入HTML標籤機制:
標籤和dom物件對應關係：
（2）DOM操作
訪問DOM物件
獲得DOM物件:
①根據標籤的id獲得dom物件： var xx_dom = document.getElementById("標籤的id");
②根據標籤名獲得標籤物件： var xx_doms = document.getElementsByTagName("標籤名");//返回陣列
③根據標籤的class名字獲得標籤物件: var xx_doms = document.getElementsByClassName("class值");
原則：①父標籤擁有查詢子標籤的許可權 : 標籤(document).getElementsxxxxx();
②建議查詢標籤的dom物件，儘可能用父標籤，進行精確查詢。
補充：通過事件函式傳遞標籤dom物件 ---> 可以使用this關鍵字代替當前的標籤的dom物件
訪問dom物件的屬性
標籤屬性：
dom物件.屬性名
dom物件.屬性名 = "";
標籤體[筆試]：
dom物件.innerText 標籤體中間的普通文字。
dom物件.innerHTML 標籤體中間的所有內容(文字+標籤)
樣式屬性：
訪問型別 樣式名稱 js訪問方式
操作文字顏色 style="color:red" dom物件.style.color
操作文字大小 style="font-size:18px" dom物件.style.fontSize
操作背景色 style="background-color:red" dom物件.style.backgroundColor
表單屬性：
訪問標籤的輸入內容
標籤input的dom物件.value
下拉列表屬性：
select相關的屬性:
select的dom物件.options 下拉列表中所有的選項。
select的dom物件.selectedIndex 被選中的選項的下標
select的dom物件.options.length=0 清空下拉列表:
DOM物件常見的操作方法
① 建立DOM物件：var xx_dom = document.createElement("標籤名");
② 將dom物件，新增在某個標籤的內部
把tr標籤的dom物件，新增在tbody內部
tbody(親爹)父標籤dom物件.appendChild(子標籤dom物件); //最後一個孩子位置
② 刪除: 本標籤dom物件.remove();//將本dom物件從網頁中刪除，消失。
④ 常用的dom遍歷的屬性
dom物件.parentNode 訪問Dom物件的親爹(直接父標籤)
dom物件.nextSibling 直接弟弟標籤(可能有空白節點)
dom物件.previosSibling 直接哥哥標籤(可能有空白節點)
dom物件.childNodes dom物件的所有兒子標籤dom物件。(包含空白部分)
（3）開發規範[重點]
①變數定義規範(函式定義規範)
將邏輯相關的多個js函式定義在一個物件中
var userTable = {
"addUser":function(){},
"removeUser":function(){}
}
呼叫: userTable.addUser()
②基於程式設計事件繫結
獲得標籤標籤繫結事件程式碼，放在網頁載入完畢之後再執行body 的onload
事件繫結[重點]：
a. 基於標籤的事件繫結
<標籤 onclick="事件函式()"></標籤>
b. 基於程式設計的事件繫結
標籤+事件監聽器+事件函式
① 先獲得dom物件。
var dom = document.getElementById("");
② 使用dom的事件監聽器屬性繫結事件函式
dom.onclick = function(){
// this 代表當前事件源物件 dom物件。
alert("dom被點選了情況下，執行了");
}
（4）基於程式設計的事件繫結
① 繫結事件：dom物件.onclick = function(){函式事件觸發執行}
②在事件函式內，禁用預設事件(超連結，表單)
dom物件.onclick = function(){
return false; //禁用預設事件
}
③基於程式設計繫結 網頁載入後執行的程式碼
window.onload = function(){
網頁載入完畢之後。//給標籤繫結事件
}
7).JavaScript - 正則表示式
作用：
通過表示式驗證輸入的內容是否符合一定的規則(數字，小數，yyyy-MM-dd，手機號，郵箱)
正則表示式.test("判斷的字串"); //true 或者 false
語法： /正則表示式規則/.test(字串)
用法：
例1： var email = "[email protected]";
① 判斷email中是否包含@符號： /[@]/.test(email) //true
② 判斷email中是否包含 "@qq.com"：console.log(/@qq.com/.test(email));//true
例2： var age = "999";/
判斷age中是否是數字：/^\d{3}$/.test(age); //true
例3： var birth = "199-9-9";
判斷birth字串中是否是日期格式：/^\d{4}-\d{1,2}-\d{1,2}$/.test(birth);
例4： var price = "123.23";
判斷是否為小數：/^-?\d+\.\d+$/.test(price); // ‘\.’為轉義的點
例5： var mobile = "15533349688";// 1 [358967]
判斷是否為手機號：/^1(3|5|6|7|8|9)\d{9}$/.test(mobile);
例6： /^[\u4e00-\u9fa5]$/.test(…)
判斷是否包含一個漢字
參考文件：
查詢某個範圍內的字元
| [abc] | 查詢方括號之間的任何一個字元 |
| [0-9] | 查詢任何從 0 至 9 的一個數字 |
| [a-z] | 查詢任何從小寫 a 到小寫 z 的一個字元 |
| [A-Z] | 查詢任何從大寫 A 到大寫 Z 的一個字元 |
| [A-z] | 查詢任何從大寫 A 到小寫 z 的字元 |
| [^adgk] | 查詢給定集合外的任何一個字元 |
| (red\|blue\|green) | 查詢任何指定的一個選項 |
| [0-9a-zA-Z] | 一個數字或者字母(大小寫) |
| [\u4e00-\u9fa5] | 匹配包含任意一個漢字 |
| [a-d|m-z] | a-d 或者 m-z |
元字元
| \w | 查詢單詞字元，等價於[A-Z0-9a-z_] |
| \W | 查詢非單詞字元。 |
| \d | 查詢數字，等價於[0-9] |
| \D | 查詢非數字字元。 |
| \s | 查詢空白字元。 |
| \S | 查詢非空白字元。 |
量詞+邊界
| n+ | 匹配任何包含至少一個 n 的字串。 |
| n* | 匹配任何包含零個或多個 n 的字串。 |
| n? | 匹配任何包含零個或一個 n 的字串。 |
| n{X} | 匹配包含 X 個 n 的序列的字串。 |
| n{X,Y} | 匹配包含 X 至 Y 個 n 的序列的字串。 |
| n{X,} | 匹配包含至少 X 個 n 的序列的字串。 |
| n$ | 匹配任何結尾為 n 的字串。 |
| ^n | 匹配任何開頭為 n 的字串。 |
8).JavaScript - BOM程式設計
BOM：B(browser) O(Object) M(Model) 瀏覽器物件模型。是將瀏覽器視窗的所有元素對映物件
例如：
視窗 window 注：window中的屬性的訪問可以不寫window
瀏覽器歷史記錄 window.history
位址列 window.location
作用：通過javascriot程式碼操作瀏覽器的行為(重新整理，彈框，警告框，對話方塊，確認框，定時器，位址列跳轉，窗的開啟和關閉...)
（1）window相關
window的常見屬性：
alert
history
location
document
①提示框：window.alert("提示文字");
②確認框：var r = window.confirm("提示確認的文字");
返回值: true 使用者點選確定
false 使用者點選取消
③對話方塊:var r = window.prompt("提示文字");
返回值：使用者輸入的內容。
④週期定時器：window.setInterval(週期性呼叫的函式，間隔時間毫秒);
⑤延遲定時器：window.setTimeout(延遲呼叫的函式,相隔多少時間之後執行);
⑥視窗的開啟和關閉：
window.close();//關閉當前視窗【有的瀏覽不讓關】
window.open("地址");//開啟新的視窗，位址列顯示。
（2）history相關
操作網頁前進，後退，重新整理：
history.go(1|0|-1);前進 重新整理 後退
（3）location相關
位址列地址：location.href = "uri"; //給個地址, 並完成跳轉。
總結：請求伺服器資源方式
①手動瀏覽器位址列
②超連結
③form表單的action
④location.href =
⑥img src=""