JavaScript 語言入門
一、JavaScript 介紹
Javascript 語言誕生主要是完成頁面的資料驗證，因此它運行在客戶端，需要運行瀏覽器來決議執行 JavaScript 代碼， JS 是 Netscape 網景公司的產品，最早取名為 LiveScript;為了吸引更多 java 程式員，更名為 JavaScript， JS 是弱型別，Java 是強型別，二、JavaScript 和 html 代碼的結合方式
2.1、第一種方式
只需要在 head 標簽中，或者在 body 標簽中， 使用 script 標簽 來書寫 JavaScript 代碼，代碼示例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>script標簽的使用</title> <script type="text/javascript"> //alert是JavaScript語言提供的一個警告框函式 //它可以接收任意型別的引數，這個引數就是警告框的提示資訊 alert("hello javascript!"); </script> </head> <body> </body> </html>
效果如下：
2.2、第二種方式
使用 script 標簽引入 單獨的 JavaScript 代碼檔案，
創建一個js檔案，內部書寫js代碼：
HTML頁面內容：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>javascript</title> <!-- 我們只需要通過src屬性引入js檔案即可， 引入的方式和直接在script標簽中書寫js代碼兩種方式只能二選一，不能同時使用 --> <script type="text/javascript" src="1.js"></script> <script type="text/javascript"> alert("hello2"); </script> </head> <body> </body> </html>
效果如下：
三、變數
什么是變數？變數是可以存放某些值的記憶體的命名，
代碼示例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>javascript</title> <script type="text/javascript"> var i; // alert(i); //undefined i = 12; // alert(typeof(i)); //number //它可以取任意變數的資料型別 i = "abc"; alert(typeof(i)); //string var a = 12; var b = "abc"; alert(a * b); //NaN </script> </head> <body> </body> </html>
四、運算子
4.1、關系運算
等于：== 等于是簡單的做字面值的比較 全等于：=== 除了做字面值的比較之外，還會比較兩個變數的資料型別代碼示例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>javascript</title> <script type="text/javascript"> var a = 12; var b = "12"; alert(a == b);//true alert(a === b);//false </script> </head> <body> </body> </html>
4.2、邏輯運算
&&：且運算
||：或運算
!：取反運算
在JavaScript語言中，所有的變數都可以作為boolean型別的變數去使用，
0、null、undefined、NaN、""(空串)都是false，
代碼示例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>javascript</title> <script type="text/javascript"> var a = "abc"; var b = true; var c = false; var d = null; //&& alert(a && b);//true alert(b && a);//abc alert(a && c);//false alert(a && d);//null //|| alert(d || c);//false alert(c || d);//null alert(a || c);//abc alert(b || c);//true </script> </head> <body> </body> </html>
五、陣列（*****重點）
5.1、陣列的定義方式
代碼示例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>javascript</title> <script type="text/javascript"> var arr = []; alert(arr.length);//0 arr[0] = 12; alert(arr[0]);//12 alert(arr.length);//1 //在JavaScript語言中，我們通過下標的方式給陣列賦值，那么最大的下標值，就會自動的給陣列做擴容操作 arr[2] = "abc"; alert(arr.length);//3 alert(arr[1]);//undefined //陣列的遍歷 for (var i = 0; i < arr.length; i++) { alert(arr[i]); } </script> </head> <body> </body> </html>
六、函式(*****重點)
6.1、函式的兩種定義方式
第一種：使用function關鍵字來定義函式
格式：
function 函式名(形參串列){
函式體;
}
//注:如果函式有回傳值，只需要使用return關鍵字回傳值即可，
代碼示例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>javascript</title> <script type="text/javascript"> function fun1() { alert("無參函式fun1()被掉用了"); } fun1();//函式只有被呼叫才會執行 function fun2(a,b) { alert("有參函式fun2()被呼叫了，a = " + a + ", b = " + b); } fun2(10,20); function sum(num1,num2) { return num1 + num2; } alert(sum(10,20)); </script> </head> <body> </body> </html>
第二種定義方式，格式如下：
var 函式名 = function(形參串列){
函式體;
}
代碼示例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>javascript</title> <script type="text/javascript"> var fun1 = function () { alert("無參函式"); }; fun1(); var fun2 = function (a,b) { alert("a = " + a + ", b = " + b); }; fun2(10,20); var sum = function (num1,num2) { return num1 + num2; }; alert(sum(10,20)); </script> </head> <body> </body> </html>
在js中，函式是不允許多載的，函式的多載會覆寫掉上一次的定義，
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>javascript</title> <script type="text/javascript"> function fun() { alert("無參函式"); } function fun(a,b) { alert("有參函式"); } fun(); </script> </head> <body> </body> </html>
效果如下：
6.2、函式的 arguments 隱形引數（只在 function 函式內）
就是在 function 函式中不需要定義，但卻可以直接用來獲取所有引數的變數，我們管它叫隱形引數，代碼示例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>javascript</title> <script type="text/javascript"> function fun(a) { alert("a = " + a);//a = 1 for (var i = 0; i < arguments.length; i++) { alert(arguments[i]); } } fun(1,true,"abc"); </script> </head> <body> </body> </html>
七、JS 中的自定義物件
代碼示例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>javascript</title> <script type="text/javascript"> var obj = new Object(); obj.name = "郭鵬"; obj.age = 25; obj.fun = function () { alert("年齡:" + this.name + ", 年齡:" + this.age); }; alert(obj.name); obj.fun(); </script> </head> <body> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>javascript</title> <script type="text/javascript"> var obj = { name:"郭鵬", age:25, fun:function () { alert("姓名:" + this.name + "，年齡:" + this.age); } }; alert(obj.age); obj.fun(); </script> </head> <body> </body> </html>
八、js 中的事件
何為事件？
電腦輸入設備與頁面進行互動的回應，我們稱之為事件，
事件的注冊又分為靜態注冊和動態注冊兩種：
什么是事件的注冊（系結）？ 其實就是告訴瀏覽器，當事件回應后要執行哪些操作代碼，叫事件注冊或事件系結， 靜態注冊事件：通過 html 標簽的事件屬性直接賦于事件回應后的代碼，這種方式我們叫靜態注冊， 動態注冊事件：是指先通過 js 代碼得到標簽的 dom 物件，然后再通過 dom 物件.事件名 = function(){} 這種形式賦于事件回應后的代碼，叫動態注冊， 動態注冊基本步驟： 1、獲取標簽物件 2、標簽物件.事件名 = fucntion(){}
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/207458.html
標籤：其他
上一篇：Java注解（入門級）