JavaScript是屬于HTML與Web的解釋性編程語言,也是一種以函數優(yōu)先的弱類型輕量級的腳本語言,無需進行預編譯即可與HTML前端頁面進行行為交互,支持跨平臺運行,可在多種平臺下(如Windows、Linux、Mac、Android、iOS等)。目前JavaScript被廣泛地應用于Web前端Html實現(xiàn)頁面交互、實現(xiàn)瀏覽器頁面事件響應、前端數據驗證、檢驗訪客瀏覽器信息、控制cookies的創(chuàng)建與修改、基于Node.js技術進行服務器端編程。
JS一般有三種定義的方式:
① 寫在<a>標簽的href屬性內;
② 寫在<script>標簽內;
③ 單獨寫一個JS文件,使用外連的方式引入;
下面直接給出代碼示例以區(qū)分這三種方式的不同:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta charset="UTF-8"> <title>三種JS的寫法</title> <!--第二種寫法:寫在script代碼塊中--> <script type="text/javascript"> alert("我在塊里面!") </script> <!--第三種寫法:單獨寫一個js文件,在src中引入.js文件--> <script type="text/javascript" src="./js/01hello.js"></script> </head> <body> <!-- JS的三種寫法: ①寫在標簽內; ②寫在script標簽內; ③單獨寫一個JS文件 --> <!--第一種寫法:表示的是偽協(xié)議,給瀏覽器看,偽協(xié)議之后的代碼當做JS代碼執(zhí)行--> <a href="javascript:console.debug('點你就點你')">點擊我</a> </body> </html>
JavaScript中的標識符與Java中標識符的定義是一樣的,標識符是為了標識程序中諸如類、方法和變量等元素而采用的命名。
所有的標識符必須遵從以下規(guī)則:
合法的標識符舉例:indentifier、username、user_name、_userName、$username;
非法的標識符舉例:int、98.3、Hello World。
JavaScript是嚴格區(qū)分大小寫的,所以area、Area和AREA是不同的標識符,使用標識符時應該使用具有描述性的標識符以提高程序的可讀性。
關鍵字包含:
break continue debugger do … while for function if … else return switch
try … catch var case break case continue default delete do finally in
instanceof new return this throw typeof void with
保留字包含:
abstract Boolean byte char class const double enum export extends
final float goto implements import int interface long package private
protected public short static super synchronized throws transient volatile
JavaScript每條執(zhí)行語句以分號”;”分隔,以分號分隔在實際執(zhí)行過程中不是必需的(去除”;”可以執(zhí)行),但是在實際編寫代碼過程中強烈建議加上分號!
var a = 5; var b = 6; var c = a + b;
如果有分號分隔,允許在同一行寫多條執(zhí)行語句:
var a = 5;b = 6;c = a + b; console.debug(a); //5 console.debug(b); //6 console.debug(c); //11
JavaScript注釋用于解釋JavaScript代碼,增強其可讀性。JavaScript注釋也可以用于在測試替代代碼時阻止執(zhí)行。
JavaScirpt中主要有三種注釋類型:
單行注釋、多行注釋、文檔注釋
單行注釋以//開頭,任何位于//與行末之間的文本都會被JavaScript忽略(不會執(zhí)行)。
多行注釋以/*開頭,以*/結尾,任何位于/*與*/之間的文本都會被JavaScript忽略。
文檔注釋以/**開頭,以*/結尾,任何位于/**與*/之間的文本都會被JavaScript忽略。
//單行注釋 var x = 5; // 聲明 x,為其賦值 5 var y = x + 2; // 聲明 y,為其賦值 x + 2 /* 多行注釋 下面的代碼會改變 網頁中 id = "myH" 的標題 以及 id = "myP" 的段落: */ document.getElementById("myH").innerHTML = "我的第一張頁面"; document.getElementById("myP").innerHTML = "我的第一個段落。"; /** 文檔注釋 一般用于公司簽名抬頭標明產品文件類型 */
JavaScript會忽略多個空格,我們可以在腳本語句中添加多個空格間隔語句代碼,以增強程序的可讀性。
下面這兩行是相等的:
var person = "Bill"; var person="Bill";
在運算符旁邊(= + - * /)添加空格是個好習慣:
var x = y + z;
JavaScript變量是用于存儲數據值的一個標識,指向具體的內存地址,保存對應的值或者對象地址值。
變量聲明首先要遵循標識符命名原則,并且JavaScript聲明變量要使用var關鍵字,比如:
var name; console.debug(name); //打印空字符 console.debug(typeof(name)); //string
聲明變量的同時可以為變量賦值,并且在之后改變該變量的值,注意:不能改變變量的類型了,比如:
var name = "張三"; console.debug(name); //張三 console.debug(typeof(name)); //string name = true; console.debug(name); //true console.debug(typeof(name)); //string
此外,JavaScript中還允許不事先聲明變量而直接使用,比如:
num = 1234; console.debug(num); //1234
注意:JavaScript定義變量無需指定變量的類型,任何類型都可以使用var關鍵字聲明。
JavaScript中數據類型包含:字符串型、數值型、布爾型、數組型、對象類型等。
① 字符串型(string)
字符串(或文本字符串)是一串字符,比如:”Bill Gates”。
字符串被引號包圍,你可以使用單引號或者雙引號:
var carName = "Porsche 911"; // 使用雙引號 var carName = 'Porsche 911'; // 使用單引號
也可以在字符串內使用引號,只要這些引號與包圍的字符串的引號不匹配:
var answer = "It's alright"; // 雙引號內的單引號 var answer = "He is called 'Bill'"; // 雙引號內的單引號 var answer = 'He is called "Bill"'; // 單引號內的雙引號
② 數值型(number)
JavaScript只有一種數值類型。寫數值時用不用小數點均可。
var x1 = 34.00; // 帶小數點 var x2 = 34; // 不帶小數點
超大或超小的數值可以用科學計數法來表示。
var num1 = 123e5; // 12300000 var num2 = 123e-5; // 0.00123
③ 布爾型(boolean)
JavaScript布爾值只有兩個值:true或者false。
var res = true; console.debug(res); //true console.debug(typeof(res)); //boolean
④ 數組型
JavaScript數組用方括號表示,數組項目元素用逗號分隔,如下代碼聲明了一個名為cars的數組,包含三個元素(汽車品牌):
var arr = ["Porsche", "Volvo", "BMW"]; console.debug(arr.length); //3 console.debug(arr[0]); //數組索引從0開始,到數組長度-1結束,取值使用arr[索引位置];Porsche console.debug(arr[arr.length-1]); //BMW
⑤ 對象類型
JavaScript對象是使用花括號來表示。
對象屬性是name:value鍵值對,用逗號分隔開。聲明一個對象類型并使用:
//對象類型 var person = { firstName : "Bill", lastName : "Gates", age : 62, eyeColor : "blue" }; //對象取值:使用對象.屬性取值 console.debug(person.firstName + " is " + person.age + " years old"); //Bill is 62 years old
使用typeof可以確定JavaScript變量的類型:
typeof運算符會返回變量或表達式的類型:
typeof運算符可以返回 以下原始類型之一:
var name = "張三"; typeof name; //string typeof 3.14 // 返回 "number" typeof true // 返回 "boolean" typeof x // 返回 "undefined" (假如 x 沒有值) var arr = ["Porsche", "Volvo", "BMW"]; typeof arr; //object
同時在處理復雜數據時,typeof運算符可用返回以下兩種類型之一:
typeof運算符會把對象、數組或null返回object;
typeof運算符會把函數返回function
typeof null // 返回 "object" typeof function myFunc(){} // 返回 "function"
① undefined
在JavaScript中,沒有值的變量,即變量初始化沒有賦值,那么其值就是undefined。typeof也返回undefined。
var person; console.debug(person); //返回undefined
② Null
在JavaScript中,null的數據類型是對象。
var person = null; console.debug(person); //null console.debug(typeof person); //object
undefined與null的區(qū)別:
undefined與null的值相等,但是類型不相等;
typeof undefined // undefined typeof null // object null === undefined // false null == undefined // true
③ 空值
空值表示字符串變量的值為空字符串,空的字符串既有值也有類型。
var str = ""; console.debug(str); //"" console.debug(typeof str); //string
JavaScript函數是被設計為執(zhí)行特定任務的代碼塊。JavaScript函數會在某代碼調用它時被執(zhí)行。
JavaScript函數通過function關鍵詞進行定義,其后是函數名和括號()。
函數名可包含字母、數字、下劃線和美元符號(規(guī)則與變量名相同)。
具體的示例如下:
function 函數名(…參數args){ 方法體—執(zhí)行代碼 }
函數的作用:避免代碼在頁面加載的時候就執(zhí)行了,并且一次定義,多次使用(調用)。
JavaScript函數方法體中使用return來返回此函數被調用后的執(zhí)行結果。在函數中通常會計算出執(zhí)行結果,返回值會由return返回調用者。而在function函數上無需聲明函數返回類型(JS的弱類型的靈活性)。
示例:
function getMsg() { var msg = "隨便返回一個字符串吧"; return msg; } console.debug(getMsg()); //隨便返回一個字符串吧 console.debug(getMsg); //? getMsg() { var msg = "隨便返回一個字符串吧"; return msg;}
函數返回調用需要使用:函數名()來調用,而單獨使用函數名則會返回整個函數體。
在JavaScript函數中聲明的變量,會成為函數的局部變量,局部變量只能在函數內部訪問。
由于局部變量只能被其函數識別,因此可以在不同函數中使用相同名稱的變量。
局部變量在函數開始時創(chuàng)建,在函數完成時被刪除。
全局變量是定義在函數體外部的變量,與局部變量無關,可以全局使用,但是如果在函數體內部的局部變量與全局變量名相同,那么在該函數被調用后可能會改變該全局變量的值。
示例如下:
/** * 1.JS中的全局與局部變量的定義 */ var str = "全局變量"; function showStr() { str = "局部變量"; console.debug(str); } showStr(); //局部變量 console.debug(str); //局部變量,str整體的值進入到showStr()方法中被改變 console.debug("================分割線==================") var str2 = "全局變量2"; function showStr2() { var str2 = "局部變量2"; console.debug(str2); } showStr2(); //局部變量2 console.debug(str2); //全局變量2,定義在showStr2()函數中的str2變量已經執(zhí)行完畢被銷毀
本節(jié)JavaScript(1) – JS入門主要針對JS初學知識體系中常用知識進行匯總,省略了JS輸出打印、JS運算符、JS流程控制部分的說明(這部分比較簡單,和Java語言也大體類型),簡單知識就不再一一累述,學習更多完整的JavaScript入門知識體系請詳見W3shool網址,本部分知識參考W3school網址:
https://www.w3school.com.cn/js/index.asp
學習章節(jié):JS教程 —— JS函數部分,后續(xù)將陸續(xù)匯總更新更多JavaScript章節(jié)自我學習匯總內容。
聯(lián)系客服