day02_js學習筆記_01_js的簡介、js的基本語法

day02_js學習筆記_01_js的簡介、js的基本語法

=============================================================================
=============================================================================
涉及到的知識點有:
    一、js的簡介 
        1、js是什麼?
        2、js能做什麼?
        3、js歷史及組成
        4、js被引入的方式
            (1)內嵌腳本
            (2)內部腳本
            (3)外部腳本
    二、js的基本語法
        1、變量(js是弱類型的語言)
        2、原始(基本)數據類型(java中叫基本數據類型)
        3、引用數據類型
        4、運算符
            (1) 賦值運算符
            (2) 算術運算符
            (3) 邏輯運算符(js中只有雙與和雙或)
            (4) 比較運算符(關係運算符)
            (5) 三元運算符(三目運算符)
            (6) void運算符
            (7) 類型運算符
        5、邏輯語句
            (1) if else
            (2) switch
            (3) 普通for循環
            (4) 增強for in循環
=============================================================================
=============================================================================
day02_js學習筆記_01_js的簡介、js的基本語法
-----------------------------------------------------------------------------
一、js的簡介 
    1、js是什麼?
        JavaScript 是因特網上最流行的腳本語言,它存在於全世界所有 Web 瀏覽器中,能夠增強用戶與 Web 站點和 Web 應用程序之間的交互。
        腳本語言:腳本語言又被稱爲擴建的語言,或者動態語言,是一種解釋型語言,由解釋器來運行,用來控制軟件應用程序,腳本通常以文本保存,只在被調用時進行解釋或編譯。
        JavaScript 是可插入 HTML 頁面的編程代碼。
        JavaScript 插入 HTML 頁面後,可由所有的現代瀏覽器執行。
        
        js是可以嵌入到html中,是 基於對象 和 事件驅動 的 腳本語言(解釋型語言)。    Java屬於編譯型語言。
        js是基於對象的,即js把什麼都看成對象。
        Java是面向對象的,即java大多在描述對象。
        
        js的特點:            
            (1) 交互性:信息的動態交互
            (2) 安全性:js不能訪問本地磁盤
            (3) 跨平臺:瀏覽器中都具備js解析器(只要是可以解析js的瀏覽器都可以執行,和平臺無關)
    2、js能做什麼?
        (1) js能動態的修改(和增刪)html和css的代碼,即可以改變html內容、改變html樣式。
        (2) js能動態的校驗數據,即進行驗證輸入。
    3、js歷史及組成
        ECMAScript標準    BOM(瀏覽器對象模型)  DOM(文檔對象模型)
    4、js被引入的方式
        (1)內嵌腳本
            <input type="button" value="button" onclick="alert('xxx')" />    <!--alert"彈框" "提醒框" "警告框"-->    
        (2)內部腳本
            <head>
            <script type="text/javascript">
                alert("xxx");
            </script> 
            </head>
            <body>
                <input type="button" value="button" />
            </body>
        (3)外部腳本
            首先創建一個js文件,其次在html中引入。
            <script type="text/javascript" src="demo1.js"></script>
            js代碼放在哪呢?
                放在哪都行,但是在不影響html功能的前提下,越晚加載越好(網站優化時)
                有一種情況是需要必須在前面加載(即頁面一加載就需要執行js代碼時)
                    比如:二級聯動,當頁面一加載時,需要在js中使用Ajax的東西。去刷新,去訪問數據庫的時候。
-----------------------------------------------------------------------------
二、js的基本語法
    1、變量(js是弱類型的語言)
        (1) 用var,var什麼都行
            var x = 5;
            x = 'javascript'; // 注意:js中單引號與雙引號是一樣的
            var y = "hello";
            var b = true;
        (2) 不用var和分號也行
            x = 5;
            x = 5        
    2、原始(基本)數據類型(java中叫基本數據類型)
        (1) number        數字類型
        (2) boolean       布爾類型
        (3) string        字符串類型
        (4) null          空類型(null屬於object類型。注意:原始(基本)數據類型怎麼還屬於object類型呢?答:這是js一直沿用的一個錯誤)
        (5) underfind     未定義類型
            注意:
                1、原始(基本)數據類型怎麼可以調用方法呢?
                    答:因爲number、boolean、string是僞對象,可以調用方法。(相當於java中的自動裝箱/拆箱)
--------------------------------------        
            原始(基本)數據類型之間的轉換:
            number\boolean類型轉成string類型
                僞對象名.toString()
                示例:
                    alert(k);            // 什麼都沒有彈出來
                    alert(typeof k);     // underfind
                    alert(typeof(k));    // underfind    typeof以上這兩種寫法,效果一樣,常用第二種寫法
                    var x = 5;
                    var b = true;
                    var n = null;
                    alert(typeof x.toString()); // string    
                    alert(typeof b.toString()); // string
                    alert(typeof(n)); // object                
--------------------------------------                    
            string\boolean類型轉成number類型
                parseInt()      // 傳入參數
                parseFloat()    // 傳入參數
                注意:    
            1、boolean類型不能通過上面兩種方式轉爲number類型。
            2、string類型可以將數字字符串轉換成number類型,例如:"123a3sd5"則轉成123。
                示例:
                    var b = true;
                    var s = "123x44xx";
                    alert(parseInt(b));     // NuN(not a number)
                    alert(parseFloat(b));   // NuN(not a number)
                    alert(parseInt(s));     // 123
                    alert(parseFloat(s));   // 123
--------------------------------------
            強制類型轉換
                Boolean()        // 傳入參數,強轉成布爾類型
                    數字類型強轉成布爾類型時     非零就是true            零就是false
                    字符串類型強轉成布爾類型時   非空字符串就是true       空字符串("")就是false
                示例:
                    var b = 123;
                    alert(Boolean(b)); // true
                    b = -1;
                    alert(Boolean(b)); // true
                    b = 0;
                    alert(Boolean(b)); // false
                    b = "hello";
                    alert(Boolean(b)); // true
                    b = "   ";
                    alert(Boolean(b)); // true
                    b = "";
                    alert(Boolean(b)); // false                
--------------------------------------                
                Number()        // 傳入參數,強轉成數字類型
                    布爾類型轉數字類型     true轉成1        false轉成0
                    字符串類型轉數字類型   不能強轉
                示例:
                    var b = true;
                    alert(Number(b)); // 1
                    b = false;
                    alert(Number(b)); // 0
                    var s = "123ss";
                    alert(Number(s)); // NaN    
--------------------------------------
                String()        // 傳入參數,強轉爲字符串類型
                注意:將number\boolean類型轉成string類型,已經有了 對象名.toString()方法了,一般不用該類的構造方法了。
                示例:
                    var b = true;
                    alert(String(b)); // true
                    b = false;
                    alert(String(b)); // false
                    b = 5;
                    alert(String(b)); // 5                                    
--------------------------------------
    3、引用數據類型
        在java中:    
            Object obj = new Object();
        在js中:        
            var obj = new Object();
            var num = new Number();    
            var str = new String();
            示例:
                var obj = new Object();
                alert(typeof obj); // object
                var num = new Number();
                alert(typeof num); // object
                var str = new String();
                alert(typeof str); // object
--------------------------------------
    4、運算符
        (1) 賦值運算符
            var x = 5;
        (2) 算術運算符
            + - * / %
                +: 遇到字符串變成連接
                -:先把字符串轉成數字然後進行運算
                *: 先把字符串轉成數字然後進行運算
                /: 先把字符串轉成數字然後進行運算
            示例:
                var x = "5";
                var y = "12";
                alert(x + y); // 512
                alert(y - x); // 7
                alert(x * y); // 60
                alert(y / x); // 2.4
                alert(1213 / 100 * 100); // 1213    java中爲1200
        (3) 邏輯運算符(js中只有雙與和雙或)
            &&    ||
        (4) 比較運算符(關係運算符)
            <    >    >=    <=    !=    ==等於:只有值相等 
            ===全等:類型與值都要相等
            示例:
                var a = 10;
                var b = "10";
                alert(a == b);  // true
                alert(a === b); // false
                alert(3 < 2 ? "大於" : "小於");            
        (5) 三元運算符(三目運算符)
        (6) void運算符
            <a href="javascript:void(0);">xxx</a>  代表不讓跳轉(不會重新刷新頁面)
            <a href="#">xxx</a>  代表跳轉至本頁面(會重新刷新頁面)
        (7) 類型運算符
            typeof        判斷數據類型,返回相應的數據類型
            instanceof    判斷數據類型,判斷是否是某種類型,返回的是布爾類型
            示例:
                var obj = new Object();
                alert(typeof obj); // object
                alert(obj instanceof Object); // true
--------------------------------------
    5、邏輯語句
        (1) if else
            // 注意條件:數字非0  和 字符串非空都是true
            if (9) {
                alert("true--");
            } else {
                alert("false--");
            }
        (2) switch
            var x = "java";
            switch (x) {
            case "css":
                alert("css");
                break;
            case "js":
                alert("js");
                break;
            case "java":
                alert("java");
                break;
            default:
                alert("def");
            }
        (3) 普通for循環
            var arr = [ 1, 3, 5, 7, "js" ];
            for (var i = 0; i < arr.length; i++) { // index代表角標
                alert(arr[i]);
            }
        (4) 增強for in循環
            var arr = [ 1, 3, 5, 7, "js" ];
            for (index in arr) { // index代表角標
                alert(arr[index]);
            }
            
            注意:java中的普通for循環與增強for循環
            int[] arr = { 1, 2, 3, 4, 5 };
            // 普通for循環
            for (int x = 0; x < arr.length; x++) {
                System.out.println(arr[x]);
            }
            System.out.println("---------------");
            // 增強for循環
            for (int x : arr) {
                System.out.println(x);
            }
=============================================================================
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章