空白目錄 · XK-JavaScript

# JavaScript ? JavaScrip是互聯網上最流行的腳本語言，這門語言可用于HTML和web。 ## 一、JavaScript用法 ? 如需在HTML頁面中插入JavaScrip，需使用<script></script>標簽。 ? 通常會將JavaScript放于head部分或頁面底部，不會干擾頁面的內容。也可以把腳本保存到外部文件中，文件擴展名為.js。使用時對該文件進行引用。 ## 二、JavaScript輸出 ```html  <script type="text/javascript"> window.alert(5+6); document.write('1230'); document.getElementById('demo').innerHtml='456'; console.log("我是控制臺日志"); </script> ``` ## 三、JavaScript語法 ### 1、變量 - 變量命名 1.變量必須由字母、下劃線、美元符號開頭 2.變量命名可以添加數字 3.變量名稱對大小寫敏感 - 聲明變量使用var關鍵字聲明變量。變量聲明時可以同時進行賦值，未賦值的變量默認為undefined。 ### 2、數據類型在JS中一共有六種數據類型 String 字符串 Number 數值 Boolean 布爾值 Null 空值返回類型是object Undefined 未定義 Object 對象引用數據類型 JS中可以表示的數字的最大值 Number.MAX_VALUE 1.7976931348623157e+308 Number.MIN_VALUE 5e-324 大于0的最小值如果使用Number表示的數字超過了最大值，則會返回一個Infinity表示正無窮 NaN是一個特殊的數字也是Number類型 ### 3、數據類型轉換將其他數據轉換為Number 1.使用Number()函數 -字符串-->數字 1.如果是純數字的字符串，則直接將其轉換為數字 2.如果字符串中有非數字的內容，則轉換為NaN 3.如果字符串是一個空串或者是一個全是空格的字符串，則轉換為0 -布爾-->數字 true為1 false為0 -null-->數字 0 -undefined-->數字 NaN 2.針對字符串轉數字 parseInt() parseFloat() 強制類型轉換 String Number Boolean 將其他數據類型轉換為String 1.調用被轉換數據類型的toString()方法該方法不會改變原變量，只會將轉換的結果返回 null和undefined沒有toString方法 2.調用String()函數對于Number和Boolean實際上就是調用toString()方法對于null和undefined會直接轉換，不會調用方法當一個字符串做- * /運算的時候也會自動轉換成number類型 ### 4、運算符 &邏輯與 |邏輯或運算時表達式無論左邊結果如何右邊始終會參與運算 java中才有 &&短路與 ||短路或當左邊表達式結果已經能決定最終結果時右邊表達式就不再進行運算 &&當左邊為false 右邊true或false無關緊要于是不進行判斷 ||當左邊為true == 忽略數據類型判斷兩邊的值是否相等 ===全等考慮數據類型 !!對任何數據進行兩次取反操作可將其轉換為布爾類型三元(目)運算 (表達式)?結果1:結果2 ### 5、進制 ```html <script type="text/javascript"> //2 8 16 10 //0b 開頭 0B 表示二進制。 //0 開頭表示 8進制 //0x 開頭 0X 表示16進制 var a = 12; var b = 070; //alert(b); 56 </script> ``` ### 6、超鏈 ```html <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script src="js/on.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> //作用：1.跳轉頁面 2.找到錨點 3.發送郵件，打電話 4.觸發javascript document.write("<a href='http://www.baidu.com'>百度</a>"); </script> </head> <body> <button onclick="alert('你點我了')">點我</button> <a href="javascript:on()">點我觸發外部js</a> <a href="javascript:alert('點我了')">點我吧</a> </body> </html> ``` ### 7、標識符在JS中所有的可以由我們自主命名的都可以稱為是標識符例如：變量名、函數名、屬性名都屬于標識符命名一個標識符時需要遵守如下的規則： 1.標識符中可以含有字母、數字、_、$ 2.標識符不能以數字開頭 3.標識符不能是ES中的關鍵字或保留字 4.標識符一般都采用駝峰命名法 - 首字母小寫，每個單詞的開頭字母大寫，其余字母小寫 JS底層保存標識符時實際上是采用的Unicode編碼，所以理論上講，所有的utf-8中含有的內容都可以作為標識符 ## 四、JavaScript函數與對象 ? JavaScript使用關鍵字function定義函數。函數可以通過聲明定義，也可以是一個表達式。 ? 函數聲明后不會立即執行，在我們需要時進行調用。 ### 1、對象的使用 ```html <script type="text/javascript"> var jack = { name:"jack", age:20, friends:[ {name:"tom",age:20}, {name:"luli",age:30} ], play:function(a,b){ alert(a+b); } }; for (var i = 0;i < jack.friends.length;i++) { alert(jack.friends[i].name); } //alert(jack.friends.length); jack.play(10,20); //將jack指向的堆內存地址賦給obj 即兩者指向同一塊內存 //obj對象對地址的name進行修改后 jack的屬性也會發生改變 var obj = jack; obj.name = "tom"; alert(jack.name); </script> ``` ### 2、函數調用 - 函數表達式可以存儲在變量中 ```html <script type="text/javascript"> function a(){ alert("aaaa"); } //輸出的是haha var a = "haha"; alert(a); //方法執行輸出aaaa alert(s)為undefined var s = a(); alert(s); </script> ``` - 匿名函數自調用 ```html <script type="text/javascript"> //參數可以傳對象 function test(a){ alert(a.name); alert(a.age); } var a = { name:"張三", age:20, play:function(){ return "haha"; } } test(a); //匿名函數自調用 (function (c,d){ alert(c+d) })(10,20); </script> ``` ### 3、函數中聲明變量 ```html <script type="text/javascript"> var a ="tom"; function on(){ //在函數中，如果變量沒有用var聲明在調用完一次函數之后，這個變量會被提升成全局變量 b = 20; var a = "inner a"; alert(a); alert(window.a); //alert(b); } //alert(window.b); on(); alert(b);//此時b會在window對象中找等同window.b </script> ``` ### 4、工廠方法 ```html <script type="text/javascript"> fun4(); function fun4(){ alert("111111"); } //工廠方法 function createPerson(name,age,address){ var obj = new Object(); obj.name = name; obj.age = age; obj.address = address; return obj; } var r1 = createPerson("張三",20,"北京市朝陽區"); alert(r1.name); </script> ``` ### 5、原型與構造函數構造函數也是一個普通函數，創建方式和普通函數一樣，但構造函數習慣上首字母大寫構造函數和普通函數的區別在于：調用方式不一樣普通函數的調用方式：直接調用 person(); 構造函數的調用方式：需要使用new關鍵字來調用 new Person(); ```html <script type="text/javascript"> function Person(){ } //類名.prototype可以訪問到類的原型對象原型對象的屬性為全局屬性，所有對象都可以使用 Person.prototype.a="哈哈"; var p1 = new Person(); var p2 = new Person(); //對象._proto_也可以拿到原型對象可以對對象的屬性值進行修改 alert(Person.prototype == p1.__proto__); alert(p1.a); p1.__proto__.a="呵呵"; alert(p2.a); </script> ``` ### 6、數組、方法 ? JavaScript中同一數組可以存放不同類型的數據。 - 創建數組 ```html <script type="text/javascript"> var arr = new Array(); arr[0] = 1; arr[1] = 2; arr[2] = 3; arr[3] = 4; arr[4] = 5; </script> ``` - 數組的遍歷 ```html //遍歷二維數組 for (var i = 0;i < arr2.length;i++) { for (var j = 0;j < arr2[i].length;j++) { alert(arr2[i][j]); } } ``` - 數組方法 ```html <script> /** * shift() 刪除首個數組元素，其他元素向前移返回結果為被刪除的首個元素 * unshift() 往數組開頭添加新元素其他元素向后移返回新數組的長度 * toString() 把數組轉換為字符串，每個數組元素用逗號分隔 * join() 也可以將所有數組元素結合為一個字符串括號里可以添加參數規定每個字符間的分隔符如join("*") * pop() 將數組最后的元素刪除并返回 * push() 向數組最后新增一個元素返回新數組的長度 * splice(index,length,parameter1,parameter2) index定義新添加元素的位置 length定義從該位置開始刪除原數組幾項數據其余參數定義要添加的新元素 * concat() 通過拼接兩個數組創建一個新數組并返回不會改變現有數組 * slice() 1個參數從給定索引值(包括)開始復制后面的元素創建新數組 2個參數從第一個參數給定的索引值(包括)到第二個參數給定索引位置(不包括)復制創建新數組 */ //arr指向新的內存空間 var arr = ["孫悟空","豬八戒","沙和尚"]; var result = arr.push("唐僧","蜘蛛精","白骨精","玉兔精"); alert(result); var result2 = arr.shift(); alert(result2); //數組排序 arr = [5,8,1,6,3,5,9,7,2]; arr.sort(function(a,b){ //升序排列 return a - b; //降序排列 //return b - a; }); console.log(arr); </script> ``` ### 7、循環 ```html <script type="text/javascript"> //return 1.表示方法的返回值 2.表示跳出方法 function sum(a,b,c){ //后面123不會執行 return a+b+c; alert(123); } var r =sum(10,20,30); alert(r); //continue 只能用在循環結構結束本次循環回到循環頭部繼續下次循環 //break 表示強制跳出本層循環多層循環只會跳出當前一層 //return 用在循環結構中時不管有多少層循環嵌套全部跳出 function cc(){ alert("方法開始"); for (var i = 0;i < 5;i++) { if (i==2) { continue;//開始 0 1 3 4 結束只跳出本次循環不輸出2 接著繼續開始循環 } alert(i); } alert("方法結束"); } cc(); function bb(){ alert("方法開始"); for (var i = 0;i < 5;i++) { if (i==2) { break//開始 0 1 結束直接跳出當前循環并結束本層循環后面都不再輸出 } alert(i); } alert("方法結束"); } bb(); function rr(){ alert("方法開始"); for (var i = 0;i < 3;i++) { for (var j = 0;j < 5;j++) { if (j==2) { return;//開始 00 01 直接跳出方法所有循環不再執行方法結束語句都不會輸出 } alert(i+""+j); } } alert("方法結束"); } rr(); </script> ``` ### 8、字符串方法 ```html <script type="text/javascript"> /**所有字符串方法都會返回新字符串，不會修改原始字符串 * 字符串是不可變的：字符串不能更改，只能替換 * length 返回字符串的長度 * indexOf() 返回字符串中指定文本首次出現的索引區分大小寫未找到返回-1 * 可以傳入兩個參數，第二個參數表示從該索引處開始查找 * lastIndexOf() * search() 與indexOf()功能相同 * search()無法設置第二個參數 * indexOf()無法使用正則表達式 * slice() 提取字符串的某個部分并在新字符串中返回被提取的部分 * 一個參數: 從索引處開始裁取剩余部分負數則從結尾開始數 * 兩個參數：起始索引(包括)，終止索引(不包括) 如a,b a<b * 兩個參數為負數時，則從字符串結尾處開始計數如-a,-b a>b 從后數b處到a(不包括)處 * substring() 類似于slice() 不接受負數參數 * substr() 類似于slice() * 如果加第二個參數則規定的是被裁取的長度 * replace() 用新的字符串替代指定字符串返回新的字符串不改變之前的字符串 * 只替換一次首次匹配到的字符串 * 第一個參數為將要被替換的字符串第二個參數為替換進去的新字符串 * 使用正則表達式/i可取消對大小寫的敏感如"China"參數寫作/CHINA/i * 使用正則表達式/g可替換所有匹配到的字符串 * toUpperCase() 把字符串轉換為大寫返回新的字符串不改變原字符串 * toLowerCase() 轉小寫 * concat() 連接兩個或多個字符串可用于代替加運算符 * trim() 刪除字符串兩端的空白符 * charAt() 返回字符串指定下標的字符串一個字符 * charCodeAt() 返回字符串中指定索引的字符unicode編碼 * split() 將字符串轉換為數組 * 一個參數給定分隔符如果省略則返回整個字符串如果是""，則分隔每個單個字符 */ var str = "The full name of China is the People's Republic of China." //var pos = str.lastIndexOf("China");//返回51 //var pos = str.indexOf("China");返回17 //var pos = str.indexOf("China",10);//也返回17 從索引值為10處開始查找但返回的還是找到的結果在字符串中的位置 //var pos = str.lastIndexOf("China",50)//還是17 //var pos = str.search("China"); //var pos = str.slice(4,10) //var pos = str.replace("China","USA");將第一個China替換為USA //var pos = str.replace(/CHINA/i,"USA");忽略大小寫 //var pos = str.replace(/China/g,"USA");兩個China都被替換成USA //var pos = str.toUpperCase(); //var pos = str.concat(" ","111"); //var pos = str.charAt(0); //var pos = str.charCodeAt(0); //var pos = str.split(" ");//本例字符串之間是用空格分隔的，如果這里參數給","則不會將字符串分隔，數組中只會有一個成員 alert(pos); //alert(str); 未被改變 //alert(pos[0]); </script> ``` ## DOM操作 JavaScript一般通過三種方式獲取DOM對象 var id=document.getElementById("id") //根據元素ID值獲取 var name=document.getElementsByName("name") //根據元素NAME屬性值獲取，得到一個數組，需遍歷 var tarname=document.getElementsByTarName("tarname") //根據元素名獲取，得到一個數組，需遍歷 ```html <body> <button id="btn">我是一個按鈕</button>   <script type="text/javascript"> /* * 瀏覽器已經為我們提供文檔節點對象這個對象是window屬性 * 可以在頁面中直接使用，文檔節點代表的是整個網頁 */ //console.log(document); //獲取到button對象 var btn = document.getElementById("btn"); // innerTEXT = // innerHTML = //修改按鈕的文字 btn.innerHTML = "I'm Button"; //綁定一個單擊事件 //像這種為單擊事件綁定的函數，我們稱為單擊響應函數 btn.onclick = function(){ alert("你還點~~~"); }; </script> </body> ``` ## JS BOM操作 ```javascript BOM DOM EcmaScript ... ECMAScript無疑是JavaScript的核心，但是要想在瀏覽器中使用JavaScript，那么BOM（瀏覽器對象模型）才是真正的核心。 BOM 提供了很多對象，用于訪問瀏覽器的功能，這些功能與任何網頁內容無關。 BOM將瀏覽器中的各個部分轉換成了一個一個的對象，我們通過修改這些對象的屬性，調用他們的方法，從而控制瀏覽器的各種行為。 window對象是BOM的核心，它表示一個瀏覽器的實例。在瀏覽器中我們可以通過window對象來訪問操作瀏覽器，同時window也是作為全局對象存在的。全局作用域： window對象是瀏覽器中的全局對象，因此所有在全局作用域中聲明的變量、對象、函數都會變成window對象的屬性和方法。 * - BOM對象 * Window * - 代表的是整個瀏覽器的窗口，同時window也是網頁中的全局對象 * Navigator * - 代表的當前瀏覽器的信息，通過該對象可以來識別不同的瀏覽器 * Location - 代表當前瀏覽器的地址欄信息，通過Location可以獲取地址欄信息，或者操作瀏覽器跳轉頁面 History * - 代表瀏覽器的歷史記錄，可以通過該對象來操作瀏覽器的歷史記錄 * 由于隱私原因，該對象不能獲取到具體的歷史記錄，只能操作瀏覽器向前或向后翻頁 * 而且該操作只在當次訪問時有效 /* window.history * length * - 屬性，可以獲取到當成訪問的鏈接數量 */ //alert(history.length); /* * back() * - 可以用來回退到上一個頁面，作用和瀏覽器的回退按鈕一樣 */ //history.back(); /* * forward() * - 可以跳轉下一個頁面，作用和瀏覽器的前進按鈕一樣 */ //history.forward(); /* * go() * - 可以用來跳轉到指定的頁面 * - 它需要一個整數作為參數 * 1:表示向前跳轉一個頁面相當于forward() * 2:表示向前跳轉兩個頁面 * -1:表示向后跳轉一個頁面 * -2:表示向后跳轉兩個頁面 */ * Screen * - 代表用戶的屏幕的信息，通過該對象可以獲取到用戶的顯示器的相關的信息 * * * 這些BOM對象在瀏覽器中都是作為window對象的屬性保存的， * 可以通過window對象來使用，也可以直接使用 * * * window.location * /* * 如果直接將location屬性修改為一個完整的路徑，或相對路徑 * 則我們頁面會自動跳轉到該路徑，并且會生成相應的歷史記錄 */ //location = "http://www.baidu.com"; //location = "01.BOM.html"; /* * assign() * - 用來跳轉到其他的頁面，作用和直接修改location一樣 */ //location.assign("http://www.baidu.com"); /* * reload() * - 用于重新加載當前頁面，作用和刷新按鈕一樣 * - 如果在方法中傳遞一個true，作為參數，則會強制清空緩存刷新頁面 */ //location.reload(true); /* * replace() * - 可以使用一個新的頁面替換當前頁面，調用完畢也會跳轉頁面 * 不會生成歷史記錄，不能使用回退按鈕回退 */ location.replace("01.BOM.html"); ```