javascript (1)

一. JS介紹
    1.    定義一個變量的形式:  
        var a;
    
    2.    Js是前臺語言,用於頁面的交互, 不能操做數據庫
        PHP,ASP,JSP 能夠操做數據庫, 可以進行增刪改查.  Node.js除外
        
    3.    Js的組成有三個部分
        ECMAScript: JavaScript的語法標準. 包括變量, 表達式, 運算符, 函數, if語句, for語句等等
        DOM: 操做網頁上元素的API.  好比讓一個盒子移動, 變色, 輪播圖等等.
        BOM: 操做瀏覽器部分功能的API.  好比讓瀏覽器自動滾動.


二. Js代碼
    1.    Js引入
    
        方法1:  在頁面中能夠直接在body的標籤中放入以下標籤對:
        <script type=」text/javascript」>
            // js的代碼段
        </script>

        方法2:  引入js文件
        <script  type=」text/javascript」 src=」demo.js」><script/>

    2.語法
        a. js 對縮進 換行 空格不敏感
            注意每一條語句末尾都要有分號, 爲了之後壓縮文件
        
        b. 單行註釋用  //單行註釋
           多行註釋用  /*多行註釋*/
           
    3. js中輸出信息的方式
    
        a. 彈出警告框: alert語句
            <script type="text/javascript」>
                alert("哇哈哈");
            </script>
                
        b. 控制檯輸出: console.log()
            console表示"控制檯", log表示"輸出", 控制檯是程序員調試程序的地方, 
            程序員常常使用這條語句輸出一些東西來測試程序是否正確
    
        c. 用戶輸入:prompt()語句
            prompt()就是專門用來彈出可以讓用戶輸入的對話框, 代碼以下:
            
            <script type="text/javascript">
                var a = prompt("今天是什麼天氣???")
                console.log(a);
            </script>
            
            上面的代碼中,用戶輸入的內容將被傳遞給變量a
            prompt()語句中 無論輸入什麼內容, 都是字符串類型.
    
        d.     alert 和 prompt的區別:
        
            alert("從前有座山");  //直接使用,不須要變量
            var a = prompt("請輸入一個數字");  //必須用變量接收用戶輸入的數值
    
    4. 變量
        a. 變量的聲明和賦值
            var a = 100;
        
        b. 變量的類型
            變量裏面能夠存數字,字符串等. 變量會自動根據存儲內容的類型來決定本身的類型.
            
            數字型:number
            若是一個變量裏存放了數字,那麼這個變量就是數值型的
            var a = 100; //定義了一個變量, 而且賦值100
            console.log(typeof a);  // 輸出a 變量的類型, typeof()表示獲取變量的類型
            
            字符串型:string
            用單引號 或雙引號括起來的字符
            var a = "abc";
            var b = "123321";
            var c = "";  //空字符串  
            console.log(typeof a, typeof b, typeof c);
            
        c. 連字符和加號的區別
            鍵盤上的+ 多是連字符, 也多是數字的加號
            
            console.log("我"+"愛"+"你");  //連字符, 把漢字連在一塊兒, 輸出:我愛你
            console.log("我+愛+你");    // 原樣輸出: 我+愛+你
            console.log("我"+521);   // 輸出:我521
            console.log(1+2+3);      // 先計算並輸出結果, 輸出6
            總結: 若是兩邊都是數值, 此時是加號, 不然就是連字符(用來鏈接字符串)
            
        d. 變量值的傳遞(賦值)    
            語句: a = b; //把b的賦值給a,  b值不變
            
        e. 變量格式的轉換
            parseInt()能夠將字符串轉成數字, 例如parseInt("5");
            
            parseInt()還具備如下的特徵:
            
                帶有自動淨化的功能: 只保留字符串最開頭的數字, 後面的中文自動消失
                例如:  console.log(parseInt("2018你真帥"));     輸出結果:2018
                
                
                帶有自動截斷小數的功能:取整, 不是四捨五入
                例如:
                    var a = parseInt(5.8) + parseInt(4.7);
                    console.log(a);  // 輸出：9
                    var a = parseInt(5.8 + 4.7);
                    console.log(a);  // 輸出：10

                    
三. 數據類型:
    
    數據類型包括:基本數據類型 和 引用數據類型;
    
    基本數據類型是簡單的數據段, 引用數據類型指的是有多個值構成的對象
    
    當咱們把賦值給一個變量的時候, 解析器首先要確認的就是這個值是基本類型仍是引用類型
    
    
    1. 基本數據類型:
    
        a. number
        var a = 123;
        console.log(typeof a)  //輸出number
        //特殊狀況: infinity(無限大)是number類型
        
        var a1 = 5/0;
        console.log(a1)   // 顯示 infinity
        console.log(typeof a1)  //number
        
        b. string
        var str = "123"
        console.log(typeof str)   // string
        
        c. boolean
        var b1 = false;
        console.log(typeof b1)   //boolean
        
        d. null 
        var c1 = null;  //空對象
        console.log(typeof c1)   //object
        
        e. undefined
        var d1; //只有聲明,沒有賦值,表示變量未定義
        console.log(typeof d1)   //undefined
    
    2. 引用數據類型
        Function
        Object
        Array
        String
        Date

四. 運算符
    
    1. 賦值運算符
    =, +=, -=, *=, /=, %=
    
    2. 算數運算符
    +, -, *, /, %, ++, --
    
    3. 比較運算符
    ==, ===(等同於:值和類型均相等), !=, !==, >, <, >=, <=
    注意: ==(!=)比較的是值,  ===(!==)比較的是值和數據類型.  例如:
    
    var s = "1";
    var n = 1;
    console.log(s == n); //true
    console.log(s === n); //false
    
    4. 字符串拼接和字符串運算的特殊狀況
        a. 字符串類型的數值 和 數值類型相減 結果是數值.  例如:
            var a = "3";
            var b = 1;
            console.log(a-b);  //1
            
        b. NaN(not a number)是一個number的類型
            var b1 = "one";
            var b2 = "two";
            ret = b1*b2
            console.log(ret, typeof(ret))  //NaN number
            
        c. 字符串拼接
            var name = "伊拉克";
            var am = "美軍";
            
            //字符串拼接
            var str = "3月20日," + name + "戰爭爆發,以" + am + "爲主的部隊擊潰了軍隊";
            console.log(str);
            
            //es6 的模板字符串, tab鍵上面的反引號``, 添加變量名使用${變量名}
            var str1 = "3月20日,${name}戰爭爆發,以${am}爲主的部隊擊潰了軍隊";
            console.log(str1);
            
五. 數據類型轉換
    1. 數值類型轉字符串類型
        a. 隱式轉換
        var n1 = 123;
        var n2 = "123";
        var n3 = n1+n2;
        console.log(n3);  // 123123
        console.log(typeof n3);  //string

        b.強轉換的兩種方法: String(),  .toString()
        var n1 = 123;
        var str1 = String(n1);
        console.log(str1, typeof str1);   //123  string
        
        var num = 234;
        str2 = num.toString()
        console.log(str2, typeof str2);   //123  string
    
    2. 將字符串類型轉換成數值類型: Number(), parseInt(), parseFloat()
        
        var strNum = "789.123wasdfj"
        var str = "666"
        console.log(Number(strNum),Number(str))   //NaN  666
        console.log(parseInt(strNum))   //789
        console.log(parseFloat(strNum));  //789.123
        
    3. 任何數據類型均可以轉成boolean類型
    
        //不是0的都是真
        var b1 = "123";  //true
        var b2 = 0;   //false
        var b3 = -123;  //true
        var b4 = Infinity;  //true
        var b5 = NaN;  //false
        var b6;  //false
        var b7 = null; //false
        
六. 流程圖控制
    1. if, if-else, if-else if-else
        
        a. if語句, 例如:
        var ji = 20;
        if (ji >= 10){
            console.log("恭喜你,吃雞成功")
        }
        console.log("hello world");  //這裏的代碼也會執行
        
        
        b. if-else例句:
        var ji = 20;
        if (ji >= 10){
            console.log("恭喜你吃雞成功")
        }else{
            console.log("很遺憾")   //這行代碼不執行
        }
        
        
        c. if-else if-else例句:
            if(true){
                //知足條件執行這行代碼
            }else if(true){
                //知足條件執行這行代碼
            }else if(true){
                //知足條件執行這行代碼
            }else{
                //知足條件執行
            }
        
    2. 邏輯與(&&), 邏輯或(||)
            
        a. 模擬若是總分 > 400分 而且數學成績 >89 分就會被清華錄取,例如
            var sum = 405;
            var math = 90;
            if(sum > 400 && math >89){
                console.log("清華大學錄取")
            }else{
                alert("未被錄取")
            }
    
        b. 模擬若是總分 > 500 分 或者 英語大於 85分 被複旦大學錄取,例如
            var sum = 530;
            var english = 90;
            if(sum > 500 || english >85){
                console.log("被複旦大學錄取")
            }else{
                aler("未錄取")
            }
    
        c. switch語句
            var game_score = "better";
            switch(game_score){
            case "good":
                console.log("玩得很好")
                break;   // break表示退出, 若是不寫就直接到碰見下一個break才退出
            case "better":
                console.log("玩的通常般")
                break;
            case "best":
                console.log("恭喜吃雞")
                break;
            default:
                console.log("很遺憾")
            }
    
        4. while循環, do-while循環
            a. while循環 例如:
            
            var i = 1;  //初始化循環變量
            while(i <= 9){  //判斷循環條件
                console.log(i);
                i = i+1;    //改變循環條件
            }
        
        
            練習:1-100之間全部2的倍數
            var i = 1;
            while(i <= 100){
                if(i%2 == 0){
                    console.log(i)
                }
            }
    
            b. do-while循環
            //無論有沒有知足while中的條件, do裏面的代碼都會先執行一次
            
            var i = 3;  //初始化循環變量
            do{
                console.log(i)
                i++;        //改變循環條件
            }while(i < 10)  //判斷循環條件
    
        5.for循環
            for(var i=1; i<=10; i++){
                console.log(i)
            
            }
        練習:1-100 之間全部的數的和打印出來
            sum = 0
            for (var i=1; i<=100; i++){
                sum += 1;
            }
            console.log(sum);
            
        練習:在瀏覽器中輸出直角三角形
            for(var i = 1; i <= 6; i++){
                for(var j=1; j<=i; j++){
                    document.write("*");
                }
                    document.write("<br>");
            }
            
            
        練習: 瀏覽器中輸出等腰直角三角形
            for(var i = 1, i<=6; i++){  //控制行數
                //控制空格數
                for(var s=i; s<6; s++){
                    document.write("&nbsp;")
                }
                for(var j=1; j<=2*i-1; j++){
                    document.write("*")
                }
                document.write("<br>")
            }
            
            
七. 經常使用內置對象
    js中全部的事物都是對象: 字符串,數值, 數組, 函數......此外js容許自定義對象
    js提供多個內置對象: String, Date, Array等等
    
    對象是帶有屬性和方法的特殊數據類型
            
    1. 數組對象
        
        數組的建立形式有2種方式:
        a. 字面量方式建立,  推薦使用
        var colors = ["red","green","pink"];
        
        b. 構造函數建立, 使用new關鍵詞
        var colors = new Array();
            
            
        數組的賦值
        var arr = [];
        //經過下標進行賦值
        arr[0] = 123;
        arr[1] = "哈哈哈";
        arr[2] = "嘿嘿";
        
        
        數組的經常使用方法和示例
        方法或者屬性              描述
        concat()        鏈接兩個或多個數組,而且返回結果
                        var north = ['北京','山東','天津'];
                　　　　var south = ['東莞','深圳','上海'];
                　　　　var newCity = north.concat(south);
                　　　　console.log(newCity); // ["北京", "山東", "天津", "東莞", "深圳", "上海"]                        
                        
        
        join()          把數組的全部元素放入一個字符串裏
                        var score = [98,78,76,100,0];
                　　　　var str = score.join('|');
                　　　　console.log(str); // 98|78|76|100|0
                        
        
        toString()      把數組轉換成字符串, 並返回結果
                        str1 = score.toString();
　　　　                console.log(str1);  // "98,78,76,100,0"
        
        
        slice(start,end)選取數組的一部分,並返回一個新的數組
                        var arr = ['張三','李四','王文','趙六'];
                　　　　var newArr = arr.slice(1,3);
                　　　　console.log(newArr);  // ["李四", "王文"]
        
        
        pop()           刪除數組的最後一個元素, 並返回刪除的元素
                        var color2 = ['black', 'pink', 'deep blue'];
                        el = color2.pop();
                        console.log(el);        //deep blue
                        console.log(color2);    //['black', 'pink']
        
        
        push()          向數組末尾添加一個或多個元素, 並返回新的長度
                        arr.push('小馬哥');
　　　　                console.log(arr);  // ["張三", "李四", "王文", "小馬哥"]
        
        
        reverse()       反轉數組的元素順序
                        var names = ['alex','wusir','xiaoma','angle'];
                　　　　names.reverse();
                　　　　console.log(names);  // ["angle", "xiaoma", "wusir", "alex"]
        
        
        sort()            對數組的元素進行排序  按字母從a--z
                        var names = ['alex','wusir','xiaoma','angle'];
                　　　　names.sort(names);
                　　　　console.log(names)  // ["alex", "angle", "wusir", "xiaoma"]
                        
        
        shift()            刪除並返回數組的第一個元素
                        var color2 = ['black', 'pink', 'deep blue'];
                        el = color2.shift();
                        console.log(el);    //black
                        console.log(color2);//{'pink', 'deep blue']

        
        
        unshift()        向數組的開頭添加一個或者多個元素,並返回新的長度
                        var color2 = ['black', 'pink', 'deep blue'];
                        new_length = color2.unshift('hot pink');
                        console.log(color2);    //{['hot pink','black','pink', 'deep blue']
                        console.log(new_length); // 4

        
        
        Array.isArray   判斷對象是否爲數組
                        var color2 = ['black', 'pink', 'deep blue'];
                        console.log(Array.isArray(color2)); //true

        
        
        length          數組的一個屬性,設置或返回數組元素的個數
                        var color2 = ['black', 'pink', 'deep blue'];
                        console.log(color2.length); //3

    2. 字符串對象
        charAt()        返回指定索引的字符串
                        var str = 'hello';
                　　　　var charset = str.charAt(1);
                　　　　console.log(charset);  // e
        
        
        concat()        返回字符串,表示兩個或多個字符串的拼接
                        var str1 = 'al';
                　　　　var str2 =  'ex';
                　　　　console.log(str1.concat(str2,str1));  // alexal
        
        
        replace(a,b)    字符串b 替換a
                        var a = '1234567755';
                　　　　var newStr = a.replace('4567','****');
                　　　　console.log(newStr); // 123****755
        
        
        indexOf()        返回某個指定的字符串值在字符串中首次出現的位置,若是沒有返回-1
                        var str = 'world';
                　　　　console.log(str.indexOf('o'));  // 1
                　　　　console.log(str.indexOf('a'));  // -1
        
        
        slice()            返回start到end -1之間的字符串, 索引從0開始
                        var str = '正能量';
　　　　                console.log(str.slice(1,2));  // 能
        
        
        
        split()            把字符串分割爲字符串數組
                        var str = '個人天呢，a你在說什麼呢？a哈哈哈';
　　　　                console.log(str.split('a')); // ["個人天呢，", "你在說什麼呢？", "哈哈哈"]
        
        
        substr(start,end)字符串截取, 顧頭不顧尾
                        var str = '個人天呢,a是嘛,你在說什麼呢?a哈哈哈';
　　　　                console.log(str.substr(0,4)); // 個人天呢
        
        
        toLowerCase()    返回一個新的字符串,該字符串字母都變成了小寫
                        var str = 'XIAOMAGE';
　　　　                console.log(str.toLowerCase());  // xiaomage
        
        
        toUpperCase()    返回一個新的字符串,字符串的全部字母變大寫
                        var str = 'xiaomage';
　　　　                console.log(str.toUpperCase());  // XIAOMAGE
        
        match()            查找到一個或多個正則表達式的匹配
                        
        
        
        search()        查找與正則表達式相匹配的值
        
        
        toString()        將number類型轉換成字符串類型
                        var num = 1234.1234;
                        var str = num.toString();
                        console.log(str);

    3. 日期對象
        建立日期對象, 只有構造函數這一種方式, 使用new關鍵字
        var myDate = new Date();
        
        經常使用語法:
        Date()            根據當地時間返回  日期和時間
                        console.log(Date());//Thu Sep 27 2018 10:07:43 GMT+0800 (中國標準時間)
        
        getDate()        根據本地時間返回指定日期對象的月份中的第幾天(1-31)
                        console.log(myDate.getDate());//27
                        
        getMonth()        根據本地時間返回指定日期對應的月份(0-11)
                        #注意  0表示1月
                        console.log(myDate.getMonth());//8
                        
        getFullYear()    根據本地時間返回指定日期對象的年份(返回4位數)                
                        console.log(getFullYear());//2018
                        
        getDay()        根據本地時間返回指定日期對象的星期幾的第幾天(0-6)
                        #0表明  星期日
                        console.log(getDay());//4
            
        getHours()        根據本地時間對象返回指定時間對象的小時(0-23)
                        console.log(myDate.getHours())//14
                        
        getMinutes()    根據本地時間對象返回指定時間對象的分鐘(0-59)        
                        console.log(myDate.getMinutes())//8
    
        getSeconds()    根據本地時間對象返回指定時間對象的秒(0-59)    
                        console.log(myDate.getSeconds())//24
                        
        toLocalString()    返回本地時間
                        console.log(myDate.toLocalString())
                        
                        #使用循環定時器 在頁面中顯示動態時間
                        setInterval(function(){
                            document.getElementById("timer").innerText = Date().toLocalString();
                        },1000)
    
    
    4. math(算數)對象    
        
        #經常使用內置對象
        Math.floor()    向下取整,地板函數
                        var x = 1.789;
                        var new_x = Math.floor(x);
                        console.log(new_x)//1

        Math.ceil()        向上取整,天花板函數
                        var x = 1.789;
                        var new_x = Math.ceil(x);
                        console.log(new_x)//2

        Math.max()        取多個值中的最大值
                        console.log(Math.max(3,2,1,4,5,2))//5

        Math.min()        取多個數的最小值
                        console.log(Math.min(3,2,1,4,5,2))//1

        Math.random()    獲取0-1之間的隨機數
                        console.log(Math.random())//0.669789427291309
                        
                        #獲取100--300之間的隨機數
                        min---max 之間的隨機數: min+Max.random()*(max-min)
                        
                        var start = 100;
                        var end = 300;
                        var num = start+Math.random()*(end-start);
                        console.log(Math.floor(num))

八. 函數
    函數的定義:函數就是將一些語句進行封裝,而後經過調用的形式,執行這些語句
    
    1. 函數的定義
        function 函數名(){
            //函數體
        }
        
    2. 函數的調用
        函數名();
        
    3. 函數的參數
        
        函數定義時的形參
        function f(arg1,arg2){
            console.log(arg1+arg2);
        };
    
        函數定義時的實參
        f(100,200);

    4. 返回值
        function f(arg1,arg2){
            return arg1+arg2;
        }