前端班課程講義

主題

認識 JavaScript ​

JavaScript 是網頁開發者必學的三種語言之一，也是最流行的腳本語言

前端功能 ​

  • 能夠改變 HTML 內容
  • 能夠改變 HTML 屬性
  • 能夠改變 CSS 樣式
  • 能夠偵測使用者對網頁的操作 (滑鼠點擊、鍵盤按鍵等)

改變 HTML 內容範例

改變 HTML 屬性範例

改變 CSS 樣式範例

偵測使用者操作範例

後端功能 ​

  • 能以 Node.js 開發網頁後端
  • 能使用和前端一樣的語言進行開發
  • Node.js 以 Google 的 V8 引擎打造，非常快速
  • 有相當多的套件可以使用，擴充性高

其他功能 ​

缺點 ​

  • 在網頁前端以明碼顯示，安全性不高
  • 規範標準不一，有 CommonJS 和 ECMAScript 等
  • JavaScript 程式結尾可以不加 ;，程式在執行時會自動補上，但是會發生補錯位置的情況
  • + 號不只可以做數學運算，還可以連接文字
  • 以 Node.js 開發的專案套件佔了空間一大半
  • 語法更新頻繁，需要透過 Babel 等工具將新語法轉換成舊瀏覽器支援的語法
  • 弱型別語言，所以才會有 TypeScript 出現

前端的使用方式 ​

網頁上的 JavaScript 程式碼必須要搭配 <script> 標籤使用

  • 可以將程式碼放在標籤裡面
  • 或是將程式碼放在單獨的 .js 檔案裡，用 src 屬性引入
  • <script> 標籤通常位在 <head> 或 <body> 結尾標籤前面
  • 可以使用屬性調整載入時機
    • 預設遇到 <script> 時停止載入網頁，下載執行完後才繼續
    • defer：繼續處理網頁，在背景下載，等網頁解析完後才依擺放順序執行
    • async：繼續處理網頁，在背景下載下載完後立刻執行，用於獨立且不依賴網站運作的程式，例如廣告

注意

載入時機錯誤可能會導致程式無效
例如在使用抓取網站元素的程式碼時，如果程式在網頁內容解析前執行，會找不到元素而出錯
所以通常會將程式碼放在 <body> 結尾標籤前面，確保網頁內容已經解析完畢

html
<html>
   <head> </head>
   <body>
     <!-- 你的 HTML 網頁內容 -->
     <h1>標題</h1>
     <p>文字文字文字</p>
     <!-- 你的 JavaScript 應該放在這裡 -->
     <script>
       // alert() 可以跳出一個警告訊息視窗，括號裡面放的是訊息文字
       alert("Hello World!");
     </script>
   </body>
</html>