web前端開發 - 3 JavaScript基本文法

JavaScript基本文法

a. JavaScript 是一種輕量級的、基于對象和事件驅動的、跨平台的用戶端腳本語言。

b. JavaScript 是用來制作web頁面互動效果，提升使用者體驗(具有簡單易用, 解釋執行,基于對象等特點)

1.引入方式

序号	文法	功能
1	< script type=”text/javascript” src=”main.js”>< /script>	導入外部js檔案
2	< script type=”text/javascript”>< /script>	寫在body的最下方

2.輸出方式

序号	文法	功能
1	window.alert()	彈出對話框提示
2	document.write()	将内容寫入到 HTML 文檔中
3	console.log()	從浏覽器控制台輸出
4	document.getElementById(‘p1’).innerHTML = ‘innerHTML’;	顯示在指定的标簽中

3.變量

文法格式：var 變量名 = 變量值

變量的命名規則:

a. 變量名可以包含字母、數字、下劃線、美元符号$。

b. 變量名不能以數字開頭，可以以字母或下劃線開頭。如：var _name;（正确） var 3abc;（文法錯誤）

c. 變量名不能是系統關鍵字，如：var、switch、try、case、else、while等。

d. JS中的變量名是區分大小寫的。如：name和Name是兩個變量。

e. JS中變量的名稱一定要有意義，也就是常說的語義化。

f. 駝峰式命名。

g. 下劃線式命名。

4.資料類型

typeof() : 檢視資料類型

序号	類型	語義
1	String	字元串
2	Number	數字型
3	Boolean	布爾型
4	Array	數組型
5	Object	對象型
6	Null	空型
7	Undefined	未定義型

5.運算符

序号	功能	運算符
1	算術運算符	+、 -、 *、 /、 %、 ++、 –
2	指派運算符	=、 +=、 -=、 *=、 /=、 %=
3	比較運算符	>、 <、 >=、 <=、 !=、 !==、 ==、 ===
4	邏輯運算符	&& (and)、 || (or)、 ! (not)

6.條件語句

序号	文法	功能
1	if 語句	隻有當指定條件為 true 時，使用該語句來執行代碼
2	if…else 語句	當條件為 true 時執行代碼，當條件為 false 時執行其他代碼
3	if…else if….else 語句	使用該語句來選擇多個代碼塊之一來執行
4	switch 語句	使用該語句來選擇多個代碼塊之一來執行
5	條件表達式？結果1：結果2	三元運算符 ( 三目運算符 )

基本結構形式如下:

(1). if單分支選擇結構：
if條件判斷----隻判斷true，不判斷false。
文法結構：
if(條件判斷，結果隻要兩個true或false)
{
    條件為true，将執行該代碼
}


(2).  if...else雙分支選擇結構：
文法結構-----既判斷true，又判斷false。
if(條件判斷：結果隻有兩個true或false)
{
    條件為true，将執行該代碼
}else
{
    條件為false，将執行該代碼
}


(3).  if...else if...else多分支選擇結構：
文法結構語句來選擇多個代碼塊之一來執行
if (條件1)
{
    當條件 1 為 true 時執行的代碼
}
else if (條件2)
{
    當條件 2 為 true 時執行的代碼
}
else
{
  當條件 1 和 條件 2 都不為 true 時執行的代碼
}


(4)switch 語句是用來選擇要執行的多個代碼塊之一
switch(n)
{
    case 1:
        執行代碼塊 1
        break;
    case 2:
        執行代碼塊 2
        break;
    default:
        與 case 1 和 case 2 不同時執行的代碼
}


(5)三元運算符(三目運算符)
文法：條件表達式？結果1：結果2
文法：操作數！？操作數2：操作數3
含義：如果條件為true，則執行"結果1"的代碼；如果條件為false，則執行"結果2"的代碼。
其實：三元運算符，就是if else的變形形式
           

7.循環結構

序号	文法	功能
1	for循環	循環代碼塊一定的次數
2	for in循環	循環周遊對象的屬性
3	while循環	當指定的條件為 true 時循環指定的代碼塊
4	do while循環	同樣當指定的條件為 true 時循環指定的代碼塊

基本循環結構文法如下:

(1) for循環:
for (變量初始化; 條件判斷; 變量更新)
{
    循環體代碼
}


(2)for in 循環:
var person={name:"hanbo", age:23}; 
for (x in person)    // x 為屬性名
{
    txt=txt + person[x];
}


(3)while循環:
while(條件判斷)
{
    如果條件為true，則執行循環體代碼
}

(4)do while循環:  先斬後奏，先執行一次
表達式1;             //表達式1：從哪裡開始
    do
    {  
        語句組;       //當我們滿足循環時要執行的語句
        表達式3;      //步長（步進）
    }
    while()表達式2：  //到哪裡結束（循環條件）

注意：循環體中，應有結束循環的條件，否則會造成死循環。

在循環中break是終止循環, continue是跳過本次循環繼續循環
           

8.函數

文法:
function foo（形參, 形參, ...）
{
     函數功能代碼
     return 參數(表達式);
}
foo（實參, 實參, ...）;    //調用函數


prototype:給類添加方法:
類名.prototype.方法名 = 函數
Number.prototype.sum = function(num) 
{
    // body...
    // js中this就相當于python中的self;誰調用目前這個方法，this就指向誰
    return this+num;
};
var a = 
var b = a.sum();
console.log('b:',b);  >>>b: