1. 程式人生 > >JS特點、引用方式、書寫格式、註釋方式、程式碼除錯及變數

JS特點、引用方式、書寫格式、註釋方式、程式碼除錯及變數

JavaScript與ECMAScript關係:前者是程式語言,後者是實現前者的規範。
一、特點
1、主要用來向html頁面新增動態效果(資料互動行為);
2、可以直接巢狀在html頁面中,但是建議使用單獨js檔案,這樣有利於結構和行為分離;
3、指令碼語言,不需要經過預編譯,在程式執行過程中被逐行解釋執行;
4、相對安全的指令碼語言,不被允許訪問本地硬碟,且不能將資料存入伺服器,只能通過瀏覽器實現資訊瀏覽或互動,有效防止資料丟失和堆系統的非法訪問。
5、弱型別,對使用的資料型別沒有做出嚴格的要求;
6、基於物件,不僅建立物件,還可以擁有現有的物件;
7、事件驅動,js對使用者的響應,是以事件驅動開發的方式進行的,網頁中執行某種操作所產生的動作,稱為事件(event);
8、跨平臺性,絕大多數瀏覽器都支援,可以在多種平臺下執行(windows、ios、linux、android等等)。
個人總結

:js是基於物件通過巢狀或引用向html頁面以事件驅動的方式新增動態效果的較安全的弱型別跨平臺指令碼語言。
二、引用方式
1、外部引用,可以放在head和body之中,使用script標籤來引用;

<script type="text/javascript" charset="utf-8" src=""></script>

type宣告檔案型別(可以省略);charset定義檔案編碼,如果檔案編碼一致,可以省略;src檔案引入路徑。
2、script標籤,可以放在head和body之中,在<script></script>標籤裡書寫;

<script>alert("aaaaa");</script>

3、標籤內部,不需要使用script標籤,不觸發不執行;

<p onclick="alert('cccc')">點我</p>

語法格式:<開始標籤 on+事件型別=“js程式碼”></結束標籤>
常用事件型別:
click點選、dbclick雙擊、
mouseover滑鼠經過、mouseout滑鼠離開、
mousemove元素移動、
mousedown滑鼠按鍵按下、mouseup滑鼠按鍵鬆開、
contextmenu右鍵開啟上下文選單、
mouseenter指標移動到元素上、mouseleave指標移出元素、
keydown任意鍵盤按鍵按下觸發、keyup任意鍵盤按鍵鬆開觸發、keypress任意鍵盤按鍵按下並鬆開。
三、書寫格式


1、每個語句以分號結尾,不建議一行寫多條語句;
2、程式碼塊用{}包起來,花括號裡面可以放很多條語句,具有縮排,縮排通常是4個空格(tab鍵);
3、{}可以多層巢狀,不建議過多巢狀,控制程式碼閱讀難度;
4、建議語句的結尾加上分號,避免引擎自動補齊造成程式碼的語義改變。
四、註釋方式
1、html程式碼註釋<!--內容-->
2、css程式碼註釋/*內容*/
3、js程式碼註釋:單行//,程式碼塊/**/
五、程式碼除錯方式
1、alert(“內容”);//彈出框
2、console.log(“內容”);//控制檯輸出
3、prompt(“內容”);//提示以對話方塊的形式彈出
4、confirm(“內容”);//顯示一個帶有取消按鈕的彈出框
5、document.write("<p>這裡的內容由document.write輸出</p>");//內容輸出在文字流中。
六、變數
一、變數命名
1、必須以下劃線、$或者字母開頭,後面可以採用數字、$、字母、下劃線,不能有空格或者特殊字元;
2、不能使用js的關鍵字和保留字作為變數;
3、變數名區分大小寫;
4、變數命名儘量貼近變數的意義;
二、命名建議
1、Pascal標記法(大駝峰):單詞首字母大寫,例:MyName、MyFirstName;
2、camel標記法(小駝峰):從第二個單詞開始首字母大寫,例:myName、myFirstName;
3、匈牙利標記法:在Pascal標記法基礎上,加一個小寫字母或小寫的字母序列以說明變數的型別,例:i(int)代表整數,s(string)代表字串,sMyName,iMyAge。
三、命名避免保留字和關鍵字
關鍵字
break(跳出迴圈);
case(用於switch語句),catch(try語句,獲取異常) ,continue(不執行當前迴圈語句,直接進入下一個迴圈迭代);
default(switch語句所有case不執行時執行), delete(用於刪除物件的某個屬性), do(do/while迴圈 );
else(if語句);
finally(try語句中可選), for(迴圈語句),function(函式) ;
in(for…in 語句用於對陣列或者物件的屬性進行迴圈操作), instanceof(用於判斷一個變數是否是某個物件的例項), if;
new(例項化一個物件);
return(指定函式返回的值);
switch(選擇,基於不同條件執行不同語句 );
this(指定一個物件然後去替代它),throw(丟擲 ),try, typeof(判斷變數型別);
var(variable變數), void(執行表示式但是不返回值);
while(迴圈語句)、 with(設定程式碼在特定物件中的作用域);
保留字
abstract(抽象), arguments(引數);
boolean(布林值), byte(單位元組);
char(字元), class(類),const(ES6常量);
debugger(偵錯程式), double(雙精度浮點型);
enum(列舉型別), extends(類宣告或者類表示式中,以建立一個類,該類是另一個類的子類), export(使用者自定義模組,規定對外介面),eval(計算某個字串,並執行其中的的 JavaScript 程式碼);
final(修飾變數,引數,函式),float(浮動);
goto(僅是保留字);
implements(繼承父類), import(用於在一個模組中載入另一個含有export介面的模組), int(整數), interface(介面);
long(表示一種整型);
native;
package,private(私有變數),protected(受保護的變數), public(公共變數);
short, super, static,synchronized(同步);
throws, transient;
volatile;
yield( 與return 關鍵字結合使用,向列舉器物件提供值);
js除去以上保留關鍵字外,還應該避免內建的物件、屬性和方法,Java的保留關鍵字,Windows保留關鍵字,HTML事件控制代碼。
這裡是菜鳥關於JS保留關鍵字的介紹
JS嚴格區分大小寫,所以Break作為變數名會被瀏覽器識別,但不建議此類命名。
四、變數申明寫法
ES5 var 變數名
ES6:
let:
1、用法與var宣告變數類似,只是其宣告變數的作用域在let所在的程式碼塊中,在for迴圈中尤其明顯;
2、不存在變數提升,在es5下使用var 宣告變數存在變數宣告提前的情況;
3、只要塊級作用域中存在let命令,其塊級作用域中的變數就受外界同名變數的影響,而且在有let宣告的變數中,必須先宣告再使用;
4、在相同的作用域中不能有同名的變數存在;
5、不論其中有一個變數是用var宣告的還是在函式中傳入的塊級作用域可以巢狀,但是外層的作用域無法訪問內層作用域的變數;
const:
1、const宣告的是一個只讀常量,修改常量值會報錯,實際上不是const的值不能改變,而是變數指向的記憶體地址不能改變;
2、宣告的常量,必須在一開始就初始化,不能等到後面在賦值。
五、變數作用域
變數分為區域性變數和全域性變數
區域性變數:定義在函式體之內的(用{}包起來的);只對該函式可見,對其它還是不可見的,也可以叫做函式的作用域;
全域性變數:定義所有函式體之外,它的作用範圍是整個函式,在申明變數時,凡是沒有帶var關鍵字的,直接複製的變數都是全域性變數。
訪問規則:
函式體內可以訪問父函式的變數;
父函式不能訪問子函式的變數,如果要訪問,可以使用閉包的方法來擴充套件函式內變數的作用域。