1、js概述
js是javascript的簡稱，作用是實現頁面和用戶的交互
js由瀏覽器解析運行，不需要編譯
js由es基礎語法，bom瀏覽器相關，dom文檔操作相關 三大部分組成
2、html引入js
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>01-HTML引入JS</title><style type="text/css"></style>
</head>
<body>
<!--js 需要引入到html中, 瀏覽器加載的時候會自動解釋運行#js引入到html中的兩種方式1. 內部引入a. 在html中寫一個script標簽 (type="text/javascript" 可以省略)b. 然后在script標簽內編寫js代碼c. script標簽可以放在html中任意位置(推薦放在body內底部)2. 外部引入a.在html外部編寫一個js文件b. 然后通過script標簽的src屬性引入注意: 一個script標簽只能使用一種引入方式-->
<script type="text/javascript">alert("hello world");
</script><script src="js/my.js">/*這樣寫沒效果*//*alert("2333333~") */
</script>
</body>
</html>
小結：
1. <script>標簽可以用在任何位置，建議寫在<body>下面
2.一個<script>標簽只能使用一種引入方式
3、變量聲明
js是弱類型語言，不注重變量的定義，所以在js中定義變量的類型方式如下：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body></body>
<script>/**** es5:* var(聲明任意類型的變量)** es6:* let(和var用法一樣，只不過引入作用域的概念)* const ：聲明常量** typeof(變量) 查看變量的類型*//* var a ;a=1;a = "abc";alert(typeof (a));*//*let a ;a=1;a = "abc";alert(typeof (a));*///let和var的區別// for(let i=0;i<10;i++){// console.log(i);// }//// alert(i);//常量不可更改const a = 10;//a= 11;</script>
</html>
小結：
1.js中使用let 和 var聲明變量，const聲明常量
2.let/const報錯，是因為js版本需要換成es6的版本
4、js的數據類型
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body></body>
<script>/*java 8大基本類型byte short int long float double char booleanjs 數據類型1. string字符串: 可以是單引,也可是雙引2. number數字型: 整數, 小數3. boolean布爾型: true/false4. undefined未定義 (只聲明,不賦值)5.對象類型Object*/let abc = "hello";console.log(typeof(abc));abc=123.2;console.log(typeof(abc));abc=true;console.log(typeof(abc));abc=undefined;console.log(typeof(abc));abc=null;console.log(typeof(abc));abc=new Date();console.log(typeof(abc));</script>
</html>
小結：
1.js中let關鍵字聲明的變量可以接受任意數據類型
2.js中不嚴格校驗數據類型，因為js是弱數據類型的語言
5、js中的運算
1. 算數運算符+ - * / % ++ --
2. 賦值運算符= += -= *= /= %=eg. a+=1 -> a= a+1
3. 比較運算符> < ==(===恒等于) !=(!==不恒等于)
4. 邏輯運算符&& || !(非)
5. 三元（目）運算符條件表達式？為真:為假
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body></body>
<script>/*注意：1.js中的==只比較值的大小，不比較數據類型*/let abc = "123";let num = 123;console.log(abc==num);/*** 2js中任意的非null，非undefined,非零可以理解成true*/if(abc){console.log("條件為真");}/*** 3.js中任意數值都可以參與邏輯運算左邊為真，值看右邊。左邊為假，值看左邊。*/console.log(abc&&num);console.log(0&&num);</script>
</html>
小結：
1.js中的==只比較值的大小，不比較數據類型2.js中任意的非null，非undefined,非零可以理解成true3.js中任意數值都可以參與邏輯運算
6、js中的流程控制
if條件判斷：
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>02-條件判斷</title></head>
<body><script>/*var : es6之前的變量聲明 后來被es6的 let/const替代es6(所有主流瀏覽器都支持)* java中判斷條件是 結果為boolean的表達式* js跟java不同的是: 任意類型都能當成判斷條件** 1. string -> 空串為false,非空串true* 2. number -> 非0為true,0為false* 3. boolean* 4. null -> false* 5. undefined -> false* */let resultif(result){console.log(true)}else{console.log(false)}</script>
</body>
</html>
for循環：
1. 普通for循環for(let i= 0; i<10; i++){需要執行的代碼;}2. 增強for循環for(let element of array){需要執行的代碼;}3. 索引for循環for(let index in array){需要執行的代碼;}
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>03-循環語句</title></head>
<body><script>/** 1. 普通for循環for(let i= 0; i<10; i++){需要執行的代碼;}2. 增強for循環(for of)for(let obj of array){需要執行的代碼;}3. 索引for循環(for in) -> 了解for(let index in array){需要執行的代碼;}* *//** java 數組:* String[] array = {"張三","李四","王五"}* js 數組:* let array = ['張三','李四','王五']** */let array = ['張三','李四','王五']for(let i= 0; i<array.length; i++){console.log(array[i])}for(let element of array){console.log(element); // 數組中的每個元素}for(let index in array){console.log(index); // 數組中的每個元素索引}</script>
</body>
</html>
小結：
注意：
1.js中if條件判斷可以是任意值。任何非零，非null，非undefined理解成true，反之為false
2.for循環中，let關鍵字聲明變量
7、js中的函數
1.普通函數
語法：
function 函數名(參數列表){函數體;[return 返回值;] // 中括號意思表示內容可以省略....
}
代碼：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body></body>
<script>/*function 函數名(參數列表){函數體;[return 返回值;] // 中括號意思表示內容可以省略....}注意：1.函數必須要被調用才能執行。2.js中函數如果需要返回值，直接return即可。3.js中的函數需要傳遞參數，直接寫變量名即可。4.js中不存在函數的重載。只要函數名一致，后面的會覆蓋前面的。5.js中函數的調用只要名字一致即可。在js中，有個隱藏對象，arguments存在了函數的所有參數*/function demo() {console.log("success");}//demo();function demo2() {return 123;}// let num = demo2();// console.log(num);function demo3(a,b) {console.log(a+b);}//demo3(1,2);function demo3() {console.log("這是demo3");}//demo3(1,2);function demo5() {for(let param of arguments){console.log(param);}}demo5(1,2,3,"a");
</script>
</html>
小結：
1.函數的參數直接寫變量名
2.函數如果有返回值，直接寫return，不需要聲明返回值的類型
3.js中函數不存在重載，只需要函數名一致，就可以調用，無論參數列表
4.js函數中有默認變量，arguments，用來接收函數的所有參數。
2.匿名函數
語法：
function (參數列表){函數體;[return 返回值;] // 中括號意思表示內容可以省略....
}
代碼：
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>05-匿名函數</title></head>
<body><script>/** js中的函數格式有兩種* 1. 普通函數* function 函數名(參數列表){* 函數體* }* 2. 匿名函數* 變量 = function(參數列表){* 函數體* }** a. 匿名函數沒有函數名* b. 匿名函數必須給變量賦值** 補充:* 1. 在js,函數是一種特殊的變量類型(對象)!!!* 2. 匿名函數一般是用來注冊事件* */function method01(a,b) {document.write(a + b + "哈哈")}method01(1,2)document.write("<br>")let method02 = function (a,b) {document.write(a + b + "呵呵")}method02(1,5)document.write("<br>")document.write(typeof method02)document.write("<br>")</script>
</body>
</html>
小結：
js中的匿名函數一般都是結合js中的事件一起使用的
8、js中的事件
1.常用事件
場景說明：
用戶輸入完用戶名，離開輸入框的時候，提示不合法。這是當用戶觸發了某個動作的時候，js就會執行相應的功能。這就是事件
小結：
事件(event)：JS可以監聽用戶的行為叫做事件
事件的作用：給事件綁定函數，事件觸發的時候，調用函數，執行函數的功能。
常見事件：
1. 點擊事件：1. onclick：單擊事件2. ondblclick：雙擊事件 (double: 時間間隔很短兩次單擊)2. 焦點事件1. onblur：失去焦點2. onfocus:元素獲得焦點。3. 加載事件：1. onload：頁面加載完成后立即發生。4. 鼠標事件：1. onmousedown 鼠標按鈕被按下。2. onmouseup 鼠標按鍵被松開。3. onmousemove 鼠標被移動。4. onmouseover 鼠標移到某元素之上。5. onmouseout 鼠標從某元素移開。5. 鍵盤事件：1. onkeydown 某個鍵盤按鍵被按下。 2. onkeyup 某個鍵盤按鍵被松開。3. onkeypress 某個鍵盤按鍵被按下并松開。6. 改變事件1. onchange 域的內容被改變。7. 表單事件：1. onsubmit 提交按鈕被點擊。
2.事件綁定
語法：
第一種：<標簽 事件名=函數名>
第二種：標簽對象.事件名=匿名函數
代碼：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><!--this代表的是觸發當前事件的標簽對象，此處就指代按鈕。--><input type="button" value="按鈕" onclick="demo1()" onmouseover="demo4(this)" onmouseout="demo5(this)"><br><input type="text" onblur="demo2()"><br><select onchange="demo3()"><option>中國</option><option>俄羅斯</option><option>美國</option></select><br><input id="btn" type="button" value="按鈕2">
</body>
<script>/*** onclickonbluronchange : 一般作用于下拉列表onsubmitonmouseoveronmouseoutonload事件綁定函數的語法：第一種：<標簽名 事件名="函數名">第二種方式：(開發常用)標簽對象.事件名=匿名函數**/function demo1() {alert("按鈕被點擊了");}function demo2() {alert("輸入框失去焦點了，我要驗證碼輸入框的內容的格式是否正確");}function demo3() {alert("下拉列表的內容改變了");}function demo4(myinput) {//修改按鈕的背景色myinput.style.backgroundColor="blue";}function demo5(myinput) {myinput.style.backgroundColor="green";}//通過標簽的id的屬性值獲取標簽對象let btn = document.getElementById("btn");btn.onclick = function () {alert("第二種綁定事件的方式");}
</script>
</html>
9、js中的內置對象
內置對象: js提供好的對象, 開發者直接可以創建對象,并使用
1.string對象
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>10-字符串</title></head>
<body>
<!--1. 構造字符串對象可以使用a. 雙引號b. 單引號c. 反引號(重音符) 鍵盤左上角 esc下面 (es6字符串模板)經常用在拼接字符串: 避免單雙引手動拼接'字符串${變量名}字符串'2. 字符串常用方法substring(startIndex,endIndex) 提取字符串中兩個指定的索引號之間的字符。 包頭不包尾toLowerCase() 把字符串轉換為小寫。toUpperCase() 把字符串轉換為大寫。split() 把字符串分割為字符串數組。trim() 去掉首尾空格-->
<script type="text/javascript">// ------------ 1. 構造字符串對象可以使用 雙引號,單引號,反引號// let str2 = new String("abc")let str = "abc"let str2 = 'abc'let str3 = `abc`console.log(str);console.log(str2);console.log(str3);let i = 100; // 效果: 小麗體重i斤let str4 = '小麗體重' + i + '斤'console.log(str4);let str5 = `小張體重${i}斤`console.log(str5);// ------------ 2. 字符串常用方法let str6 = "askfdjASDFAJSDLas"var s = str6.toLowerCase();console.log(s)
</script>
</body>
</html>
2.array對象
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>11-數組</title></head>
<body>
<!--數組查詢手冊完成:1. 創建數組a. let array = new Array('a','b','c')b. let array = ['a','b','c'] -> 中括號 (常用)js的數組更像java中的集合,長度可以變化的,元素類型不必一致2. 數組常用方法concat() 連接兩個或更多的數組，并返回結果。push() 向數組的末尾添加一個或更多元素，并返回新的長度。pop() 刪除并返回數組的最后一個元素join() 把數組的所有元素放入一個字符串。元素通過指定的分隔符進行分隔。與 字符串.split()切割為數組 方法相反sort() 對數組的元素進行排序
-->
<script>let array1 = new Array('a','b','c')let array2 = ['d','e','f']console.log(array1);console.log(array2);for (let i = 0; i < array1.length; i++) {console.log(array1[i]);}// 常用方法//concat: 兩個數組拼接, 產生新數組let array3 = array1.concat(array2)console.log(array3);console.log(array1.length)//往數組添加一個元素array1.push(100)console.log(array1.length)console.log(array1)//刪除并返回最后一個元素let s = array1.pop();console.log(array1)console.log(s)//將數組轉成字符串,元素之間用參數中的內容隔開(string的split方法相反)let str = array1.join(",");console.log(str);let arr = str.split(",")console.log(arr);let arr2 = [4, 3, 1, 2]console.log(arr2.sort()) // 默認升序console.log(arr2.sort().reverse()) // 降序var f = function(o1,o2){// return o1-o2; // 升序return o2-o1; // 降序}let arr3 = arr2.sort(f) // 傳參: 參數還是函數類型的變量console.log(arr3);console.log(arra2.sort(function (a,b) {return a-b;}))</script>
</body>
</html>
3.date對象
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>12-日期</title>
</head>
<body>
<!--日期 Date1. 創建對象let date = new Date(); 獲取當前時間時間2. 常用方法toLocaleString() 轉換為本地日期格式的字符串getFullYear() 獲取日期中的yeargetMonth() 獲取日期中的monthgetDate() 獲取日期中的 號getTime() 獲取時間毫秒值(時間原點: 1970年1月1號0時分秒)
--><script>let date = new Date();//Sun May 24 2020 14:38:34 GMT+0800 (中國標準時間:東八區)console.log(date);console.log(date.toLocaleString()); // 轉換為本地日期格式的字符串console.log(date.getFullYear()); // 年 四位console.log(date.getMonth()+1);// 月 范圍：0~11console.log(date.getDate()); // 日console.log(date.getTime()); // 1970年~今毫秒值</script></body>
</html>
4.math對象
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>13-數學</title></head>
<body>
<body>
<!--
數學運算查詢手冊完成1. 四舍五入 round()2. 向下取整 floor() 地板3. 向上取整 ceil() 天花板4. 產生隨機數 random() ：返回 [0,1) 之間的隨機數。[0,1) 左閉右開區間,包含0不包含1-->
<script >let n = 1234.567//1. 四舍五入取整console.log(Math.round(n));//2. 向下取整console.log(Math.floor(n));//3. 向上取整console.log(Math.ceil(n));//4. 產生隨機數for (let i = 0; i < 10 ; i++) {console.log(Math.random());}
</script>
</body>
</html>
5.RegExp正則對象
正則表達式字符含義：
語法：
第一種：let reg = new RegExp("正則表達式"); 此處正則需要\\第二種：let reg = /正則表達式/;api正則對象.test(str);校驗字符串是否滿足正則表達式
代碼：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body></body>
<script>/**第一種：let reg = new RegExp("正則表達式"); 此處正則需要\\第二種：let reg = /正則表達式/;api正則對象.test(str);校驗字符串是否滿足正則表達式注意：js中的正則表達式必須加上^ $ .表示匹配整個字符串。否則表示的是 是否含有*/let username = "admin22555";//用戶名必須在6到8位（數字，字母，下滑線）之間//let regExp = new RegExp("^\\w{6,8}$"); 此種方式中，需要\\let regExp = /^\w{6,8}$/;console.log(regExp.test(username));
</script>
</html>
小結：
1.如果采用new的方式創建正則對象，字符串中需要使用2個\
6.全局函數
我們不需要通過任何對象，可以直接調用的就稱為全局函數
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body></body>
<script>/*** parseInt():解析字符串，返回一個整數**/let str = '100.12px'let number = parseInt(str);console.log(number);/*** encodeURI() 把字符串編碼為 URI。* 杯子 -> %E6%9D%AF%E5%AD%90* decodeURI() 解碼某個編碼的 URI 。* %E6%9D%AF%E5%AD%90 -> 杯子**/let str3 = '杯子'var result = encodeURI(str3); //編碼console.log(result);console.log(decodeURI(result)) //解碼
</script>
</html>
(圖形化界面手把手教學))
)
