# 入門 連結：<https://hackmd.io/@ntust/ncc-js-1> 匿名提問：<https://sli.do/A443> --- ## 講者 - 四資管四 徐孟辰 --- ## 本次社課 * JavaScript 簡介 - 30 min * 手冊及規範 - 10 min * 程式編輯器 - 10 min * 開發者控制台 - 10 min --- ### JavaScript 簡介（PART 1） * 什麼是 JavaScript？ * 在瀏覽器上的 JavaScript 可以辦到什麼？ * 在瀏覽器上的 JavaScript 無法辦到什麼？ * 是什麼讓 JavaScript 與眾不同？ * 在 JavaScript 之上 * 小結 --- #### 什麼是 JavaScript？ * 腳本語言不需編譯直接執行 * 為了網頁而生 * 跟 **Java** 完全不同，大概就跟 *太陽* 和 *太陽餅* 的關係 --- #### 在瀏覽器上的 JavaScript 可以辦到什麼？ * 改網頁（HTML）、樣式（Style） * 監聽使用者的操作 * 透過網路向遠程伺服器發送請求、上傳下載檔案 * 存取 Cookie * 將資料儲存在客戶端的 Local Storage --- #### 在瀏覽器上的 JavaScript 無法辦到什麼？ 由於資安的考量 JS 在瀏覽器能做的事情有限。 * 無法電腦上的讀寫檔案 * 不同頁籤或網頁無法互相存取（同源政策） --- #### 是什麼讓 JavaScript 與眾不同？ * 與 HTML/CSS 的完全整合 * 簡單的事可以簡單地完成 * 受到所有主流瀏覽器支援 --- #### 在 JavaScript 之上 * CoffeeScript * TypeScript * Flow * Dart --- #### 小結 * 最初 JavaScript 是為了網頁而生 * 現在 JavaScript 被各大瀏覽器支援並與 HTML/CSS 整合 * 有許多語言可以轉譯成 JavaScript，在學會 JS 之後可以簡單的了解一下 --- ### 手冊及規範（PART 2） * 規範 * 手冊 * 相容性表 --- #### 規範 **ECMA-262** * <https://www.ecma-international.org/publications/standards/Ecma-262.htm> --- #### 手冊 * **MDN (Mozilla) JavaScript Reference** * <https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference> * **MSDN** * <http://msdn.microsoft.com/> --- #### 相容性表 * <http://caniuse.com/> * <https://kangax.github.io/compat-table> --- ### 程式編輯器（PART 3） * 整合開發環境（IDE） * 輕量編輯器 --- #### 整合開發環境（IDE） * Visual Studio Code （跨平台，免費） * WebStorm （跨平台，付費） * ~~Visual Studio（Windows，付費）~~ --- #### 輕量編輯器 * Atom（跨平台，免費） * Sublime Text（跨平台，共享） * Notepad++（Windows，免費） * *Vim、Emacs （Geek，免費）* --- ### 開發者控制台（PART 4） * Google Chrome * Firefox、Edge 和其他 * Safari * 小結 --- #### Google Chrome * 打開 <http://javascript.info/article/devtools/bug.html> * 按下 `F12` 或 `Cmd + Opt + J` (Mac)  --- #### Firefox、Edge 和其他 * 基本上用 `F12` 就能打開了 --- #### Safari * 偏好（Preferences） > 進階（Advanced）  * 按下 `Cmd + Opt + C` #### 小結 * 開發人員工具允許我們查看錯誤，運行命令，檢查變數等等。 * `F12` 很好用 :tada: --- ## 最後 參考來源：<https://javascript.info>、MDN {{ slido 回應 }} {{ 這邊要放 QRCODE ㄅ }} {{ 下次社課ㄅ }}