一篇文章帶你入門Java Script
目錄
- 概述
- 特點
- 和的區別
- 弱型別語言
- 強型別語言
- 書寫位置
- 陣列
- 函式
- 中的自定義物件（擴充套件內容）
- Object形式的自定義物件
- JS中的事件
- 常用的事件：
- 動態註冊基本步驟：
- DOM模型
- 總結
概述
是目前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="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); // 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
並且&&與預算和| |或運算有短路。
短路就是說當這個&&或| |運算有結果了之後。後面的表示式不在執行
在Javascript語言中，所有的變數，都可以作為一個boolean型別的變數去使用
陣列
1，陣列定義方式
js中陣列的定義
格式：
var 陣列名 = []; //建立空陣列 var 陣列名 = [1,'abc',true]； //定義陣列同時賦值元素 alert(arr.length); // 遍歷陣列
注意：使用最大下標值就會自動的給陣列做擴容操作
函式
可以使用function關鍵字來定義函式
// 第一種
var function 函式名(函式體){
//(函式體)
}
// 呼叫函式：函式名(實際引數);
//第二種
var 函式名 = function(函式體){
//(函式體)
}
// 呼叫函式：函式名(實際引數);
http://www.cppcns.com
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);
jxJZSknoo // 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 id="password" 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("您的男神改變了")
}
jxJZSknoo </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 文件物件模型
就是把文件中的標籤，屬性，文字，轉換成為物件來管理。
總結
本篇文章就到這裡了，希望能給你帶來幫助，也希望你能夠多多關注我們的更多內容!