序言

1.JavaScript學習方法：
編程思維：更高效的解決問題、更全面的思考、更清晰的邏輯
布魯姆教育將思維學習分六個層次：
記憶、理解、應用、分析、評價、創造


2.什么是JS：
JavaScript 直譯式、動態型別、弱型別、基于原型的腳本語言
js跨平臺 ==> windows linux ios 安卓 …


3.JS發展史：
==>1994年，網景公司(Netscape)發布了Navigator瀏覽器0.9版
==>發明一種全新的語言，
==> liveScript ==> javaScript ==> ECMAscript

• 1995年Sun公司將Oak語言改名為Java，正式向市場推出，Sun公司大肆宣傳，許諾這種語言可以"一次撰寫，到處運 行"(Write Once, Run Anywhere)，它看上去很可能成為未來的主宰，
• 網景公司動了心，決定與Sun公司結成聯盟
• 34歲的系統程式員Brendan Eich登場了，1995年4月，網景公司錄用了他,他只用10天時間就把Javascript設計出來了，（多型語言）
  
  

4.JS組成部分：

ECMAScript語法
DOM檔案物件模型(Document Object Model)
BOM瀏覽器物件模型(Browser Object Model)

一、JS用法

1.js引入方式，內嵌式

用法：內嵌式的 js 代碼會在頁面打開的時候直接觸發
代碼如下（示例）：

<!-- 在 html 頁面書寫一個script 標簽，標簽內部書寫 js 代碼 -->

<script type="text/javascript">
//type 書寫值可寫可不寫
	alert("這是一個彈窗");
</script>

<!--
scirpt標簽可以放在 head 里面也可以放在 body 里面
 -->

2.js引入方式，行內式

用法：寫在標簽上的 js 代碼需要依靠事件（行為）來觸發
代碼如下（示例）：

<!-- 寫在 a 標簽的 href 屬性上 -->
<a href="javascript:alert('這是一個彈窗');">點擊試試</a>

<!-- 寫在其他元素上 -->
<div onclick="alert('這是一個彈窗')">點擊試試</div>

<!--
onclick(點擊事件)：當點擊元素的時候執行后面的 js 代碼
-->

3.js引入方式，外鏈式

用法：新建一個 .js 后綴的檔案，在檔案里書寫 js 代碼，通過script標簽的src引入外部js后綴的檔案
代碼如下（示例）：

//我是 index.js 檔案
alert("這是一個彈窗");

<!--很多html頁面都可以呼叫js4.js頁面-->
<script src="../js/js4.js" type="text/javascript" charset="utf-8">

二、JS除錯與注釋

1.除錯方法

代碼如下（示例）：

alert(“123”) 	// 彈出提示框輸出
console.log(”123“)  // 在控制臺列印：
document.write('123')		//在頁面中輸出<不推薦使用>

2.除錯代碼的流程

1. 看是否有報錯
2. 單詞錯誤
3. 輸出除錯各種資料（變數）
4. 思考怎么解決（查看比較，百度，看檔案）

3.關于注釋

1. 最討厭別人讓我寫注釋
2. 最討厭別人不寫注釋
   代碼如下（示例）：

// 單行注釋，注釋內容不可以換行  ctrl+/

/* 多行注釋  alt+shift+a			(Visual Studio Code)
注釋內容
可以換行
 */

/**
* 檔案注釋
* 說明類、方法的引數及使用方式，，，
* 功能介紹
*/

三、JS變數

一個變數名只能儲存一個值
當再次給一個變數賦值的時候，前面一次的值就會被覆寫掉
變數名嚴格區分大小寫
代碼如下（示例）：

var abc = 123
// 把123這個資料賦值給變數abc

1.使用關鍵字var

var str = 'abc'; 	// 顯式宣告變數

2.宣告變數可以不給初始值

var num 			// 顯式宣告變數

3.宣告變數可以不使用關鍵字var

age = 18 			// 隱式宣告變數
console.log( age )	// 18  參考變數

4.但是不允許直接使用一個未宣告的變數，會報錯

console.log( word );
// Uncaught ReferenceError: hehe is not defined   at 4-變數.html:25
// 未捕獲     參考錯誤     ：word 未定義 (報文)           報錯位置

5.識別符號（變數、函式、屬性、引數，你自己命名的東西）命名規范：

/*
    1.第一個字符不能是數字，可以字母、下劃線、美元符號$
    2.命名中不能包含空格
    3.從第二個字符開始可以是數字、字母、下劃線、美元符號$
    4.識別符號命名要語意化（有語意有含義）非必須
    5.不可以使用關鍵字和保留字命名
*/
var var = 123
console.log( var )
//Uncaught SyntaxError: Unexpected token 'var'    4-變數.html:37 
//            語法錯誤

6.語意化命名規范：

var userAgeNumber = 23		//駝峰命名法
var UserAgeNumber = 23		//帕斯卡命名法
var user_age_number = 23		//下劃線命名法

var num_user_age = 23
var nUserAge = 23			//匈牙利命名法

四、JS資料型別

• ES3 有 5 種基本資料型別：number、null、undefined、boolean、string；1 種復雜資料型別 object，ES6+ 后面新增了兩種基本資料型別：Symbol, Bigint，如果把函式 function 也算作一種資料型別，就是 9 種，

1.number數字型別

• 一切數字都是數值型別（包括二進制、十進制、十六進制）
• NaN：非數字型別
• 正數、負數、整數、浮點數、NaN 都叫 number
• NaN ： Not a Number 非數字，代表錯誤的計算結果
  NaN特性：

1. 任何與NaN進行計算結果都是NaN

console.log( 1 + NaN )// NaN
console.log( 1 - NaN )// NaN

2. NaN與任何值都不相等，包括它自己也不相等

console.log( NaN === NaN )// false

isNaN() 判斷一個資料是否為NaN，回傳布林值

console.log( isNaN(NaN) )		//true
console.log( isNaN(123-'a') )		//true
console.log( isNaN(123) )		//false
console.log( isNaN('123') )		//false
console.log( isNaN('a123') )	//true
console.log( isNaN( Number('123') ) )
console.log( isNaN( Number('a123') ) )
console.log( Number('123') )	//123
console.log( Number('a123') )	//NaN

isNaN 判斷一個值是否為純數字字串

var qq = '2437325196'
console.log( isNaN(qq) )

小數加減出現的系統bug

console.log( 0.1 + 0.2 )// 0.30000000000000004
console.log( 0.1 + 0.7 )// 0.7999999999999999

產生原因：

10進制小數轉2進制：小數位乘以2，取整數部分，如果還有小數部分繼續
于是出現了無限回圈小數

解決方案：轉成整數計數

var val = 0.1+0.2;
//轉成整數計數，轉成字串輸出
var price = (0.1*100 + 0.2*100)/100
//將數字轉成字串，并保留2位小數
var v = price.toFixed(2)
console.log( v )// '0.30'

Number型別常用的兩種決議方法：

1. parseInt 決議整數

從左往右決議，如果第一個字符是非數字，則回傳NaN
從左往右決議，一直決議到非數字，決議結束，并回傳前面決議到的整數

console.log( parseInt(23.45) )// 23
console.log( parseInt('23.45') )// 23
console.log( parseInt('200px') )// 200
console.log( parseInt('a200px') )// NaN

2. parseFloat 決議浮點數，決議規則基本同上

console.log( parseFloat(23.45) )// 23.45
console.log( parseFloat('23.45') )// 23.45
console.log( parseFloat('200px') )// 200
console.log( parseFloat('a200px') )// NaN

2.string字串（用雙引號或單引號括起來的都會被決議成字串）

var str1 = '123'
var str2 = "abc"
var str3 = '你好'
var str4 = 'str1'

//變數.toString()中null 和 undefined 資料型別不能使用
//String()所有資料型別都可以使用
//使用加法運算子
//在 JS 里面，+ 由兩個含義
//字串拼接：只要+任何一邊是字串，就會進行字串拼接
//加法運算：只有+兩邊都是數字的時候，才會進行數學運算

3.boolean 布林值

var bool1 = true;
var bool2 = false;

//在 js 中，只有''、0、null、undefined、NaN，這些是false，其余都是true

4.undefined 值未定義

var a
var b = undefined
console.log( a ) // undefined
console.log( b ) // undefined

5.null 空值/空物件的參考

var obj = null
obj = {}

6.Object 物件型別 （Array {} function）

Array陣列

var arr = [1,2,3]//陣列

物件{}

var obj = {key:'value'}// 鍵值對

函式

var fun = function (){}

typeof 運算子(回傳運算資料的資料型別)，回傳有6種：

console.log( typeof 123 )// 'number'
console.log( typeof 'abc' )// 'string'
console.log( typeof true )// 'boolean'
console.log( typeof undefined )// 'undefined'
console.log( typeof [1,2,3] )// 'object'
console.log( typeof {a:123} )// 'object'
console.log( typeof function (){} )// 'function'  ECMA規定
console.log( typeof null )// 'object'

五、運算子

運算子

1. 賦值運算子：= += -= *= /= %=

var abc = 8
abc += 2		
//等價于：abc = abc + 2

abc %= 3
//等價于：abc = abc%3
//其余同理

2. 算術運算子：+ - * / %

易錯點：
//一個小的數模大的數，余小的數
2%7 == 2              
(-2)%7 == -2          
2%(-7) == 2           
(-2)%(-7) == -2       

//余數的正負號取決于前面數字的正負號
7%4 == 3
(-7)%4 == -3
(7)%(-4) == 3
(-7)%(-4) == -3

3. 關系運算子（比較運算子），始侄訓傳布林值

等于: ==

只比較值是否相等，不考慮資料型別

console.log( 2 == '2' )		//true

全等: ===

既要值相等也要資料型別相等（對于參考型別則比較記憶體地址）

console.log( 2 === '2' )// false
console.log( {} === {} )//false

比較規則

// 兩個數字比較，正常比較大小
console.log( 2 > 3 )// false

// 一個數字和純數字字串比較，把純數字字串轉成number再比較
console.log( 2 > '12' )// false

// 兩個字串比較，先比較第一個字符的ASCII碼值，不能區分大小再比較后一位
console.log( '3' > '21' )//true
console.log( 'abc' > 'abd' )//false
0 -- 48   a -- 97   A -- 65

// 非正常比較都回傳false
// 一個數字和非純數字字串無法比較，回傳false
console.log( 2 > 'a12' )// false
console.log( 2 < 'a12' )// false

自增（++）自減（–）運算子

var i = 1
var num = 2
num = i++ 			// ++后置，先取值，再自增
num = ++i 			// ++前置，先自增，再取值
console.log( num )	// 1  2


var k = 0
console.log( k++ + ++k + k * 2 + k++ )// 8
//            0  +  2  + 2 * 2 + 2

邏輯運算子:與 &&、或 ||、 非 !

回傳值：布林值

//&&運算子
console.log( true&&true )// true
console.log( false&&true )// false
console.log( true&&false )// false
console.log( false&&false )// false
console.log( true||true )//true
console.log( true||false )//true
console.log( false||true )//true
console.log( false||false )//false
console.log( !true )//false
console.log( !false )//true

//短路操作:如果判斷前一個結果就能決定整體的結果，
//那么程式不會去執行后續的陳述句
//符號左邊必須為true并且右邊也是true，才會回傳true
//只要有一邊不是true，那么就會回傳false
var a = 3
var b = 4
var c = 5
a>b&&(c=6)
console.log( c )//5
//a>b為false,邏輯運算式的結果已經確定（false），所以不會執行后續的賦值陳述句：(c=6)
a<b&&(c=6)
console.log( c )//6

a<b&&console.log(123)
//等同于：
if (a<b) {
  console.log(123)
}



//||運算子
a>b||(c=7)
console.log(c)//7

a<b||(c=7)
console.log(c)//5
console.log( 0||2 )//2
console.log( 1||2 )//1
console.log( a<b||2 )//true
console.log( a>b||2 )//2
//符號左邊為true或者右邊為true，都會回傳true
//只有兩邊都是false，那么就會回傳false




//!運算子
//進行 取反 的運算
//本身是true的，會變成false
//本身是false的，會變成true
!true   //false
!false   //true

三元運算子（三目運算子）

格式：(邏輯運算式) ? (為true執行此代碼) : (為false執行此代碼)

逗號運算子: ,

var a = 1, b = 2, c = 3
console.log( a,b,c )// 1 2 3
console.log( (a,b,c) )// 3 回傳一個整體的最后一個值

var num = 0
for( var i = 0,v = 0; i < 5,v < 9; i++,v++){
  num = i + v// 8+8
}
console.log( num )// 16

console.log( (2>3,4<5) )
//等價于
console.log( (2>3||4<5) )

注意：優先級的使用

結合優先級從高到低
1. () 優先級最高
2 .一元(單目)運算子:++,–,!
3 .算術運算子: 先*,/,% 再+,-
4. 關系運算子:>,>=,<,<=
5 .相等運算子:== === != !==
6 .邏輯運算子:先&&，再||
7 .賦值運算子
口訣:單目算術位關系，邏輯三目后賦值