01 變量&數據類型

時間 2019-11-09

標籤變量數據類型简体版

原文原文鏈接

Javascript簡介

web前端有三層：javascript

HTML:從語義的角度，描述頁面的結構html
CSS:從審美的角度，描述樣式（美化頁面）前端
JavaScript：從交互的角度，描述行爲（提高用戶體驗）java

JavaScript的組成

ECMAScript 5.0:定義了js的語法標準：包含變量、表達式、運算符、函數、if語句 for循環 while循環、內置的函數python
DOM :操做網頁上元素的API。好比讓盒子顯示隱藏、變色、動畫 form表單驗證jquery
BOM:操做瀏覽器部分功能的API。好比刷新頁面、前進後退、讓瀏覽器自動滾動asweb

工具挑選：

　　前端經常使用開發工具：sublime、visual Studio Code、HBuilder、Webstorm。瀏覽器

　　那麼你們使用的PCharm跟WebStorm是JetBrains公司推出的編輯工具，開發階段建議使用。函數

JS的引用&變量命名：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-U-Compatible" content="IE-edge">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>01 Js變量&數據類型</title>
</head>
<body>
<!--內接式-->
    <script type="text/javascript">
        //你要寫的js代碼  (//兩個斜槓是註釋)
        console.log('Hello World!'); //控制檯輸出
        alert('Hello World!'); //瀏覽器自帶的警告彈框
    </script>

<!--外接式-->
<!--寫好的js放入的src指定的文件裏，相似於python裏引入模塊，文件指定的js均可以在這裏調用-->
    <script type="text/javascript" src="jquery-3.3.1.js"></script>

<!--變量-->
<!--定義變量：var就是一個關鍵字，用來定義變量。所謂關鍵字，就是有特殊功能的小詞語。關鍵字後面必定要有空格隔開。-->
<!--變量的賦值：等號表示賦值，將等號右邊的值，賦給左邊的變量。-->
<!--變量名：咱們能夠給變量任意的取名字。-->
    <script type="text/javascript">
        //直接定義變量+賦值  在js中使用var關鍵字 進行變量的聲明,注意 分號做爲一句代碼的結束符
        var str='Hello World!';
        console.log(str);

        // 也能夠先定義後賦值
        var a;
        console.log(a);  // 控制檯輸出 undefined 由於這個時候並無給變量定義
        a = 10086;
        console.log(a);

        //若是沒有定義就直接引用會報錯
        console.log(x);  //  控制檯報錯：Uncaught ReferenceError: x is not defined
    </script>

   <!--數據類型-->
    <script type="text/javascript">
        //  數值類型:number  變量的值是一個數值 就是number類型
        // 在js中，只要是數，就是數值型(number)的。不管整浮、浮點數（即小數）、不管大小、不管正負，都是number類型的
        var a = 100.133;
        var b = 100.2333;
        var c = -100.2333;
        // typeof js內置函數 用來看變量的類型
        console.log(typeof a,typeof b,typeof c);  //  number number number
        // 特殊狀況 在其餘語言裏  0不能夠是除數，可是在js裏能夠
        var d = 100/0;  // c的類型仍然是number，無窮大
        console.log(d,typeof d);  // Infinity "number"

        //  字符串類型:string  帶有引號就是字符串
        var e = 'Hello World!';
        console.log(e,typeof e); // Hello World! string
        // 能夠用+連接字符串
        console.log(e+'How are you?'); // Hello World!How are you?
        // 能夠將數值和字符串相加，變成一個字符串  在這裏不會報錯
        var f = a+e;
        console.log(f,typeof f); // 100.133Hello World! string
        // 若是是兩個數值相加 就會變成運算
        var g = a+b;
        console.log(g, typeof  g);// 200.3663 "number"
        // 空字符串
        var h = '';
        console.log(h, typeof  h);//  string

        // 布爾類型 boolean
        var i = false;
        var j = true;
        console.log(i,j); // false true
        console.log(typeof i,typeof j);  // boolean boolean
        // 通常用在條件判斷 可是這裏注意也有非空即真 非0即真 非null即真的說法
        if(2){console.log('非0即真')}  // 打印
        if(0){console.log('0')}  // 不打印
        if('abc'){console.log('非空即真')}  // 打印
        if(h){console.log('空')}  // 不打印 由於h是空字符串 因此boolean值是false
        if(null){console.log('非null即真')}  // 不打印

        //空對象
        var k = null;
        console.log(k, typeof k); //null "object"

        //  未定義：undefined
        var l;
        console.log(l);// undefined  值就是undefined 控制檯能夠看到是灰色的
        console.log(typeof l);// undefined  類型是undefined 控制檯能夠看到是黑色的
    </script>

</body>
</html>