JavaScript語法基礎(1)
1、JavaScript是什麽？
1）定義：
JavaScript「JS」是一種高級的、動態的、
弱類型的、解釋型的計算機編程腳本語言。
2）原理：
3）組成：
3大部分：
◆ ECMAScript： JS的語法核心
◆ DOM： Document Object Model；
文檔對象模型；
提供訪問和操作網頁的方法和接口
◆ BOM： Browser Object Model；
瀏覽器對象模型；
提供與瀏覽器交互的方法和接口
4）總結：
JS是一種專門為網頁交互而設計的、
簡單而又復雜的腳本程序語言。
2、JS的發展簡史是怎樣的？
● 慢速的網絡 + 表單提交 + 服務器驗證 = 糟糕的體驗；
● 1995年，Netscape「網景公司」，LiveScript；
● 為了跟風，更名為了JavaScript；
● "瀏覽器大戰"時期，IE <=> Netscape Navigator；
● 由於語法和特性上沒有標準化，
不同公司的瀏覽器實現不一樣，
導致JS出現了一定程度的混亂；
● 歐洲計算機制造協會「ECMA」組織出現完成並定義了
ECMA-262這樣一種名為ECMAScript的腳本語言標準；
● ECMAScript5「ES5」是最流行的版本；
ECMAScript6「ES6」是最新的版本；
● 各瀏覽器廠商基於ECMAScript的標準
完成了對各自瀏覽器的標準更新，實現統一；
● 微軟借助Windows的壟斷性在"瀏覽器大戰"中戰勝網景。
3、JS的使用場景有哪些？
1）HTML、CSS和JS三者的關系：
2）JS的使用場景：
最初的JS只用來支持網頁表單數據的驗證，
如今的JS廣泛使用於如下各種場景：
◆ 網頁/網遊/頁遊；
◆ Electron.js框架和V8「JS渲染引擎」，制作桌面程序；
◆ React.js可以制作手機/移動端程序；
◆ Node.js用來作為後端運行環境。
3）為什麽JS非常值得我們學習？
◆ 目前，全世界幾乎所謂的網站都在使用JS；
◆ 幾乎所有現代的瀏覽器都直接原生支持JS；
PC/手機/平板等幾乎所有硬件設備也支持JS；
◆ 作為Web工程師和Java工程師，如果想制作漂亮的網頁；
或者實現高效的動態驗證，JS是必須的工具。
4、JS代碼的怎樣引入？
3種方式：
1）內聯式：
<script type="text/javascript">
...JS代碼
</script>
2）外部式：
格式：
<script src="*.js"></script>
註意：
● 外部JS文件後綴：.js；
● 在JS文件中不需要<script>標簽，直接寫JS代碼即可；
● JS文件不能直接運行，需要嵌入到HTML文檔中執行。
3）嵌入式「將JS代碼嵌入標簽作為屬性；不推薦」：
4）補充·JS在頁面中的位置：
理論上可以將JS代碼置於HTML任意位置，但一般放在head或body部分：
◆ 放在<head>部分：
最常用方式；瀏覽器解析head部分時就會執行JS代碼，
這樣頁面在被載入之前，腳本就已經被載入；
即：這樣可以確保頁面被載入之後，腳本已經準備好被調用；
通常用來放置一些函數代碼；
◆ 放在<body>部分：
在頁面被載入時腳本才會被載入並立即執行；
通常用來放置一些動態生成頁面內容的代碼。
特別註意：
● 因為瀏覽器解析存在順序，所有前面的<script>將會先執行;
● 進行頁面初始化操作的JS代碼應該放在head中，
因為初始化的操作應該在頁面載入之前完成；
● 但如果是通過事件調用的function，那麽位置沒有要求。
5、JavaScript-認識語句和符號：
1）意義：
JS的語句就是給瀏覽器的命名，
這些命名的作用是告訴瀏覽器要做的事情。
2）格式：
每條JS的語句格式：語句;
註意：
● 一行的結束被認為是語句的結束，通常結尾以;作為標記；
● 雖然;也可以不寫，但我們要養成良好的編程習慣。
6、JavaScript-認識註釋符
2種：
1）單行註釋：
// 註釋文字
2）多行註釋：
/* * 註釋文字 * 註釋文字... */
7、JavaScript-變量
1）概念：
◆ 字面意思：可變的量；
◆ 編程角度：變量是用來存儲某種/某些數據值的存儲器；
◆ 簡單來說：變量是一塊內存區域，
用來臨時性存放一些中轉的數據，且存在數據類型。
2）定義：
使用var關鍵字聲明，語法格式：
var 自定義變量名 = 值;
註意：
● 變量雖然也可以不聲明直接使用，但不規範；
● JS是一種弱類型輕量級腳本語言，
不要求強制為變量指定一種類型「不同與Java/C」，
即：JS不嚴格限制變量使用的數據類型，
JS會自動推算它們的類型。
3）命名：
變量名可以任意取名，但要遵循如下命名規則：
◆ 組成：大寫字母/小寫字母、數字、下劃線、美元符$、中文等；
建議：有意義的英文單詞，多個單詞首字母大寫區分；
◆ 變量名嚴禁以數字開頭；
◆ 變量名嚴禁使用JS關鍵字或保留字；
◆ 變量名嚴禁使用特殊符號；
◆ 變量名對大小寫敏感。
4）特殊：
◆ 變量可以同時聲明，以,隔開；
1 var a,b,c;
◆ 變量可以先聲明，再賦值；
1 var a; 2 a = 10;
◆ 變量可以重復聲明和賦值。
1 var a = 10; 2 3 var a = 5;
8、JavaScript-數據類型
1）什麽是數據類型？
2）關於JS的數據類型：
◆ 說明：不同於Java/C等編程語言，強制要求定義變量的數據類型，
否則無法通過編譯，JS為弱類型腳本語言，會智能推斷數據類型，
即：數據類型無需強制定義；
◆ 註意：但是如果完全不定義類型，
有時JS也會幫助我們錯誤的設想一些類型，
從而造成一些不可預知的錯誤，
所以為了創建穩固的程序，
必須掌握JS的數據類型。
3）種類：
2類6種：
----基本數據類型----
◆ 數值型number： 保存整數/浮點數
◆ 字符串型string： 保存單個字符/字符串；‘‘或""
◆ 布爾型boolean： 定義真假；true真或false假
◆ 空類型null： 空對象指針/引用；
一個變量後續需要引用具體對象，。
初始化時建議初始化為null
◆ 不明確型undefined： 一個變量沒有初始化賦值，就是undefined
----對象數據類型----
◆ 對象型object： JS中的對象一組屬性和方法的集合；
具體的關於對象創建方法和特性，後續詳解
4）轉型：
◆ Number()： 將數據值轉為整數，可以用於任何數據類型
◆ parseInt()： 將數據值轉為整數，用的比較多
◆ parseFloat()： 將數據值轉為小數
◆ toString()： 轉字符串
◆ String()： 轉字符串「不確定要轉換的變量的類型/值」
◆ Boolean()： 轉布爾值
9、JavaScript-轉義符
1）什麽是轉義符？
◆ 說明：JS包含很多不能直接輸入的特殊字符，可以使用轉義字符替代
2）轉義符：\n , \t ,...用反斜杠改變其原有的含義
10、JavaScript·運算符
1）概念：
統指能夠對數據進行操作「賦值/運算/比較...」的特殊符號。
2）分類：
7種：
◆ 算術運算符
◆ 賦值運算符
◆ 關系運算符
◆ 邏輯運算符
◆ 位邏輯運算符
◆ 位移運算符
◆ 三目運算符
3）運算符1·算術運算符：
9種：
+ 正號
- 負號
+ 加號
- 減號
* 乘號
/ 除號
% 取余/求模
++ 自增
-- 自減
4）運算符2·賦值運算符：
6種：
=
+=
-=
*=
/=
%=
註：
<op>=表變量初值對<op>=右邊的值或結果進行<op>運算，
運算完成後將最終結果重新賦給變量。
5）運算符3·關系元素符：
7種：
> 大於
< 小於
>= 大於等於
<= 小於等於
== 等於「只比較值」
=== 全等於/恒等於「值和類型都比較」
!= 不等於「也作<>」
註：
返回值一定是boolean值。
6）運算符4·邏輯運算符：
3種：
&& 邏輯與
|| 邏輯或
！ 邏輯非
註：
邏輯運算符只能操作boolean值，返回值也是boolean值。
7）運算符5·位邏輯運算符：
4種：
~ 按位取反
& 按位與
| 按位或
^ 按位異或
註：
● 位邏輯運算符采用邏輯運算符運算思想對二進制數字進行運算；
● 操作數必須是整數；
● 數值在計算機中二進制的補碼形式存放。
------------延伸知識：什麽是原碼、反碼、補碼？------------
Ⅰ、正數「三碼合一」：
原碼：二進制數本身
反碼：二進制數本身
補碼：二進制數本身
Ⅱ、負數「取反加1」：
正數的原碼：二進制數本身
負數的原碼：在正數原碼基礎上，修改最左邊的符號位
註：計算機中0表正號，1表負號
負數的反碼：在負數原碼基礎上，最左邊的符號位不變，其他全變
負數的補碼：在負數反碼基礎上，加1
8）運算符6·位移運算符：
3種：
<< 左移
>> 帶符號右移
>>> 無符號右移
註：
● 操作數必須是整數；
● 運算法則：
<< :高位溢出 -> 舍去;低位空出 -> 直接補0;
>> :低位溢出 -> 舍去;高位空出 -> 補上符號位;
>>> :低位溢出 -> 舍去;高位空出 -> 直接補0。
思考:
為什麽左移只有1種,而右移卻有2種?
9）運算符7·三目運算符：
也稱條件運算符/選擇運算符
1種：
A ? B : C
註：
● A必須是boolean值；
● B和C的類型沒有要求，且可以不一樣。
10）補充·字符串拼接符：
註：
對字符或字符串變量使用+時，並不是對它們進行相加而是拼接。
11、JavaScript·語句
1）什麽叫做程序的流程控制？
2）流程控制的方式：
3種：
◆ 順序結構
◆ 選擇結構
◆ 循環結構
3）流程控制的實現：
JS語句;
4）語句的分類：
6種：
◆ 表達式語句
◆ 空語句
◆ 標號語句
◆ 選擇語句*
◆ 循環語句*
◆ 跳轉語句*
5）語句1·表達式語句：
● 泛指：變量的賦值/運算符的操作/關系的判斷...
● 特點：以;結尾。
6）語句2·空語句：
● 格式：;
● 意義：不執行任何實際操作。
7）語句3·標號語句：
● 格式：一般配合循環語句和跳轉語句一起使用；
在循環語句外使用一個自定義的單詞和一個冒號做一個標記；
後續配合跳轉語句實現指定跳轉。
8）語句4·選擇語句：
2種句式：
--------------if...else if...else條件選擇語句--------------
3種句型：
Ⅰ、
1 if (<boolean>) { 2 復合語句; 3 } 4 ...
5 boolean為true => 執行1次
6 boolean為false => 不執行
Ⅱ、
1 if (<boolean>) { 2 復合語句; 3 } 4 else { 5 復合語句; 6 } 7 8 if滿足 => 執行1次if,else不執行 9 if不滿足 => 直接執行else
Ⅲ、
1 if (<boolean>) { 2 復合語句; 3 } 4 else if (<boolean>) { 5 復合語句; 6 } 7 ... 8 else { 9 復合語句; 10 } 11 12 if滿足 => 執行1次if,else if和else都不執行 13 if不滿足 => 開始判斷else if => 誰判斷誰執行誰終止 14 if和else if都不滿足 => 直接執行else
--------------switch...case開關/分支選擇語句--------------
1 switch (value) { 2 3 case 值1: 4 復合語句; 5 6 case 值2: 7 復合語句; 8 9 ... 10 11 default: 12 復合語句; 13 }
case常量值==switch返回值 -> 執行該case及其下面的所有case和default;
case常量值!=switch返回值 -> 繼續判斷下一個case分支「從上往下依次」;
default分支 -> 所有case不滿足時默認執行。
註：
● switch必須指定常量值或常量表達式；
● case也必須指定常量值或常量表達式，不能接undefined值；
● 所有case分支的值不能相同；
● case分支：1～n個；default分支：0～1個，且位置不固定。
9）語句5·循環語句：
3種：
-----------------while循環「先判斷再執行」-----------------
while (<boolean>) { 復合語句; => 循環體 叠代語句; => ++ -- += -= }
boolean為true => 執行1次循環體 => ... => 條件表達式+叠代決定次數
boolean為false => 結束循環
----------------do...while循環「先執行再判斷再執行-----------------」
do { 復合語句; => 循環體 叠代語句; => ++ -- += -= } while(<boolean>);
執行1次循環體 => boolean為true => ... 條件表達式+叠代決定次數
=> boolean為false => 結束循環
----------------for循環「最常用；窮舉/遍歷」----------------
2種：
Ⅰ、數值型for循環/普通for循環：
for (①變量表達式; ②條件表達式; ③叠代) {
復合語句; => 循環體
}
①變量表達式「執行1次」 => ②條件表達式為true => 執行1次循環體
=> ③叠代 => ②條件表達式... => ②條件表達式+③叠代決定次數
Ⅱ、對象型for循環/加強for循環/for-each循環：
for (①變量 in ②對象) {
復合語句; => 循環體
}
直接使用①變量保存②對象中的每個元素值「指針指向了每個數字值」。
----------------3種循環的總結----------------
Ⅰ、如果循環體只有一條語句，{}可以省略；
Ⅱ、3種循環的選擇：
如果事先知道循環的次數 => for循環
eg：求1 - 3 + 5 - 7 + 9 - 11 + ...的前20項的結果。
如果事先不知道循環的次數 => while循環
eg：求1 - 3 + 5 - 7 + 9 - 11 + ... + n的結果，n讓用戶輸入。
如果需要預先執行1次 => do...while循環
10）語句6·跳轉語句：
● 為什麽JS語法要引入跳轉語句？
使程序的流程跳轉到當前位置以外的部分「方法/switch/循環語句」。
● 句型：
3種：
特點 場景
return語句： 跳出+返回 方法「結尾」
break語句： 跳出+結束 switch/循環語句
continue語句： 跳出+繼續 循環語句
----------------return語句----------------
● 場景：一般寫在函數的結尾；
● 作用：使得主程序的流程從函數中跳出，並返回到調用該函數處。
----------------break語句----------------
● 場景:一般用在switch語句/循環語句內部；
● 作用：從上述語句中跳出，並且不再執行。
----------------continue語句----------------
● 場景:一般用在循環語句內部；
● 作用：從循環語句中跳出，並繼續循環的下一次執行
「結束當前當次循環」。
JavaScript語法基礎(1)