Tweet
Tweet

Slide 1

Slide 1 text

JavaScript Lab JavaScript Lab Ryan Chung 1

Slide 2

Slide 2 text

JavaScript Lab Lab Index • Hello JavaScript! – 環境安裝、套件安裝、專案基本構成 • 今天晚上吃什麼 – 亂數選擇器 – HTML/CSS/JS、jQuery、亂數 • 自動排課系統 – 表格、陣列、日期時間、函數、迴圈、字串、樣式 • 心理測驗 – 你的愛情是什麼滋味？ – 條件判斷、按鈕、資料取得、陣列、字典 • RPG極簡雛形製作 – Canvas、圖型載入、For..in、事件、Switch • Youtube心情點唱機 – Youtube iFrame API、div、id、物件 • 網頁整合 – Bootstrap、超連結、選單、jQuery選擇器 • 網站上線 – GitHub Pages、Git 2

Slide 3

Slide 3 text

JavaScript Lab 開發環境 http://brackets.io/ 3

Slide 4

Slide 4 text

JavaScript Lab 安裝擴充套件 HTML Templates • File -> Extension Manager... –HTML Templates 4

Slide 5

Slide 5 text

JavaScript Lab 第一個 JS專案 • 在電腦中新增一個資料夾：HelloJavaScript • 打開Brackets, File -> Open Folder... • 選擇剛才建立的資料夾 5

Slide 6

Slide 6 text

JavaScript Lab 第一個 JS專案 • 在左邊點擊右鍵，New File，命名為index.html • Edit -> HTML Templates... -> 第一個Choose... • 選擇HTML5 6

Slide 7

Slide 7 text

JavaScript Lab 第一個 JS專案 • 在左邊點擊右鍵，New File，再增加三個檔案 – main.js – style.css – package.json 7

Slide 8

Slide 8 text

JavaScript Lab 第一個 JS專案 • 回到index.html，編輯檔案如下 8

Slide 9

Slide 9 text

JavaScript Lab 第一個 JS專案 • 再到main.js，編輯檔案如下 • package.json，編輯檔案如下 9

Slide 10

Slide 10 text

JavaScript Lab 測試執行 • 回到index.html，按下編輯器最右方的閃電符號 10

Slide 11

Slide 11 text

JavaScript Lab JavaScript Lab 今天晚上吃什麼 – 亂數選擇器 11

Slide 12

Slide 12 text

JavaScript Lab 預期畫面 12

Slide 13

Slide 13 text

JavaScript Lab 功能 • 點擊按鈕後，從下列選項中任意挑選一個並 顯示 • 按下按鈕後的動作 • 取得清單中的文字 • 任意選擇一個項目 13

Slide 14

Slide 14 text

JavaScript Lab 畫面的拆解 • 標題 • 置中 • 按鈕 • 置中 • 選項清單 • 靠左 14

Slide 15

Slide 15 text

JavaScript Lab 基本畫面元素 • 如何產生標題？ • 如何決定標題上的文字？ • 如何產生按鈕？ • 如何決定按鈕上的文字？ • 如何產生清單？ • 如何撰寫清單上的項目？ 15

Slide 16

Slide 16 text

JavaScript Lab 畫面編排 • 如何讓標題與按鈕置中？ • 如何讓選單靠左？ 16

Slide 17

Slide 17 text

JavaScript Lab 功能拆解 • 如何讓按鈕按下之後有所動作？ • 如何取得清單中的文字？ • 如何任意挑選其中一個項目？ • 如何改變標題的文字？ 17

Slide 18

Slide 18 text

JavaScript Lab 建立專案 • 複製上一個例子的資料夾，重新命名：RandomSelector • 打開Brackets, File -> Open Folder... • 選擇RandomSelector資料夾 18

Slide 19

Slide 19 text

JavaScript Lab 先放置畫面內容 19

Slide 20

Slide 20 text

JavaScript Lab 修改 main.js 20

Slide 21

Slide 21 text

JavaScript Lab 結果不正 21

Slide 22

Slide 22 text

JavaScript Lab 修改 style.css 22

Slide 23

Slide 23 text

JavaScript Lab 選項跑到中間，但是符號還在旁邊 23

Slide 24

Slide 24 text

JavaScript Lab 再修正 style.css 24

Slide 25

Slide 25 text

JavaScript Lab index.html 匯入 jQuery 25

Slide 26

Slide 26 text

JavaScript Lab main.js 按鈕按了有反應 26

Slide 27

Slide 27 text

JavaScript Lab main.js 按鈕按了可以改變那個問號 27

Slide 28

Slide 28 text

JavaScript Lab main.js 按鈕按了可以拿到任一筆資料 28

Slide 29

Slide 29 text

JavaScript Lab main.js • 先計算li元件有幾個 • 產生對應的亂數範圍 • 使用這個亂數 29

Slide 30

Slide 30 text

JavaScript Lab Recap • 開發/測試環境 • HTML / CSS / JavaScript • jQuery • 亂數 30

Slide 31

Slide 31 text

JavaScript Lab 延伸 Lab • 在下方加上圖片，當選到特定項目時，下方也 能出現對應的圖片 31

Slide 32

Slide 32 text

JavaScript Lab JavaScript Lab 自動排課系統 Ryan Chung [email protected] 32

Slide 33

Slide 33 text

JavaScript Lab 社團活動公告網頁 • 小明是資訊社的社長，在每週三的晚上會舉辦 社課，想要做一個網頁來公告社團活動 • 自動產生活動場次號碼、舉辦日期 • 方便維護每次的活動主題 33

Slide 34

Slide 34 text

JavaScript Lab 預期畫面 34

Slide 35

Slide 35 text

JavaScript Lab 功能 • 社長方便維護 • 只要輸入開始日期，就可以自動推算每次活動日 期 • 只要將每個場次活動內容輸入，就可以自動編號 35

Slide 36

Slide 36 text

JavaScript Lab 檔案 • index.html：主要顯示頁面 • main.js：主要程式運作 • package.json：專案設定檔 • style.css：網頁樣式檔 • topic.js：存放資料 36

Slide 37

Slide 37 text

JavaScript Lab index.html 畫面 • 匯入 topic.js、main.js • 建立標題、表格(表格設定id) 37

Slide 38

Slide 38 text

JavaScript Lab topic.js 資料 • 建立一個陣列來存放資料 38

Slide 39

Slide 39 text

JavaScript Lab topic.js 資料 • 建立方便輸入日期的機制 39

Slide 40

Slide 40 text

JavaScript Lab package.json • 讓window物件直接在各個js檔可以使用 40

Slide 41

Slide 41 text

JavaScript Lab topic.js 資料 • 日期時間物件 –如何建立 –如何設定 –setMonth的輸入值 –setDate是什麼 • 函數的建立與呼叫 –函數的關鍵字 –如何建立、輸入輸出 –如何呼叫 41

Slide 42

Slide 42 text

JavaScript Lab main.js • 新增表格的標題內容 42

Slide 43

Slide 43 text

JavaScript Lab main.js • 表格的語法 –最外層 –標題 –列、資料欄位 43

Slide 44

Slide 44 text

JavaScript Lab main.js • 將資料呈現於表格中，並顯示場次編號 44

Slide 45

Slide 45 text

JavaScript Lab main.js • for 迴圈的使用 • 如何對應資料？ • 編號從幾開始？ 45

Slide 46

Slide 46 text

JavaScript Lab main.js 開始處理活動日期 • 先確認startDate是否可正確取得 46

Slide 47

Slide 47 text

JavaScript Lab 活動日期概念 • 確定了第一週的日期後 • 每週就是前一個活動日期的七天後 47

Slide 48

Slide 48 text

JavaScript Lab 出現的卻是... 48

Slide 49

Slide 49 text

JavaScript Lab 資料型態 • 字串 • 日期 • 數字 • ... 不同的資料型態可不可以相加？ 如何知道每個變數的資料型態？ 49

Slide 50

Slide 50 text

JavaScript Lab 時間運算 • 先將時間轉換成累積毫秒，運算完成後再轉回 一般日期時間格式 50

Slide 51

Slide 51 text

JavaScript Lab 日期時間物件 • getTime() • 為什麼要計算一天的毫秒量 • toLocaleDateString() 51

Slide 52

Slide 52 text

JavaScript Lab main.js 不想看到年份 52

Slide 53

Slide 53 text

JavaScript Lab style.css 畫面呈現優化 53

Slide 54

Slide 54 text

JavaScript Lab 總算完成！ 54

Slide 55

Slide 55 text

JavaScript Lab 嘗試在topic.js增加資料 • 畫面是否也能自動更新 55

Slide 56

Slide 56 text

JavaScript Lab 若在topic.js更改第一次活動日期 • 畫面是否也能自動更新 56

Slide 57

Slide 57 text

JavaScript Lab Recap • HTML –表格、id • JavaScript –多個檔案執行 –陣列、日期時間、函數、迴圈、字串處理 • CSS –置中對齊、邊界 –字體大小、邊框 57

Slide 58

Slide 58 text

JavaScript Lab Lab • 如果要讓停課的那幾天字變灰色，該怎麼做？ –條件判斷 • 能不能在網頁上讓使用者設定第一天的日期？ –日期輸入元件 –事件發生 58

Slide 59

Slide 59 text

JavaScript Lab JavaScript Lab 心理測驗-你的愛情是什麼滋味? Ryan Chung [email protected] 59

Slide 60

Slide 60 text

JavaScript Lab 需求 • 想要將網路上的心理測驗文字轉換成互動模式 • 使用者只要逐題作答就可以得到結果 60 Source:https://www.xcnnews.com/xz/2707643.html

Slide 61

Slide 61 text

JavaScript Lab 預期成果 • 每頁顯示一題目，使用者選擇後按下按鈕 • 最後會出現結果，並可重新開始作答 • 按鈕會依情境改變：開始、下一題、重新開始 61

Slide 62

Slide 62 text

JavaScript Lab 檔案 • index.html：主要顯示頁面 • main.js：主要程式運作 • package.json：專案設定檔 • style.css：網頁樣式檔 • data.js：存放資料 62

Slide 63

Slide 63 text

JavaScript Lab index.html 畫面 • 匯入 data.js、main.js • 建立標題、問題與選項區塊、選項區塊、按鈕 63

Slide 64

Slide 64 text

JavaScript Lab data.js • 直接下載使用 64 https://github.com/ryan403/love-taste-quiz/

Slide 65

Slide 65 text

JavaScript Lab 觀察data.js • 與原始心理測驗內容比對 • 了解 { }、[ ] 的用法 • Dictionary { } –Key-value Pair • Array [ ] –有順序性 65

Slide 66

Slide 66 text

JavaScript Lab package.json • 讓window物件直接在各個js檔可以使用 66

Slide 67

Slide 67 text

JavaScript Lab style.css 畫面呈現優化 67

Slide 68

Slide 68 text

JavaScript Lab main.js • 建立變數、建立按鈕事件處理 68

Slide 69

Slide 69 text

JavaScript Lab main.js • 兵分兩路，開始作答或繼續作答 • 想想一開始作答跟其他題的作答有什麼不一樣？ • 畫面上只有一顆按鈕 69

Slide 70

Slide 70 text

JavaScript Lab main.js 第一題的顯示 70

Slide 71

Slide 71 text

JavaScript Lab main.js - else • 檢查哪一個選項被使用者選取 71

Slide 72

Slide 72 text

JavaScript Lab main.js - else • 是要往下一題顯示還是通往結果 72

Slide 73

Slide 73 text

JavaScript Lab main.js – 通往最終結果 • 顯示結果標題、結果詳細內容 73

Slide 74

Slide 74 text

JavaScript Lab main.js – 顯示下一題 • 注意題號 74

Slide 75

Slide 75 text

JavaScript Lab 總算完成！ 75

Slide 76

Slide 76 text

JavaScript Lab Recap • HTML –div、h2、radio、label、button、checked • JavaScript –if...else –==、null • jQuery –:radio、empty()、attr()、each() –return false • 資料檔案 –陣列、字典、第x個、多層存取 76

Slide 77

Slide 77 text

JavaScript Lab Lab • PDP性格測驗 77

Slide 78

Slide 78 text

JavaScript Lab JavaScript Lab RPG極簡雛形製作 Ryan Chung [email protected] 78

Slide 79

Slide 79 text

JavaScript Lab 需求 • 做一個九宮格可以移動的遊戲雛形 • 可以移動主角，但不會走出範圍 • 可以判斷遇到人、障礙物 • 可以判斷走到終點 • 主角的圖案跟方向一致 79

Slide 80

Slide 80 text

JavaScript Lab 檔案 • index.html：主要顯示頁面 • main.js：主要程式運作 • package.json：專案設定檔 • style.css：網頁樣式檔 • images：存放圖片的資料夾 (https://ppt.cc/fN2Eox) 80

Slide 81

Slide 81 text

JavaScript Lab package.json • 讓window物件直接在各個js檔可以使用 81

Slide 82

Slide 82 text

JavaScript Lab index.html • 標題、canvas、div、p 82

Slide 83

Slide 83 text

JavaScript Lab style.css 83

Slide 84

Slide 84 text

JavaScript Lab main.js • 全域變數宣告、事件觸發 84

Slide 85

Slide 85 text

JavaScript Lab main.js • 設定地形、擺上主角 85

Slide 86

Slide 86 text

JavaScript Lab main.js • 擺上障礙物、敵人 86

Slide 87

Slide 87 text

JavaScript Lab 編號與座標的對應 0 1 2 3 4 5 6 7 8 (0,0) (200,0) (400,0) (0,200) (0,400) (200,200) (200,400) (400,200) (400,400) 87

Slide 88

Slide 88 text

JavaScript Lab main.js • 按鍵判斷 • 座標設定 • 排除其他狀況 88

Slide 89

Slide 89 text

JavaScript Lab main.js • 判斷目標位置是否在邊界內 • 判斷目標位置是否有障礙物/敵人 89

Slide 90

Slide 90 text

JavaScript Lab main.js • 依據目標位置內容，顯示提示訊息於下方 90

Slide 91

Slide 91 text

JavaScript Lab 總算完成！進行測試 • 主角是否會走出邊界？ • 是否遇到障礙物、敵人會無法走，並出現訊息 • 是否有判斷抵達終點？ • 是否有依方向轉頭？ 91

Slide 92

Slide 92 text

JavaScript Lab Recap • HTML –canvas、div、id • JavaScript –image load、canvas draw image、cut image –for ... in、array、switch –keydown、preventDefault • 資料檔案 –圖片 92

Slide 93

Slide 93 text

JavaScript Lab Lab • 可以16 x 16嗎？ • 一個物品可以跨越多格嗎？ • 如何寫出小精靈？ • 如何寫出OOXX遊戲？ 93

Slide 94

Slide 94 text

JavaScript Lab JavaScript Lab Youtube心情點唱機 Ryan Chung [email protected] 94

Slide 95

Slide 95 text

JavaScript Lab 想要解決的問題 • MTV Video前面故事很長，只想聽副歌 • 希望可以串起來播放 • 可以方便設定每首歌的播放開始與結束時間 • 畫面總是充滿著置入行銷連結 • 不想結束時看到一堆相關影片 95

Slide 96

Slide 96 text

JavaScript Lab 不想看到最上面的標題 96

Slide 97

Slide 97 text

JavaScript Lab 每次影片結束時都會有一堆相關影片 97

Slide 98

Slide 98 text

JavaScript Lab 影片播放時常有置入行銷連結 98

Slide 99

Slide 99 text

JavaScript Lab 預期畫面 • 按下按鈕開始播放，並顯示歌曲標題 • 播完一首會接著播下一首 • 都只播設定好的副歌段落 99

Slide 100

Slide 100 text

JavaScript Lab 檔案 • index.html：主要顯示頁面 • main.js：主要程式運作 • package.json：專案設定檔 • style.css：網頁樣式檔 • playList.js：影片來源與播放起訖時間 100

Slide 101

Slide 101 text

JavaScript Lab index.html • iframe_api、playList.js、h1、div、button 101

Slide 102

Slide 102 text

JavaScript Lab package.json • 讓window物件直接在各個js檔可以使用 102

Slide 103

Slide 103 text

JavaScript Lab style.css 103

Slide 104

Slide 104 text

JavaScript Lab playList.js 104

Slide 105

Slide 105 text

JavaScript Lab main.js 105

Slide 106

Slide 106 text

JavaScript Lab 當Youtube API準備好時，設定播放器 106

Slide 107

Slide 107 text

JavaScript Lab 當播放器準備好時，設定按鈕事件 107

Slide 108

Slide 108 text

JavaScript Lab 一首播完就跳下一首 108

Slide 109

Slide 109 text

JavaScript Lab Recap • HTML –h1, h2, div, id, button • JavaScript –event trigger, object –if...else if • 資料檔案 –陣列 • 外部資源 –Youtube iFrame API 109

Slide 110

Slide 110 text

JavaScript Lab Lab • 瀏覽YouTube IFrame Player API • 瀏覽Player 變數有哪些 • 應用 –網頁遊戲與影片結合，勝利或特定情況就撥不同 影片 –影片串接 110

Slide 111

Slide 111 text

JavaScript Lab JavaScript Lab 網頁整合 Ryan Chung [email protected] 111

Slide 112

Slide 112 text

JavaScript Lab 目標 • 把目前做過的五個練習頁面變成一個網站 • 有一個首頁，然後可以跳至每個練習頁面 • 每個練習頁面也可以互相連結 • 每個練習頁面也可以回到首頁 112

Slide 113

Slide 113 text

JavaScript Lab Bootstrap • 方便好用的樣板，並已考慮桌面與行動端 113 https://getbootstrap.com/

Slide 114

Slide 114 text

JavaScript Lab Example : Carousel • 我們用Carousel這個範例來整合 • 下載：https://ppt.cc/f27Lrx 114 https://getbootstrap.com/docs/4.3/examples/

Slide 115

Slide 115 text

JavaScript Lab 建立一個新專案 • 在電腦中新增一個資料夾：MergePractice • 將剛才解壓縮的內容放至這個資料夾 • 再將過去練習的五個資料夾都搬進來 115

Slide 116

Slide 116 text

JavaScript Lab 首頁測試 • 先確定樣板範例的 index.html有正常運作 116

Slide 117

Slide 117 text

JavaScript Lab 新增 RandomSelect.html • 在資料夾中增加RandomSelect.html • 修改index.html上方的選單 117

Slide 118

Slide 118 text

JavaScript Lab 編輯RandomSelect.html • 先將index.html中的所有內容貼至 RandomSelect.html • 上方Head中，加入需要的CSS 118

Slide 119

Slide 119 text

JavaScript Lab 編輯RandomSelect.html • 修改上方選單中的連結 119

Slide 120

Slide 120 text

JavaScript Lab 編輯RandomSelect.html • main區塊中的大部分內容都刪掉 • 將原本RandomSelect中的index裡的Body中的內容貼過來 120

Slide 121

Slide 121 text

JavaScript Lab 編輯RandomSelect.html • 最下方加上我們需要的JS檔 121

Slide 122

Slide 122 text

JavaScript Lab RandomSelect中的main.js • 合併後需要考量選擇器是否要調整寫法 122

Slide 123

Slide 123 text

JavaScript Lab 測試 • 首頁可跳至RandomSelect，也可再回來 • RandomSelect可正常運作 123

Slide 124

Slide 124 text

JavaScript Lab 相同方法製作另外四個頁面 • 建立xxx.html • 把RandomSelect.html的內容貼過來 • 加上會用到的CSS • 修改Main區塊中的內容(原專案index.html) • 加上會用到的JS • 測試 124

Slide 125

Slide 125 text

JavaScript Lab 細節 • 增加頁面後，要再回去改其他幾頁的選單 • active類別可以讓該選單文字為白色 • 該頁面自己的選單href屬性設定為# • js檔中的圖片路徑 125

Slide 126

Slide 126 text

JavaScript Lab Recap • Bootstrap –樣板套用與修改 –選單 • JavaScript –放的位置、選擇器調整 • CSS –放的位置 • HTML –頁面超連結 126

Slide 127

Slide 127 text

JavaScript Lab JavaScript Lab 網站上線 Ryan Chung [email protected] 127

Slide 128

Slide 128 text

JavaScript Lab 目標 • 將完成的網站上線 128

Slide 129

Slide 129 text

JavaScript Lab 使用 GitHub Pages 129 https://pages.github.com/

Slide 130

Slide 130 text

JavaScript Lab 註冊一個GitHub帳號 130 https://github.com/join

Slide 131

Slide 131 text

JavaScript Lab 登入後，建立一個新的專案 • 點選照片旁邊的+，New repository 131 https://github.com/new

Slide 132

Slide 132 text

JavaScript Lab 本機設定 • 打開終端機應用程式 –Windows：cmd –Mac：Terminal • 找到專案資料夾 –cd MergePractice • Git 初始化 –git init • 加入所有檔案 –git add . 132

Slide 133

Slide 133 text

JavaScript Lab 本機設定 • 設定上傳描述標記 – git commit –m "First commit" • 對應遠端位置 – git remote add origin https://github.com/YourUserName/YourProgectName.git • 上傳檔案 – git push –u origin master 133

Slide 134

Slide 134 text

JavaScript Lab 設定GitHub Pages • 在Github網站中，進入自己的專案 • 點擊 Settings • 下拉至GitHub Pages • 將Source設定為 master branch • 按下Save 134

Slide 135

Slide 135 text

JavaScript Lab 測試網站是否已上線 • 打開瀏覽器，輸入網址 – https://YourUserName.github.io/YourProjectName 135

Slide 136

Slide 136 text

JavaScript Lab Recap • GitHub –註冊帳號 –建立Repo • 本機端 –終端機下指令 –建立Git、對應遠端、加入、標記、上傳 • GitHub –設定 –GitHub Page、Source Master Branch 136