iT邦幫忙

第 12 屆 iT 邦幫忙鐵人賽

DAY 14
1
Modern Web

For 前端小幼苗的圖解筆記系列 第 14

[JavaScript] 基礎語法 / 資料型態

今天決定又來脫稿(目錄)演出啦!連寫了五天 css ,今天快轉進度改吃(?) JS 吧!(完全無視自己當初規劃主題由淺到深的的精心安排啊啊啊!)

這邊不會介紹 JS 的歷史,此系列文章只會以語法應用筆記的方式呈現。

身為被公認語法有很多雷、很多坑的 JavaScript,若本系列文有錯誤理解敬請留言指正,感激不盡!


基本格式

命名慣例&限制

  • 命名格式(慣例):
    • 變數、函式:小駝峰式(camelCase)
    • 常數:全大寫、底線分隔(如 CIRCLE_PI )
    • 類別:大駝峰式(CamelCase)
  • 字元限定
    • 開頭:$、_、英文字
    • 開頭後可以接數字
    • 不可使用 - 連字符(保留給減法)
    • 其實可以中文喔!(但不建議使用)
  • 對大小寫敏感
    • 如變數 lastName、lastname 視為不同
    • 變數 Var 跟 VAR 會成功(不會當作關鍵字var)
  • 不可使用保留字、關鍵字

註解

  • 結尾分號可有可無,但最好統一
  • 單行註解 //
  • 多行註解
    /*
    */

值 / 型別

falsy value

  1. fales
  2. undefined
  3. null
  4. 0
  5. 空字串 ''
  6. NaN

簡易速記

  • 句末分號可加可不加(但最好統一)
  • array 用 [ ]
  • object 用 { }
  • 字串用 ' '" " 包住
    單引號 / 雙引號都可以(會自動抓對應的視為範圍)

undefined / null / ""

  • undefined
    • 宣告變數 var x 但未賦值時...
      • 其值是 undefined、類型是 undefined
    • 把任一變數清空 y = undefined
  • 空字串
    • var car = "";
    • 值是"",類型是 string
  • Null
    • 是 "Nnothing"、被視為不存在的事物。
    • 類型是 object
  • undefined 與 null值會相等、但類型不相等 (undefined vs object ):
    • typeof undefined => undefined
    • typeof null => object `
    • null === undefined => false
    • null == undefined => true
  • NaN 非數值
    • 表示:不是合法的數
    • 例如數字/字串 結果會是 NaN (not a number)
      (但如果字串內是數字,JS會自動轉型,成功運算)
    • 但 NaN 的 typeOf 是number哦!(不是數的數)
  • Infinity / -Infinity
    • 超出最大可能數範圍時回傳的值
    • 數字除以 0 或無窮迴圈一直加總/加乘計算
    • typeOf 也是 number

typeof 查詢型別

typeof "Eudora"   //=>"string" 
typeof 3.14     //=>"number" 
typeof true     //=>"boolean" 
typeof false    //=>"boolean" 
typeof x        //=>"undefined" (假如x沒有值)
typeof {name:'Eudora', age:18} //=>"object" 
typeof [1,2,3,4]              //=>"object" (並非"array",在JS中array是object。) 
typeof null                   //=>"object" 
typeof function myFunc(){}    //=>"function非object"

Object & Array 的寫法

Object { }

  • 物件.屬性=屬性值

    object.type=value
    

    物件.方法(參數)

    object.method()
    
    • 相同物件都有相同的屬性、不同的屬性值
    • 相同物件都有相同的方法可以用
  • name(key) & Value 成對

    object={name1:value, name2:value....}
    
  • 示例

    var member = {
        firstName: "Eudora",
        lastName: "Huang",
        fullName: function(){
             return this.firstName + " " + this.lastName
        }
    }
    console.log(member.fullName())
    //結果 :  "Eudora Huang"
    
    • 注意:用箭頭函示寫value裡的function時,this會是undefind(this的初始值)而非該函數擁有者(此例為member)
    • 取值時若為function必須要加 ( ),不然會輸出整段fucntion code

Array [ ]

  • 基本寫法

    var arr = [
        "va1",
        "va2",
        "var"
    ];
    

    等同於

    var arr = new Array("va", "va2", "va3");
    
    • 最後一個值後面不要加逗號!
    • 換行不換行都沒差
  • [ ] 取陣列值第幾個
    arr[0] 第一個陣列值
    arr[-1] 最後一個陣列值


同場加映

如何在網頁中加入 JS ?

寫法1. 直接寫在HTML檔

<script>
    (...JS Code)
</script>
  • 完整寫法type="text/javascript"可省略,因JS是HTML中的默認語言:
    <script type="text/javascript">。
        (...JS Code)
    </script>
    

寫法2. 寫在獨立的JS檔,在於HTML檔中引入

<script src="js/index.js"></script>

備註

  • 放置位置
    • 可放在 <head></head>
    • 可放在 <body></body>
  • 注意引用的前後順序!

參考資料


不知為何,感覺這個九月過的特別快。每每過了九月,就像時間快轉般,總是咻一下子就要遇見 12 月、結束這一年了呢,伴隨著涼涼的秋意,總讓我更容易去感知自己內心的變化。(欸…停…再這樣下去要被懷疑走錯棚、切錯頻啦!XD!)
哎~再多感性一句……

願自己在做任何事情時都不要在過程中迷失了自己的初衷以及心之所向


個人 Blog: https://eudora.cc/


上一篇
[CSS] 定位屬性 Position
下一篇
[JavaScript] 宣告 / hoisting / function
系列文
For 前端小幼苗的圖解筆記30

尚未有邦友留言

立即登入留言