一篇文章帶你入門Java Script
JavaScript是目前web開發中不可缺少的腳本語言，js不需要編譯即可運行，運行在客戶端，需要通過瀏覽器來解析執行JavaScript代碼。
JS組成部分：
組成部分 作用 ECMA Script 構成了JS核心的語法基礎 BOM Browser Object Model 瀏覽器對象模型，用來操作瀏覽器上的對象 Dom Document Object 文檔對象模型，用來操作網頁中的元素 特點1.交互性（它可以做的就是信息的動態交互）
2.安全性（不允許直接訪問本地硬盤）
3。跨平臺性（只要可以解析js的瀏覽器都可以執行，和平臺無關）
和Java的區別JavaScript Java Netscape公司的產品，最初叫Livescript Sun公司的產品，現在是Oracle公司的產品 直譯式腳本語言 需要先編譯成字節碼文件，在執行 弱類型語言 強類型語言 弱類型語言弱類型語言是一種弱類型定義的原，某一個變量被定義類型，該變量可以根據環境變化自動進行轉換，不需要經過顯性強制轉換
強類型語言強類型語言是一種強制類型定義的語言，一旦某一個變量被定義類型，如果不經過強制轉換，則它永遠就是該數據類型了
書寫位置1.內嵌式：
<script type='text/javascript'> //alert是Javascript語言提供的一個警告框函數 //它可以接受任意類型的參數，這個參數就是警告框的提示信息 alert('內嵌式')<script>
2.外聯式：
首先新建一個文件類型為.js的文件，然后再該文件中寫js語句，通過script標簽對引入到html頁面中。
<script src='http://www.b3g6.com/bcjs/js文件路徑地址'>這里不能寫js語句</script>
3.行內式：
直接寫在標簽身上，是一個簡寫的時間，所以又稱之為事件屬性。 onclick單機事件
<input type='button' value='點我呀' onclick='alert(點我干啥!);'><button onlick = 'alert('test');>點我呀！<button>
數據類型
變量是可以存放某些之的內存的命名。
定義：存放數據，內存可以存儲任意數據
JavaScript的變量類型
未定義的類型：undefined
數值類型： number (凡是數字都是數值型，不區分和小數)
字符換類型：string(凡是引號包裹起來的內容全部都是字符串)
對象類型：object(特殊數值null)
布爾類型：boolean （true,false）
函數類型：function
JavaScript里特殊的值：
undefined 未定義，所有js變量未賦予初始值的時候，默認值都是unde空值
null 空值
關系（比較）運算
等于： == 等于是簡單的做字面值的比較
全等于： === 除了做字面值的比較之外，還會比較兩個變量的數據類型
邏輯運算
且運算：&&
第一種 ：當表達式全為真的時候，返回最后一個表達式的值
第二種：當表達式中，有一個為假的時候。返回第一個為假的表達式的值
var a = 'abc';var b = true;var d = false;var c = null;alert(a && b); // truealert(b && a); // truealert(a && d); // falsealert(a && c); // null
或運算：| |
第一種：當表達式全為假時，返回最后一個表達式的值
第二種：只要有一個表達式為真，就會把返回第一個為真的表達式的值
alert(a || c); // nullalert(c || d); // falsealert(a || c); // abcalert(b || c); //abc
并且&&與預算和| |或運算有短路。
短路就是說當這個&&或| |運算有結果了之后。后面的表達式不在執行
在Javascript語言中，所有的變量，都可以作為一個boolean類型的變量去使用
數組1，數組定義方式
js中數組的定義
格式：
var 數組名 = []; //創建空數組var 數組名 = [1,’abc’,true]； //定義數組同時賦值元素alert(arr.length); // 遍歷數組
注意：使用最大下標值就會自動的給數組做擴容操作
函數可以使用function關鍵字來定義函數
// 第一種 var function 函數名(函數體){ //(函數體) } // 調用函數：函數名(實際參數);//第二種var 函數名 = function(函數體){ //(函數體) } // 調用函數：函數名(實際參數);
1，函數只有被調用后才會執行
2，如果函數需要返回值，直接使用return返回，不會像Java一樣要考慮返回值的類型
在JavaScript語言中，如何定義帶有返回值的函數？
只需要在函數體內直接使用return語句返回值即可！
注：再Java中函數允許重載，但是再JS中函數的重載會直接覆蓋掉上一次的定義
函數的 arguments 隱形參數（只放在function函數內）
就是再function函數中不需要定義，但卻可以直接用來獲取所有參數的變量。我們管它叫隱形參數。
隱形參數特別像Java基礎的可變長參數一樣。
可變長參數其他是一個數組。
那么js中的隱形參數也跟Java的可變長參數一樣。操作類似數組。
在js中萬物皆對象，甚至數組字符串函數都是對象。所以這個叫做arguments的東西也是個對象，而且是一個特殊的對象，它的屬性名是按照傳入參數的順序來的，第一個參數的屬性名是’0’，第二個參數的屬性名是’1’，以此類推，并且它還有個length屬性，存儲的是當前傳入函數參數的個數，很多時候我們把這種對象叫做類數組對象。
JS中的自定義對象（擴展內容）Object形式的自定義對象對象的定義：
var 變量名 = new Object(); //對象實例（空對象）變量名.屬性名 = 值; // 定義一個屬性變量名.函數名 = function(){} // 定義一個函數
<!DOCTYPE html><html lang='en'><head> <meta charset='UTF-8'> <title>Title</title> <script type='text/javascript'> // 對象的定義 // var 變量名 = new Object(); //對象實例（空對象） // 變量名.屬性名 = 值; // 定義一個屬性 // 變量名.函數名 = function(){} // 定義一個函數 var obj = new Object(); obj.name = '111'; obj.age = 18; obj.fun = function (){alert('姓名：' + this.name + '，年齡：' + this.age); } // 對象的訪問： // 變量名.屬性 / 函數名(); alert(obj.age) </script></head><body></body></html>
花括號形式的自定義對象
<!DOCTYPE html><html lang='en'><head> <meta charset='UTF-8'> <title>Title</title> <script type='text/javascript'> // 花括號形式對象的定義： // var 變量名 = { // 空對象 // 屬性名:值, // 定義一個屬性 // 屬性名:值, // 定義一個屬性 // 函數名:function(){} // 定義一個函數 // }; var obj = {name:'劉德華',age:19,fun : function(){ alert('姓名：' + this.name + '，年齡：' + this.age);} }; // 對象的訪問： // 變量名.屬性 / 函數名(); alert(obj.name); // 訪問var內的局部變量 obj.fun(); // 訪問var內的fun方法 </script></head><body></body></html>JS中的事件
什么是事件？事件是電腦輸入設備與網頁進行交互的相應。我們稱之為事件。
常用的事件：onload：加載完成事件 頁面加載完成之后，常用于做頁面js代碼初始化操作
<!DOCTYPE html><html lang='en'><head> <meta charset='UTF-8'> <title>Title</title> <script type='text/javascript'> // onload事件的方法 function onloadFun(){ alert('靜態注冊onload事件，所有代碼'); } // onload 事件動態注冊是固定寫法 window.onload = function (){ alert('動態注冊的onload事件') } </script></head><!--靜態注冊事件onload事件<body onload='alert(’靜態注冊onload事件’)'>--><body></body></html>
onclick：單擊事件 常用于按鈕的點擊相應操作
<!DOCTYPE html><html lang='en'><head> <meta charset='UTF-8'> <title>Title</title> <script type='text/javascript'>function onclickFun(){alert('靜態注冊onclick事件');}// 動態注冊onclick事件window.onload = function (){ // 1 獲取標簽對象 /* * document 是JavaScript語言提供的一個對象（文檔） * get 獲取 * Element 元素（就是標簽） * * getElementById通過ID屬性獲取標簽對象 */var btnObj = document.getElementById('btn01');// alert(btnObj);// 2 通過標簽對象.事件名 = function(){}btnObj.onclick = function (){ alert('動態注冊的onClick事件') }} </script></head><body> <!--靜態注冊onClick事件--> <button onclick='onclickFun();'>靜態注冊</button> <!--動態注冊onClick事件--> <button id='btn01'>動態注冊</button></body></html>
onblur：失去焦點事件 常用于輸入框失去焦點后驗證其輸入內容是否合法
<!DOCTYPE html><html lang='en'><head> <meta charset='UTF-8'> <title>Title</title> <script type='text/javascript'> // onblur事件會在對象失去焦點時發生 // 靜態注冊失去焦點事件 function onblurFun(){// console是控制臺對象，是由JavaScript語言提供，專門用來向瀏覽器的控制器打印輸出，用于測試使用// log（）是打印的方法console.log('靜態注冊失去焦點事件'); } // 動態注冊 onblur事件 window.onload = function (){ // 1.獲取標簽對象 var passwordObj = document.getElementById('password'); // alert(passwordObj); // 2.通過標簽對象.事件名 = funcion(){}; passwordObj.onblur = function (){ console.log('靜態注冊失去焦點事件'); } } </script></head><body> 用戶名:<input type='text' onblur='onblurFun();'><br/> 密碼: <input type='text'><br/></body></html>
onchange：內容發生改變事件 常用于下拉列表和輸入框內容發生改變后操作
<!DOCTYPE html><html lang='en'><head> <meta charset='UTF-8'> <title>Title</title> <script type='text/javascript'> function onchangeFun(){ alert('您的男神改變了') } </script></head><body>請選擇你心目中的男神：<select onchange='onchangeFun()'> <option>你自己</option> <option>洋洋</option> <option>羊羊</option> <option>陽陽</option></select></body></html>
onsubmit：表單條件事件 常用于表單提交前，驗證所有表單項是否合法
<!DOCTYPE html><html lang='en'><head> <meta charset='UTF-8'> <title>Title</title> <script type='text/javascript'>// 靜態注冊表單提交事件function onsubmitFun(){ // 要驗證所有表單項是否合法，如果有一個不合法就阻止表單提交 alert('靜態注冊表單提交時間-----發現不合法') return false;}window.onload = function (){ // 1 獲取標簽對象 var fromObj = document.getElementById('form01'); // 2 通過標簽對象.事件名 = function(){} fromObj.onsubmit = function (){// 要驗證所有表單項是否合法，如果有一個不合法就阻止表單提交alert('動態注冊表單提交事件-----發現不合法');return false; }} </script></head><body> <from action = 'http://localhost:8080' method = 'get' onsubmit='return false'><input type='submit' value='靜態注冊'/> </from> <from action = 'http://localhost:8080' id='form01'><input type='submit' value='動態注冊'/> </from></body></html>
事件的注冊又分為靜態注冊和動態注冊兩種
事件的注冊（綁定）？
其實就是告訴瀏覽器，當事件響應后要執行哪些操作代碼，叫事件注冊或事件綁定。
靜態注冊事件：通過html標簽的事件屬性直接賦值于事件響應后的代碼，這種方式我們叫靜態注冊。
動態注冊事件：是指先通過js代碼得到的標簽dom對象，然后再通過dom對象.事件名 = function(){}這種形式賦于事件響應后的代碼，叫動態注冊。
動態注冊基本步驟：1，獲取標簽對象
2，標簽對象.事件名 = funcion(){}
DOM模型DOM全程是Document Object Model 文檔對象模型
就是把文檔中的標簽，屬性，文本，轉換成為對象來管理。
總結本篇文章就到這里了，希望能給你帶來幫助，也希望你能夠多多關注好吧啦網的更多內容!
相關文章：
網公網安備