超級初心者適用的 JavaScript 觀念 (持續更新)

Intro

最近除了跳級研究 jQuery 之外,也從基礎開始認識 JavaScript,不得不說,歐萊禮真是個恐怖且強大的出版社阿(膜拜),我最近在看歐萊禮出版的「深入淺出 JavaScript」,其實一開始去書店翻找這本書的時候,還對他的排版嗤之以鼻,想說怎麼搞得那麼亂,還用一堆裝可愛的外國人來作對話式教學。

但,事實證明我錯了,利用這種情境 & 對話式的教學,還有摘要的重點,真的是可以讓初學者快速上手啊!!! 所以歐萊禮,請容我深深地跟你道歉,以及至上我最高的敬意 <(_ _)>

那麼以下分享我看了這本書之後導正 & 瞭解的一些觀念,分享給跟我一樣的超級初心者。希望能讓你們在學習 JavaScript 的路上有所幫助!! (高手別來阿 XD )

閱讀進度 CH1 ~ 2

CH1:互動性網站
CH2:儲存資料


  1. alert()也是函數的一種,他是 JavaScript 的內置函數。每個 JavaScript 函數都會用()包住要傳給函數的訊息。
  2. 事件 = 告訴 JavaScript 當使用者在網頁上「做了某件事情」,才會觸發裡面的程式碼。例如onclick(點擊了某個按鈕)就是一種事件。
  3. 函數 = 可以重複執行的程式碼。
  4. if(userName)表示當userName這個變數有值(可以被取得),就執行以下的動作。
    var userName = prompt("What is your name?" , "Enter your name here");
    if (typeof(userName) !== 'undefined' ) {
        alert("welcome, " + userName);
    }

    原本在取得變數的部分我是寫if(userName),不過這樣寫很容易讓程式無法執行(感謝 Kuro 指正),如果userName是空值,或是未定義…等一些特殊狀態,裡面的alert()就不會被執行。
    所以改用if typeof(userName)就可以避免這種狀況,以下是另一種範例參考:

     
    //or you can change userName as null, undefined
    var userName = '';
    
    if (typeof(userName) !== 'undefined') {
    // if(userName){
        alert("OK");
    }
    }
  5. JavaScript 的數據類型有變數(variable)以及常數(constant)兩種。變數呼叫方式 var test,常數呼叫方式 const test。常數的值一旦被定義了,就永遠無法被改變。
  6. 變數、常數的標示符 (identifier) 命名須注意事項:
    • 不能重複,是唯一性。
    • 開頭只能用英文字母、下底線_以及錢號$
    • 第二個字母之後可用數字、下底線_以及錢號$
    • 不能使用空格以及其他特殊符號
  7. 變數、常數的標示符 (identifier) 可用「小寫駝峰」作為命名規則:
    – 當有兩個以上的字母組合為標示符時,為了方便識別,可以用大小寫作為區分。例如用flyNumberDate取代fly_number_date
  8. NaN = Not a Number,所以如果為 true,表示他不是數字;為 false,表示是數字。因為一開始就是否定狀態,所以請用負負得正的觀念。
  9. 另外一種用NaN來檢索值是否為數字的寫法:
     
    if (isNaN(document.getElementById("xxxxxid").value))
      alert("this is not a number");
  10. alert()函數只能儲存string,不能儲存number型態的數字,所以我們會先將數字轉成string再儲存之。
  11. 常數的宣告範例:
     
    //常數名稱為全部大寫,以跟變數區分
    const TAX = 9;
  12. toFixed(X)用來四捨五入到小數點後 X 位
  13. getElementById是方法,並非函數。
  14. parseFloat()parseInt()都可以幫忙將字串轉成數字

這本書還在持續研讀中,所以會慢慢地跟大家分享我的閱讀心得。對很多高手而言,這些真的都是廢話了,不過對我來說,這些觀念都是讓我看了之後有「啊!原來如此」的想法產生,所以我還是想分享出來,順便給自己作個筆記。

如果你跟我一樣才剛入門,希望這些觀念對你有用囉 🙂


  • Jim Yeh

    妳好 在你的推薦下我也去買了深入淺出JavaScript,但是書裡提供的範例下載網站好像是新版的書籍,請問如何解決呢?

    • 你好,這個問題可能要問出版社吧。
      我是沒有下載他的範例啦,都是直接看書上的 code 就是了 @___@

  • 牟仁杰

    超喜歡深入淺出系列!初心者的福音(還是因為我太笨了…)

    • 我也喜歡,我想一定是我們都太笨了 XDDDDD

  • 吳千卉

    Muki 你好,閱讀進度 CH3 ~ 5 發現錯字:「4. cookei 會存在同個地方,並用「;」分隔。」 >>> cookie

    • 喔喔,很感謝你,不好意思回覆晚了,已經修正 >_<

  • Yu jo Chia

    Math.random()
    值範圍:0 ~ 0.9999999(無窮小數)

    不是0~1, 如果有1那隨機產生1~6的那行就不對了

    • 感謝!! 這邊應該是筆誤,0~1 之間的 1 是不包含的沒錯,但中文寫得不太好 >__<
      我來改一下 ^Q^