(二)前端基本功:JS必記知識點+案例

☆函數(function)

函數:函數是由事件驅動的或者當它被調用時執(zhí)行的可重復使用的代碼塊。

function name(arguments){

statements;

}

函數的聲明:函數使用跟變量一樣,需要 聲明

自定義函數:

函數直接量聲明:


變量聲明提升(面試易考點)

什么是變量提升?在函數體內部,聲明變量,會把該聲明提升到函數體的最頂端。 只提升變量聲明,不賦值。

如下:

案例:

經典面試題1:

結果是 undefined

經典面試題2:

undefined 9

函數參數

【案例】:

*形參類似于變量來理解,所以形參同變量一樣,是不加引號“”的;而實參則必須加引號!

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

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

Javascript在創(chuàng)建函數的同時,會在函數內部創(chuàng)建一個arguments對象實例.

arguments對象只有函數開始時才可用。函數的 arguments 對象并不是一個數組,訪問單個參數的方式與訪問數組元素的方式相同

arguments對象的長度是由實參個數而不是形參個數決定的

形參、實參的練習1:

形參實參案例練習1源碼:


【案例】參數的傳遞的練習案例:(建議練熟,至少敲5遍?。?/p>

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

HTML部分:

CSS部分源碼:

JS部分源碼:

X形參相當于變量不加引號,實參則必須加上引號

返回值 return


定義:

一個函數實際上就是一個計算過程,計算完成之后的結果就是返回值。

定義函數的返回值:

在函數內部用return來設置返回值,一個函數只能有一個返回值。

同時,終止代碼的執(zhí)行。

所有的自定義函數默認沒有返回值;

Return后面不要換行

▲案例代碼:

$封裝


算式運算符

+ - * ?/ ?% ?^

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

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

案例:

答案是77.

解答:

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

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

這是后置++,也就是該行語句(4)執(zhí)行完后才會執(zhí)行c+=1這條語句

對應的前置++也就是在該語句之前(3執(zhí)行完后),執(zhí)行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

·方法和屬性:

方法和屬性的區(qū)別:

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

方法給值:isNaN(“值”);

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


表單自動獲得焦點:

Txt.focus();方法

Onfocus事件

鼠標經過選擇表單:

方法select()選擇功能

自動獲得和鼠標經過選擇

for循環(huán)

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

For(;;){ }? ? 死循環(huán)

案例“金字塔”如圖

源碼:


·getElementsByTagName()? 獲取某類標簽

getElementById()?id元素 ? 一個

getElementsByTagName();很多個 ?所以是復數很多個


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

百度網盤鏈接:http://pan.baidu.com/s/1dFcDuhF 密碼:itbs

有任何疑問請在評論區(qū)留言,咱們一起探討與進步吧!

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
【社區(qū)內容提示】社區(qū)部分內容疑似由AI輔助生成,瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發(fā)布,文章內容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

相關閱讀更多精彩內容

  • FreeCodeCamp - Basic JavaScript 寫在前面: 我曾經在進谷前刷過這一套題,不過當時只...
    付林恒閱讀 16,586評論 5 28
  • 第5章 引用類型(返回首頁) 本章內容 使用對象 創(chuàng)建并操作數組 理解基本的JavaScript類型 使用基本類型...
    大學一百閱讀 3,690評論 0 4
  • 最近愛上了在家人熟睡后爬上四樓的屋頂呆著看星星。 盛夏的夜晚和它的天氣一樣都是熱情的。不是盛夏,怎么能看到如此熱鬧...
    京起一灘鷗露閱讀 332評論 0 0
  • 曾經如果沒那么在乎可能現在不會是這樣的結局,或許是美好....... 曾經如果沒那么在乎或許今天受傷害的還是一個人...
    遺忘痕跡閱讀 192評論 0 1

友情鏈接更多精彩內容