JavaScript自己整理的基礎-01

標籤：格式   數字   編譯   保留   天氣   停止   doc   chrome   技術分享   

1.JavaScript 簡介：

JavaScript是互連網上最流行的指令碼語言，所有現代的HTML都使用JavaScript。既然是指令碼語言，那麼它的特點就有一下三種：

    （1）弱類型；

    （2）解釋型語言（不需要編譯）；

    （3）逐行執行，一行代碼錯誤，其後的代碼塊都不會繼續執行；

    （4）<script>標籤可直接嵌入到HTML檔案中，位置是任意的，通常放在被修飾內容下面或者head標籤中，但寫成單獨的js檔案有利於結構和行為的分離

2.JavaScript 內容（附圖）：

    

       其中ECMAScript是JavaScript的核心；

       DOM是文件物件模型（使用js操作網頁）；

       BOM是瀏覽器物件模型（使用js操作瀏覽器）

3.JavaScript 資訊的輸出：

    （1）alert( )方法：以提示框的形式在頁面輸出 

    （2）console.log( )方法：在控制台輸出資訊，例：

console.log("hello,javascript")   

    （3）document.write( )：將內容直接寫在HTML頁面中，例：

document.write("hello,javascript") 

4.JavaScript 變數：

    與 Java不同，ECMAScript 中的變數無特定的類型，定義變數時只用 var 運算子，可以將它初始化為任意值，變數的初始化格式：var 變數名 = 變數值；例：

var a = "hello";  var b = 123;  

    如果要定義多個變數，那麼可以用將多個變數寫在一行，用逗號進行分隔；例：

var a = "你好",      b = 123,      c = "hello"; 

    變數名字的變數規則：    

    （1）由字母、數字、底線、$符號構成

    （2）不可以以數字開頭，不建議以底線開頭；

    （3） 嚴格區分大小寫；

    （4）不可以是關鍵字和保留字

5.JavaScript 資料類型：

    JavaScript可以分為未經處理資料類型，引用資料類型兩種：

    （1）未經處理資料類型：Number，String，Boolean，undefined，null

    Number：數值型，就是數字，包含正數、負數、整數、小數、0、NaN、Infinity（正無窮）、-Infinity（負無窮）；

    注意：NaN：not  a  number的縮寫，表示該值不是一個數值（也屬於Number）

    String：字串：用雙引號""或單引號‘‘包起來的0個或多個字元，如果引號中什麼也沒有，那麼這個字串被稱為空白字串

    Boolean：布爾型：包含true：表示真（成立）和false：表示假（不成立）兩個值

    undefined：表示變數未定義，或變數被定義出來，但是沒有被賦值

    null：表示一個變數沒有指向任何一片儲存空間，即變數存在，但是裡面是空的，類似於Undefined

    （小提示：在Chrome瀏覽器控制台輸出時，會發現Number類型為深藍色，String為黑色，Boolean為淺藍色，undefined和null都為淺灰色）

    （2）引用資料類型：

    Object（對象），Array（數組），Date（日期），RegExp（正則）。。等等

    （3）如何查看一個變數的資料類型（typeof 運算子）：        

             數值型資料：傳回值為number   

console.log(typeof 123)   //輸出number 

             字串型資料：傳回值為string

console.log(typeof "你好")  //輸出string   

             布爾型資料：傳回值為boolean

console.log(typeof true/false)    //輸出boolean 

             Undefined：傳回值為undefined

console.log(typeof undefined)   //輸出undefined

             Null：傳回值為Object（曆史遺留問題，說明null也是一個對象）

console.log(typeof null)     //輸出object  

             NaN：傳回值為number

console.log(typeof NaN)    //輸出number 

6.JavaScript 資料類型的轉換：

    （1）在使用加法（+）運算子時，任何資料與字串類型資料相加都為字串類型資料；

console.log("你好" + 123)    //輸出"你好123"  

        注（簡單理解）： 在JavaScript 中Null 字元串""轉換為false，非Null 字元串轉換為true（除“0”，“1”外）；

                false轉換為 0 或“0”，true轉換為 1 或“1”；

                做邏輯判斷的時候，null，undefined，""(Null 字元串)，0，NaN都預設為false；

                ==在比較的時候可以轉換資料類型，===是嚴格比較，只要類型不符就返回false；

                其實 == 的比較確實是轉換成字串來比較但，但是在布爾型轉換為字串之前，要先轉換成 Number

console.log("123" == true)    //輸出false  console.log("1" == true)     //輸出true  console.log("" == true)     //輸出false  console.log(1 == true)     //輸出true    console.log("" == false)    //輸出true  console.log(‘123‘ == false)   //輸出fasle  console.log(‘0‘ == false)    //輸出true  console.log(0 == false)    //輸出true    console.log(‘1‘ == 1)     //輸出true  console.log(‘0‘ == 0)     //輸出true  console.log(-true)     //輸出-1  

（2）parseInt：將字串轉換成整數（只識別字串中的數值）：

        註：會忽略字串中的前後空格（當數值後的空格後面還有數值時，將不會再識別）；

               能夠正確識別加號或減號，即保留加號或減號；

               在轉換時，遇到非數值型的字元就會停止轉換；

               如果字串的第一個字元是非數值型的，那麼轉換的結果為NaN；

console.log(parseInt("123"))    //輸出123  console.log(parseInt(" 1 2"))    //只會輸出1  console.log(parseInt(-123))     //輸出-123  console.log(parseInt("hello"))    //輸出NaN  console.log(parseInt(true))       //輸出NaN  console.log(parseInt("123hello"))    //輸出123，後面非數值型不會識別  console.log(parseInt(" 1 "))     //輸出1，忽略空格  

（3）parseFloat：將字串轉換成小數（識別小數點，注意事項同上）

console.log(parseFloat("123.55"))    //輸出123.55  console.log(parseFloat(".1hello"))    //輸出0.1  

（4）Number：將其它類型的資料轉換成數值型，注意被轉換的資料必須是純數值構成，否則無法轉換，其它注意事項同上

console.log(Number(true))   //1  console.log(Number(false))    //0  console.log(Number(null))    //0  console.log(Number("123hello"))    //NaN  console.log(Number("12.22"))    //12.22  console.log(Number(undefined))    //NaN 

（5）頁面中的資訊框：

        alert（），彈出個提示框，只有確定；

window.alert("今天天氣很好")  

 

        confirm（），彈出個確認框，有確定和取消；

window.confirm("今天心情也很好")  

        prompt（），彈出個輸入框，可以輸入內容；

window.prompt("password","請輸入密碼") 

 

JavaScript的基礎暫時先寫到這裡，後續都會補上。。。

JavaScript自己整理的基礎-01