JavaScript 環境設定 (編輯器、jsbin、console) | 六角學院

自動播放
自動完成

上一堂課程完成並繼續課程

670042

JavaScript 入門篇 - 學徒的試煉

六角學院線上資源

六角學院線上社團
Apple M1 觀看公告

前言提要

課程最終任務說明
六角學院線上問答會資訊
守護神介紹 (1:31)
前端心法課程 - 六角網頁前端養成專欄

JavaScript 的前世今生

挑戰開始 (0:10)
JavaScript 環境設定 (編輯器、jsbin、console) (5:05)
建構第一個 JS 環境 (5:27)
HTML、CSS、JavaScript 的關聯性 (6:44)
ID 寫法、textcontent (15:18)
直譯器流程介紹 (10:19)
第一章測驗
挑戰成功 (0:10)

變數

挑戰開始 (0:10)
變數簡介 (7:52)
變數 number 介紹 (13:06)
變數 string 介紹 (11:24)
如何輸出內容？ (4:55)
變數規則 (6:06)
變數 - 數字新增刪除修改 (11:29)
undefined 介紹 (5:14)
挑戰成功 (0:10)

函式

挑戰開始 (0:10)
為什麼需要 function？ (8:21)
function 的寫法 (10:24)
function 帶參數 (6:26)
全域與區域變數 (11:39)
hoisting 、var 觀念 (3:17)
function 計算機案例 (1) (1:28)
function 計算機案例 (2) (10:44)
function 計算機案例 (3) (14:11)
function 搭配 return 寫法 (5:19)
挑戰成功 (0:10)

陣列與物件

挑戰開始 (0:10)
為什麼需要陣列？ (3:31)
陣列簡報介紹 (5:34)
陣列寫法教學 (14:05)
物件簡報介紹 (4:33)
物件寫法教學 (13:23)
物件 + function 運用技巧 (8:39)
物件+陣列設計流程 (10:34)
挑戰成功 (0:10)

控制判斷(運算子、if、switch)

挑戰開始 (0:10)
以日常生活為例探討為何需要控制判斷 (4:05)
比較運算子：==、!== (7:07)
比較運算子：==、!==，程式碼範例 (10:26)
比較運算子：嚴謹模式 === (4:49)
比較運算子：!= 與 !== 的差異
比較運算子：＞、＜ (4:26)
邏輯運算子： &&、||、! (9:54)
邏輯運算子：範例程式碼 (6:03)
if - 簡報介紹 (3:33)
if - 程式碼教學 (7:59)
else if 簡報介紹 (3:59)
else if - 程式碼教學 (9:11)
switch - 簡報介紹 (4:19)
switch - 程式碼教學 (10:53)
挑戰成功 (0:10)

迴圈

挑戰開始 (0:10)
為什麼需要學習迴圈？ (3:59)
for 寫法 (9:09)
for-array 寫法 (8:52)
for if 寫法 (6:42)
for - i++ 寫法 (3:12)
for - 加總 (5:15)
for 與 break 運用 (8:59)
JSON 格式介紹 (3:16)
JSON VIEW chrome 插件 (4:25)
擷取 JSON 格式流程 (4:56)
for - opendata 範例 (上) (5:55)
OPEN DATA 範例 (下) (12:01)
挑戰成功 (0:10)

DOM

挑戰開始 (0:10)
什麼是 DOM ？ (3:00)
querySelector - 選擇單一元素 (6:27)
querySelectorAll - 可重複選取多個元素 (5:19)
setAttribute - 增加標籤屬性 (9:55)
插入 HTML 標籤的兩種方法 (1:27)
innerHTML (上) (6:47)
innerHTML (下) (6:40)
innerHTML 與 for 運用 (8:44)
createElement 寫法 (9:04)
createElement 與 for 運用 (8:02)
XSS 跨網站指令碼注意事項（Cross-site scripting） (11:33)
挑戰成功 (0:10)

event (事件)

挑戰開始 (0:10)
什麼是 event (事件)？ (2:41)
event 物件 - 告知你當下元素資訊 (8:55)
觀念篇 - 各種事件綁定的差異 (5:55)
addEventListener - 事件監聽 (4:05)
綁定事件的語法差異 (7:11)
Event Bubbling、Event Capturing 差異 (11:01)
stopPropagation - 中止冒泡事件 (5:07)
preventDefault - 取消預設觸發行為 (7:07)
e.target - 了解目前所在元素位置 (6:38)
change - 表單內容更動內容時觸發 (13:46)
keyCode - 點擊鍵盤，射發火箭！ (9:03)
blur - 離開焦點時進行事件觸發 (5:15)
mouse - 當滑鼠滑入指定內容時觸發 (6:29)
網頁座標 - 了解 screen、page、client 箇中差異 (6:46)
網頁座標 - 應用篇 (3:40)
事件監聽優化篇 - 從父元素來監聽子元素內容 (7:09)
挑戰成功 (0:10)

localStorage - 瀏覽器資料儲存

什麼是 localStorage ？ (6:16)
setItem、getItem 基本操作 (11:00)
透過 JSON.parse、JSON.stringify 來編譯資料 (10:06)
data-* - 透過 dataset 讀取自訂資料 (7:39)
dataset、array 運用 (14:21)
splice - 刪除 array 資料 (5:53)
localStorage 作業介紹 (2:49)
localStorage 作業講解 (9:35)

瀏覽器功能探索 (BOM)

挑戰開始 (0:10)
瀏覽器功能簡介 (8:55)
回上頁功能實作 (4:25)
透過 JS 設計列印功能 (5:38)
動態擷取瀏覽器高度 - innerHeight (7:21)
挑戰成功 (0:10)

JS 開發邏輯思維

JS 開發邏輯思維
講座 - JS 開發邏輯思維養成 (51:59)
講座 - JS 開發邏輯思維養成（下） (42:25)

最終作業與總結

最終作業寄送變更
最終作業介紹 (5:25)
高雄旅遊景點 API 說明
JS 百題斬
問答區精彩討論

AJAX

什麼是 AJAX？ (7:07)
透過 XMLHttpRequest 物件跨瀏覽器撈資料 (16:09)
AJAX 非同步觀念 (上) (3:55)
AJAX 非同步觀念 (下) (5:01)
HTTP狀態碼 (6:00)
什麼是 Cross-Origin Resource Sharing (CORS)？ (6:31)
傳統表單輸入介紹 (6:59)
AJAX POST 寫法 (提供 API 練習) (10:33)
從 Chrome 開發人員工具檢視 AJAX POST (6:39)
AJAX JSON 傳遞 (6:58)
AJAX 實務範例設計 (16:30)
AJAX 作業設計 (2:56)
資源補充

Leaflet + OpenStreetMap 地圖應用

章節簡介
AJAX 與函式應用教學 (110:19)
Leaflet + OpenStreetMap 教學
學員範例作品

Google Map API

Google Map API 提醒
什麼是 API？ (8:06)
如何評估 API 的可用性 (14:52)
Google Map API 初始化與金鑰設定 (10:33)
Google Map API 原理介紹 (10:43)
增加標記 (9:41)
新增多個標記 (3:41)
標記 + 第三方 JSON 資料設計 (5:30)
繪製客製化 Google Map 樣式 (4:55)
客製化 Google Map 標記 icon (2:31)
Google Map API 常見應用

ECMAScript 6 入門 - let、const

ES 6 介紹 (4:38)
window、var 特性 (4:52)
let - if、function 用法 (6:13)
let -for 用法 (7:13)
const 特性 (5:02)
let、const 注意事項與使用時機 (8:51)

ECMAScript 6 入門 - 字串篇

Template literals - 輕鬆進行字串相加 (7:50)
編輯器與格式支援小技巧 (4:49)

Vue.js 2.0 - 8 小時線上影音課程

投入 Vue.js 前，你必須要會的基礎知識
Vue.js 幼幼班起手式(上)
Todolist 作業
Vue.js 幼幼班起手式(下)
從 Vue.js 初探 Web Component 的世界
Vue-CLI
Firebase
Vuex
颱風防災網

JavaScript 環境設定 (編輯器、jsbin、console)

/courses/670042/lectures/11952089/hotmart_lecture_video_download_link/24166304

670042

Visual Studio Code

完成並繼續課程