JavaScript程式設計.ipynb

{
 "cells": [
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "slide"
    }
   },
   "source": [
    "## JavaScript程式設計\n",
    "    課程時數: 18 hrs\n",
    "    課程老師: Andy Tseng 曾郁翔\n"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "slide"
    }
   },
   "source": [
    "# Module 0 背景知識"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "subslide"
    }
   },
   "source": [
    "# 預備知識\n",
    "- 基礎的程式視讀 ( Python )\n",
    "- Chrome"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "subslide"
    }
   },
   "source": [
    "## 課程大綱 (1/6)\n",
    "\n",
    "- Module 1. 測試及除錯工具\n",
    "<!-- \n",
    "    1-1: Chrome開發者工具\n",
    "    1-2: Console面板\n",
    "    1-3: Network面板\n",
    " -->\n",
    "\n",
    "- Module 2. 使用 script 標籤\n",
    "<!--     \n",
    "    2-1: DOM簡介\n",
    "    2-2: 動態新增頁面標籤內容\n",
    "    2-3: 取得標籤元素\n",
    " -->\n",
    "\n",
    "- Module 3. 常數和變數宣告\n",
    "<!--     \n",
    "    3-1: var、let 和 const\n",
    "    3-2: 識別字的規則\n",
    "    3-3: var 和 let 的主要差異\n",
    " -->"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "subslide"
    }
   },
   "source": [
    "## 課程大綱 (2/6)\n",
    " \n",
    "- Module 4. 基本類型\n",
    "<!-- \n",
    "    4-1: Number、Boolean和String\n",
    "    4-2: 轉換為Number\n",
    "    4-3: 轉換為String\n",
    "  -->\n",
    "- Module 5. 運算子\n",
    "<!-- \n",
    "    5-1: 算術運算子\n",
    "    5-2: 關係運算子\n",
    "    5-3: 邏輯運算子\n",
    "  -->\n",
    "- Module 6. String\n",
    "<!-- \n",
    "    6-1: 字串的標示方式\n",
    "    6-2: 字串的跳脫表示法\n",
    "    6-3: 字串的常用方法\n",
    "     -->\n"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "subslide"
    }
   },
   "source": [
    "## 課程大綱 (3/6)\n",
    "\n",
    "- Module 7. 取得標籤元素\n",
    "<!-- \n",
    "    7-1: 使用ES3的方法\n",
    "    7-2: querySelector()\n",
    "    7-3: querySelectorAll()\n",
    "  -->\n",
    "- Module 8. 流程控制\n",
    "<!-- \n",
    "    9-1: 選擇敘述\n",
    "    9-2: 迴圈\n",
    "    9-3: break和continue\n",
    "  -->\n",
    "- Module 9. Object類型\n",
    "<!-- \n",
    "    9-1: Object類型的特點\n",
    "    9-2: Object表達式\n",
    "    9-3: for/in迴圈\n",
    "  -->\n"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "subslide"
    }
   },
   "source": [
    "## 課程大綱 (4/6)\n",
    "\n",
    "- Module 10. Array類型\n",
    "<!-- \n",
    "    10-1: Array類型的特點\n",
    "    10-2: Array表達式\n",
    "    10-3: Array的方法\n",
    " -->\n",
    "- Module 11. JSON\n",
    "<!-- \n",
    "    11-1: JSON字串規則\n",
    "    11-2: Object和Array的複製\n",
    "    11-3: 編輯JSON檔 \n",
    "  -->\n",
    "- Module 12. 函式的定義\n",
    "<!-- \n",
    "    12-1: 基本型函式\n",
    "    12-2: 暱名函式\n",
    "    12-3: 箭頭函式\n",
    "  -->\n"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "subslide"
    }
   },
   "source": [
    "## 課程大綱 (5/6)\n",
    "\n",
    "- Module 13. Scope變數領域\n",
    "<!-- \n",
    "    13-1: 全域變數\n",
    "    13-2: 區域變數\n",
    "    13-3: closure\n",
    "  -->\n",
    "- Module 14. 時間與計時器\n",
    "<!-- \n",
    "    14-1: 物件\n",
    "    14-2: setTimeout用法\n",
    "    14-3: setInterval用法\n",
    " -->\n",
    "- Module 15. 數學物件\n",
    "<!-- \n",
    "    15-1: 亂數\n",
    "    15-2: 三角函數\n",
    "    15-3: 環狀排列物件\n",
    " -->\n"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "subslide"
    }
   },
   "source": [
    "## 課程大綱 (6/6)\n",
    "\n",
    "- Module 16. window物件\n",
    "<!-- \n",
    "    16-1: window物件的方法\n",
    "    16-2: window的子物件\n",
    "    16-3: document的常用屬性 \n",
    "  -->\n",
    "- Module 17. 事件處理\n",
    "<!-- \n",
    "    17-1: 標籤內的事件處理器\n",
    "    17-2: addEventListener\n",
    "    17-3: 滑鼠事件\n",
    " -->\n",
    "- Module 18. AJAX\n",
    "<!-- \n",
    "    18-1: 不刷新頁面更新內容\n",
    "    18-2: XMLHttpRequest\n",
    "    18-3: fetch()方法\n",
    " -->"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "slide"
    }
   },
   "source": [
    "# Module 1:  測試及除錯工具"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "subslide"
    }
   },
   "source": [
    "# Module 1:  測試及除錯工具\n",
    "    1-1: Chrome開發者工具\n",
    "    1-2: Console面板\n",
    "    1-3: Network面板"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "subslide"
    }
   },
   "source": [
    "### 1-1: Chrome開發者工具\n",
    "\n",
    "- 在 Chrome 按右鍵 Inspect Element / Inspect\n",
    "- 在 Chrome 的 Menu 選單 -> View -> Developer -> Developer Tools\n"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "subslide"
    }
   },
   "source": [
    "### 1-1: Chrome開發者工具\n",
    "\n",
    "- **Elements**: 查詢 HTML 網頁原始碼的元素。若手動修改一元素的屬性和樣式，可直觀的看見瀏覽器頁面也相對應改變。\n",
    "- **Console**: 顯示開發過程的日誌資訊 ( log ) 與警告。是可與 Js 進行互動的命令列 ( Shell )，Js 除錯時常用。\n",
    "- Sources: 可見頁面的檔案來處。\n",
    "- **Network**: 自發起頁面請求 ( Request ) 後，分析各個請求資源資訊(包括狀態、資源型別、大小、所用時間等)。可以根據這些資料條件進行網頁效能優化。\n"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "subslide"
    }
   },
   "source": [
    "![1-1 DevTools 介面](./images/1-1.png)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "subslide"
    }
   },
   "source": [
    "### 1-2: Console面板\n",
    "\n",
    "- 能在這邊直接看到 Console.log 的結果\n",
    "- 與網頁的變數與功能進行互動\n",
    "- 測試一些 Js Code\n"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "subslide"
    }
   },
   "source": [
    "![1-2 Console 介面](./images/1-2.png)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "slide"
    }
   },
   "source": [
    "# Module 2. 使用 script 標籤"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "slide"
    }
   },
   "source": [
    "# Module 3. 常數和變數宣告"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### 3-1: var、let 和 const"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 1,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/plain": [
       "3"
      ]
     },
     "execution_count": 1,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "var varNum = 3\n",
    "varNum"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 2,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/plain": [
       "5"
      ]
     },
     "execution_count": 2,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "let letNum = 5\n",
    "letNum"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "const constNum = 5\n",
    "console.log(constNum)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "slide"
    }
   },
   "source": [
    "# Module 4. 基本類型"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "slide"
    }
   },
   "source": [
    "# Module 5. 運算子"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "slide"
    }
   },
   "source": [
    "# Module 6. String"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "slide"
    }
   },
   "source": [
    "# Module 7. 取得標籤元素"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "subslide"
    }
   },
   "source": [
    "# Module 7. 取得標籤元素\n",
    "\n",
    "    7-1: 使用ES3的方法\n",
    "\n",
    "    7-2: querySelector()\n",
    "\n",
    "    7-3: querySelectorAll()"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "subslide"
    }
   },
   "source": [
    "## 7-1: 使用ES3的方法\n",
    "\n",
    "- getElementById\n",
    "- getElementsByTagName\n",
    "- getElementsByName\n",
    "- getElementsByClassName"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "subslide"
    }
   },
   "source": [
    "## 7-1: 使用ES3的方法\n",
    "\n",
    "<p class=\"codepen\" data-height=\"265\" data-theme-id=\"dark\" data-default-tab=\"html,result\" data-user=\"txs\" data-slug-hash=\"wvaXmoa\" style=\"height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;\" data-pen-title=\"7-1-1 Document.getElementById change Color!\">\n",
    "  <span>See the Pen <a href=\"https://codepen.io/txs/pen/wvaXmoa\">\n",
    "  7-1-1 Document.getElementById change Color!</a> by txs (<a href=\"https://codepen.io/txs\">@txs</a>)\n",
    "  on <a href=\"https://codepen.io\">CodePen</a>.</span>\n",
    "</p>\n",
    "<script async src=\"https://static.codepen.io/assets/embed/ei.js\"></script>"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "slide"
    }
   },
   "source": [
    "# Module 8. 流程控制"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "slide"
    }
   },
   "source": [
    "# Module 9. Object類型"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "slide"
    }
   },
   "source": [
    "# Module 10. Array類型"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "subslide"
    }
   },
   "source": [
    "# 1.4 常數表示法\n",
    "    - // console.log(0o23)   // 舊的 8  進位用法, 不建議使用\n",
    "    - console.log(0o23)      // 8  進位\n",
    "    - console.log(0x23)      // 16 進位\n",
    "    - console.log(0b1111)    // 2  進位\n",
    "    - console.log(2e5)       // 科學表示法"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "slide"
    }
   },
   "source": [
    "# Module 11. JSON"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "slide"
    }
   },
   "source": [
    "# Module 12. 函式的定義"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "slide"
    }
   },
   "source": [
    "# Module 13. Scope變數領域"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "slide"
    }
   },
   "source": [
    "# Module 14. 時間與計時器"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "slide"
    }
   },
   "source": [
    "# Module 15. 數學物件"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "slide"
    }
   },
   "source": [
    "# Module 16. window物件"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "slide"
    }
   },
   "source": [
    "# Module 17. 事件處理"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "slide"
    }
   },
   "source": [
    "# Module 18. AJAX"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "# 老師的練習 ( 可自由刪除 )"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "subslide"
    }
   },
   "source": [
    "# 1.4 常數表示法 Demo"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "slideshow": {
     "slide_type": "fragment"
    }
   },
   "outputs": [],
   "source": [
    "console.log(0o23) // 8進位"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "slideshow": {
     "slide_type": "fragment"
    }
   },
   "outputs": [],
   "source": [
    "console.log(0x23) // 16進位"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "subslide"
    }
   },
   "source": [
    "    - Boolean   // 布林\n",
    "    - Number    // 數字\n",
    "    - String    // 字串\n",
    "    - null      // 空值\n",
    "    - undefined // 空值，也可視為一個型態\n",
    "    - true      // 常數，不可作為變數名稱 (Js 開頭為小寫，與 Python 不同)\n",
    "    - false     // 常數，不可作為變數名稱 (Js 開頭為小寫，與 Python 不同)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "slideshow": {
     "slide_type": "fragment"
    }
   },
   "outputs": [],
   "source": [
    "Boolean"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "slideshow": {
     "slide_type": "fragment"
    }
   },
   "outputs": [],
   "source": [
    "a =  10"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "slideshow": {
     "slide_type": "fragment"
    }
   },
   "outputs": [],
   "source": [
    "a"
   ]
  },
  {
   "cell_type": "raw",
   "metadata": {
    "slideshow": {
     "slide_type": "fragment"
    }
   },
   "source": [
    "true = 100 // 在 DevTool 測試"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "slideshow": {
     "slide_type": "fragment"
    }
   },
   "outputs": [],
   "source": [
    "12 = 33 // 不能使用 因為 12 不是變數"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "slideshow": {
     "slide_type": "fragment"
    }
   },
   "outputs": [],
   "source": [
    "0xFF0000 //色碼 RGB 所以這個是紅色"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "slideshow": {
     "slide_type": "fragment"
    }
   },
   "outputs": [],
   "source": [
    "2e3"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "slideshow": {
     "slide_type": "fragment"
    }
   },
   "outputs": [],
   "source": [
    "2E3 //大小寫皆可"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "slideshow": {
     "slide_type": "fragment"
    }
   },
   "outputs": [],
   "source": [
    "2E-3 //後面是負的代表示 10^-3次方 2*0.001"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "slideshow": {
     "slide_type": "fragment"
    }
   },
   "outputs": [],
   "source": [
    "Number.MAX_SAFE_INTEGER  //Type in DevTools"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "slideshow": {
     "slide_type": "fragment"
    }
   },
   "outputs": [],
   "source": [
    "Number.MAX_VALUE  //Type in DevTools"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "slideshow": {
     "slide_type": "fragment"
    }
   },
   "outputs": [],
   "source": [
    "Number.POSITIVE_INFINITY //Type in DevTools"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": []
  }
 ],
 "metadata": {
  "celltoolbar": "Slideshow",
  "kernelspec": {
   "display_name": "jp-Babel (Node.js)",
   "language": "babel",
   "name": "babel"
  },
  "language_info": {
   "file_extension": ".js",
   "mimetype": "application/javascript",
   "name": "javascript",
   "version": "12.14.1"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 4
}