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