JavaScript(1) -- JS入門_ZenDei技術網路在線

1. JavaScript介紹 JavaScript是屬於HTML與Web的解釋性編程語言，也是一種以函數優先的弱類型輕量級的腳本語言，無需進行預編譯即可與HTML前端頁面進行行為交互，支持跨平臺運行，可在多種平臺下（如Windows、Linux、Mac、Android、iOS等）。目前JavaSc ...

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章節自我學習彙總內容。