JavaScript跟Java沒有半毛錢關系，純粹是為了蹭當時紅極一時java的熱度.
<!-- 關鍵代碼 -->
<!-- 給div標簽添加點擊事件的交互邏輯：彈出文本提示框 -->
<div onclick="alert('點擊我完成頁面交互')">點我</div>
JS代碼書寫在script標簽中，script標簽可以出現在頁面中的任意位置，建議放在body標簽的最后(html代碼
是自上而下進行解析加載，放在body標簽的最下方，會保證頁面所有標簽都加載完畢，html再去加載js文件，
那么js腳步文件就會更好的控制頁面標簽的人機交互了)，采用的是JS編程語言的語法 <!-- 關鍵代碼 --> <!-- 頁面被加載打開時，就會觸發事件的交互邏輯：彈出文本提示框 --> <body> <!-- body標簽中的所有子標簽位置 --> <!-- script標簽出現在body標簽的最下方 --> <script> alert('該頁面被加載！') </script> </body>
JS代碼書在外部js文件中，在html頁面中用script標簽引入js文件（建議在body標簽最下方引入，理由同上） #1.js文件夾下的my.js alert('外聯式js文件彈出框') #2.根目錄下的first.html <!-- 關鍵代碼 --> <!-- 頁面被加載打開時，就會觸發事件的交互邏輯：彈出文本提示框 --> <body> <!-- body標簽中的所有子標簽位置 --> <!-- script標簽出現在body標簽的最下方 --> <script src="js/my.js"> /* 不要在此寫JS代碼，原因是用來引入外部js文件的script標簽，標簽內部書寫的JS代碼不在起作用 */ </script> </body>
總結：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#dd {
width: 200px;
height: 200px;
background-color: orange;
}
</style>
</head>
<body>
<!-- 點擊彈出：hello js -->
<!--行間式: 寫在標簽的 事件屬性 中-->
<!--<div id="dd" onclick="alert('hello js')"></div>-->
<div id="dd"></div>
</body>
<!--內聯式：寫在script標簽中，script標簽應該出現在body的最下方(可以將其放在body結束后)-->
<script>
dd.onclick = function () {
alert('hello js')
}
</script>
<!--外聯式：通過script標簽的src屬性，鏈接外部js文件-->
<script src="js/js導入.js">
// 一個script標簽擁有src引入外部js文件后，就相當於單標簽，所以內部的代碼會被自動屏蔽
dd.onclick = function () { // 不會起作用
alert(666)
}
</script>
</html>
#1.js注釋： 單行注釋 /單行內容/ 多行注釋 /多行內容 /
#2.js語言是以分號(;)作為語句的結束符
一般情況下不加分號也不會報錯
ECMA6最新語法 #1.變量關鍵字var與let的區別： var作用的是全局 let作業的是局部，可以保證變量的不被隨意的修改（指的是是所聲明的變量只在let命令所在的代碼塊內有效。例如：for循環的計數器就很適合使用let命令。） 例： var/let是關鍵詞、num是變量名、=為賦值符、10為變量值、;為JS語言語句的結束標識符 var num = 10;
for (let i=0;i<arr.length;i++){...}
#2.在js中 是有真正意義上的常量，聲明常量關鍵字const
const PI = 3.14; (常量聲明時必須賦初值，且一旦賦值，不可改變)
#3.變量的命名規范
1. 由字母，數字，_，$組成，不能以數字開頭（可以包含中文字符） 2. 區分大小寫 3. 不能出現關鍵字及保留字
#4.注意
變量名是區分大小寫的。
推薦使用駝峰式命名規則。
保留字不能用做變量名。
js中將整型和浮點型統稱為數值類型
var num = 10; const PI = 3.14; console.log(typeof(num), num); // 結果：number 10 NaN：是數值類型但是表示的意思是不是一個數字
#2.字符串類型：string(單雙引號定義)
var s1 = "雙引號可以表示字符串"; var s2 = '單引號可以表示字符串'; console.log(typeof(s1), s1); // 結果：string 雙引號可以表示字符串
// 字符串 // 1）定義： let ss = '123abc呵呵'; let res; console.log(ss); // 2）索引 res = ss[0]; console.log(res); // 3）切片 res = ss.slice(3, 6); console.log(res); // 4）替換 res = ss.replace('abc', 'ABC'); console.log(res); // 5）拆分: string => array res = ss.split(''); console.log(res); // 6) 拼接 res = ss + ss; console.log(res); // 7) 迭代 for (s of ss) { console.log(s); }
#1.string.slice(start, stop)和string.substring(start, stop)： 兩者的相同點： 如果start等於end，返回空字符串 如果stop參數省略，則取到字符串末 如果某個參數超過string的長度，這個參數會被替換為string的長度 substirng()的特點： 如果 start > stop ，start和stop將被交換 如果參數是負數或者不是數字，將會被0替換 silce()的特點： 如果 start > stop 不會交換兩者 如果start小於0，則切割從字符串末尾往前數的第abs(start)個的字符開始(包括該位置的字符) 如果stop小於0，則切割在從字符串末尾往前數的第abs(stop)個字符結束(不包含該位置字符) #2.字符串拼接推薦使用加號 #3.萬能占位符：${變量名}
#字符串和數值類型補充
parseInt("123") // 返回123
parseInt("ABC") // 返回NaN,NaN屬性是代表非數字值的特殊值。該屬性用於指示某個值不是數字。
parseFloat("123.456") // 返回123.456
#3.數組（類似於python中的列表）
let arr = [1, 2, 3]; console.log(arr, typeof(arr)); [1,2,3] 'object'
let arr = [3, 1, 2, 4, 5]; res = arr.join(''); // 默認, | '' | '自定義符合' console.log(res); // 迭代 for (a of arr) { console.log(a); } // 排序 // arr.sort(); // arr.reverse(); // console.log(arr); // 增刪改查 console.log(arr[4]); arr[4] = 555; console.log(arr[4]); arr.push(100); // 尾增 arr.unshift(200); // 頭增 console.log(arr); arr.pop(); // 尾刪 arr.shift(); // 頭增 console.log(arr); // 重點：增刪改 console.log(arr); // 開始操作的索引 操作的長度 操作后的結果(不定長0~n個) arr.splice(2, 1, 222, 333, 444); console.log(arr); // 不定長參數 function f(...a) { console.log(a) } f(1, 2, 3, 4, 5, 6)
遍歷數組元素 var a = [10, 20, 30, 40]; for (var i=0;i<a.length;i++) { console.log(a[i]); }
#4.對象類型（相當於dict所有的key必須是字符串）
// 增刪改查 dic = {}; // 增 dic['name'] = 'owen'; dic.age = 18; // 改 dic.age = 20; // 對象的刪除 delete dic.age; console.log(dic); // 查 console.log(dic.name); // 字典的迭代用 for in for (k in dic) { console.log(k); }
#data對象
#創建對象 //方法1：不指定參數 var d1 = new Date(); console.log(d1.toLocaleString()); //方法2：參數為日期字符串 var d2 = new Date("2004/3/20 11:12"); console.log(d2.toLocaleString()); var d3 = new Date("04/03/20 11:12"); console.log(d3.toLocaleString()); //方法3：參數為毫秒數 var d3 = new Date(5000); console.log(d3.toLocaleString()); console.log(d3.toUTCString()); //方法4：參數為年月日小時分鍾秒毫秒 var d4 = new Date(2004,2,20,11,12,0,300); console.log(d4.toLocaleString()); //毫秒並不直接顯示 #常用方法 var d = new Date(); //getDate() 獲取日 //getDay () 獲取星期 //getMonth () 獲取月（0-11） //getFullYear () 獲取完整年份 //getYear () 獲取年 //getHours () 獲取小時 //getMinutes () 獲取分鍾 //getSeconds () 獲取秒 //getMilliseconds () 獲取毫秒 //getTime () 返回累計毫秒數(從1970/1/1午夜)
#5.布爾類型（小寫：true和false）
""(空字符串)、0、null、undefined、NaN都是false。 var b1 = true; var b2 = false; console.log(typeof(b1), b1); // 結果：boolean true null和undefined區別： null表示值是空，一般在需要指定或清空一個變量時才會使用，如 name=null; undefined表示當聲明一個變量但未初始化時，該變量的默認值是undefined。還有就是函數無明確的返回值時，返回的也是undefined。 ull表示變量的值是空(null可以手動清空一個變量的值，使得該變量變為object類型，值為null)，undefined則表示只聲明了變量，但還沒有賦值。
注意：
#2.比較運算符
注意
let aaa = 123; let bbb = '123'; console.log(aaa == bbb); // == 只做數據比較 true console.log(aaa === bbb); // === 做數據與類型比較 false
//上面這張情況出現的原因在於JS是一門弱類型語言(會自動轉換數據類型)，所以當你用兩個等號進行比較時，JS內部會自動先將
//數值類型的1轉換成字符串類型的1再進行比較，所以我們以后寫JS涉及到比較時盡量用三等號來強制限制類型，防止判斷錯誤
#3.邏輯運算符
#4.三目運算符
/ 得到結果 = 條件表達式 ? 條件成立結果 1: 條件不成立結果2; // 語法規則：條件表達式成立，將結果1賦值給結果，反正賦值結果2
#1.基礎語法 if (條件表達式) { 代碼塊; } // 1. 當條件表達式結果為true，會執行代碼塊；反之不執行 // 2. 條件表達式可以為普通表達式 // 3. 0、undefined、null、""、NaN為假，其他均為真 #2.復雜語法 // 1.雙分支 if (表達式1) { 代碼塊1; } else { 代碼塊2; } // 2.多分支 if (表達式1) { } else if (表達式2) { } ... else if (表達式2) { } else { } 事例1： var a = 10; if (a > 5){ console.log("yes"); }else { console.log("no"); } 事例2： var a = 10; if (a > 5){ console.log("a > 5"); }else if (a < 5) { console.log("a < 5"); }else { console.log("a = 5"); }
#if嵌套 if (表達式1) { if (表達式2) { } }
var day = new Date().getDay(); switch (day) { case 0: console.log("Sunday"); break; case 1: console.log("Monday"); break; default: console.log("...") } switch中的case子句通常都會加break語句，否則程序會繼續執行后續case中的語句。
for (循環變量①; 條件表達式②; 循環變量增量③) { 代碼塊④; } // for循環執行的順序：① ②④③ ... ②④③ ②，入口為①，出口為②，②④③就是循環過程 // 案例： for (var i = 0; i < 5; i++) { console.log(i); } // 結果： 0 1 2 3 4
#for…in迭代器
var arr = [1, 2, 3, 4, 5] for (num in arr) { console.log(num); } // 結果： 0 1 2 3 4 // 1. break：結束本層循環 // 2. continue：結束本次循環進入下一次循環
while (條件表達式) { 代碼塊; } // 條件滿足執行代碼塊，條件不滿足跳出循環 // 案例： var i = 0; while (i < 5) { console.log(i); i++; } // 結果： 0 1 2 3 4
⑦ 函數
#1.有參無參函數定義及調用 function 函數名 (參數列表) { 函數體; } function 函數名 () { 函數體; } #調用 函數名(參數列表) #2.匿名函數及調用 function () { // 沒有名字的函數就是匿名函數 } // 需求需要一個函數地址，就可以傳入一個匿名函數 function fn100(fn) { fn() } fn100( function () { console.log('傳進去的匿名函數') } ) // 用變量接收匿名函數：第二種聲明函數的方式 let f = function (a, b) { console.log('ffffffffff') }; f(); #3.立即調用函數 // 立即執行函數 書寫立即執行的函數，首先先寫兩個括號()()這樣防止書寫混亂 (function(a, b){ return a + b; })(1, 2);
#函數參數
// 個數不需要統一 function fn (a, b, c) { console.log(a, b, c) // 結果：100 undefined undefined } fn(100); // 並未給b，c傳值 function fn (a) { console.log(a) // 結果：100 } fn(100, 200, 300); // 200，300被丟棄 // 可以任意位置具有默認值 function fn (a, b=20, c, d=40) { console.log(a, b, c, d) // 100 200 300 40 } fn(100, 200, 300); // 一定按照先后順序依次傳參 // 通過...語法接收多個值 function fn (a, ...b) { console.log(a, b) // 100 [200 300] } fn(100, 200, 300) // ...變量必須出現在參數列表最后
# 函數返回值（函數只能返回一個值，如果要返回多個值，只能將其放在數組或對象中返回。）
function fn () { return 返回值; } // 1.可以空return操作，用來結束函數 // 2.返回值可以為任意js類型數據 // 3.函數最多只能擁有一個返回值
#作用域（首先在函數內部查找變量，找不到則到外層函數查找，逐步找到最外層。與python作用域關系查找一模一樣！）
函數中的arguments參數
function add(a,b){ console.log(a+b); console.log(arguments.length); console.log(arguments[0]);//arguments相當於將出傳入的參數全部包含，這里取得就是第一個元素1 } add(1,2)
ES6中允許使用“箭頭”（=>）定義函數。
var f = v => v; // 等同於 var f = function(v){ return v; } var f = () => 5; // 等同於 var f = function(){return 5}; var sum = (num1, num2) => num1 + num2; // 等同於 var sum = function(num1, num2){ return num1 + num2; //這里的return只能返回一個值，如果想返回多個值需要自己手動給他們包一個數組或對象中 }
JSON對象（序列化和反序列化）
var str1 = '{"name": "Alex", "age": 18}'; var obj1 = {"name": "Alex", "age": 18}; // JSON字符串轉換成對象 var obj = JSON.parse(str1); // 對象轉換成JSON字符串 var str = JSON.stringify(obj1);
RegExp對象（正則）
// 定義正則表達式兩種方式 var reg1 = new RegExp("^[a-zA-Z][a-zA-Z0-9]{5,11}"); var reg2 = /^[a-zA-Z][a-zA-Z0-9]{5,9}$/; // 正則校驗數據 reg1.test('jason666') reg2.test('jason666') /*第一個注意事項，正則表達式中不能有空格*/ // 全局匹配 var s1 = 'egondsb dsb dsb'; s1.match(/s/) s1.match(/s/g) var reg2 = /^[a-zA-Z][a-zA-Z0-9]{5,9}$/g reg2.test('egondsb'); reg2.test('egondsb'); reg2.lastIndex; /*第二個注意事項，全局匹配時有一個lastIndex屬性*/ // 校驗時不傳參數 var reg2 = /^[a-zA-Z][a-zA-Z0-9]{5,9}$/ reg2.test(); reg2.test(undefined); var reg3 = /undefined/; reg3.test();
