js教程--從入門到精通 第一篇 js的前世今生以及js中基本資料型別和引入方式
阿新 • • 發佈：2019-01-06
1、Javascript前世今生
1.1、什麼是Javascript
Javascript運行於Javascript 【直譯器/引擎】中的解釋性指令碼語言
Javascript執行環境：
1、Javascript直譯器 ：NodeJS
2、嵌入在瀏覽器中的核心(引擎) 1.2、Javascript 發展
1、1992年 Nombas公司 開發了一款指令碼語言 ScriptEase ,可以嵌入在網頁中
大概在 1992 年，一家稱作 Nombas 的公司開發了一種叫做 C 減減（C-minus-minus，簡稱 Cmm）的嵌入式指令碼語言。Cmm 背後的理念很簡單：一個足夠強大可以替代巨集操作（macro）的指令碼語言，同時保持與 C （和 C ++）足夠的相似性，以便開發人員能很快學會。這個指令碼語言捆綁在一個叫做 CEnvi 的共享軟體中，它首次向開發人員展示了這種語言的威力。
Nombas 最終把 Cmm 的名字改成了 ScriptEase，原因是後面的部分（mm）聽起來過於消極，同時字母 C “令人害怕”。
現在 ScriptEase 已經成為了 Nombas 產品背後的主要驅動力。
2、1995年 Netscape[neitskeip]公司(美國Netscape公司，以開發Internet瀏覽器聞名) 為 [ˈnævɪgeɪtə(r)]Navigator2.0瀏覽器開發了一款指令碼語言 LiveScript ,
為了趕時髦 將其命名為 Javascript。Javascript與Java沒有一點關係
3、1996年，Microsoft[maikrisouft] ，為了IE3.0，釋出了一個Javascript克隆版本 JScript
4、1997年 Javascript1.1 作為草案提交給了 ECMA（歐洲計算機制造商協會）
--> ECMA-262標準 -->ECMAScript
1.3 Javascript (JS)的組成:
1、核心(ECMAScript, ES)
2、文件物件模型(DOM,Document Object Model) 一套操作頁面元素的API
DOM可以把HTML看做是文件樹，通過DOM提供的API可以對樹上的節點進行操作
3、瀏覽器物件模型(BOM,Borowser Object Model) 彈出框、控制瀏覽器跳轉、獲取解析度等 一套操作瀏覽器功能的API. 1.4 Javascript特點
1、任何編輯工具都可以編寫Javascript,語法類似於Java,C,...
2、無需編譯
3、弱型別語言
由值來決定資料型別 強資料型別：由資料型別 決定值
1.5 基於物件的程式語言
萬物皆物件
1.6 Javascript的用途
JavaScript的直譯器被稱為JavaScript引擎，為瀏覽器的一部分，廣泛用於客戶端的指令碼語言，最早是在HTML（標準通用標記語言下的一個應用）網頁上使用，用來給HTML網頁增加動態功能。
最初的目的是為了處理表單的驗證操作。 ### JavaScript現在的意義(應用場景) JavaScript 發展到現在幾乎無所不能。 1. 網頁特效 客戶端資料計算 表單驗證 非空驗證 資料範圍驗證 瀏覽器事件的觸發和處理
2. 服務端開發(Node.js) 伺服器的非同步資料提交（ajax）
3. 命令列工具(Node.js)
4. 桌面程式(Electron)
5. App(Cordova)
6. 控制硬體-物聯網(Ruff)
7. 遊戲開發(cocos2d-js)
JavaScript和HTML、CSS的區別 1. HTML：提供網頁的結構，提供網頁中的內容
2. CSS: 用來美化網頁
3. JavaScript: 可以用來控制網頁內容，給網頁增加動態的效果
2、使用javaScript
2.1 瀏覽器說明
瀏覽器是指可以顯示網頁伺服器或者檔案系統的HTML檔案內容，並讓使用者與這些檔案互動的一種軟體。
通俗的講:可以顯示頁面的一個軟體,
國內網民計算機上常見的網頁瀏覽器有，QQ瀏覽器、Internet Explorer、Firefox、Safari，Opera、Google Chrome、百度瀏覽器、搜狗瀏覽器、獵豹瀏覽器、360瀏覽器、UC瀏覽器、傲遊瀏覽器、世界之窗瀏覽器等，瀏覽器是最經常使用到的客戶端程式。
常用的五大瀏覽器：chrome，firefox，Safari，ie，opera
我們用chrome(谷歌瀏覽器)
2.2、JavaScript初體驗（JavaScript的書寫位置）
CSS：行內樣式、嵌入樣式、外部樣式
A:寫在行內
<input type="button" value="按鈕" onclick="alert('Hello World')" />
B:寫在script標籤中
<head>
<script>
alert('Hello World!');
</script>
</head>
C: 寫在外部js檔案中，在頁面引入
<script src="main.js"></script>
注意點
引用外部js檔案的script標籤中不可以寫JavaScript程式碼
2.3語句
被Javascript引擎所解釋執行的一句程式碼
組成：
表示式、關鍵字、運算子
運算子：+，-，*，/，%，> ....
表示式：由一個或多個運算子以及一個或多個運算元組成的。 如：1+2，
特點：以分號表示結束
console.log();
document.write();
window.alert();
習慣:一行只寫一條語句
注意：嚴格區分大小寫
console.log();
console.Log();
2.4、註釋
單行註釋：//
多行註釋：/* */
/*
/*
*/
*/ /*
console.log();
/*window.alert();
document.write()*/
console.log();*/
3、變數
記憶體 : 臨時性儲存據算計程式在【執行過程中】要用到的資料。
TB->GB->MB->KB->B->bit
8bit = 1B
1024B=1kb
Javascript
硬碟 : 永久性儲存資料
0x000000000000000000a13247aaccxx
3.1、什麼是變數
就是記憶體中的一段空間，用於儲存程式執行過程中要用到的資料。就是儲存資料的容器。
3.2、為什麼要使用變數
使用變數可以方便的獲取或者修改記憶體中的資料
3.3、什麼是變數名
記憶體空間的一個別名，為了方便記憶。即變數的名字。
3.4、如何使用變數 到記憶體中開闢一段空間用於儲存資料
語法：var 宣告變數
var age;
變數的賦值
將資料儲存進變數
運算子：= 賦值運算子
語法：
變數名=值;
var name;
name="張無忌";
初始化：宣告變數並賦值
var 變數名稱=值; 注意：沒有被賦值的變數自動取值為undefined var name;
var age;
var hobby;
一條語句中宣告多個變數:
var name,age,hobby;
var name="張三丰",age=30;
3.5、變數名命名規範
1、要求
1、不允許使用關鍵字以及保留關鍵字命名
標準關鍵字：
eg : var , function , if , for ,true,false ...
保留關鍵字：
class,int,float,double ... ...
2、命名規範
a、可以包含字母、數字、下劃線 _、$
b、不能以數字開頭
var name;
var name1;
var 1name;錯誤
c、不允許重複
d、儘量見名知意
var name;
var age; var a,b,c,d,....aa,ab,ac,ad;
var xingming,nianling;
e、推薦採用
匈牙利命名法
控制元件縮寫+功能
txtName
rdoGender
chkHobby
selCity
下劃線命名法
_功能名稱
_name;
_age;
駝峰命名法
如果變數名稱由多個單片語成，第一個單詞全部小寫，第二個單詞開始，首字元變大小
userName
txtusernmae --> txtUserName
下面哪些變數名不合法 ```
a
1
age18
18age
name
$name
_sex
&sex
theworld theWorld
3.6、變數使用注意問題
1、未初始化變數的使用
只定義未賦值，值為undefined
未定義，使用，錯誤，not defined
2、在可能的情況下，宣告變數時儘量初始化
var age=10;
var name="張三";
var isHappy=true;
3、將變數的宣告和賦值分開操作
var name;
var age;
name="";
age=18;
4、對變數進行的存取操作
1、設定變數的值(賦值，存)
=
var name="張三丰";//張三丰
name="張無忌";//張無忌
name+="殷素素";//張無忌殷素素
name = name + "張翠山";//張無忌殷素素張翠山 name = name+""; ==> name+="";
特殊：
var i=10;
i++;
++i; ==> i=i+1;
注意：賦值時，=的左邊一定是變數
2、獲取變數的值(取值)
var uname="張無忌";
console.log(uname); var newName = uname;
uname : 取值操作(=右邊使用)
newName : 賦值操作(=左邊使用)
4、運算子
1、算數運算子
+,-,*,/,%
%:取餘(模),計算兩個數字相除後的餘數
5%2 結果為 1
3%5 結果為 3 常用場合：
1、獲取數字的最後一位
1234
1234%10=123 ... 4
1234%100 = 12 ... 34
2、判斷奇偶性 或 判斷 是某數字的倍數
58 % 2 結果是否為 0?
78 是 3的倍數嗎？？
78 % 3 結果是否為 0 ？
+ ：
1、求和：數字型別的數值求和
2、"" 與 +聯用 ,作用是追加
"張無忌" + 123 結果為:張無忌123
123 + "張無忌" 結果為:123張無忌 12+25 結果為：37 "12"+25 結果為：1225
'12'+25 結果為：1225
注意：由算數運算子 與 運算元 組成的表示式，稱為 算數表示式
5、資料型別
1、什麼是資料型別
儲存在記憶體中的資料的型別，根據不同的型別記憶體中所開闢的空間也不一樣
2、資料型別
1、原始型別 (基本型別)
1、number 型別
數字
可以表示 32 位 (4位元組)的整數，或64位(8位元組)的浮點數
浮點數：小數 var age;
age=12; //number
age=24.5;//number 2、string 型別
字串
一系列的文字資料
注意：賦值時，必須使用 " " 或 ' ' 擴起
var name="張三丰";//string
var age = "12"; //string 特殊字元，可以通過轉移字元實現
"Hello World"
console.log(""Hello World"");錯誤
\ 作為開始
\" : 表示一個 "
\' : '
\n : 換行
\t : 製表符
\\ : \
console.log("Hello World");
3、boolean 型別
布林
只表示 肯定(真) 或 否定(假)的資料
值：true(真) 和 false(假)
使用場合：作為程式的條件(判斷、迴圈)
在與 number 型別做運算時，true=1，false=0
4、null 型別
空
5、undefined 型別
未定義
表示 不存在的資料
2、引用型別
Object
Number
Boolean
String
Date
...
1.1、什麼是Javascript
Javascript運行於Javascript 【直譯器/引擎】中的解釋性指令碼語言
Javascript執行環境：
1、Javascript直譯器 ：NodeJS
2、嵌入在瀏覽器中的核心(引擎) 1.2、Javascript 發展
1、1992年 Nombas公司 開發了一款指令碼語言 ScriptEase ,可以嵌入在網頁中
大概在 1992 年，一家稱作 Nombas 的公司開發了一種叫做 C 減減（C-minus-minus，簡稱 Cmm）的嵌入式指令碼語言。Cmm 背後的理念很簡單：一個足夠強大可以替代巨集操作（macro）的指令碼語言，同時保持與 C （和 C ++）足夠的相似性，以便開發人員能很快學會。這個指令碼語言捆綁在一個叫做 CEnvi 的共享軟體中，它首次向開發人員展示了這種語言的威力。
Nombas 最終把 Cmm 的名字改成了 ScriptEase，原因是後面的部分（mm）聽起來過於消極，同時字母 C “令人害怕”。
現在 ScriptEase 已經成為了 Nombas 產品背後的主要驅動力。
2、1995年 Netscape[neitskeip]公司(美國Netscape公司，以開發Internet瀏覽器聞名) 為 [ˈnævɪgeɪtə(r)]Navigator2.0瀏覽器開發了一款指令碼語言 LiveScript ,
為了趕時髦 將其命名為 Javascript。Javascript與Java沒有一點關係
3、1996年，Microsoft[maikrisouft] ，為了IE3.0，釋出了一個Javascript克隆版本 JScript
4、1997年 Javascript1.1 作為草案提交給了 ECMA（歐洲計算機制造商協會）
--> ECMA-262標準 -->ECMAScript
1.3 Javascript (JS)的組成:
1、核心(ECMAScript, ES)
2、文件物件模型(DOM,Document Object Model) 一套操作頁面元素的API
DOM可以把HTML看做是文件樹，通過DOM提供的API可以對樹上的節點進行操作
3、瀏覽器物件模型(BOM,Borowser Object Model) 彈出框、控制瀏覽器跳轉、獲取解析度等 一套操作瀏覽器功能的API. 1.4 Javascript特點
1、任何編輯工具都可以編寫Javascript,語法類似於Java,C,...
2、無需編譯
3、弱型別語言
由值來決定資料型別 強資料型別：由資料型別 決定值
1.5 基於物件的程式語言
萬物皆物件
1.6 Javascript的用途
JavaScript的直譯器被稱為JavaScript引擎，為瀏覽器的一部分，廣泛用於客戶端的指令碼語言，最早是在HTML（標準通用標記語言下的一個應用）網頁上使用，用來給HTML網頁增加動態功能。
最初的目的是為了處理表單的驗證操作。 ### JavaScript現在的意義(應用場景) JavaScript 發展到現在幾乎無所不能。 1. 網頁特效 客戶端資料計算 表單驗證 非空驗證 資料範圍驗證 瀏覽器事件的觸發和處理
2. 服務端開發(Node.js) 伺服器的非同步資料提交（ajax）
3. 命令列工具(Node.js)
4. 桌面程式(Electron)
5. App(Cordova)
6. 控制硬體-物聯網(Ruff)
7. 遊戲開發(cocos2d-js)
JavaScript和HTML、CSS的區別 1. HTML：提供網頁的結構，提供網頁中的內容
2. CSS: 用來美化網頁
3. JavaScript: 可以用來控制網頁內容，給網頁增加動態的效果
2、使用javaScript
2.1 瀏覽器說明
瀏覽器是指可以顯示網頁伺服器或者檔案系統的HTML檔案內容，並讓使用者與這些檔案互動的一種軟體。
通俗的講:可以顯示頁面的一個軟體,
國內網民計算機上常見的網頁瀏覽器有，QQ瀏覽器、Internet Explorer、Firefox、Safari，Opera、Google Chrome、百度瀏覽器、搜狗瀏覽器、獵豹瀏覽器、360瀏覽器、UC瀏覽器、傲遊瀏覽器、世界之窗瀏覽器等，瀏覽器是最經常使用到的客戶端程式。
常用的五大瀏覽器：chrome，firefox，Safari，ie，opera
我們用chrome(谷歌瀏覽器)
2.2、JavaScript初體驗（JavaScript的書寫位置）
CSS：行內樣式、嵌入樣式、外部樣式
A:寫在行內
<input type="button" value="按鈕" onclick="alert('Hello World')" />
B:寫在script標籤中
<head>
<script>
alert('Hello World!');
</script>
</head>
C: 寫在外部js檔案中，在頁面引入
<script src="main.js"></script>
注意點
引用外部js檔案的script標籤中不可以寫JavaScript程式碼
2.3語句
被Javascript引擎所解釋執行的一句程式碼
組成：
表示式、關鍵字、運算子
運算子：+，-，*，/，%，> ....
表示式：由一個或多個運算子以及一個或多個運算元組成的。 如：1+2，
特點：以分號表示結束
console.log();
document.write();
window.alert();
習慣:一行只寫一條語句
注意：嚴格區分大小寫
console.log();
console.Log();
2.4、註釋
單行註釋：//
多行註釋：/* */
/*
/*
*/
*/ /*
console.log();
/*window.alert();
document.write()*/
console.log();*/
3、變數
記憶體 : 臨時性儲存據算計程式在【執行過程中】要用到的資料。
TB->GB->MB->KB->B->bit
8bit = 1B
1024B=1kb
Javascript
硬碟 : 永久性儲存資料
0x000000000000000000a13247aaccxx
3.1、什麼是變數
就是記憶體中的一段空間，用於儲存程式執行過程中要用到的資料。就是儲存資料的容器。
3.2、為什麼要使用變數
使用變數可以方便的獲取或者修改記憶體中的資料
3.3、什麼是變數名
記憶體空間的一個別名，為了方便記憶。即變數的名字。
3.4、如何使用變數 到記憶體中開闢一段空間用於儲存資料
語法：var 宣告變數
var age;
變數的賦值
將資料儲存進變數
運算子：= 賦值運算子
語法：
變數名=值;
var name;
name="張無忌";
初始化：宣告變數並賦值
var 變數名稱=值; 注意：沒有被賦值的變數自動取值為undefined var name;
var age;
var hobby;
一條語句中宣告多個變數:
var name,age,hobby;
var name="張三丰",age=30;
3.5、變數名命名規範
1、要求
1、不允許使用關鍵字以及保留關鍵字命名
標準關鍵字：
eg : var , function , if , for ,true,false ...
保留關鍵字：
class,int,float,double ... ...
2、命名規範
a、可以包含字母、數字、下劃線 _、$
b、不能以數字開頭
var name;
var name1;
var 1name;錯誤
c、不允許重複
d、儘量見名知意
var name;
var age; var a,b,c,d,....aa,ab,ac,ad;
var xingming,nianling;
e、推薦採用
匈牙利命名法
控制元件縮寫+功能
txtName
rdoGender
chkHobby
selCity
下劃線命名法
_功能名稱
_name;
_age;
駝峰命名法
如果變數名稱由多個單片語成，第一個單詞全部小寫，第二個單詞開始，首字元變大小
userName
txtusernmae --> txtUserName
下面哪些變數名不合法 ```
a
1
age18
18age
name
$name
_sex
&sex
theworld theWorld
3.6、變數使用注意問題
1、未初始化變數的使用
只定義未賦值，值為undefined
未定義，使用，錯誤，not defined
2、在可能的情況下，宣告變數時儘量初始化
var age=10;
var name="張三";
var isHappy=true;
3、將變數的宣告和賦值分開操作
var name;
var age;
name="";
age=18;
4、對變數進行的存取操作
1、設定變數的值(賦值，存)
=
var name="張三丰";//張三丰
name="張無忌";//張無忌
name+="殷素素";//張無忌殷素素
name = name + "張翠山";//張無忌殷素素張翠山 name = name+""; ==> name+="";
特殊：
var i=10;
i++;
++i; ==> i=i+1;
注意：賦值時，=的左邊一定是變數
2、獲取變數的值(取值)
var uname="張無忌";
console.log(uname); var newName = uname;
uname : 取值操作(=右邊使用)
newName : 賦值操作(=左邊使用)
4、運算子
1、算數運算子
+,-,*,/,%
%:取餘(模),計算兩個數字相除後的餘數
5%2 結果為 1
3%5 結果為 3 常用場合：
1、獲取數字的最後一位
1234
1234%10=123 ... 4
1234%100 = 12 ... 34
2、判斷奇偶性 或 判斷 是某數字的倍數
58 % 2 結果是否為 0?
78 是 3的倍數嗎？？
78 % 3 結果是否為 0 ？
+ ：
1、求和：數字型別的數值求和
2、"" 與 +聯用 ,作用是追加
"張無忌" + 123 結果為:張無忌123
123 + "張無忌" 結果為:123張無忌 12+25 結果為：37 "12"+25 結果為：1225
'12'+25 結果為：1225
注意：由算數運算子 與 運算元 組成的表示式，稱為 算數表示式
5、資料型別
1、什麼是資料型別
儲存在記憶體中的資料的型別，根據不同的型別記憶體中所開闢的空間也不一樣
2、資料型別
1、原始型別 (基本型別)
1、number 型別
數字
可以表示 32 位 (4位元組)的整數，或64位(8位元組)的浮點數
浮點數：小數 var age;
age=12; //number
age=24.5;//number 2、string 型別
字串
一系列的文字資料
注意：賦值時，必須使用 " " 或 ' ' 擴起
var name="張三丰";//string
var age = "12"; //string 特殊字元，可以通過轉移字元實現
"Hello World"
console.log(""Hello World"");錯誤
\ 作為開始
\" : 表示一個 "
\' : '
\n : 換行
\t : 製表符
\\ : \
console.log("Hello World");
3、boolean 型別
布林
只表示 肯定(真) 或 否定(假)的資料
值：true(真) 和 false(假)
使用場合：作為程式的條件(判斷、迴圈)
在與 number 型別做運算時，true=1，false=0
4、null 型別
空
5、undefined 型別
未定義
表示 不存在的資料
2、引用型別
Object
Number
Boolean
String
Date
...