（二）前端基本功：JS必記知識點+案例

☆函式（function）

函式：函式是由事件驅動的或者當它被呼叫時執行的可重複使用的程式碼塊。

function name(arguments){

statements;

}

函式的宣告：函式使用跟變數一樣，需要 宣告

自定義函式：

函式直接量宣告：

變數宣告提升(面試易考點)

什麼是變數提升？在函式體內部，宣告變數，會把該宣告提升到函式體的最頂端。 只提升變數宣告，不賦值。

如下：

案例：

經典面試題1：

結果是 undefined

經典面試題2：

undefined 9

函式引數

【案例】:

*形參類似於變數來理解，所以形參同變數一樣，是不加引號“”的；而實參則必須加引號！

形參的目的是為了接受實參

arguments是儲存了函式傳送過過來實參

Javascript在建立函式的同時，會在函式內部建立一個arguments物件例項.

arguments物件只有函式開始時才可用。函式的 arguments 物件並不是一個陣列，訪問單個引數的方式與訪問陣列元素的方式相同

arguments物件的長度是由實參個數而不是形參個數決定的

形參、實參的練習1：

形參實參案例練習1原始碼：

【案例】引數的傳遞的練習案例：（建議練熟，至少敲5遍！）

案例中小圖是70px*70px;大圖是360px*360px（素材獲取見本文末）

HTML部分：

CSS部分原始碼：

JS部分原始碼：

X形參相當於變數不加引號，實參則必須加上引號

返回值 return

定義：

一個函式實際上就是一個計算過程，計算完成之後的結果就是返回值。

定義函式的返回值：

在函式內部用return來設定返回值，一個函式只能有一個返回值。

同時，終止程式碼的執行。

所有的自定義函式預設沒有返回值；

Return後面不要換行

▲案例程式碼:

$封裝

算式運算子

+ - *  /  %  ^

A++    ++後置每次自加1      先運算後自加;

++a     ++前置每次自加1       先自加後運算;

案例：

答案是77.

解答：

第2行為11；第3行為12；第4行為13+21+30+13=77

* 第4行中c++為30的原因：

這是後置++，也就是該行語句(4)執行完後才會執行c+=1這條語句

對應的前置++也就是在該語句之前(3執行完後)，執行c+=1

☆語句

條件語句(if)☆

If(條件表示式){語句;}

If() {}else {}

If()else if(){}else if(){} else {}

案例：點選查詢是否中獎。

【案例】：點選輸入文字“請輸入內容”消失，刪除文字後又出現。

HTML部分：

CSS部分：

JS部分：

案例中涉及的知識點，onfocus,onblur事件：

獲得焦點:onfocus

失去焦點:onblur

【案例】簡單驗證表單

HTML:

CSS:

JS:

案例涉及知識點：

·this（自己的）

指的是本身；This主要是指事件的呼叫者。

·className類名

$("result").className="wrong";

·innerHTML 更換盒子裡面的內容，文字標籤都換.

·表單更換內容 Input.value

isNaN    nan不是一個數字      is是    是   不是一個數字

isNaN(“12”)如果裡面的不是個數字  返回true  否則   返回false

·方法和屬性：

方法和屬性的區別：

·方法一律帶有小括號。�Iphone.tel();

方法給值：isNaN（“值”）;

·屬性給值一定是等號。Iphone.color = “red”;

表單自動獲得焦點：

Txt.focus();方法

Onfocus事件

滑鼠經過選擇表單：

方法select()選擇功能

自動獲得和滑鼠經過選擇

for迴圈

For(var i = 0; i<100;i++) {  }  遍歷

For(;;){ }    死迴圈

案例“金字塔”如圖

原始碼：

·getElementsByTagName()  獲取某類標籤

getElementById() id元素   一個

getElementsByTagName();很多個  所以是複數很多個

**以上案例所涉及圖片素材獲取方式：

百度網盤連結：http://pan.baidu.com/s/1dFcDuhF 密碼：itbs

有任何疑問請在評論區留言，我們們一起探討與進步吧！