js隨堂初體驗(一)

不是仔肥的肥發表於2018-08-26

Js初體驗(-)

1 js的基礎知識

 

A web三大標準:1 html:結構標準    2 css:表現標準  3 javascript:行為標準

 

B js三種書寫方式:1 行內js:onclick = “alert=(‘AAAAA’)”

                              2 內嵌js:在html頁面中通過一對script標籤,js程式碼寫在script標籤中

                              3 外聯js:在script標籤中用src屬性來引入外部的js檔案,但是在這堆script標籤中不能寫js程式碼,他的作用只是只是引入外聯的js程式碼

 

C js初接觸的簡單五句話:1 alert(“”)  彈出一個警示框

                                           2 console.log(“”) 在瀏覽器console皮膚顯示內容(多用來檢查或者找bug)

                                           3 document.write(“” ) 在頁面中顯示內容,在js中只要是用雙引號或者是單引號引起來的內容都是字串

                                           4 prompt(“”)  彈出一個文字框,提示使用者輸入資訊

                                           5 confirm(“”)  彈出一個選擇框

 

D js的變數:

1直接變數:直接拿過來使用的資料值,  直接量有:字串,數字

 

                      2 變數  

1 變數的宣告:關鍵詞:var 在記憶體開闢一片空間 如 var name = ‘jack’

                                     2 變數的賦值:name = ‘’  在空間存入資料

                                     3 變數的定義:包含變數的宣告和賦值,推薦使用變數的定義  注意: = 號在js中是賦值符

 

                       3 變數的命名規則:

                                       1.變數名必須以字母、下劃線_、$開頭

2.變數的名字中包含數字,字母(a-z  A-Z) ,_ ,$

3.js中變數的名字嚴格區分大小寫

4.變數的名稱不能使用js中的關鍵字和保留字

5.不能以數字開頭

建議:變數的命名儘可能有意義,命名使用駝峰命名法

 

                      4 +的作用:

                                          1.連線符的作用  只要加號的一邊是字串,那麼加號就是連線符的作用

2.數學運算子的作用  加號兩邊都是數字,那麼加號就是運算子的作用

 

E 轉義符的使用:

                                          轉義符:用來表示一些特殊符號,反斜槓

                                          常用的轉義:

                                                        常用:

:換行

:縮排

:退格

 

F js’中的資料型別:

                                          Js中的資料型別:js是動態弱型別的指令碼語言

 

                                          簡單的資料型別:

                                                                      字串:string

數字型別;number

空:null

空:undefined   表示未定義

Boolean:布林型別  true flase

                                  複雜資料型別:陣列,函式,物件,object。。。。。

                                                       

 

G js中資料型別的檢測:typeof  console.log(typeof 要檢測的資料)

                                     注意:只要使用者輸入的內容都是字串型別的資料

 

H js中的算術運算子:

1 二元運算子  需要兩個運算元參與的運算,+ – * / %(取餘)

                                          2 一元運算子  

1 ++:分為前++和後++     前++:先在原來的運算元上先+1,然後再參與運算

                                             後++:先拿原來的運算元,參與運算,然後再+1

2 –:分為前–和後–         前–:現在原來的運算元上先-1,然後再參與運算

                                             後–:先拿原來的運算元,參與運算,然後再-1

                                          3 複合運算子:+= -= *=  /= %=

 

I js中的關係表示式以及邏輯運算子:1關係表示式  用關係運算子連結的表示式就是關係表示式

                                                               注意:關係表示式的結果都是一個布林型別的值

                                                       

                                                          2 邏輯運算子: 邏輯與:&&  邏輯或:||  邏輯非:!

 

 

 

2 js資料型別的轉換

 

A 資料型別的轉換:

                     1 資料型別轉換成number型別

1 隱式轉換:通過 + – * / %    將undefined轉換成成number型別得到的結果是NaN,NaN表示:not a number

不是一個數字。NaN也是number型別中的一個值。他是用來表示數字的一種非正常狀

態   在js中對不能轉換成number型別的值  都是NaN 用來表示數字的一種非正常

狀態,為了不讓程式報錯、

                                                                                                                   注意:+號要寫在前面

                                                                      2 顯式轉換(強制型別轉換)Number();parseInt();parseFloat()

 

                                                                                                                       Number()轉換的特點:

1.如果是數字型別的字串都能轉換成number型別

2.對於true、false、null都能正常轉換成數字型別

3.undefined轉換成number型別都不能正常轉換成數字型別,得到結果是NaN

4.對不能轉換成number型別都得結果都是NaN。

 

                                                                                                                       對於parseInt()轉number型別的特點:

1.對於數字型別的字串都能轉換成number型別

2.對於null、true、false、undefined不能正常轉換成number型別,最後得到的都是NaN

3.對於帶有數字的字串,如果前面是數字,使用parseInt轉換的時候只轉換前面的數字部分,對於後面不能轉換的部分直接丟棄;如果是字母在前面  直接全部不能轉換,的到的是NaN

4.對於是小數的,只取前面的整數部分,後面的都丟棄  

注意:取整數部分不是四捨五入,而是直接取整數部分

parseFloat()轉換成number型別的時候和parseInt是一樣的,只不過對於小數,parseFloat能取到小數部分

     

           2 將資料轉換成string型別

                                  1 隱式轉換 var num = 20;

var str = num + “”;

 

                                  2 顯式轉換 toString(); String();

                                                                   var num = 100;

var res = num.toString() ;可以在toString()在小括號中加入一個引數值。可以將其轉成對應的進位制的值

注意:null和undefined不能使用toString()方法,轉成資料型別

String()可以直接將null和undefined轉成string     console.log(String(null/undefine))

 

           3 資料轉換成Boolean型別

                     

                                  1 隱式轉換   !!  var num = 100;

var res = !!num;

注意:能轉換成false的有 :0,null,undefined, “” ,NaN;

                                  2 顯式轉換   Boolean()    

                                                   非0的數轉換成布林型別都是true

 

 

B 程式的結構:

                 1 順序結構:程式從上外下按順序執行

 

                 2 選擇結構:1 if結構     if(判斷條件){    判斷條件一般都是關係表示式或者邏輯表示式

執行程式碼}

執行過程:當程式執行到if的時候,先判斷小括號中的判斷條件,如果判斷條件成立(返回true),那麼執行後面大括號中的執行程式碼,如果條件不成立(返回false),那麼直接跳過大括號,執行下面的程式碼;

                                      

                                   2 if-else結構        if(判斷條件){

執行程式碼1}else{執行程式碼2

}

執行過程:當程式執行到if的時候,先判斷小括號中的判斷條件,如果判斷條件成立(返回一個true),這個時候,執行後面大括號中的執行條件1,如果判斷條件不成立(返回false),這個時候執行else後面的大括號中的執行程式碼2

 

                 3 分支結構:    1    if-else if          if(判斷語句){

執行語句1}else if(判斷語句2){

執行語句2}else{執行語句3

}

 

                                                        執行過程:當程式執行if的時候,先判斷判斷語句

1,如果成立,則執行語句1,如果不成立,那麼繼續判斷判斷條件

2,如果成立,則執行執行語句2,如果不成立繼續判斷判斷條件

3,以此類推

                                  2 switch    switch(變數或者固定的值){

case 條件1:

執行語句1

break;

case 條件2:

執行語句2

break;

…..

default

   執行語句。。。

   break;

}

執行過程:當程式執行到switch的時候,先和switch後面小括號的值,和case中的條件去匹配,匹配上哪一個case就執行哪一個case下面的執行語句。如果都沒有匹配上,那麼久執行default中的語句

 

                                  注意:if-else if和switch-case 區別      if-else if 一般使用來區間判斷

                                                                              switch-case 一般使用定值判斷

                 4 迴圈結構

                                  1 While

                                       while(迴圈條件){迴圈條件一般都是關係表示式或者是迴圈表示式或者是布林型別的值

      迴圈體;(重複中的這件事件)

      改變迴圈的條件

}

 

執行過程:當程式執行到while的時候,先判斷迴圈條件,如果迴圈條件返回一個true,則執行大括號中的迴圈體,如果迴圈條件是false,直接跳過大括號,迴圈體不會被執行

 

                                  2 do while

                                       do{

      迴圈體;

      改變迴圈的條件;

}while(迴圈條件)

 

                                  3 for

                                       for(表示式1;表示式2;表示式3){

      迴圈體

}

表示式1:一般都是用來給變數賦初值

表示式2:迴圈判斷條件   一般都是關係表示式

表示式3:改變迴圈條件

 

 

      C 三元表示式:

表示式1? 表示式2: 表示式3;表示式1:一般都是關係表示式或者是邏輯表示式或者是boolean型別的值

                      gender == `男` ? console.log(1):console.log(0);

      D 短路運算:     短路運算子:&&  ||

                                   &&:短路運算:找假    &&兩邊的值,先判斷第一個,如果第一個值是true(會預設有一個隱式轉換)則直接返回第二個

值,不管第二個值是什麼。如果第一個值轉換後是flase。直接返回第一個值,不需要再去理第二個值是什麼

                                   ||短路運算子:找真 如果第一個值轉換成布林型別之後,如果是true,直接返回第一個值,不需要理第二個值是什麼。

如果第一個值轉換之後是false,那麼直接返回第二個值。

                      注意:

                                  1.如果兩邊都是關係表示式或者邏輯表示式或者是布林型別的值得時候,&&和||就是起到邏輯運算子的作用

                                 2.如果&&和||兩邊是固定的值或者是變數或者是物件,這個時候&&就是起到短路運算的作用

 

E 關於breakcontinue的使用:

                                             1 break的使用 終止當前整個迴圈,迴圈不再繼續執行,並且break後面的程式碼不執行

                                             2 continue      用來終止當次迴圈,進入下一次迴圈,如果迴圈中遇到continue跳出當次迴圈,

continue後面的程式碼都不在執行

                                            

                                             3 continue和break區別:

continue和break的相同點:都可以終止程式碼,這兩個後面的程式碼都不執行

(對於當前的迴圈)

                                                                         continue和break的區別

1 continue終止當次迴圈,迴圈還在繼續,進入下一次迴圈

2 break直接終止整個迴圈,迴圈結束不再繼續進行