Javascript入門（一）歷史、特點、編寫、數據類型及數據類型的轉換

認識Javascript

JavaScript web 開發人員必須學習的 3 門語言中的一門：

• HTML 定義了網頁的內容
• CSS 描述了網頁的佈局
• JavaScript 網頁的行爲
• JavaScript的作用是給瀏覽器指令（命令），負責和瀏覽器進行溝通的

Javascript的歷史

在上個世紀的1995年，當時的網景公司正憑藉其Navigator瀏覽器成爲Web時代開啓時最著名的第一代互聯網公司。
由於網景公司希望能在靜態HTML頁面上添加一些動態效果，於是叫Brendan Eich這哥們在兩週之內設計出了JavaScript語言。你沒看錯，這哥們只用了10天時間。

ECMAScript

ECMAScript是JavaScript的標準，描述了該語言的語法和基本對象。
JavaScript是ECMAScript的實現，除了基本實現之外，還包括DOM操作和BOM操作

Javascript的特點

高級語言按照其運行的方式, 又可以分爲:

• 編譯型語言：代碼需要先編譯，再運行

• 解釋型語言：一行行讀取，一行行執行
  代表性語言有哪些?

• 編譯型語言: C/C++/Objective-C/Swift等等

• 解釋型語言: Python/JavaScript/MATLAB等等
  解釋性語言

• 讀取一行 解釋一行, 執行一行

• 另外一種, 編譯性語言
  動態類型語言

• 在運行階段可以動態修改變量的類型

• var name = “why”;

• name = 123;

JavaScript目前可以做哪些工作？

1. 網頁的交互
2. 服務端開發(Node.js)
3. 命令行工具(Node.js)
4. 桌面程序，VSCode使用TypeScript開發的
5. App(React Native)
6. 遊戲開發(cocos2d-js)
7. 小程序開發: HTML(WXML)+CSS(WXSS)+JavaScript

Javascript編寫位置

位置一：HTML內編寫(不推薦)

<a href="javascript:alert('百度一下')" onclick="alert('又百度一下')">百度一下</a>

位置二：script標籤中不推薦

<a class="google" href="#">google一下</a>
     <script>
        document.querySelector(".google").onclick = function() {
            alert("google一下")
        }
    </script>

位置三: 外部引入js文件

注意點

1、script標籤不能寫成單標籤：
在外聯式引用js文件時，script標籤中不可以寫JavaScript代碼，並且script標籤不能寫成單標籤，即不能寫成<script src="index.js"/>
2、省略type屬性：
在以前的代碼中，<script>標籤中會使用type="text/javascript"。現在可不寫這個代碼了，因爲JavaScript 是所有現代瀏覽器以及 HTML5 中的默認腳本語言。
3、加載順序：
作爲HTML文檔內容的一部分，JavaScript默認遵循HTML文檔的加載順序，即自上而下的加載順序，推薦將JavaScript代碼和編寫位置放在body子元素的最後一行。
4、JavaScript代碼嚴格區分大小寫
HTML元素和CSS屬性不區分大小寫，但是在JavaScript中嚴格區分大小寫。

Javascript註釋使用

和瀏覽器如何交互

彈出彈窗顯示內容

// 交互方式一：瀏覽器彈出彈框
        alert("彈一下");

在控制檯打印（使用最多）

// 交互方式二：控制檯打印
        console.log("hello world");

將內容輸入到界面顯示

// 交互方式三：DOM操作時（瞭解）
        document.write("<h1>hello world</h1>");

接收用戶輸入的內容

// 交互方式四：接受用戶輸入的一個內容
       var message = prompt("請輸入您的年齡");
       alert(message);

如何定義變量

在JavaScript中如何命名一個變量呢？

變量的聲明：在JavaScript中聲明一個變量使用var關鍵字（後續學習ES6還有let、const聲明方式）
變量的賦值：使用=給變量進行賦值；

變量的命名規則和規範

變量命名規則：必須遵守
第一個字符必須是一個字母、下劃線（ _ ）或一個美元符號（ $ ）
其他字符可以是字母、下劃線、美元符號或數字。
不能使用關鍵字和保留字命名

變量命名規範：建議遵守
多個單詞使用駝峯標識
賦值=兩邊都加上一個空格
一條語句結束後加上分號;

基礎數據類型

查看數據類型

//查看數據類型：typeof
        console.log(typeof "Hello World");//string
        console.log(typeof 123);//number
        var name = "job";
        console.log(typeof name);//string

基本數據類型

• Number
• String
• Boolean
• Undefined
• Null

number

數字表示的範圍：

• 最小值：Number.MIN_VALUE，這個值爲： 5e-324
• 最大值：Number.MAX_VALUE，這個值爲： 1.7976931348623157e+308

NaN，即非數值（Not a Number）是一個特殊的數值，JS中當對數值進行計算時沒有結果返回，則返回NaN。
isNaN，用於判斷是否不是一個數字。不是數字返回true，是數字返回false。
Infinity，Infinity表示無限大，當數值超過了JavaScript的Number所能表示的最大值時，就表示爲Infinity。

String

• 字符串的表示可以使用單引號也可以使用雙引號。
• 轉義字符：掌握 \’ ， \” ，\t ， \n四個的用法
• 獲取字符串的長度：length屬性

Boolean

布爾值和布爾代數的表示完全一致，一個布爾值只有true、false兩種值。

比較運算符

JavaScript允許對任意數據類型做比較：

false == 0; // true
false === 0; // false

要特別注意相等運算符==。JavaScript在設計時，有兩種比較運算符：

第一種是==比較，它會自動轉換數據類型再比較，很多時候，會得到非常詭異的結果；
第二種是===比較，它不會自動轉換數據類型，如果數據類型不一致，返回false，如果一致，再比較。
由於JavaScript這個設計缺陷，不要使用==比較，始終堅持使用===比較。
另一個例外是NaN這個特殊的Number與所有其他值都不相等，包括它自己：

NaN === NaN; // false

唯一能判斷NaN的方法是通過**isNaN()**函數：

isNaN(NaN); // true

最後要注意浮點數的相等比較：

1 / 3 === (1 - 2 / 3); // false

這不是JavaScript的設計缺陷。浮點數在運算過程中會產生誤差，因爲計算機無法精確表示無限循環小數。要比較兩個浮點數是否相等，只能計算它們之差的絕對值，看是否小於某個閾值：

Math.abs(1 / 3 - (1 - 2 / 3)) < 0.0000001; // true

null和undefined

null表示一個“空”的值，它和0以及空字符串’ ‘不同，0是一個數值，’ '表示長度爲0的字符串，而null表示“空”。
在其他語言中，也有類似JavaScript的null的表示，例如Java也用null，Swift 用nil，Python用None表示。
但是，在JavaScript中，還有一個和null類似的undefined，它表示“未定義”。
JavaScript的設計者希望用null表示一個空的值，而undefined表示值未定義。事實證明，這並沒有什麼卵用，區分兩者的意義不大。大多數情況下，我們都應該用null。undefined僅僅在判斷函數參數是否傳遞的情況下有用。
Undefined 類型只有一個值：undefined
在使用 var 聲明變量但未對其加以初始化時，這個變量的值就是 undefined
typeof對沒有初始化和沒有聲明的變量都會返回undefined
Null類型也是隻有一個值：null
通常當一個對象（Object類型）不再使用時，可以賦值爲null

Null和Undefined的關係：
undefined值實際上是由null值衍生出來的，所以如果比較undefined和null是否相等，會返回true，但是轉化成數字時，undefined爲NaN，null爲0。

變量存儲的本質

編寫的代碼放在硬盤中，在運行的時候，加載到瀏覽器，本質就是加載到內存中。內存分爲棧空間和堆空間。定義變量時，在棧空間中申請一塊區域，然後打印kobe。基本數據類型保存在棧空間。但是在對象類型時，在堆空間分配空間，而棧空間中保存其在堆空間中的內存地址。

數據類型的轉換

轉換成數字類型一

在開發中，我們可能需要類型之間相互轉換，比如將一個字符串”123”轉成數字123
其他類型轉成數值類型的時候，存在有兩種可能的值：

• 轉換成功，獲取到對應的數字
• 轉換失敗，結果爲NaN

將其他類型轉成數字類型的方法：

• Number(any)函數：將任意類型轉成數字

<script>
        //1.將message轉換成數據類型
        //1.1。將字符串轉換成數據類型
        var message1 = "123";
        console.log(typeof message1);
        var num1 = Number(message1);
        console.log(num1 , typeof num1);//123 number
        var message2 = "abc";
        console.log(typeof message2);
        var num2 = Number(message2);
        console.log(num2 , typeof num2);//NaN number
        //NaN:not a number
        //1.2.將Boolean轉換成數據類型
        //true: 1
        //false: 0
        console.log(Number(true));
        console.log(Number(false));

        //1.3. undefined轉成數據類型
        console.log(Number(undefined));//NaN
        //1.4. Null 轉成數據類型
        console.log(Number(null));
    </script>

轉換成數字類型二

parseInt(string, radix)函數：將字符串轉換成整數類型，radix表示基數，這裏可以理解成進制

• 如果第一個字符是數字或運算符號，那麼就開始解析，直到遇到非數字字符，停止解析並得到解析結果；
• 如果第一個字符是非數字且非運算符號，則不解析並得到結果 NaN。

parseFloat(string)函數：將字符串轉換成浮點類型(小數類型)
如果第一個字符是數字或運算符號，那麼就開始解析，直到遇到非數字字符，停止解析並得到解析結果；
如果第一個字符是非數字且非運算符號，則不解析並得到結果 NaN。

<script>
        var str1 = "123";
        //Number(null);
        var num1 = parseInt(str1);
        console.log(num1 ,typeof num1);// 123 number

        var str2 = "123.45";
        var num2 = parseInt(str2);
        console.log(num2 ,typeof num2);// 123 number

        var str3 = "abc";
        var num3 = parseInt(str3);
        console.log(num3 ,typeof num3);//NaN number 

        var str4 = "abc123";
        var num4 = parseInt(str4);
        console.log(num4 ,typeof num4);//NaN number
         
        var str5 = "123abc";
        var num5 = parseInt(str5);
        console.log(num5 ,typeof num5);//123 number

        var str6 = "123.45";
        var num6 = parseFloat(str6);
        console.log(num6 ,typeof num6);//123.45 number
        
        //parseInt
        var str = "111";
        console.log(parseInt(str,2));  //7
        //表示二進制

    </script>
        

轉換成字符串類型

方式一: 調用toString()方法

方式二: String(內容)

注意:
toString()方法只能將數值類型和布爾類型轉換成字符串類型，不能將Undefined和Null類型轉成字符串類型；
String()函數能將所有基本類型轉成字符串類型；

方式三:字符串拼接

 <script>
        var num = 123;
        var obj = null;
        var message = undefined;
        var flag = true;

        //方式一: 調用toString()方法 變量.toString();

        console.log(num.toString());
        //console.log(obj.toString()); // null 不適用
        //console.log(message.toString()); //undefined 不適用
        console.log(flag.toString());

        //方式二: String(內容)
        console.log(String(num));
        console.log(String(obj));
        console.log(String(message));
        console.log(String(flag));

        //方式三:字符串拼接: 變量 + ""
        //隱式轉換：其他的數據類型在和字符串進行+運算符進行拼接時，會自動轉換成字符串
        console.log(num + "");
        console.log(obj + "");
        console.log(message + "");
        console.log(flag + "");


    </script>

轉換成布爾類型

通常使用Boolean()函數將其他類型轉成布爾類型:

• 轉換成false的五種特殊值：""（空字符串）、0（包括 0、-0）、undefined、null、NaN；
• 如果某個值爲 “”（空字符串）、0（包括 0、-0）、undefined、null、NaN時，那麼這個值轉換成布爾類型之後的值爲false，否則，其值爲 true。（記住五種特殊值）

<script>
        //轉換成Boolean 爲false的情況
        console.log(Boolean(""));
        console.log(Boolean(0));
        console.log(Boolean(null));
        console.log(Boolean(NaN));
        console.log(Boolean(undefined));

        //轉換成Boolean 爲true的情況
        console.log(Boolean("123"));
    </script>