javascript:基礎

時間 2021-08-13

標籤 javascript html java web 編程 api 數組瀏覽器服務器 dom 欄目 JavaScript 简体版

原文原文鏈接

javascript的博文筆記根據菜鳥教程的筆記整理完成，以及W3c的javascript的教程javascript

JavaScript 是互聯網上最流行的腳本語言，這門語言可用於 HTML 和 web，更可普遍用於服務器、PC、筆記本電腦、平板電腦和智能手機等設備。html

JavaScript 是腳本語言

JavaScript 是一種輕量級的編程語言。java

JavaScript 是可插入 HTML 頁面的編程代碼。web

JavaScript 插入 HTML 頁面後，可由全部的現代瀏覽器執行。編程

JavaScript 很容易學習。api

javaScript:直接寫入HTML輸出流數組

watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_90,type_ZmFuZ3poZW5naGVpdGk=

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<p>
    JavaScript 可以直接寫入 HTML 輸出流中：
</p>
<script>
    document.write("<h1>這是一個標題</h1>");
    document.write("<p>這是一個段落。</p>");
</script>
</body>
</html>

View Code

效果圖：瀏覽器

數據類型：服務器

1. 原始數據類型(基本數據類型)：
　　1. number：數字。整數/小數/NaN(not a number 一個不是數字的數字類型)
　　2. string：字符串。字符串 "abc" "a" 'abc'
　　3. boolean: true和false
　　4. null：一個對象爲空的佔位符
　　5. undefined：未定義。若是一個變量沒有給初始化值，則會被默認賦值爲undefined
2. 引用數據類型：對象dom

JavaScript：變量

* 變量：一小塊存儲數據的內存空間
* Java語言是強類型語言，而JavaScript是弱類型語言。
　　* 強類型：在開闢變量存儲空間時，定義了空間未來存儲的數據的數據類型。只能存儲固定類型的數據
　　* 弱類型：在開闢變量存儲空間時，不定義空間未來的存儲數據類型，能夠存聽任意類型的數據。
* 語法：
　　* var 變量名 = 初始化值;
* typeof運算符：獲取變量的類型。
　　* 注：null運算後獲得的是object

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

    <script >

        //定義變量
       /* var a  = 3;
        alert(a);

        a = "abc";
        alert(a);*/

       //定義number類型

        var num = 1;
        var num2 = 1.2;
        var num3 = NaN;

        //輸出到頁面上
        document.write(num+"<br>");
        document.write(num2+"<br>");
        document.write(num3+"<br>");
        //定義string類型

        var str = "abc";
        var str2 = 'edf';
        document.write(str+"<br>");
        document.write(str2+"<br>");

        //定義boolean
        var flag = true;
        document.write(flag+"<br>");

        // 定義null,undefined
        var obj = null;
        var obj2 = undefined;
        var obj3 ;
        document.write(obj+"<br>");
        document.write(obj2+"<br>");
        document.write(obj3+"<br>");

    </script>


</head>
<body>

</body>

View Code

typedef

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

    <script >

        //定義變量
       /* var a  = 3;
        alert(a);

        a = "abc";
        alert(a);*/

       //定義number類型

        var num = 1;
        var num2 = 1.2;
        var num3 = NaN;

        //輸出到頁面上
        document.write(num+"---"+typeof(num)+"<br>");
        document.write(num2+"---"+typeof(num2)+"<br>");
        document.write(num3+"---"+typeof(num3)+"<br>");

        //定義string類型

        var str = "abc";
        var str2 = 'edf';
        document.write(str+"---"+typeof(str)+"<br>");
        document.write(str2+"---"+typeof(str2)+"<br>");

        //定義boolean
        var flag = true;
        document.write(flag+"---"+typeof(flag)+"<br>");

        // 定義null,undefined
        var obj = null;
        var obj2 = undefined;
        var obj3 ;
        document.write(obj+"---"+typeof(obj)+"<br>");
        document.write(obj2+"---"+typeof(obj2)+"<br>");
        document.write(obj3+"---"+typeof(obj3)+"<br>");

    </script>


</head>
<body>

</body>
</html>

View Code

javaScript的輸出

JavaScript 顯示數據

JavaScript 能夠經過不一樣的方式來輸出數據：

使用 window.alert() 彈出警告框。
使用 document.write() 方法將內容寫到 HTML 文檔中。
使用 innerHTML 寫入到 HTML 元素。
使用 console.log() 寫入到瀏覽器的控制檯。

JavaScript 對象

var car = {type:"Fiat", model:500, color:"white"};

在以上實例中，3 個值 ("Fiat", 500, "white") 賦予變量 car。

在以上實例中，3 個變量 (type, model, color) 賦予變量 car。

一元運算符：

++，-- ， +(正號)
* ++ --: 自增(自減)
* ++(--) 在前，先自增(自減)，再運算
* ++(--) 在後，先運算，再自增(自減)
* +(-)：正負號
* 注意：在JS中，若是運算數不是運算符所要求的類型，那麼js引擎會自動的將運算數進行類型轉換
　　* 其餘類型轉number：
　　* string轉number：按照字面值轉換。若是字面值不是數字，則轉爲NaN（不是數字的數字）
　　* boolean轉number：true轉爲1，false轉爲0

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>一元運算符</title>
    <script>
        /*
        1. 一元運算符：只有一個運算數的運算符
                    ++，-- ， +(正號) -（負號）
                    * ++ --: 自增(自減)
                        * ++(--) 在前，先自增(自減)，再運算
                        * ++(--) 在後，先運算，再自增(自減)

                    * +(-)：正負號
                    * 注意：在JS中，若是運算數不是運算符所要求的類型，那麼js引擎會自動的將運算數進行類型轉換
                        * 其餘類型轉number：
                            * string轉number：按照字面值轉換。若是字面值不是數字，則轉爲NaN（不是數字的數字）
                            * boolean轉number：true轉爲1，false轉爲0
         */
        var num = 3;
        var a = ++ num ;

        document.write(num);// 4
        document.write(a); // 3 4
        document.write("<hr>");

        var b = +"123abc";
        document.write(typeof (b));
        document.write(b + 1);
        document.write("<hr>");

        var flag = + true;
        var f2 = + false;
        document.write(typeof (flag) + "<br>");//number
        document.write(flag + "<br>");// 1
        document.write(f2 + "<br>");// 0


    </script>
</head>
<body>

</body>

View Code

比較運算符

> < >= <= == ===(全等於)
* 比較方式
1. 類型相同：直接比較
* 字符串：按照字典順序比較。按位逐一比較，直到得出大小爲止。
2. 類型不一樣：先進行類型轉換，再比較
* ===：全等於。在比較以前，先判斷類型，若是類型不同，則直接返回false

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>比較運算符</title>
    <script>
        /*
         * 比較運算符:
         *     * 比較方式
         *          1. 類型相同：直接比較
         *              * 字符串：按照字典順序比較。按位逐一比較，直到得出大小爲止。
         *          2. 類型不一樣：先進行類型轉換，再比較
         *              * ===：全等於。在比較以前，先判斷類型，若是類型不同，則直接返回false
         */


        document.write((3 > 4) +"<br>");

        document.write(("abc" < "acd") +"<br>");


        document.write(("123" == 123) +"<br>");

        document.write(("123" === 123) +"<br>");

    </script>
</head>
<body>

</body>

View Code

邏輯運算符
&& || !
* 其餘類型轉boolean：
　　1. number：0或NaN爲假，其餘爲真
　　2. string：除了空字符串("")，其餘都是true
　　3. null&undefined:都是false
　　4. 對象：全部對象都爲tr

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>比較運算符</title>
    <script>
        /*
         * 邏輯運算符:
         *  &&: 與（短路）
         *  ||: 或 (短路)
         *  !：非
         *      * 其餘類型轉boolean：
         *          1. number：0或NaN爲假，其餘爲真
         *          2. string：除了空字符串("")，其餘都是true
         *          3. null&undefined:都是false
         *          4. 對象：全部對象都爲true
         *
         *
         */
        var flag = true;
        document.write(flag+"<br>");
        document.write(!flag+"<br>");

        document.write("<hr>");
        //number
        var num = 3;
        var num2 = 0;
        var num3 = NaN;
        document.write(!!num+"<br>");
        document.write(!!num2+"<br>");
        document.write(!!num3+"<br>");

        /*while(1){

        }*/

        document.write("<hr>");
        //string

        var str1 = "abc";
        var str2 = "";
        document.write(!!str1+"<br>");
        document.write(!!str2+"<br>");

        document.write("<hr>");


        // null & undefined
        var obj = null;
        var obj2;
        document.write(!!obj+"<br>");
        document.write(!!obj2+"<br>");

        document.write("<hr>");

        // null & undefined
        var date = new Date();
        document.write(!!date+"<br>");

        document.write("<hr>");



        obj = "123";
        if(obj != null && obj.length > 0){//防止空指針異常
            alert(123);
        }
        //js中能夠這樣定義，簡化書寫。
        if(obj){//防止空指針異常
            alert(111);
        }


    </script>
</head>
<body>

</body>
</html>

View Code

For語句：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>for語句</title>
    <script>

       //1 ~ 100 求和  5050
        var sum = 0;
        for (var i = 1; i <= 100; i ++){
            sum += i;
        }
        alert(sum);

    </script>
</head>
<body>

</body>
</html>

View Code

Switch語句：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>switch語句</title>
    <script>

        var a;
        switch (a){
            case 1:
                alert("number");
                break;
            case "abc":
                alert("string");
                break;
            case true:
                alert("true");
                break;
            case null:
                alert("null");
                break;
            case undefined:
                alert("undefined");
                break;

        }


    </script>
</head>
<body>

</body>
</html

View Code

while語句：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>while語句</title>
    <script>

       //1 ~ 100 求和  5050

        var sum = 0;
        var num = 1;

        while(num <= 100){
            sum += num;
            num ++;
        }
        alert(sum);

    </script>
</head>
<body>

</body>
</html>

View Code

Array:數組對象

 1. 建立：
 1. var arr = new Array(元素列表);
 2. var arr = new Array(默認長度);
 3. var arr = [元素列表];
 2. 方法
 join(參數):將數組中的元素按照指定的分隔符拼接爲字符串
 push() 向數組的末尾添加一個或更多元素，並返回新的長度。
 3. 屬性
 length:數組的長度
 4. 特色：
 1. JS中，數組元素的類型可變的。
 2. JS中，數組長度可變的。

Date：日期對象
     1. 建立：
         var date = new Date();

     2. 方法：
         toLocaleString()：返回當前date對象對應的時間本地字符串格式
         getTime():獲取毫秒值。返回當前如期對象描述的時間到1970年1月1日零點的毫秒值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Date對象</title>
    <script >

        /*

           Date：日期對象
                1. 建立：
                    var date = new Date();

                2. 方法：
                    toLocaleString()：返回當前date對象對應的時間本地字符串格式
                    getTime():獲取毫秒值。返回當前如期對象描述的時間到1970年1月1日零點的毫秒值差
         *
         */

        var date = new Date();

        document.write(date + "<br>");

        document.write(date.toLocaleString() + "<br>");

        document.write(date.getTime() + "<br>");

    </script>
</head>
<body>

</body>
</html>

View Code

Math：數學對象
     1. 建立：
         * 特色：Math對象不用建立，直接使用。  Math.方法名();

     2. 方法：
         random():返回 0 ~ 1 之間的隨機數。 含0不含1
         ceil(x)：對數進行上舍入。
         floor(x)：對數進行下舍入。
         round(x)：把數四捨五入爲最接近的整數。
     3. 屬性：
         PI

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Math對象</title>
    <script >

        /*

           Math：數學對象
                1. 建立：
                    * 特色：Math對象不用建立，直接使用。  Math.方法名();

                2. 方法：
                    random():返回 0 ~ 1 之間的隨機數。 含0不含1
                    ceil(x)：對數進行上舍入。
                    floor(x)：對數進行下舍入。
                    round(x)：把數四捨五入爲最接近的整數。
                3. 屬性：
                    PI

         *
         */

        document.write(Math.PI +"<br>");
        document.write(Math.random() +"<br>");
        document.write(Math.round(3.14) +"<br>");
        document.write(Math.ceil(3.14) +"<br>");
        document.write(Math.floor(3.14) +"<br>");

        /**
         * 取 1~100之間的隨機整數
         *      1. Math.random()產生隨機數：範圍 [0,1)小數
         *      2. 乘以 100 --> [0,99.9999] 小數
         *      3. 捨棄小數部分 ：floor --> [0,99] 整數
         *      4. +1 -->[0,99] 整數 [1,100]
         *
         *
         */

       var number =  Math.floor((Math.random() * 100)) + 1;
       document.write(number);



    </script>
</head>
<body>

</body>