web前端之JavaScript必知的基礎知識
JavaScript一種直譯式指令碼語言,是一種動態型別、弱型別、基於原型的語言,內建支援型別。
JS作用:表單驗證,減輕服務端的壓力;新增頁面動畫效果;動態更改頁面內容;Ajax網路請求。
下面簡單介紹JS的基礎知識:
基礎知識
一、基本結構
二、使用JS的三種方式
1、直接在HTML標籤中,使用事件屬性,呼叫JS程式碼:
2、在頁面的任意位置,使用script標籤,插入JS程式碼。
3、引入外部JS檔案:
[**注意事項]**
① JS程式碼可以放在頁面的任意位置使用,但是放置的位置不同,將影響JS執行的順序
② 引入外部JS的script標籤中,不能再包含任何的JS程式碼。
三、JS中的變數
1、變數的宣告
[JS中變數宣告的注意事項]
① JS中宣告變數的關鍵字只有一個var,變數的型別,取決於所賦的值;
如果聲明後為賦值,則為Undefined型別。
② JS中同一個變數,可以在多次賦值中,被修改資料型別;
var num1=1;
num = "字串";
③ 變數可以使用var宣告,也可以直接賦值宣告。(區別:使用var宣告的作用域為區域性變數)
④ 在JS中,一個變數可以多次使用var宣告,後面的宣告相當於直接賦值,沒有任何作用;
⑤ JS變數區分大小寫,大寫和小寫不是一個變數;
2、JS中的資料型別:
Undefined:使用var宣告,但是沒有賦值的變數
null:表示空的引用
Boolean:真假
Number:數值型別,包括整型和浮點型
Object:物件
3、常用數值函式
①isNaN:用於檢測是一個變數,是不是非數值(Not a Number);
isNaN在檢測時,會先呼叫Number函式,嘗試將變數轉為數值型別,如果最終結果能夠轉化為數值,則不是NaN。
②Number函式:用於將各種資料型別轉為數值型別
>>>Undefined:無法轉換,返回NaN;
>>>null:轉為0;
>>>Boolean:true轉為1,false轉為0;
>>>字串:
如果字串是純數值字串,可以轉換,"123"-->123
如果字串包含非數值字元,不能轉換,"123a"-->NaN
如果是空字串,轉為0,""-->0 " "-->0
③parseInt():將字串轉為數值型別
如果是空字串,不能轉," "-->NaN
如果是純數值型別字串,可以轉換,且小數點直接捨去,不保留,"123"-->123 "123.9"-->123
如果字串包含非數值字元,則將非數值字元前面的整數進行轉換,"123a"-->123 "a123"-->NaN
④parseFloat():轉換機制與java相同。
不同的是:轉換數值字串時,如果字串為小數則可以保留小數點,"123.5"-->123.5 "123"-->123
⑤typeof():檢測一個變數的資料型別。
字串->String 數值->number true/false->boolean
未定義->undefined 物件/null->object 函式->function
四、JS中常用的輸入輸出語句
1、alert():彈窗輸出
2、prompt():彈窗輸入
接受兩部分引數:① 輸入提示內容;② 輸入框的預設文字。(兩部分都可以省略)
輸入的內容預設都是字串。
3、document.write("<h1>12345</h1> <h6>hahaha</h6>");
在瀏覽器螢幕上面列印。
4、console.log("hahaha");
瀏覽器控制檯列印。
五、JS中的運算子
1、除號:無論符號兩邊是整數還是小數,除完後都將按照實際結果保留小數;
例如:22/10 --> 2.2
2、===:要求等號兩邊的資料、型別和值都必須相同。如果型別不同,直接返回false
==:只判斷兩邊的資料,值是否相等,並不關心等式兩邊是否是同一種資料型別
!=:不等 !==:不全等
3、&、| 只能進行按位運算,如果兩邊不是數值型別,將轉為數值型別再運算;
&&、|| 進行邏輯運算
4、各級運算子的優先級別表:
分支與迴圈
一、if判斷
1、JS中的真假判斷:
① Boolean型別:true為真,false為假;
② 數值型別:0為假,非0為真;
③ 字串型別:""為假,非空字串為真;
④ Null/Undefined/NaN:全為假;
⑤ Object:全為真。
2、if判斷:
二、迴圈
1、switch
switch結構的()中可以放各種資料型別:
比對時,採用 "===" 進行判斷,要求資料型別完全相等
【JS中switch 與 Java中switch 的區別:】
Java中switch不能判斷區間,而JS中switch可以判斷區間
2、do-while
3、for迴圈
4、例:輸入一個數,判斷其是否是正整數,如果不是正整數,提示輸入有誤,請重新輸入;如果是正整數,反轉輸出這個數。
最後:
“相信有很多想學前端的小夥伴,今年年初我花了一個月整理了一份最適合2018年學習的web前端乾貨,從最基礎的HTML+CSS+JS到移動端HTML5到各種框架都有整理,送給每一位前端小夥伴,53763,1707這裡是小白聚集地,歡迎初學和進階中的小夥伴。”