Python全棧開發之1四、Javascript

時間 2019-12-05

原文原文鏈接

1、簡介

　　前面咱們學習了html和css，可是咱們寫的網頁不能動起來，若是咱們須要網頁出現各類效果，那麼咱們就要學習一門新的語言了，那就是JavaScript，JavaScript是世界上最流行的腳本語言，並且Javascript和Python同樣也是一門全棧開發語言，而且跨平臺。瀏覽器內置了JavaScript語言的解釋器，因此在瀏覽器上按照JavaScript語言的規則編寫相應代碼之，瀏覽器能夠解釋並作出相應的處理。javascript

2、代碼存放位置

　　理論上放在body和head中均可以，可是推薦放在body代碼塊底部，由於Html代碼是從上到下執行，若是Head中的js代碼耗時嚴重，就會致使用戶長時間沒法看到頁面，若是放置在body代碼塊底部，那麼即便js代碼耗時嚴重，也不會影響用戶看到頁面效果，只是js實現特效慢而已。css

　　Js代碼能夠放在一個單獨的文件中，而後經過 <script src="common.js" type="text/javascript"></script>能夠將其導入進來，或者直接在html文件中直接書寫代碼，以下面所示，其中兩種方式的 type均可以不用寫，由於瀏覽器默認的即是javascripthtml

　　　　<script type="text/javascript">java

　　　　 Js代碼內容

　　　　< / script>

3、變量

　　JavaScript中變量的聲明是一個很是容易出錯的點，局部變量必須一個 var 開頭，若是未使用var，則默認表示聲明的是全局變量。python

name = 'alex';                  //不加var 定義的是全局變量
function f1() {
    //name = 123 ;             // 不加var 函數裏面修改的仍是全局變量
    var name = 'jason'         // 加var 函數裏面修改的是局部變量
}

4、數據類型

一、數字Number　

JavaScript中不區分整數值和浮點數值，JavaScript中全部數字均用浮點數值表示。下面來看一下代碼示例正則表達式

var num1 = new Number(123); //建立了一個數字類型的對象
        var num3 = Number(456);　　 // 456
        var num2 = 666;

        var s1 = 's123';
        var num4 = parseInt(s1);

        console.log(num1.valueOf(),num2,num3);
        console.log(num4);  // NaN
        if(isNaN(num4)){
            console.log('not a number');  // not a number
        }
        else {
            console.log('a number');
        }
        console.log(isFinite(num3));    // 是不是有限值 true   Infinity表示無窮大。
        console.log(typeof num3);      // 'number' 返回的是字符串
　　　　 var a = 1222.4444444;
　　　　 console.log(a.toFixed(2));       // 1222.44
　　　　 console.log(a.toExponential(3)); // 1.222e+3

二、字符串　

字符串是由字符組成的數組，在JavaScript中字符串是不可變的,下面來看一下代碼示例數組

var num1 = new Number(123); //建立了一個數字類型的對象
        var num3 = Number(456);　　 // 456
        var num2 = 666;
 
        var s1 = 's123';
        var num4 = parseInt(s1);
 
        console.log(num1.valueOf(),num2,num3);
        console.log(num4);  // NaN
        if(isNaN(num4)){
            console.log('not a number');  // not a number
        }
        else {
            console.log('a number');
        }
        console.log(isFinite(num3));    // 是不是有限值 true   Infinity表示無窮大。
        console.log(typeof num3);      // 'number' 返回的是字符串
　　　　 var a = 1222.4444444;
　　　　 console.log(a.toFixed(2));       // 1222.44
　　　　 console.log(a.toExponential(3)); // 1.222e+3

三、布爾值　　

布爾類型僅包含真假，與Python不一樣的是其首字母小寫。下面來簡單的看一下代碼示例，瀏覽器

        var a = 123;
        var s = '123';
        console.log(a==s);      // true
        console.log(a===s);     // false  判斷值和類型同樣

四、數組

JavaScript中的數組相似於Python中的列表,裏面也提供了一些內置方法，下面咱們來看一下cookie

        var a = [1,2,3,4];
        console.log(a.length);   // 4
        a.push(5);
        console.log(a);         // [1, 2, 3, 4, 5]
        var ret = a.pop();
        console.log(ret);        // 5
        a.unshift('aaa');        // 頭部插入元素
        console.log(a);          // ["aaa", 1, 2, 3, 4]
        var ret1 = a.shift();    // 頭部移除元素
        console.log(ret1);       // aaa
        var ret2 = a.slice(1,3); // 切片，
        console.log(ret2);       // [2,3]

 //     obj.splice(start, deleteCount, value, ...)  插入、刪除或替換數組的元素
        console.log(a);
        a.splice(1,0,'first');   // 指定位置插入元素
        a.splice(2,1,'second');  // 指定位置替換元素
        a.splice(2,1);           // 指定位置刪除元素
        console.log(a);
        var b = ['22'];
        console.log(b.concat(a)); // 鏈接字符串 ["22", 1, "first", 3, 4]
        console.log(a.join('-')); // 拼接字符串 1-first-3-4
        console.log(a.reverse()); // 反轉字符串 [4, 3, "first", 1]

        console.log([3,2,5].sort())  //對number數組進行排序

5、其餘雜項　

一、序列化　

序列化就是將JavaScript中的數據類型轉換成字符串，反序列化的過程則相反閉包

        var a = 'ss';
        ret = JSON.stringify(a);        // 'ss' 序列化
        console.log(ret);
        console.log(JSON.parse(ret));  // ss  反序列化

二、轉義　　

通常使用在URL中字符的轉義等，下面來看一下具體的用法

//      轉義  其中escape() unescape()主要是對cookies使用
        var a = 'http://www.baidu.com?name=李傑';
        console.log(encodeURI(a));              // http://www.baidu.com?name=%E6%9D%8E%E6%9D%B0
        console.log(decodeURI(encodeURI(a)));   // http://www.baidu.com?name=李傑
        console.log(encodeURIComponent(a));     // http%3A%2F%2Fwww.baidu.com%3Fname%3D%E6%9D%8E%E6%9D%B0
        console.log(decodeURIComponent(encodeURIComponent(a)));  // http://www.baidu.com?name=李傑

三、eval　　

JavaScript中的eval是Python中eval和exec的合集，既能夠編譯代碼也能夠獲取返回值。

        console.log(eval('1+2*5-5')); // 6
        console.log(eval(a = 1));     // 1 聲明瞭一個局部變量a值爲1

四、正則表達式　　

JavaScript中支持正則表達式，其主要提供了兩個功能：

test(string) 用於檢測正則是否匹配
exec(string) 用於獲取正則匹配的內容

注：定義正則表達式時，「g」、「i」、「m」分別表示全局匹配，忽略大小寫、多行匹配。下面來簡單的看一下使用

        var a = /\d+h/;
        console.log(a.test('123h434')); // true  檢測正則是否匹配，表單數據驗證可用到
        console.log(a.test('12a34'));   // false

        console.log(a.exec('123h434')); // ["123h", index: 0, input: "123h434"] 獲取正則匹配內容
        console.log(a.exec('123e434')); // null

五、時間　　

　　在JavaScript中，Date對象用來表示日期和時間。JavaScript中提供了時間相關的操做，分別爲獲取時間和設置時間，時間操做中分爲兩種時間，統一時間(UTC),以及本地時間（東8區）

var now = new Date();
now.getFullYear(); 
now.getMonth(); // 6, 月份，注意月份範圍是0~11，6表示7月
now.getDate(); // 7, 表示7號
now.getDay(); // 3, 表示星期三
now.getHours(); // 19, 24小時制
now.getMinutes(); // 49, 分鐘
now.getTime(); // 1435146562875, 以number形式表示的時間戳

上面操做的是本地時間，要操做世界時間也是同樣的，除了獲取時間，還能夠經過set設置時間，這裏就不在一一演示了

6、語句　

一、條件語句

    if(條件){
 
    }else if(條件){
         
    }else{
 
    }


switch(name){
        case '1':
            age = 123;
            break;
        case '2':
            age = 456;
            break;
        default :
            age = 777;
    }

二、循環語句　　

var names = ["alex", "tony", "rain"];
 
for(var i=0;i<names.length;i++){
    console.log(i);
    console.log(names[i]);
}


var names = ["alex", "tony", "rain"];

for(var index in names){
    console.log(index);
    console.log(names[index]);
}


while(條件){
    // break;
    // continue;
}

三、異常處理　

try {
    //這段代碼從上往下運行，其中任何一個語句拋出異常該代碼塊就結束運行
}
catch (e) {
    // 若是try代碼塊中拋出了異常，catch代碼塊中的代碼就會被執行。
    //e是一個局部變量，用來指向Error對象或者其餘拋出的對象 主動跑出異常 throw Error('xxxx')
}
finally {
     //不管try中代碼是否有異常拋出（甚至是try代碼塊中有return語句），finally代碼塊中始終會被執行。
}

7、函數

一、函數類型

　　JavaScript中函數基本上能夠分爲一下三類,普通函數，匿名函數，自執行函數,此外須要注意的是對於JavaScript中函數參數，實際參數的個數可能小於形式參數的個數，函數內的特殊值arguments中封裝了全部實際參數。

// 普通函數
    function func(arg){
        return true;
    }
          
// 匿名函數
    var func = function(arg){
        return "tony";
    }
  
// 自執行函數
    (function(arg){
        console.log(arg);
    })('123')

二、函數做用域　　

　　JavaScript中每一個函數都有本身的做用域，當出現函數嵌套時，就出現了做用域鏈。當內層函數使用變量時，會根據做用域鏈從內到外一層層的循環，若是不存在，則異常。下面就是一個簡單其實就是簡單的閉包。

name = 'jason';
        function f1() {
            var name = 'kobe';
            function f2() {
                console.log(name);
            }
            return f2;
        }
        ret = f1();
        ret();               //打印出kobe f2函數的做用域已經定死，上一級做用域爲f1

8、面向對象　　

        // 面向對象，沒有class 用function定義
        function Person(name,age) {
            this.name = name;             // Person充當構造函數
            this.age = age;               // this指代對象
        }
            
        // 使用原型保存類中的函數，若是放在person中，則每建立一個
        // 對象都會在內存中建立一份，這樣會浪費內存
        Person.prototype = {              
            Show:function () {
                console.log(this.name,this.age);
            }
        };

        Person.prototype.Show2 = function () {
            console.log(this.name,this.age)
        };
        person1 = new Person('jason',18);
        person1.Show();                    // jason 18
        person1.Show2()                    // jason 18

javascript補充　

爲了強制使用var定義變量，能夠在代碼開始加上'use strict',這樣未被var聲明的變量將會報錯，前提是瀏覽器支持該模式
能夠用轉義字符\,'I\'am "ok"'
要獲取字符串某個指定位置的字符,可使用s[1]下表進行操做，若是對s[1] = 'f'賦值的話，不會報錯，原字符串也不會改變。調用字符串的相關方法只會產生一個新的字符串
對數組進行操做，var f = [1,2],f[4] = 5,超過了數組長度，可是不會報錯，相反數組f變成了 [1, 2, undefined × 2, 5]這一點須要特別注意，此外若是在pycharm中運行的話，不會出現上述狀況可是會在數組中增長一個鍵值對。所以千萬要注意本身操做數組的時候不要越界
數組切片，arr.slice(3)表示從索引3開始到結束，arr.slice(0, 3)表示從索引0開始，到索引3結束,arr.slice()能夠複製一個數組。
對象，每一個對象的屬性用逗號分隔，訪問不存在的屬性會返回一個undefined,能夠經過delete 刪除某一屬性，固然也能夠直接動態的添加某一屬性，要判斷一個對象是否有某個屬性，可使用 in 好比 onsole.log('name' in xiaoming),可是這樣能夠能有一個問題，若是xiaoming繼承了某一屬性，那麼判斷這一屬性也會成功，因此最好用 xiaoming.hasOwnProperty('name')
函數傳參的時候，能夠多傳，也能夠少傳，少傳的話，未被傳入的參數會被定義爲undefined,在函數內部用arguments獲取到全部函數傳入的參數，
函數內部的變量會"提早聲明"，具體的請看下面的代碼

    function foo() {
        var x = 'Hello, ' + y;
        alert(x);           // Hello, undefined
        var y = 'Bob';
    }
    foo();

//    對於上述foo()函數，JavaScript引擎看到的代碼至關於：
    function foo() {
    var y; // 提高變量y的申明
    var x = 'Hello, ' + y;
    alert(x);
    y = 'Bob';
}

　　9.不在任何函數內定義的變量就具備全局做用域,實際上，JavaScript默認有一個全局對象window，全局做用域的變量實際上被綁定到window的一個屬性

    var a = 'hello';
    console.log(window.a);
    console.log(a);

    function foo() {
        console.log('foo');
    }
    foo();
    window.foo();

能夠看到上面兩種方式的執行效果同樣，JavaScript實際上只有一個全局做用域。任何變量（函數也視爲變量），若是沒有在當前函數做用域中找到，就會繼續往上查找，最後若是在全局做用域中也沒有找到，則報ReferenceError錯誤。全局變量會綁定到window上，不一樣的JavaScript文件若是使用了相同的全局變量，或者定義了相同名字的頂層函數，都會形成命名衝突，而且很難被發現。減小衝突的一個方法是把本身的全部變量和函數所有綁定到一個全局屬性中。例如：

// 惟一的全局屬性MYAPP:
var MYAPP = {};

// 其餘變量:
MYAPP.name = 'myapp';
MYAPP.version = 1.0;

// 其餘函數:
MYAPP.foo = function () {
    return 'foo';
};

　　10. Array的sort()方法默認把全部元素先轉換爲String再排序，結果'10'排在了'2'的前面，由於字符'1'比字符'2'的ASCII碼小。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。