JS系列：js編程語言

1.編程語言
html+css標記語言
js：輕量級的交互語言->全棧編程語言

• 面向對象：
  • C++
  • JAVA
  • PHP
  • C# (.net doc)
  • JS
• 面向過程
  • C
    java與javascript沒有關係
    2.js學習哪些部分？
• ECMAScript(es) 艾克馬 斯奎普特
• DOM :document object model 文檔對象模型
  API（屬性和方法）讓JS可以獲取操作頁面中的dom元素
• BOM ：browser object model 瀏覽器對象模型。提供各種api，讓js操作瀏覽器
  3.變量（varible）
  它不是具體的值，只是用來存儲具體值的容器，值可以改變。
  基於es語法規範，js創建變量
  • var (es3)
  • function (es3) 創建函數，函數也是變量，存儲的值是函數類型
  • let (es6)創建變量
  • const （es6）
  • import 基於es6的模塊規範導出需要的信息
  • class 基於es6創建類

    var   [變量名]=值； var num = 12;
    let   [變量名]=值；
    const [變量名]=值；
    function 函數名（）{    function Fn(){}
    }
    ...
    var n = 13;
    n= 14;
    alert(n+10); =>彈出來24，此時n代表14；
  
    const m = 100;
    m = 200; =>賦值給常變量（var let const定義變量的區別）
  

  創建變量命名：語義化更強一下 add/ create / insert / delete(del) / update /remove(rm) / info / detali
  • 嚴格區分大小寫
  • 遵循駝峯式寫法，按照數字，字母，下劃線，$,命名（數字不能作爲開頭）;英文命名單詞拼成完整的名字，第一個單詞小寫，其餘有意義的單詞首字母大寫
  • 不能使用（特殊含義）關鍵字和（未來可能會成爲關鍵字的叫）保留字

  var n = 12;
  var N = 13;//=>兩個n不是同一變量
  var studentInfo / student_info / _studentInfo (_下劃線在前，都是公共變量)
  $studentInfo (一般存儲jquery元素)
  

  • 基本數據類型
  • 數字number 布爾boolean null 字符串string undefined
  • 引用數據類型
    • 對象object
      • 普通對象{} 數組對象[] 正則對象/^/ 日期對象date
    • 函數function
  • es6中新增的特殊類型 symbel 唯一值

     var n = 13;//=>0 -13 12.2 數字中有個特殊的值NaN(not a number)表示一個不是有效的數字 ，但屬於number類型
     var s = '';//=>"" '12' "{}" 引號包裹起來的都是字符串有0到多個字符組成
  
     var b = true;=>布爾2個值true和false假
     [引用數據類型]
     var o = {name : '珠峯'，age: 9};//=>普通對象：大括號包裹多組屬性和屬性值 {} 空對象
     var ary = [12 ,23,24,25] ;//=>中括號包裹起來多項內容是數組，0到多項內容 []空數組
     var reg = /-?(\d|([1-9]\d+))(\.\d+)?/g ;=>有元字符組成的一個完整的正則 // 不是正則是單行註釋
     function fn (){
  
     }
     symbel 創建出來的是唯一值
     var a = Symbel ('珠峯')；=>Symbol('珠峯')  Symbol 不是字符串
     var b = Symbel ('珠峯')；                  "Symbol" 是字符串
      a==b;  ->false
  

  • 【代碼如果運行】

    • 瀏覽器內核來渲染解析

    • 基於node來運行基於v8引擎渲染，解析js工具 // 通過cmd 基於node運行當前文件

    • 【輸出結果】

    • alert :彈出方式瀏覽器提示框 window.alert 全稱 輸出結果全部轉化爲字符串

    • alert(1+1);=> ‘2’
      alert ([12,23]);=>‘12,23’
      [12,23].toString() =>“12,23”
      alert({name: ‘xxx’}); =>’[oject Object]’ 對象toString後的結果就是object object對象爲啥?

    • confirm : 確認提示框，有確認和取消按鈕

       var flag = confirm('確認要退出嗎？');
          if(flag){
            //=>flag:true 用戶端點擊的事確認按鈕
          } else {
            //=>flag:false 用單擊的是取消按鈕
          }
    

    • prompt :在confirm基礎上加上輸入框
      var num =12;
      var flag =prompt(num);
      alert(flag);
    • console.log：在瀏覽器控制檯輸入日誌（fn+f12）
      /* 快捷鍵：num.log TAB*/
      • Elements:顯示和修改當前頁面中的元素和樣式
      • consloe :控制檯，js代碼中.log輸出到這裏，也可以直接編寫js
      • console.dir ：比log輸出詳細一些（輸出對象數據值的時候）
      • console.table: 把json數據按照表格的方式輸出
      • console.log(’ 普通輸出~ ‘);
        console.warn(’ 輸出警告！ ‘);
        console.error(’ 輸出錯誤！！！ ');