自動播放
自動完成
上一堂課程
完成並繼續課程
1599204
The F2E 前端 JS 攻略包
六角學院線上資源
六角學院線上社團
TDX API 講解
TDX API 介紹 (4:20)
TDX API 網址介接 (8:13)
TDX API 網址參數支援介紹 (11:51)
取得指定縣市觀光景點資料 (5:21)
TDX API 申請流程教學 (6:04)
API 夾帶個人 token 教學與環境建置 (7:22)
axios 介接 TDX API 網址請求教學 (9:17)
臺灣旅遊景點導覽 API 開發
本課程採用的 CC BY 之 UI 設計稿
臺灣旅遊景點導覽 - 顯示所有旅遊列表功能
顯示所有旅遊列表功能 - UI 介面講解 (3:38)
顯示所有旅遊列表功能 - JS 實作流程 (14:11)
臺灣旅遊景點導覽 - 滿版式 Banner 設計
滿版式 Banner 設計 (9:18)
臺灣旅遊景點導覽 - 縣市篩選功能
縣市篩選功能 - UI 介面講解 (1:29)
縣市篩選功能 - API 講解 (8:31)
縣市篩選功能 - JS 實作流程 (25:00)
臺灣旅遊景點導覽 - 景點類別功能
景點類別功能 - UI 介面講解 (2:25)
景點類別功能 - JS 實作流程(一) (16:10)
景點類別功能 - JS 實作流程(二) (15:20)
臺灣旅遊景點導覽 - 內頁跳頁功能
內頁跳頁功能 - UI 介面講解 (1:45)
內頁跳頁功能 - JS 實作流程 (20:22)
臺灣旅遊景點導覽 - 關鍵字搜尋功能
關鍵字搜尋功能 - UI 介面講解 (0:57)
關鍵字搜尋功能 - JS 實作流程 (14:55)
臺灣旅遊景點導覽 - 日期搜尋活動功能
日期搜尋活動功能 - UI 實作 與 Timestamp 介紹 (12:40)
日期搜尋活動功能 - JS 實作流程 (10:16)
日期搜尋活動功能 - 函式重構 (8:39)
臺灣旅遊景點導覽 - 抓取離自己最近的資料
抓取離自己最近的資料 - API 講解 (7:27)
抓取離自己最近的資料 - JS 功能實作 (11:50)
Swiper 輪播效果
Swiper 輪播效果範例程式碼
旅遊資訊搭配 Bootstrap 設計 Modal 彈跳效果
搭配 Bootstrap 設計 Modal 彈跳效果範例程式碼
分頁功能
分頁功能範例程式碼
自行車道地圖資訊整合網 - API 介紹 & 租還資料整合
自行車 API 前言 (8:52)
API 欄位介紹 (7:53)
API 整合欄位規劃 (5:05)
API 資料整合前置作業 (4:54)
資料整合前置作業 - 整合方法一 (5:03)
整合自行車租借與歸還資訊 - UI 介面講解 (3:01)
整合自行車租借與歸還資訊 - JS 實作 (6:25)
整合自行車租借與歸還資訊 - JS 與介面實作 (21:45)
Google map 路線導航外部連結功能實作
路線導航 - UI 與功能介紹 (5:50)
路線導航 - JS 功能實作 (6:24)
進階 API - 離自己最近的自行車站點
自行車進階 API (4:55)
離自己最近的自行車站點 - JS 實作 (11:39)
Leaflet 地圖套件教學
Leaflet 套件前言與環境建置 (9:33)
申請 mapbox 圖資服務 (4:13)
CSS 位置順序對調 (0:44)
變更 mapbox 地圖樣式 (7:04)
設定地圖上的 marker 與 popup 效果 (4:03)
Leaflet 常用 API 介紹 (13:06)
Leaflet 地圖套件 - 我要在網站加入店家地圖地址！
實務網站加入地圖常見功能 (5:57)
地圖 marker 顯示離自己最近的站點
地圖 marker 顯示離自己最近的站點 - UI 介紹 (1:20)
地圖 marker 顯示離自己最近的站點 - JS 實作地圖環境 (8:47)
地圖 marker 顯示離自己最近的站點 - JS 實作加入 marker (6:20)
地圖 marker 顯示離自己最近的站點 - JS 實作客製化 marker icon (3:42)
自行車顯示 marker 剩餘車位
自行車顯示 marker 剩餘車位 - UI 講解 (0:55)
自行車顯示 marker 剩餘車位 - JS 實作 (2:34)
Leaflet 地圖服務與自行車路線規劃
Leaflet 地圖服務與自行車路線規劃範例程式碼
同時介接多個 API - promise.all
同時介接多個 API - promise.all - UI 講解 (8:16)
同時介接多個 API - promise.all - JS 實作 (5:21)
第四、五章：公車 API 介接 + 洧杰 Live Dmo
了解公車 API 流程圖 (5:47)
API 講解 (4:19)
API 講解 II - 透過 Codepen 範例進行講解 (12:04)
公車站序、即時動態 API 講解 (8:51)
開始實作！載入縣市 API！ (13:27)
介紹 datalist 標籤 (3:36)
整合 API 至 datalist 標籤 (15:24)
撈出搜尋結果顯示對應即時公車動態 API (9:33)
處理站序 API 為預期資料格式 (21:15)
處理即時動態 API 為預期資料格式 (31:54)
重構與整合API流程 (5:02)
增加站序去回標題 (4:05)
即時動態與站序資訊整合流程 (14:30)
第四、五章：C3 JS 圖表設計 + 洧杰 Live Dmo
C3.js 環境載入教學 (10:51)
各視覺圖與事件監聽介紹 (11:05)
前端薪資介紹-以圓餅圖設計男女性比重為例 (10:30)
長條圖 - 薪資與年齡人員分佈長條圖 (15:11)
圓餅圖 - 將薪資與年齡人員分佈進行重構 (9:08)
最終關卡折線圖 - 年資與平均年薪總整理 (33:01)
內頁跳頁功能 - UI 介面講解
/courses/1599204/lectures/36870454/hotmart_lecture_video_download_link/66838276
1599204
Download
網址換頁-範例程式碼.zip
完成並繼續課程