javascript初探-day06 · javaWEB

>### A.今天學什么？ #### 1.javascript了解 - ##### 1.1javascript輸出方式 - console.log(); --- console控制臺輸出 - alert(); --- alert彈窗輸出 ``` // script // 1.輸出方式 // console 輸出 // console.log("hello world"); // 彈窗輸出 alert("hello world"); ``` - ##### 1.2變量的聲明 - javascript是弱類型語言，聲明變量時，不需要聲明它的類型 - 1.2.1先聲明再賦值 - 1.2.2聲明的同時賦值 ``` // script // 2.變量的聲明 // javascript是弱類型語言，聲明變量時，不需要聲明它的類型 var a = 10; // 2.1先聲明再賦值 var b; b = 10; // 2.2聲明的同時賦值 var c = 10; ``` - ##### 1.3JavaScript的聲明提前 - js在運行的時候將所有聲明的變量，集中到作用域的頂部創建，賦值留在原地;ES6不支持聲明提前 ``` // script // 3.聲明提前 // js在運行的時候將所有聲明的變量，集中到作用域的頂部創建，賦值留在原地 // ES6不支持聲明提前 console.log(d); var d = 10; /*console.log(d1); ES6 會報錯 let d1 = 10;*/ // 3.1js中如果一個變量只聲明沒有賦值，那么輸出undefined var e; console.log(e); ``` - ##### 1.4基本類型 - number - String - boolean - undefined - 等等 - 如何判斷變量的類型 -- typeof ``` // script // 4.基本類型 // 4.1number var num = 10; var num2 = 10.2; // 4.2如何判斷一個變量的類型 typeof console.log(typeof num); // 4.3 String var str = "hello world"; console.log(typeof str); // 4.4 boolean var boolean = true; console.log(typeof boolean); // 4.5 undefined var un; console.log(typeof un); ``` - ##### 1.5數組 - 數組的聲明 -- var list = [1,2,3]; - 讀取數組的值 -- 通過下標，從0開始 - 獲取數組長度 length - 像數組尾部添加一個值 list[list.length] = xx; ``` // script // 5.數組 // 5.1聲明一個數組 var list = [1,2,3]; // 5.2讀取數組的值--通過下標，從0開始和java一樣 console.log(list[1]); // 5.3獲取數組長度 -- length console.log(list.length); // 5.4向數組的尾部添加一個值 list[list.length] = 4; console.log(list); console.log(list.length); ``` - ##### 1.6對象 - 創建對象 var obj = { 屬性:屬性值 } - 獲取對象屬性 obj.屬性名 - 給對象添加屬性 obj.新屬性名 = 屬性值 ``` // script // 6.對象 // 6.1創建對象 var obj = { name:"依然", age:21 }; // 6.2讀取對象屬性，語法：obj.屬性名 console.log(obj.name); // 6.3給對象添加屬性 obj.sex = "男"; console.log(obj.sex); ``` - ##### 1.7函數 - 創建函數 function 函數名(參數){函數體} - 調用函數函數名() - 有返回值的函數直接在函數體中return ``` // script // 7.函數 // function 函數名(){} // 7.1沒有返回值的函數 function funcName1() { console.log("沒有返回值的函數") } // 7.2調用函數 funcName1(); // 7.2有返回值的函數 function funcName2() { return 10000; } var salary = funcName2(); console.log(salary); ``` - ##### 1.8全局變量和局部變量 - 全局變量--在函數外聲明的變量 - 局部變量--在函數內聲明的變量 - 函數外無法訪問到函數內聲明的變量 ``` // script // 8.全局變量和局部變量 // 全局變量-在函數外聲明的變量 var var1 = 10; function fn() { // 局部變量-在函數內聲明的變量 var var2 = 20; } // console.log(var2); 報錯 ``` - ##### 1.9數據類型的轉換 - 1.9.1number的強制轉換 - String boolean --> 數字：Number() - true-->1，false-->0 - NaN不是一個數字 - Number()這個方法只能識別純數字的字符串 - 1.9.2自動轉換 - 算術計算中的自動轉換，+ - * / %等 - 在算數計算中，js會將參與計算的值先轉換為number再進行計算 - 底層：var jc = Number(ja) - Number(jb); - 特殊情況：在 + 運算中，倘若有一邊為字符串，則結果為字符串拼接 ``` // script // 9.數據類型的轉換 // 9.1 number的強制轉換 // String boolean --> 數字：Number() // true-->1，false-->0 // NaN不是一個數字 // Number()這個方法只能識別純數字的字符串 var str1 = "10"; var boolean1 = true; console.log(typeof Number(str1)); console.log(Number(boolean1)); console.log(Number(false)); console.log(Number("a")); // NaN // 9.2自動轉換 // 算術計算中的自動轉換，+ - * / %等 // 在算數計算中，js會將參與計算的值先轉換為number再進行計算 var ja = "10"; var jb = true; var jc= ja-jb; // ja被自動轉換為10 true被自動轉換為1 // 底層 var jc = Number(ja) - Number(jb); console.log(jc); // 特殊：在 + 運算中，倘若有一邊為字符串，則結果為字符串拼接 console.log(ja+jb); // "10true" ``` - ##### 1.10比較運算的自動轉換 - 默認先將所有的類型轉為數字類型，再進行比較 - 比較運算的結果返回boolean ``` // script // 10.比較運算的自動轉換 // 默認先將所有的類型轉為數字類型，再進行比較 // 比較運算的結果返回boolean console.log("10">true); // true // 底層 Number("10") > Number(true) ``` - ##### 1.11字符串轉number型-parseInt、parsFloat - 只能轉數字開頭的字符串 - parseInt -- 將字符串轉為整數，小數點后省略，而不會約等 - parseFloat -- 將字符串轉為浮點型 ``` // script // 11.字符串轉number型-parseInt、parsFloat // 只能轉數字開頭的字符串 // parseInt -- 將字符串轉為整數，小數點后省略，而不會約等 console.log(parseInt("12px")); // 12 console.log(parseInt("12.53px")); // 12 console.log(parseInt("p33")); // NaN // parseFloat -- 將字符串轉為浮點型 console.log(parseFloat("12px")); // 12 console.log(parseFloat("12.53px")); // 12.53 console.log(parseFloat("p33")); // NaN ``` - ##### 1.12將任意類型轉為字符串類型 - 方法一：.toString() - 方法二：String() ``` // script // 12.將任意類型轉為字符串類型 // 方法一：.toString() var toStr = 10; console.log(toStr.toString()); console.log(typeof toStr.toString()); // 方法二：String() console.log(typeof String(toStr)); ``` - ##### 1.13將任意類型轉為boolean型 - 語法：Boolean() - 在js中只有五種值為false，其他都為true - "",NaN,0,undefined,null ``` // script // 13.將任意類型轉為boolean型 // 語法：Boolean() // 在js中只有五種值為false，其他都為true： "",NaN,0,undefined,null var toBlist = [1,2,3]; var toBobj = {name:"依然"}; console.log(Boolean(toBlist)); // true console.log(Boolean(toBobj)); // true console.log(Boolean("")); // false console.log(Boolean(NaN)); // false ``` - ##### 1.14NaN不等于不大于不小于任何值，包括自己 - isNaN()，判斷一個變量是否為NaN - ##### 1.15++ -- - ++在后，先運算，后自增 - ++在前，先自增，后運算 ``` // script // 15.++ -- // ++在后，先運算，后自增 // ++在前，先自增，后運算 var a15 = 10; var b15 = a15++ +1; console.log(a15); // 11 console.log(b15); // 11 ``` - ##### 1.16 if判斷 - 還有switch等，和java一樣 ``` // script // 16.if判斷 // 還有switch等，和java一樣 var a16 = 16; if (a16>=18){ alert("可以去網吧了"); } else if(a16>=16){ alert("在香港可以去網吧"); } else{ alert("去哪都上不了網吧"); } ``` - ##### 1.17for循環 - 還有while循環等，和java大致相同，區別在于ES6之前，在for(){}，內部定義的變量，在外部也可以訪問，并不算局部變量。 - for循環的另一種遍歷方式for(var i in list){}，這里和python的for循環遍歷有些相似，但是遍歷出的 i 并不是list中的值，而是這些值的索引。 ``` // script // 17.for循環 // 還有while循環等 var arr17 = [1,2,3,4]; // 第一種遍歷方式 for (var i=0;i<arr17.length;i++){ console.log(arr17[i]); } // 第二種遍歷方式，這里的key并不是數組中的值，而是它們的下標，比較奇怪 /*for(var key in arr17){ console.log(arr17[key]); }*/ // 遍歷對象 // 這里遍歷出的key為屬性名 var obj17 = {name:"依然",age:21}; for (var key in obj17){ console.log(key); console.log(obj17[key]); } ``` - ##### 1.18塊級作用域 - ES6之前沒有塊級作用域的概念，在內部定義變量，在外面一樣可以訪問 - 使用 let x = xx; 定義變量，這為ES6的定義方法，支持塊作用域 ``` // 18.塊級作用域-- ES6之前沒有塊級作用域的概念，只要不在內部定義變量，在外面都可以訪問 // ES5 for (var i18=0;i18<10;i18++){ console.log("hello"); var i188 = 100; } console.log(i18); // 18 console.log(i188); // 100 這是能訪問的 // ES6 /*for (let let18=0;let18<10;let18++){ console.log("hello"); } console.log(let18); // 報錯*/ /*{ let name18="依然"; } console.log(name18); 報錯，name18未定義 */ ``` #### 2.DOM-文檔對象模型 - ##### 2.1初步了解DOM - 獲得p標簽，document.getElementById("idName"); - script不可以寫在標簽前，因為js默認順序加載。否則會無效 ``` // html+script <body> <p id="text" class="p-text">hello world</p> <script> // 如果不使用 // 1.如何獲取一個節點 - id獲取 var text = document.getElementById("text"); // 2.修改元素的內容 obj.innerHTML text.innerHTML = "改變了"; </script> </body> ``` - ##### 2.2如何將script放在body之前，能夠獲取到標簽 - window.onload = function(){js語句} - 將javascript語句放到window.onload觸發的函數里面,獲取元素的語句會在頁面加載完后才執行，就不會出錯了。 ``` // html文件 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Dom示例2</title> <script type="text/javascript"> // 將javascript語句放到window.onload觸發的函數里面,獲取元素的語句會在頁面加載完后才執行，就不會出錯了。 window.onload = function () { var p = document.getElementById("p"); var btn = document.getElementById("btn"); btn.onclick = function () { p.innerHTML = "改變了"; } }; </script> </head> <body> <p id="p" class="">hello world</p> <button id="btn">change</button> </body> </html> ``` - ##### 2.3通過標簽名獲得標簽對象 - document.getElementsByTagName("標簽名"); - 通過標簽名獲取會得到一個集合，假數組，不用深究 ``` // body <body> <p>1</p> <p>2</p> <p>3</p> <p>4</p> <p>5</p> <button id="btn">btn</button> <script> // 通過標簽名獲取會得到一個集合，假數組，不用深究 // 不常用 var ps = document.getElementsByTagName("p"); console.log(ps); // ps[1].innerHTML = "change"; var btn = document.getElementById("btn"); btn.onclick = function () { for (var i=0;i<ps.length;i++){ ps[i].innerHTML = "change"+i; } } </script> </body> ``` - ##### 2.4通過class樣式名獲取標簽對象 - document.getElementsByClassName("樣式名"); - 得到的結果也是一個集合。可以看到方法中getElements，s就代表了復數形式。 ``` // body <body>  <p class="one">hello world</p> <p class="one">hello world</p> <p class="one">hello world</p> <p class="one">hello world</p> <script> // 利用class名獲取，也是一個集合 var ps = document.getElementsByClassName("one"); console.log(ps); </script> </body> ``` - ##### 2.4通過選擇器獲取標簽對象 - document.querySelectorAll("選擇器"); 獲得的結果不論有幾個都是一個集合 - querySelectorAll可以獲取多個對象，如果使用id選擇器，雖然只有一個對象，但是也是一個集合 - document.querySelector("選擇器"); 獲得的結果不管能匹配多少個都只得到一個。 - 例如，使用.className選擇器獲取時，有多個結果匹配，但是只會獲得第一個匹配的標簽對象 ``` // body <body> <div class="one">hello world</div> <div class="one" id="two"></div> <script> // 通過選擇器獲取 // querySelector只能獲得一個對象 var div = document.querySelector("#two"); console.log(div); // 只有1個，其中有id為two的標簽 var div1 = document.querySelector(".one"); console.log(div1); // 只有一個，是第一個class為one的標簽，第二個不會被獲取 // querySelectorAll可以獲取多個對象，如果使用id選擇器，雖然只有一個對象，但是也是一個集合 var divs = document.querySelectorAll("#two"); console.log(divs); // 集合，其中有一個標簽對象，該標簽對象的id為two var divs1 = document.querySelectorAll(".one"); console.log(divs1); // 集合，其中有2個標簽對象，它們的class中都含有one </script> </body> ```