目錄
一、JavaScript快速入門
? ? ? ? 1.基本介紹 :?
? ? ? ? 2.JavaScript特點 :?
? ? ? ? 3.JavaScript使用方式 :?
? ? ? ? ? ? ? ? 1° 方式一 : 寫在<script>標(biāo)簽中
? ? ? ? ? ? ? ? 2° 方式二 : 以外部文件形式引入
? ? ? ? ? ? ? ? PS : 注意事項
? ? ? ? 4.JavaScript查錯方式 :?
二、JavaScript數(shù)據(jù)類型
? ? ? ? 1.變量 :?
? ? ? ? 2.數(shù)據(jù)類型 :?
? ? ? ? 3.特殊值 :?
三、JavaScript運算符
? ? ? ? 1.算術(shù)運算符：
? ? ? ? 2.關(guān)系運算符 :?
? ? ? ? 3.賦值運算符 :?
? ? ? ? 4.邏輯運算符 :?
? ? ? ? 5.三目運算符 :?
四、JavaScript數(shù)組
? ? ? ? 1.數(shù)組的定義 :?
? ? ? ? 2.數(shù)組的遍歷 :?
五、JavaScript函數(shù)
? ? ? ? 1.簡介 :?
? ? ? ? 2.定義 :?
? ? ? ? ? ? ? ? 1° 通過function關(guān)鍵字來定義函數(shù)?
? ? ? ? ? ? ? ? 2° 通過將函數(shù)賦值給變量
? ? ? ? 3.注意事項 :?
六、JavaScript對象
? ? ? ? 1.對象的定義 ：
? ? ? ? ? ? ? ? 1° 方式一 : 通過Object
? ? ? ? ? ? ? ? 2° 方式二 : 通過{} （使用頻率更高！）
? ? ? ? 2.對象的訪問 :?
七、JavaScript事件
? ? ? ? 1.基本介紹 :?
? ? ? ? 2.常見事件 :?
? ? ? ? 3.事件分類 :?
? ? ? ? 4.事件演示 :?
? ? ? ? ? ? ? ? 1° onload事件
? ? ? ? ? ? ? ? 2° onclick事件
? ? ? ? ? ? ? ? 3°?onblur事件
? ? ? ? ? ? ? ? 4° onchange事件
? ? ? ? ? ? ? ? 5° onsubmit事件???
八、JavaScript總結(jié)
一、JavaScript快速入門
? ? ? ? 1.基本介紹 :?
????????JavaScript 能改變 HTML 的內(nèi)容和屬性，能改變 HTML 的樣式 (CSS)，能完成頁面的數(shù)據(jù)驗證；JavaScript用于控制網(wǎng)頁的行為。
? ? ? ? JavaScript簡稱JS， 需要運行瀏覽器來解析執(zhí)行 JavaScript 代碼。
? ? ? ? 關(guān)于JS代碼——
? ? ? ? (1)JavaScript代碼寫在<script></script>標(biāo)簽中。
? ? ? ? (2)在<script>標(biāo)簽中要添加屬性type="text/javascript"。
? ? ? ? (3)javascript語句可不寫分號（建議寫上）。
? ? ? ? 2.JavaScript特點 :?
????????1.JavaScript 是一種解釋型的腳本語言。C、C++等語言是先編譯后執(zhí)行，而 JavaScript 是在程序的運行過程中由解釋器逐行進(jìn)行解釋。
? ? ? ? PS :?
? ? ? ? 解釋性語言——JavaScript, Java, PHP等。
? ? ? ? 編譯性語言——C/C++。
? ? ? ? 區(qū)別——解釋性語言編譯后的代碼，不能直接被機(jī)器執(zhí)行，需要解釋器來執(zhí)行；編譯性語言編譯后的代碼，可以直接被機(jī)器執(zhí)行。
????????2.JavaScript 是一種基于對象的腳本語言，可以創(chuàng)建對象，也能使用現(xiàn)有的對象(有對象)。
????????3.JavaScript 是弱類型的，對變量的數(shù)據(jù)類型不做嚴(yán)格的要求，變量的數(shù)據(jù)類型在運行過程可以變化（對語法的約束性弱）。
? ? ? ? ? ? ? ? 代碼演示 :?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>first javascript</title>
<script type="text/javascript">
var name_EX = "Cyan"; //var用于定義一個變量
console.log("name_EX = " + name_EX); //表示在控制臺輸出name變量的值
console.log(typeof name_EX); //表示在控制臺輸出name變量的類型
name_EX = 100; //改變name變量的類型（弱類型）
console.log("name_EX = " + name_EX);
console.log(typeof name_EX);
</script>
</head>
<body>
</body>
</html>? ? ? ? ? ? ? ? 運行結(jié)果 :?
? ? ? ? 3.JavaScript使用方式 :?
? ? ? ? ? ? ? ? 1° 方式一 : 寫在<script>標(biāo)簽中
? ? ? ? 可以在<head>或者<body>中嵌入<script></script>標(biāo)簽；（建議在<head></head>標(biāo)簽下）；執(zhí)行順序是從上到下。?
? ? ? ? ? ? ? ? 2° 方式二 : 以外部文件形式引入
? ? ? ? 在<script></script>標(biāo)簽中直接添加type屬性和src屬性。type="text/javascript"指明導(dǎo)入的是javascript腳本文件；src屬性指明.js文件的路徑。
? ? ? ? ? ? ? ? 代碼演示 :?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>use by introducing outer file</title>
<script type="text/javascript" src="../../../js/demo.js"></script>
</head>
<body>
</body>
</html>? ? ? ? ? ? ? ? .js外部文件如下 :?
var v1 = "RA9";
console.log("v1 = " + v1);
console.log(typeof v1);
v1 = 233;
console.log("v1 = " + v1);
console.log(typeof v1);? ? ? ? ? ? ? ? 運行結(jié)果 :?
? ? ? ? ? ? ? ? PS : 注意事項
????????兩種使用 js 的方式（script標(biāo)簽嵌入和script標(biāo)簽引入），是二選一，不能混用。
? ? ? ? 同時使用雖然不會報錯，但只有前面引入的js文件生效。
? ? ? ? 4.JavaScript查錯方式 :?
????????????????以Google Browser為例，在html頁面，進(jìn)入開發(fā)者工具(Ctrl + Shift + i)，在控制臺(Console)界面可以找到出錯代碼所在的位置(行數(shù))，如下圖所示 :?
?????????????????若想直接定位到錯誤位置的源碼，可以點擊右側(cè)的error，如下圖所示 :?
? ? ? ? ? ? ? ? 定位源碼，如下圖所示 :?
二、JavaScript數(shù)據(jù)類型
? ? ? ? 1.變量 :?
????????變量是用于存儲信息的"容器"。JavaScript 變量可用于存放值（比如 x=5）和表達(dá)式（比如 z=x+y）。JS變量對大小寫敏感。
? ? ? ? ? ? ? ? 內(nèi)存指瀏覽器的內(nèi)核空間。變量指向某一個內(nèi)存空間。
????????????????如下圖所示 :??
? ? ? ? 2.數(shù)據(jù)類型 :?
? ? ? ? 常用數(shù)據(jù)類型如下——
? ? ? ? 1° 數(shù)值類型： number
? ? ? ? PS : （聯(lián)系Java的包裝類——除了Character類和Boolean類外，其他六大包裝類都繼承自Number類。）? ? ? ? 2° 字符串類型： string（包含單個字符和字符串）
? ? ? ? PS :?string字符串既可以用雙引號括起來，也可以單引號括起來，并且允許空字符串""。
? ? ? ? 3° 布爾類型： boolean（true，false）
? ? ? ? 4° 對象類型: object
? ? ? ? 5° 函數(shù)類型： function（方法）
? ? ? ? 3.特殊值 :?
????????undefined : 使用未初始化的變量，默認(rèn) undefined
????????null : 空值
????????NaN(Not a Number) : 非數(shù)值
? ? ? ? ? ? ? ? 代碼演示 :?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>special value</title>
<script type="text/javascript">
var v1;
console.log("v1 = " + v1);
console.log(typeof v1);
var v2 = null;
console.log("v2 = " + v2);
console.log(typeof v2);
var v3 = 5 * 'Cyan';
console.log("v3 = " + v3);
console.log(typeof v3);
</script>
</head>
<body>
</body>
</html>? ? ? ? ? ? ? ? 運行結(jié)果 :?
三、JavaScript運算符
? ? ? ? 1.算術(shù)運算符：
????????算術(shù)運算符用于執(zhí)行變量與/或值之間的算術(shù)運算。
? ? ? ? JavaScript中算術(shù)運算符的使用與Java幾無二致。
? ? ? ? 2.關(guān)系運算符 :?
????????關(guān)系(比較) 運算符在邏輯語句中使用，以測定變量或值是否相等。
? ? ? ? JS的關(guān)系運算符與Java幾無二致，特殊的地方在于——
? ? ? ? === : 全等（類型和值都要求相等）? ? ? ? == : 相等（僅要求字面值的相等）
? ? ? ? 3.賦值運算符 :?
????????賦值運算符用于給 JavaScript 變量賦值。
????????JS中賦值運算符的使用與Java幾無二致。?
? ? ? ? 4.邏輯運算符 :?
? ? ? ? 邏輯運算符用于測定變量或值之間的邏輯。
? ? ? ? JS邏輯運算符的使用與Java幾無二致，特殊的地方在于——
? ? ? ? ①在JavaScript語言中，所有的變量，都可以作為一個 boolean 類型的變量去使用。
? ? ? ? ②0 、null、 undefined、""(空串)、NaN都認(rèn)為是 false。? ? ? ? ③JS邏輯運算符也遵循“短路與”和“短路或”的機(jī)制，
? ? ? ? PS : 短路與全真時，返回最后一個表達(dá)式的值；短路或全假時，返回最后一個表達(dá)式的值。注意，當(dāng)返回的表達(dá)式是一個有具體值的變量，會返回該表達(dá)式的值。
? ? ? ? ? ? ? ? 代碼演示 :?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>operator</title>
<script type="text/javascript">
var b1 = "233.333";
if (b1) {
console.log("This is true!"); //alert表示彈窗的意思
}
var b2 = NaN;
if (!b2) {
console.log("NaN boil down to false");
}
var i = 11;
var b3 = "800" || i++;
console.log("b3 = " + b3 + ", i = " + i);
var b4 = 1.55 && 100 + 2;
console.log("b4 = " + b4);
</script>
</head>
<body>
</body>
</html>? ? ? ? ? ? ? ? 運行結(jié)果 :?
? ? ? ? 5.三目運算符 :?
? ? ? ? JS也支持三目運算符，使用規(guī)則與Java相同。????????
? ? ? ? 仍然需要注意的是，在JavaScript語言中，所有的變量都可以作為一個Boolean類型的變量去使用，因此，三目運算符的返回結(jié)果可以是一個具體的值（表達(dá)式的值）。
四、JavaScript數(shù)組
? ? ? ? 1.數(shù)組的定義 :?
? ? ? ? JS中，同一個數(shù)組允許有不同數(shù)據(jù)類型的元素（弱類型語言）。
? ? ? ? 若想訪問數(shù)組中某一個確定的元素，通過下標(biāo)來訪問。
? ? ? ? 數(shù)組定義方式1 :?
????????var fruit?= ["apple", "grape", "watermelon"];
? ? ? ? PS : 方式1也支持空數(shù)組。eg : var fruit?= [];
? ? ? ? 數(shù)組定義方式2?:?
? ? ? ? var fruit2?= new Array("apple", "grape", "watermelon");
? ? ? ? PS : 方式2也支持空數(shù)組。eg : var fruit2 = new Array();
? ? ? ? ? ? ? ? 代碼演示 :?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>array definition</title>
<script type="text/javascript">
var fruit = ["apple", "grape", "watermelon"];
console.log("fruit = " + fruit);
console.log("fruit[2] = " + fruit[2]);
var fruit_ = [];
fruit_[0] = 3; //相當(dāng)于擴(kuò)容。
fruit_[4] = 11; //被跳過的元素自動為undefined
console.log("fruit_ = " + fruit_);
console.log("fruit_[2] = " + fruit_[2]);
console.log("---------------------------------");
var fruit2 = new Array("pineapple", "strawberry", "blueberry");
console.log("fruit2 = " + fruit2);
console.log("fruit2[1] = " + fruit2[1]);
//var fruit2_ = new Array();
//like above
</script>
</head>
<body>
</body>
</html>? ? ? ? ? ? ? ? 運行結(jié)果 :?
? ? ? ? 2.數(shù)組的遍歷 :?
? ? ? ? 先通過數(shù)組.length來獲取數(shù)組的長度，然后再通過for循環(huán)來遍歷數(shù)組。
? ? ? ? ? ? ? ? 代碼演示 :?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>traverse the array</title>
<script type="text/javascript">
var animals = [11, 233.333, "Cyan", true];
animals[1] = 5; //可以達(dá)到替換的效果。(JS中的數(shù)組兼具Java中數(shù)組和集合的特點)
for (i = 0; i < animals.length; ++i) {
console.log("animals[" + i + "] = " + animals[i]); //log會自動換行。
}
</script>
</head>
<body>
</body>
</html>? ? ? ? ? ? ? ? 運行結(jié)果 :?
五、JavaScript函數(shù)
? ? ? ? 1.簡介 :?
????????函數(shù)是由事件驅(qū)動的，或者當(dāng)它被調(diào)用時，執(zhí)行的可重復(fù)使用的代碼塊。
? ? ? ? 2.定義 :?
? ? ? ? ? ? ? ? 1° 通過function關(guān)鍵字來定義函數(shù)?
? ? ? ? 基本語法格式如下 :?
? ? ? ? function 函數(shù)名(形參列表) {?? ? ? ? ? ? ? ? //函數(shù)體（方法體）
? ? ? ? ? ? ? ? return語句;
? ? ? ? }
? ? ? ? ? ? ? ? 代碼演示 ：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>The way to define function No.1</title>
<script type="text/javascript">
/*
函數(shù)只有在被調(diào)用時才會執(zhí)行。
*/
function f1() {
console.log("This is f1()");
}
f1();
function f2(t1, t2) {
console.log("t1 = " + t1 + ", t2 = " + t2);
}
f2(11, 5);
function f3() {
return "haha";
}
console.log("f3() = " + f3());
function f4(name) {
return "Cyan" + name;
}
console.log("f4() = " + f4("RA9"));
</script>
</head>
<body>
</body>
</html>? ? ? ? ? ? ? ? 運行結(jié)果 :?
? ? ? ? ? ? ? ? 2° 通過將函數(shù)賦值給變量
? ? ? ? 基本語法格式如下 :?
? ? ? ? var 函數(shù)名 = function? (形參列表) {?? ? ? ? ? ? ? ? //函數(shù)體（方法體）
? ? ? ? ? ? ? ? return語句;
? ? ? ? }
? ? ? ? ? ? ? ? 代碼演示 :?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>define function in way 2</title>
<script type="text/javascript">
var ff1 = function () {
return "haha";
}
console.log("ff1 = " + ff1());
var ff2 = ff1;
console.log("ff2 = " + ff2());
</script>
</head>
<body>
</body>
</html>? ? ? ? ? ? ? ? 運行結(jié)果 :?
? ? ? ? 3.注意事項 :?
????????1° JS 中不允許函數(shù)的重載，“重載”會覆蓋掉上一次函數(shù)的定義。
????????2° 關(guān)于函數(shù)的 arguments 隱形參數(shù)（作用域在 function 函數(shù)內(nèi)）——
????????????????(1) 隱形參數(shù): 在 function 函數(shù)中不需要定義，可以直接用來獲取所有的實參。
????????????????(2) 隱形參數(shù)在使用上類似Java的可變參數(shù)，但是arguments允許多類型.（弱）? ? ? ? 3°?關(guān)于函數(shù)形參個數(shù)和實參個數(shù)不匹配的問題 ——
????????????????(1)實參按照順序一一匹配形參；
????????????????(2)不管傳入多少實參，統(tǒng)統(tǒng)都可以在arguments隱形參數(shù)中找到。
????????????????(3)當(dāng)實參個數(shù)多于形參個數(shù)，按順序匹配形參，多余的實參無效；當(dāng)實參個數(shù)少于形參個數(shù)，未初始化的形參 = undefined。
? ? ? ? ? ? ? ? 代碼演示 :?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>some details about JS's function</title>
<script type="text/javascript">
function f1() {
console.log("I'm non-parameter f1.");
}
function f1(name) {
console.log("I'm parameter's f1");
console.log("name = " + name);
}
f1(); //被覆蓋，無參，實際卻調(diào)用了有參。
console.log("===========================================================");
var f2 = function (a,b,c) {
console.log("I'm f2");
console.log("arguments = ", arguments); //如果想輸入對象的詳細(xì)數(shù)據(jù)，中間用,隔開
console.log("b = " + arguments[1]);
console.log("arguments' length = " + arguments.length);
}
f2(5,11,24,23,2);
f2(11);
</script>
</head>
<body>
</body>
</html>? ? ? ? ? ? ? ? 運行結(jié)果 :?
六、JavaScript對象
? ? ? ? 1.對象的定義 ：
? ? ? ? ? ? ? ? 1° 方式一 : 通過Object
????????var 對象名 = new Object(); ????????????????????????// 對象實例（空對象）
????????對象名.屬性名 = 值; ???????????????????????????????????// 定義一個屬性
????????對象名.函數(shù)名 = function(){} ??????????????????????// 定義一個函數(shù)? ? ? ? PS : JS和Java創(chuàng)建對象的區(qū)別——
? ? ? ? ? ? ? ? Java是先確定對象有什么，再去創(chuàng)建對象；而JavaScript是先創(chuàng)建對象，再去決定給對象添加什么內(nèi)容。
? ? ? ? ? ? ? ? 代碼演示 :?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>define object in way.1</title>
<script type="text/javascript">
var stu = new Object(); //"built-in" 內(nèi)置對象
console.log("stu's type = " + typeof(stu));
stu.name = "Cyan";
stu.age = "21";
stu.sex = "male";
stu.score = "420";
stu.info = function () {
console.log("name = " + this.name + ", age = " + this.age + ", sex = "
+ this.sex + ", score = " + this.score);
}
stu.info();
//變量提升 (undefined)
stu.unknown = function () {
console.log("hobby = " + this.hobby + ", advantage = " + this.advantage);
}
stu.unknown();
</script>
</head>
<body>
</body>
</html>? ? ? ? ? ? ? ? 運行結(jié)果 :?
? ? ? ? ? ? ? ? 2° 方式二 : 通過{} （使用頻率更高！）
? ? ? ? Δ注意冒號:和逗號,的使用?。?！
????????var 對象名 = {
????????????????屬性名：值, ????????????????// 定義屬性
????????????????屬性名：值, ????????????????// 定義屬性
????????????????函數(shù)名：function () {} // 定義函數(shù)
????????}? ? ? ? PS : 除最后一個定義外，其他定義語句后必須加逗號。
? ? ? ? ? ? ? ? 代碼演示 :?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Object definition No.2</title>
<script type="text/javascript">
var employee = {
id: 1,
name: "Cyan_RA9",
sex: "male",
score: 420,
info: function () {
console.log("id = " + this.id + ", name = " + this.name + ", sex = " +
this.sex + ", score = " + this.score);
},
hobby: function (hobby) {
return "I relish playing " + hobby;
}
}
employee.info();
console.log(employee.hobby("basketball"));
</script>
</head>
<body>
</body>
</html>? ? ? ? ? ? ? ? 運行結(jié)果 :?
? ? ? ? 2.對象的訪問 :?
? ? ? ? 訪問對象屬性——
? ? ? ? ? ? ? ? 對象.屬性;
? ? ? ? 訪問對象行為——
? ? ? ? ? ? ? ? 對象.函數(shù)名();
七、JavaScript事件
? ? ? ? 1.基本介紹 :?
? ? ? ? 1° 事件是電腦輸入設(shè)備與頁面進(jìn)行交互的響應(yīng)。
? ? ? ? 2° 事件通常與函數(shù)配合使用，這樣就可以通過發(fā)生的事件來驅(qū)動函數(shù)執(zhí)行。
? ? ? ? 2.常見事件 :?
| 事件 | 描述 |
|---|---|
| onblur | 失去焦點 |
| onchange | HTML 元素已被改變 |
| onclick | 用戶點擊了 HTML 元素 |
| onmouseover | 用戶把鼠標(biāo)移動到 HTML 元素上 |
| onmouseout | 用戶把鼠標(biāo)移開 HTML 元素 |
| onkeydown | 用戶按下鍵盤按鍵 |
| onload | 瀏覽器已經(jīng)完成頁面加載 |
| onsubmit | 表單提交事件 |
? ? ? ? 3.事件分類 :?
? ? ? ? 0° 事件注冊(綁定)：
? ? ? ? 決定事件響應(yīng)(觸發(fā))后瀏覽器要執(zhí)行哪些操作代碼，叫事件注冊或事件綁定。
? ? ? ? 1°?靜態(tài)注冊事件 ：
????????通過 html 標(biāo)簽的事件屬性?直接賦予事件響應(yīng)后的代碼，這種方式叫靜態(tài)注冊。(用的不多)
? ? ? ? 2°?動態(tài)注冊事件：
????????通過JS代碼得到標(biāo)簽對應(yīng)的 dom 對象，然后再通過 dom 對象.事件名 = function(){} 來反控標(biāo)簽的行為，這種形式叫動態(tài)注冊。
? ? ? ? PS：動態(tài)注冊事件步驟——
????????????????1. 獲取標(biāo)簽對應(yīng)的dom對象。
????????????????2. dom對象.事件名 = fucntion () {}， 通過dom對象來反控標(biāo)簽行為。
? ? ? ? 4.事件演示 :?
? ? ? ? ? ? ? ? 1° onload事件
????????onload : 某個頁面或圖像已經(jīng)被加載完畢時，觸發(fā)onload事件。
? ? ? ? ? ? ? ? 代碼演示 :?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>onload test</title>
<script type="text/javascript">
//靜態(tài)注冊 : onload="staticTest()"
function staticTest() {
alert("This is static register");
}
//動態(tài)注冊
/*
(1)JS中，將頁面窗口映射成了window對象；可以使用window對象的函數(shù)和屬性
(2)window.onload表示頁面被加載完畢
(3)當(dāng)頁面被加載完畢后，執(zhí)行function中的代碼
*/
window.onload = function () {
alert("This is dynamic register...");
}
</script>
</head>
<body>
Cyan_RA9 <br/><br/>
<input type="text" value="test"/> <br/><br/>
<textarea style="width: 300px">
Please input your content:
</textarea>
</body>
</html>? ? ? ? ? ? ? ? 運行效果?:?
? ? ? ? ? ? ? ? 2° onclick事件
????????onclick : 鼠標(biāo)點擊某個對象時觸發(fā)該事件。
? ? ? ? ? ? ? ? 代碼演示 :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>onclick event test</title>
<script type="text/javascript">
//靜態(tài)注冊
var staticMod = function () {
alert("Cyan_RA9");
}
//動態(tài)注冊
/*
(1)先在要獲取DOM對象的HTML元素中添加id屬性，進(jìn)行標(biāo)識
(2)利用documentDOM對象的getElementById方法，根據(jù)指定的id，來獲取HTML元素對應(yīng)的dom對象
(3)通過獲取的dom對象動態(tài)地綁定onclick事件
(4)若頁面未加載完畢就獲取頁面元素的dom對象，結(jié)果為null；因此要配合onload事件，確保成功獲取dom對象
PS : document的范圍是頁面的主體顯示內(nèi)容。
*/
window.onload = function () {
var Button01 = document.getElementById("Button01");
Button01.onclick = function () {
alert("Kyrie Irving");
}
}
</script>
</head>
<body>
<button onclick="staticMod()">點我點我</button>
<button id = "Button01">別點它，點我</button>
</body>
</html>? ? ? ? ? ? ? ? 運行效果：（如下GIF圖）
? ? ? ? ? ? ? ? 3°?onblur事件
????????onblur : 元素失去焦點。
? ? ? ? ? ? ? ? 代碼演示 :?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>onblur event test</title>
<style>
table {
border: 3px cornflowerblue solid;
background-color: pink;
}
</style>
<script type="text/javascript">
//靜態(tài)注冊
function upperCase() {
var input_1 = document.getElementById("input_1");
input_1.value = input_1.value.toUpperCase(); //用大寫后的值覆蓋掉原來的值
}
//動態(tài)注冊
window.onload = function () {
var input_2 = document.getElementById("input_2");
input_2.onblur = function () {
input_2.value = input_2.value.toUpperCase(); //用大寫后的值覆蓋掉原來的值
}
}
</script>
</head>
<body>
<table>
<tr>
<td>Username:</td>
<td><input type="text" name="test1" id="input_1" onblur="upperCase()"/></td>
</tr>
<tr>
<td>Password:</td>
<td><input type="text" name="test2" id="input_2"/></td>
</tr>
</table>
</body>
</html>? ? ? ? ? ? ? ? 運行效果：（如下GIF圖）
? ? ? ? ? ? ? ? 4° onchange事件
????????onchange 內(nèi)容發(fā)生改變事件。
? ? ? ? ? ? ? ? 代碼演示 :?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>on change test</title>
<style>
table,tr,td {
border: 3px cornflowerblue solid;
background-color: pink;
}
</style>
<script type="text/javascript">
var changeInfo = function () {
alert("你的成績水平發(fā)生了變化~");
}
window.onload = function () {
var sel_2 = document.getElementById("sel_2");
sel_2.onchange = function () {
alert("你的健康狀況發(fā)生了變化~");
}
}
</script>
</head>
<body>
<table>
<tr>
<td>你當(dāng)前的成績水平：</td>
<td><select id="sel_1" onchange="changeInfo()">
<option>---成績---</option>
<option>優(yōu)</option>
<option>良</option>
<option>差</option>
</select></td>
</tr>
<tr>
<td>你當(dāng)前的健康水平：</td>
<td><select id="sel_2">
<option>---健康狀況---</option>
<option>牛逼</option>
<option>害?</option>
<option>飛舞</option>
</select></td>
</tr>
</table>
</body>
</html>? ? ? ? ? ? ? ? 運行效果 : （如下GIF圖）
? ? ? ? ? ? ? ? 5° onsubmit事件???
????????onsubmit : 注冊按鈕被點擊, 提交表單。
? ? ? ? ? ? ? ? 代碼演示 :?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>onsubmit test</title>
<style type="text/css">
table,tr,td {
border:2px cornflowerblue solid;
border-collapse:collapse;
padding: 10px;
}
#td_1,#td_2 {
text-align: center;
}
</style>
<script type="text/javascript">
function register() {
var username = document.getElementById("username");
var pwd = document.getElementById("pwd");
if ("" == username.value || "" == pwd.value) {
alert("Failed to submit --- username or password can't be empty!");
return false; //表示不提交
}
return true; //表示提交
}
window.onload = function () {
var form2 = document.getElementById("form2");
//onsubmit綁定的函數(shù)，會直接將結(jié)果(True | false)返回給onsubmit
form2.onsubmit = function () {
if ("" == form2.username.value || "" == form2.pwd.value) {
alert("Failed to submit --- username or password can't be empty!");
return false;
}
return true;
}
}
</script>
</head>
<body>
<!--注意：onsubmit事件，必須要有return將事件的結(jié)果返回給onsubmit-->
<form action="ok.html" method="get" onsubmit="return register()"> <!-- 默認(rèn)是get請求的提交方式 -->
<table>
<tr>
<td colspan="2" id="td_1">用戶登錄1</td>
</tr>
<tr>
<td>UserName: </td>
<td><input type="text" name="username" id = "username"/></td>
</tr>
<tr>
<td>Password: </td>
<td><input type="password" name="pwd" id = "pwd"/></td>
</tr>
<tr>
<td><input type="submit" value="submit"/></td>
<td><input type="reset" value="reset"/></td>
</tr>
</table>
</form> <br/>
<form action="ok.html" method="get" id="form2">
<table>
<tr>
<td colspan="2" id="td_2">用戶登錄2</td>
</tr>
<tr>
<td>UserName: </td>
<td><input type="text" name="username"/></td>
</tr>
<tr>
<td>Password: </td>
<td><input type="password" name="pwd"/></td>
</tr>
<tr>
<td><input type="submit" value="submit"/></td>
<td><input type="reset" value="reset"/></td>
</tr>
</table>
</form>
</body>
</html>? ? ? ? ? ? ? ? ok.html代碼如下 :?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>When you log in successfully</title>
<style>
span {
font-weight: bold;
font-family: consolas;
font-size: 20px;
}
</style>
</head>
<body>
<span>You did it, MAN!</span>
</body>
</html>? ? ? ? ? ? ? ? 運行效果：（如下GIF圖）
八、JavaScript總結(jié)
? ? ? ? 首先需要記住JavaScript這門語言的特點（尤其是弱類型的特點);
? ? ? ? 其次是JS常見的幾種數(shù)據(jù)類型；以及數(shù)組的兩種定義方式；函數(shù)的兩種定義方式；對象的兩種定義方式；事件的分類，動態(tài)注冊事件的步驟，一些常見事件的使用（尤其是onsubmit事件）。
? ? ? ? 以上都應(yīng)該掌握。文章來源：http://www.zghlxwxcb.cn/news/detail-547105.html
? ? ? ? System.out.println("END---------------------------------------------------------------------------------");文章來源地址http://www.zghlxwxcb.cn/news/detail-547105.html
到了這里，關(guān)于JavaWeb 速通JavaScript的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
