1. JavaScript介紹
JavaScript是屬于HTML與Web的解釋性編程語言，也是一種以函式優先的弱型別輕量級的腳本語言，無需進行預編譯即可與HTML前端頁面進行行為互動，支持跨平臺運行，可在多種平臺下（如Windows、Linux、Mac、Android、iOS等），目前JavaScript被廣泛地應用于Web前端Html實作頁面互動、實作瀏覽器頁面事件回應、前端資料驗證、檢驗訪客瀏覽器資訊、控制cookies的創建與修改、基于Node.js技術進行服務器端編程，
2. JavaScript基本語法
2.1. JavaScript的三種定義方式
JS一般有三種定義的方式：
① 寫在<a>標簽的href屬性內；
② 寫在<script>標簽內；
③ 單獨寫一個JS檔案，使用外連的方式引入；
下面直接給出代碼示例以區分這三種方式的不同：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta charset="UTF-8"> <title>三種JS的寫法</title> <!--第二種寫法：寫在script代碼塊中--> <script type="text/javascript"> alert("我在塊里面！") </script> <!--第三種寫法：單獨寫一個js檔案，在src中引入.js檔案--> <script type="text/javascript" src="./js/01hello.js"></script> </head> <body> <!-- JS的三種寫法： ①寫在標簽內； ②寫在script標簽內； ③單獨寫一個JS檔案 --> <!--第一種寫法：表示的是偽協議，給瀏覽器看，偽協議之后的代碼當做JS代碼執行--> <a href="javascript:console.debug('點你就點你')">點擊我</a> </body> </html>
2.2. JavaScript的識別符號
JavaScript中的識別符號與Java中識別符號的定義是一樣的，識別符號是為了標識程式中諸如類、方法和變數等元素而采用的命名，
所有的識別符號必須遵從以下規則：
- 識別符號是由字母、數字、下劃線(_)和美元符號($)構成的字符序列，
- 識別符號必須以字母、下劃線(_)或美元符號($)開頭，不能以數字開頭，
- 識別符號不能是JavaScript中的保留字與關鍵字，
- 識別符號不能是true、false或null，
- 識別符號可以為任意長度，
合法的識別符號舉例：indentifier、username、user_name、_userName、$username；
非法的識別符號舉例：int、98.3、Hello World，
JavaScript是嚴格區分大小寫的，所以area、Area和AREA是不同的識別符號，使用識別符號時應該使用具有描述性的識別符號以提高程式的可讀性，
2.3. 關鍵字與保留字
關鍵字包含：
break continue debugger do … while for function if … else return switch
try … catch var case break case continue default delete do finally in
instanceof new return this throw typeof void with
保留字包含：
abstract Boolean byte char class const double enum export extends
final float goto implements import int interface long package private
protected public short static super synchronized throws transient volatile
2.4. 分割符與注釋
JavaScript每條執行陳述句以分號”;”分隔，以分號分隔在實際執行程序中不是必需的（去除”;”可以執行），但是在實際撰寫代碼程序中強烈建議加上分號！
var a = 5; var b = 6; var c = a + b;
如果有分號分隔，允許在同一行寫多條執行陳述句：
var a = 5;b = 6;c = a + b; console.debug(a); //5 console.debug(b); //6 console.debug(c); //11
JavaScript注釋用于解釋JavaScript代碼，增強其可讀性，JavaScript注釋也可以用于在測驗替代代碼時阻止執行，
JavaScirpt中主要有三種注釋型別：
單行注釋、多行注釋、檔案注釋
單行注釋以//開頭，任何位于//與行末之間的文本都會被JavaScript忽略（不會執行），
多行注釋以/*開頭，以*/結尾，任何位于/*與*/之間的文本都會被JavaScript忽略，
檔案注釋以/**開頭，以*/結尾，任何位于/**與*/之間的文本都會被JavaScript忽略，
//單行注釋 var x = 5; // 宣告 x，為其賦值 5 var y = x + 2; // 宣告 y，為其賦值 x + 2 /* 多行注釋 下面的代碼會改變 網頁中 id = "myH" 的標題 以及 id = "myP" 的段落： */ document.getElementById("myH").innerHTML = "我的第一張頁面"; document.getElementById("myP").innerHTML = "我的第一個段落，"; /** 檔案注釋 一般用于公司簽名抬頭標明產品檔案型別 */
2.5. 空白字符
JavaScript會忽略多個空格，我們可以在腳本陳述句中添加多個空格間隔陳述句代碼，以增強程式的可讀性，
下面這兩行是相等的：
var person = "Bill"; var person="Bill";
在運算子旁邊（= + - * /）添加空格是個好習慣：
var x = y + z;
3. JavaScript變數
JavaScript變數是用于存盤資料值的一個標識，指向具體的記憶體地址，保存對應的值或者物件地址值，
變數宣告首先要遵循識別符號命名原則，并且JavaScript宣告變數要使用var關鍵字，比如：
var name; console.debug(name); //列印空字符 console.debug(typeof(name)); //string
宣告變數的同時可以為變數賦值，并且在之后改變該變數的值，注意：不能改變變數的型別了，比如：
var name = "張三"; console.debug(name); //張三 console.debug(typeof(name)); //string name = true; console.debug(name); //true console.debug(typeof(name)); //string
此外，JavaScript中還允許不事先宣告變數而直接使用，比如：
num = 1234; console.debug(num); //1234
注意：JavaScript定義變數無需指定變數的型別，任何型別都可以使用var關鍵字宣告，
4. JavaScript資料型別
JavaScript中資料型別包含：字串型、數值型、布爾型、陣列型、物件型別等，
① 字串型（string）
字串（或文本字串）是一串字符，比如：”Bill Gates”，
字串被引號包圍，你可以使用單引號或者雙引號：
var carName = "Porsche 911"; // 使用雙引號 var carName = 'Porsche 911'; // 使用單引號
也可以在字串內使用引號，只要這些引號與包圍的字串的引號不匹配：
var answer = "It's alright"; // 雙引號內的單引號 var answer = "He is called 'Bill'"; // 雙引號內的單引號 var answer = 'He is called "Bill"'; // 單引號內的雙引號
② 數值型（number）
JavaScript只有一種數值型別，寫數值時用不用小數點均可，
var x1 = 34.00; // 帶小數點 var x2 = 34; // 不帶小數點
超大或超小的數值可以用科學計數法來表示，
var num1 = 123e5; // 12300000 var num2 = 123e-5; // 0.00123
③ 布爾型（boolean）
JavaScript布林值只有兩個值：true或者false，
var res = true; console.debug(res); //true console.debug(typeof(res)); //boolean
④ 陣列型
JavaScript陣列用方括號表示，陣列專案元素用逗號分隔，如下代碼宣告了一個名為cars的陣列，包含三個元素（汽車品牌）：
var arr = ["Porsche", "Volvo", "BMW"]; console.debug(arr.length); //3 console.debug(arr[0]); //陣列索引從0開始，到陣列長度-1結束，取值使用arr[索引位置];Porsche console.debug(arr[arr.length-1]); //BMW
⑤ 物件型別
JavaScript物件是使用花括號來表示，
物件屬性是name:value鍵值對，用逗號分隔開，宣告一個物件型別并使用：
//物件型別 var person = { firstName : "Bill", lastName : "Gates", age : 62, eyeColor : "blue" }; //物件取值：使用物件.屬性取值 console.debug(person.firstName + " is " + person.age + " years old"); //Bill is 62 years old
4.1. typeof運算子
使用typeof可以確定JavaScript變數的型別：
typeof運算子會回傳變數或運算式的型別：
typeof運算子可以回傳 以下原始型別之一：
- string
- number
- boolean
- object
- undefined
var name = "張三"; typeof name; //string typeof 3.14 // 回傳 "number" typeof true // 回傳 "boolean" typeof x // 回傳 "undefined" (假如 x 沒有值) var arr = ["Porsche", "Volvo", "BMW"]; typeof arr; //object
同時在處理復雜資料時，typeof運算子可用回傳以下兩種型別之一：
- function
- object
typeof運算子會把物件、陣列或null回傳object；
typeof運算子會把函式回傳function
typeof null // 回傳 "object" typeof function myFunc(){} // 回傳 "function"
4.2. Undefined/Null/空值
① undefined
在JavaScript中，沒有值的變數，即變數初始化沒有賦值，那么其值就是undefined，typeof也回傳undefined，
var person; console.debug(person); //回傳undefined
② Null
在JavaScript中，null的資料型別是物件，
var person = null; console.debug(person); //null console.debug(typeof person); //object
undefined與null的區別：
undefined與null的值相等，但是型別不相等；
typeof undefined // undefined typeof null // object null === undefined // false null == undefined // true
③ 空值
空值表示字串變數的值為空字串，空的字串既有值也有型別，
var str = ""; console.debug(str); //"" console.debug(typeof str); //string
5. JavaScript函式
JavaScript函式是被設計為執行特定任務的代碼塊，JavaScript函式會在某代碼呼叫它時被執行，
5.1. JavaScript函式語法
JavaScript函式通過function關鍵詞進行定義，其后是函式名和括號()，
函式名可包含字母、數字、下劃線和美元符號（規則與變數名相同），
具體的示例如下：
function 函式名(…引數args){ 方法體—執行代碼 }
函式的作用：避免代碼在頁面加載的時候就執行了，并且一次定義，多次使用（呼叫），
5.2. 函式回傳值
JavaScript函式方法體中使用return來回傳此函式被呼叫后的執行結果，在函式中通常會計算出執行結果，回傳值會由return回傳呼叫者，而在function函式上無需宣告函式回傳型別（JS的弱型別的靈活性），
示例：
function getMsg() { var msg = "隨便回傳一個字串吧"; return msg; } console.debug(getMsg()); //隨便回傳一個字串吧 console.debug(getMsg); //? getMsg() { var msg = "隨便回傳一個字串吧"; return msg;}
函式回傳呼叫需要使用:函式名()來呼叫，而單獨使用函式名則會回傳整個函式體，
5.3. 區域變數與全域變數
在JavaScript函式中宣告的變數，會成為函式的區域變數，區域變數只能在函式內部訪問，
由于區域變數只能被其函式識別，因此可以在不同函式中使用相同名稱的變數，
區域變數在函式開始時創建，在函式完成時被洗掉，
全域變數是定義在函式體外部的變數，與區域變數無關，可以全域使用，但是如果在函式體內部的區域變數與全域變數名相同，那么在該函式被呼叫后可能會改變該全域變數的值，
示例如下：
/** * 1.JS中的全域與區域變數的定義 */ var str = "全域變數"; function showStr() { str = "區域變數"; console.debug(str); } showStr(); //區域變數 console.debug(str); //區域變數，str整體的值進入到showStr()方法中被改變 console.debug("================分割線==================") var str2 = "全域變數2"; function showStr2() { var str2 = "區域變數2"; console.debug(str2); } showStr2(); //區域變數2 console.debug(str2); //全域變數2,定義在showStr2()函式中的str2變數已經執行完畢被銷毀
6. 更多
本節JavaScript(1) – JS入門主要針對JS初學知識體系中常用知識進行匯總，省略了JS輸出列印、JS運算子、JS流程控制部分的說明（這部分比較簡單，和Java語言也大體型別），簡單知識就不再一一累述，學習更多完整的JavaScript入門知識體系請詳見W3shool網址，本部分知識參考W3school網址：
https://www.w3school.com.cn/js/index.asp
學習章節：JS教程 —— JS函式部分，后續將陸續匯總更新更多JavaScript章節自我學習匯總內容，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/134941.html
標籤：JavaScript
下一篇：js 模擬鍵盤