一篇文章帶你入門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公司的產(chǎn)品，最初叫Livescript | Sun公司的產(chǎn)品，現(xiàn)在是Oracle公司的產(chǎn)品 |
| 直譯式腳本語言 | 需要先編譯成字節(jié)碼文件，在執(zhí)行 |
| 弱類型語言 | 強類型語言 |
弱類型語言
弱類型語言是一種弱類型定義的原，某一個變量被定義類型，該變量可以根據(jù)環(huán)境變化自動進行轉換，不需要經(jīng)過顯性強制轉換
強類型語言
強類型語言是一種強制類型定義的語言，一旦某一個變量被定義類型，如果不經(jīng)過強制轉換，則它永遠就是該數(shù)據(jù)類型了
書寫位置
1.內嵌式：
<script type="text/javascript">
//alert是Javascript語言提供的一個警告框函數(shù)
//它可以接受任意類型的參數(shù)，這個參數(shù)就是警告框的提示信息
alert("內嵌式")
<script>
2.外聯(lián)式：
首先新建一個文件類型為.js的文件，然后再該文件中寫js語句，通過script標簽對引入到html頁面中。
<script src="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); // true alert(b && a); // true alert(a && d); // false alert(a && c); // null
或運算：| |
第一種：當表達式全為假時，返回最后一個表達式的值
第二種：只要有一個表達式為真，就會把返回第一個為真的表達式的值
alert(a || c); // null alert(c || d); // false alert(a || c); // abc alert(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 id="password" 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 文檔對象模型
就是把文檔中的標簽，屬性，文本，轉換成為對象來管理。
總結
本篇文章就到這里了，希望能給你帶來幫助，也希望你能夠多多關注腳本之家的更多內容!
相關文章
這篇文章主要介紹了Java異常類型及處理， 異常指的是程序在執(zhí)行過程中，出現(xiàn)了非正常情況,導致了java的jvm停止。感興趣的小伙伴就和小編一起來學習下面文章的具體內容吧2021-09-09
在Java編程中,經(jīng)常會遇到需要并行執(zhí)行任務的情況,特別是在處理大量數(shù)據(jù)或者需要異步處理的場景下,本文將介紹幾種常用的并行執(zhí)行任務的方式,文中有詳細的代碼示例供大家參考,需要的朋友可以參考下2024-04-04
Java Swing組件下拉菜單控件JComboBox用法示例
這篇文章主要介紹了Java Swing組件下拉菜單控件JComboBox用法,結合具體實例形式分析了Swing組件下拉菜單控件JComboBox的具體定義、使用方法及相關使用注意事項,需要的朋友可以參考下2017-11-11
在java中為多路分支選擇流程專門提供了switch語句，switch語句根據(jù)一個表達式的值，選擇運行多個操作中的一個,感興趣的朋友可以了解下2013-01-01
這篇文章主要介紹了java對象初始化代碼詳解，涉及實例變量的初始化，類變量的初始化等相關介紹幾代碼示例，具有一定參考價值，需要的朋友可以了解下。2017-11-11
Intellij IDEA實現(xiàn)springboot熱部署過程解析
這篇文章主要介紹了Intellij IDEA實現(xiàn)springboot熱部署過程解析,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2020-08-08
這篇文章主要介紹了SpringAop日志找不到方法的處理方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2021-06-06
本篇文章主要介紹了淺談Java模板引擎性能對比 ，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-09-09
這篇文章主要介紹了聊聊Spring Cloud Cli 初體驗,SpringBoot CLI 是spring Boot項目的腳手架工具。非常具有實用價值，需要的朋友可以參考下2018-04-04
Java 枚舉類和自定義枚舉類和enum聲明及實現(xiàn)接口的操作
這篇文章主要介紹了Java 枚舉類和自定義枚舉類和enum聲明及實現(xiàn)接口的操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2021-02-02