蓋瑞的學習筆記室

前端JQuery應用實戰筆記 1 - F2E介紹&開發環境&基礎觀念

發表於 分類於 ，

前言

2019年底有幸可以參加偷米老師第三梯的「前端jQuery應用實戰」實體課程，如同老師課程介紹

「前端 jQuery 應用實戰」這門課程是訓練"網頁設計師" 升級為 "前端工程師"為目的，目標能夠與後端工程師共同開發專案，並且能夠勝任前端資料串接的工作。本課程內有大量的實戰會遇到的問題，透過範例的原理分析進而轉換成程式碼的過程，讓你了解如何開發前端介面上的互動行為。

因為本身還停留在網頁設計師等級，看到關鍵字就毫不猶豫報名，尤其報名費也很佛心價! 非常值得推薦 ~
雖說聽說以後可能會比較少用JQuery，但對於前端菜鳥啥都還不行，實在沒理由不多學習的，就算有替代性的，再學就是了! 多學總是好事，多學才有機會比較，只是多花點時間而已，但相信學到的都還是自己的，多努力就是了!

課程目錄

  • F2E 介紹 & 開發環境
  • AJAX 應用
  • 開發人員工具
  • JSON 資料格式
  • 後端 API 串接
  • 跨網域存取
  • 正規表達式
  • 框架初體驗

F2E 介紹

認識前端工程師

前端工程師的英文寫作 Front-End Engineer ( 業界簡稱 F2E )，是中大型企業都會有的職務，
是網頁設計師與後端工程師之間重要的溝通橋樑。

以裝潢廚房來比喻的話 :

  • 網頁設計師 : 決定水龍頭的樣式及位置
  • 前端工程師 : 負責安裝水龍頭與水管
  • 後端工程師 : 提供水電瓦斯各種能源

如何從網頁設計師到前端工程師

網頁設計師工作流程 :

前端工程師工作流程 :

兩者差異 :

  • 前端工程師比較不會去修改視覺（除非本身很會，值得鼓勵！）
  • 要比網頁設計師更熟悉 HTML、CSS
  • JavaScript 撰寫比重更多
  • 與後端工程師合作需要了解 HTTP 基礎觀念

前端工程師基本技能 :

  • 建議至少會使用一種繪圖軟體 ( Photoshop、Illustrator 等 )
  • 網頁設計 HTML、CSS ( HTML5、CSS3 更佳 )
  • 網頁程式設計 JavaScript、JQuery，或其他前端 Framework 等
  • 資料交換格式 JSON、XML
  • 非同步傳輸 AJAX
  • 建議學習任一種後端程式語言 ( PHP、Nood.js 等 )

前端工程師必要知識 :

  • JavaScript 除錯技巧
  • 解決跨瀏覽器問題
  • 了解 HTTP Status Code 狀態碼
  • 了解 HTTP 傳輸協定基本概念
  • 優化 JavaScript 程式碼提升執行效能

前端學習地圖

開發環境

因為 Chrome 瀏覽器安全性限制，不允許 AJAX 直接存取電腦中的 JSON 檔案，
所以採用 Node.js 的 BrowserSync 架設開發伺服器來使用學習。

  • 安裝 Node.js
    安裝 Node.js ，檢查是否已經安裝過可輸入以下

    1
    2
    node -v   //看 node.js 版本編號
    npm -v    //看 npm 版本編號

    有出現版本編號表示安裝成功

    1
    2
    3
    4
    5
    $ node -v
    v10.16.3

    $ npm -v
    6.9.0

  • 使用 Visual Studio Code
    Visual Studio Code 是現在流行非常好用的編輯器，可同時支援 Mac 跟 Windows，
    本身擁有很多擴充套件，推薦使用 !
    下載 Visual Studio Code

  • 使用 BrowserSync 開發伺服器
    使用 BrowserSync 優點是可以儲存後自動重新載入網頁，也支援多瀏覽器同步瀏覽功能，可提升開發效率 !

    • 安裝
      在 Visual Studio Code 內的終端機上執行以下指令安裝，這會將 BrowserSync 套件裝在全域環境中。
      1
      npm install -g browser-sync
    • 執行
      在終端機中到要執行專案的資料夾下，執行以下指令 browser-sync start --server
      會在預設的網域 http://localhost:3000 開啟網頁。
      另外用以下指令 : 
      1
      browser-sync start --server --files="*"
      加上 --files="*" 參數，表示在開啟期間會持續監看目錄下的檔案是否變更，
      有變更會自動刷新網頁，省了手動更新的動作。
    • 參考文章
      如何使用 BrowserSync 啟動開發用網頁伺服器

JavaScript 和 JQuery 基礎觀念

  1. 函式分為兩種
    • 具名函式 : 可自定義函式名稱，使用函式名稱呼叫函式。 
      1
      2
      3
      function one() {
        //code
      }
    • 匿名函式 : 沒有函式名稱，常用於事件 ( event ) 、 回呼 ( callback )，無法單獨存在。 
      1
      2
      3
      function() {
        //code
      }
  2. JavaScript 在不同位置宣告變數，作用範圍也會不同。
    • 範例 1 : 
      1
      2
      3
      4
      5
      6
      7
      8
      var a = 1;
      function num() {
        var a = 2;
      }
      num();
      console.log(a);

      // a = 1
    • 範例 2 : 變數直接被指定。 
      1
      2
      3
      4
      5
      6
      7
      8
      var a = 1;
      function num() {
        a = 2;
      }
      num();
      console.log(a);

      // a = 2
    • 範例 3 : 函式裡的參數，可視為宣告。 
      1
      2
      3
      4
      5
      6
      7
      8
      var a = 1;
      function num(a) {
        a = 2;
      }
      num(a);
      console.log(a);

      // a = 1
  3. JQuery 選取器必須在 DOM 元素下載完成後才會被選取到，所以建議將 JQuery 選取器寫入 JQuery ready 事件裡頭。
    JQuery ready 完整寫法 :
    1
    2
    3
    $(document).ready(function(){
       //code
    });
    JQuery ready 簡化寫法 :
    1
    2
    3
    $(function(){   //前方$字號就可以代表 $(document).ready()
       //code
    });