【前端】JavaScript學習筆記（一）——快速入門

阿新 • • 發佈：2021-07-08

✨JavaScript

JavaScript（簡稱“JS”）是一種具有函式優先的輕量級，解釋型或即時編譯型的程式語言。雖然它是作為開發Web頁面的指令碼語言而出名，但是它也被用到了很多非瀏覽器環境中，JavaScript 基於原型程式設計、多正規化的動態指令碼語言，並且支援面向物件、命令式、宣告式、函數語言程式設計正規化。

✨課程連結

✨學習筆記

我的第一個JavaScript

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

<!--    1. 內部標籤-->
<!--    script標籤內寫 JavaScript-->
<!--    <script>-->
<!--        alert("Hello World!");-->
<!--    </script>-->

<!--    2. 外部引入-->
<!--    ！注意：script標籤必須成對出現-->
    <script src="js/qj.js"></script>

<!--    不用顯式定義型別 預設就是JavaScript-->
    <script type="text/javascript"></script>

</head>
<body>

<!--這裡也可以存放-->
</body>
</html>

alert("Hello World!");

基本語法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

<!--    JavaScript嚴格區分大小寫-->
    <script>
        // 1. 定義變數
        var score = 71;
        // 2. 條件控制
        if(score > 60 && score < 70){
            alert("60 ~ 70")
        }else if(score > 70 && score < 80){
            alert("70 ~ 80")
        }else {
            alert("other")
        }

        // 分號可選

        /**
         * 註釋
         */

        // 在瀏覽器的控制檯列印變數
        // console.log(score)
    </script>

</head>
<body>

</body>
</html>

資料型別快速瀏覽

變數

var

number

js不區分小數和整數

NaN：not a nuber

Infinity：無窮大

字串

布林

邏輯運算

比較運算子

= 賦值
== 等於（型別不一樣，值一樣，也會判斷為true)
=== 絕對等於(型別一樣，值一樣，結果true)

（這是JS缺陷堅持不要使用 == 比較）

NaN

NaN===NaN，這個與所有的數值都不相等，包括自己
只能通過isNaN(NaN)來判斷這個數是否是NaN

浮點數問題

console.log((1/3) === (1 - 2/3))

儘量避免使用浮點數進行運算存在精度問題！

null 和 undefined

null 空
undefined 未定義

陣列

Java的數值必須是相同型別的物件 JS中不需要這樣!

// 保證程式碼的可讀性，儘量使用[]
var arr = [1,2,3,4,5,'Hello',null,true];
new Array(1,12,3,4,4,5,'Hello');

取陣列下標如果越界了 undefined

物件

物件是大括號陣列是中括號

每個屬性之間使用逗號隔開最後一個不需要新增

var Person = {
    name: "Test",
    age: 3,
    tags: ['js', 'Java', 'php']
}

取物件的值

Person.name
> "Test"
Person.age
> 3

嚴格檢查模式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

<!--    'use strict';-->
<!--    嚴格檢查模式 預防JavaScript的隨意性導致產生的一些問題-->
<!--    必須寫在JavaScript的第一行-->

<!--    區域性變數使用let 定義（IDEA需要設定支援ES6語法）-->

    <script>
        'use strict';
        // 全域性變數
        var i = 1;
        // ES6 let

    </script>

</head>
<body>

</body>
</html>