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