JavaScript簡介 1、JS介紹 全稱：JavaScript，簡稱JS JS是由NetScape(網景)提供的一門嵌入在瀏覽器中執行的腳本語言（一段小程序） 主要作用：用於實現網頁中的動畫效果和實現表單驗證 JS可以運行在服務器端（Node.js） 2、JS的特點 JS是一門直譯式的語言（JS不需要編譯,執行的就是源代碼） JS是一門基於對象的語言（JS可以通過某些機制模擬面向對象） JS是一門弱類型的語言（Java是強類型） Java: String str = "Hello World"; int number = 100; JS: var str = "Hellow World"; alert(str); str = 100; alert(str); str = true; alert(str); str = [88,123,111]; alert(str); 3、JS的優勢 JS具有良好的交互性 JS具有一定的安全性(運行在瀏覽器內部) JS具有跨平台性 Java語言具有跨平台性,是因為有JVM,JVM跨平台嗎? JVM不跨平台 JS語言具有跨平台性,是因為有瀏覽器,瀏覽器跨平台嗎? 瀏覽器不跨平台! 4、如何在HTML中引入JS？ 4.1.方式一: 在head或者body內部可以添加一個script標簽 在script標簽內部可以直接書寫JS代碼 <!-- 方式一: 在script標簽內部直接書寫JS代碼 type:可以省略,指定語言類型是JS --> <script type="text/javascript"> console.log("引入JS的方式一!!"); //alert("引入JS的方式一!!"); document.write("引入JS的方式一!!!<br/>"); </script> 4.2.方式二: 在head或者body內部可以添加一個script標簽 在script標簽上通過src屬性,可以引入外部的JS文件 <!-- 方式二: 引入外部的JS文件 --> <script src="demo.js"></script> 需要注意的是,第二種方式script標簽內部不要寫JS代碼,寫了也不會執行! <script src="js/demo.js"> console.log("Hello JS...333");//不會執行! </script> 4.3.方式三:將JS代碼寫在標簽上 <!-- 方式三: 直接在標簽上書寫JS代碼 --> <button onclick="console.log('引入JS的方式三...')"> 別點我! </button> <input ondblclick="console.log('引入JS的方式三===')" type="button" value="也別點我!"/> 4.4.onclick、ondblclick事件 onclick是點擊事件,在被綁定了該事件的元素上點擊后,會立即觸發事件,執行所指向的函數 ondblclick是點擊事件,區別是需要雙擊才可以觸發事件,執行所指向的函數
二、JS的語法 1、JS的注釋 // 單行注釋 /* 多行注釋 */ 2、JS數據類型 2.1.基本數據類型 1)數值類型(number) 在JS的底層,所有的數值都是浮點型 但在處理和顯示的過程中,如果可以顯示為整型,會自動的在整型和浮點型之間進行轉換 2.4+3.6=6 Infinity(正無窮大) -Infinity(負無窮大) NaN(Not a Number)非數值 2)字符串類型(string) JS中的字符串類型是基本數據類型,字符串可以使用雙引號或者單引號引起來 例如: var str1 = "Hello JS"; var str2 = 'Hello JS'; console.log( typeof str1 ); // string console.log( typeof str2 ); // string JS中提供了字符串的包裝對象--String var str3 = new String("Hello JS"); console.log( typeof str3 ); // object str1和str2也可以當做對象使用,在使用時,和str3沒有什么區別 3)布爾類型(boolean) 布爾類型值: true 和 false 4)undefined類型 undefined: 表示聲明了變量,但是沒有為變量賦值,該變量的值就是undefined var x; alert(x); //undefined 5)null類型 null: 表示空值,可以作為函數的返回值,表示函數返回的是一個空的對象 undefined和null都不能調用屬性或方法,否則就會拋異常! 2.2.復雜數據類型 對象,數組,函數 3、JS的變量聲明 JS中是通過var關鍵字聲明變量,通過var聲明的變量不區分類型,可以指向任意的數據 var s1 = "Hello World"; s1 = 123; s1 = false; s1 = []; s1 = function(){alert("s1方法執行了...")} JS中有自動斷句功能,即使一行后面不加分號,也可以正常執行,但是建議加上分號; JS中如果重復聲明變量,也不會報錯, 因為JS中聲明一個已存在的變量不會生效; var x = "abc"; //var x; x = "abc"; var x = 123; //var x; x = 123; alert(x); JS在書寫時,是嚴格區分大小寫的! 4、JS的運算符 JS中的運算符和Java中的運算符大致相同 算術運算符: +，-，*，/，%，++，-- 賦值運算符: =，+=，-=，*=，/=，%= 比較運算符: ==，!=，>，>=，<，<= 位運算符: & ， | 邏輯運算符: && ，|| ( false && 表達式, true || 表達式 ) 前置邏輯運算符: ! (not) 三元運算符: 表達式 ? 表達式1 : 表達式2 。。。
5、JS的語句 5.1.if分支 if(){...} if(){...}else{...} if(){...}else if{...}else{...} 5.2.switch分支 switch(變量/表達式){ case opt1: 代碼塊; break; case opt2: 代碼塊; break; ... default: 代碼塊; } 5.3.循環結構 for(){} while(){} do while(){} 6、JS數組 JS的數組聲明方式: //聲明一個空數組,長度為零 var arr1 = []; //聲明一個具有初始值的數組 var arr2 = [100,"abc",false,new Date()]; //聲明一個空數組,長度為零 var arr3 = new Array(); //聲明一個具有初始值的數組 var arr4 = new Array(100,"abc",false,new Date()); //指定長度的數組(只有一個參數並且是數值,這個數值是長度) var arr3 = new Array(10); JS數組的特點: 1) JS中的數組可以存儲任意類型的數據 2) JS數組的長度可以被任意改變 7、JS函數 JS的函數相當於Java中的方法 就是一個具有功能的代碼塊,通過函數名可以反復執行! 聲明方式1: function 函數名([參數列表]){ 函數體... } 聲明方式2: var 變量/函數名 = function([參數列表]){ 函數體... } 聲明方式3: (function([參數列表]){ 函數體... })([參數列表]); 三、JS的DOM操作 DOM: Document Object Model,文檔對象模型 其實就是JS專門為操作html元素所提供的一套API。 1、獲取html元素 1) document.getElementById(id值); -- 通過元素的id屬性值獲取一個html元素，返回值就是這個元素所對應的JS對象 2) document.getElementsByTagName(標簽名); -- 通過元素名稱,獲取該名稱對應的所有元素組成的數組,可以通過數組[下標]的形式獲取其中的每一個元素,也可以通過循環遍歷。 3) document.getElementsByClassName(class值); -- 通過元素的class屬性值,獲取該class值對應的所有元素組成的數組,可以通過數組[下標]的形式獲取其中的每一個元素,也可以通過循環遍歷。 4) ele.parentNode -- 獲取當前元素的上級元素(父元素) 5) ele.innerHTML -- 獲取元素的所有內容, 或者設置元素的內容(原內容會被覆蓋) <div>這是一個測試的div</div> ele.innerHTML = "xxx" 6) ele.value -- 獲取或設置表單項元素的value值 2、增刪改查元素 1)創建一個html元素 document.createElement(元素名/標簽名); -- 創建一個指定名稱的元素,返回值就是這個創建的元素所對應的JS對象 2)添加子元素 parentEle.appendChild( childEle ); -- 父元素調用方法添加一個子元素到父元素內部 3)刪除子元素 parentEle.removeChild( childEle ) -- 父元素調用方法刪除內部的子元素