JavaScript Lab

HTML/CSS/JS Practice

Transcript

1. JavaScript Lab JavaScript Lab Ryan Chung 1
2. 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
3. JavaScript Lab 開發環境 http://brackets.io/ 3
4. JavaScript Lab 安裝擴充套件 HTML Templates • File -> Extension Manager... –HTML Templates 4
5. JavaScript Lab 第一個 JS專案 • 在電腦中新增一個資料夾：HelloJavaScript • 打開Brackets, File -> Open Folder... • 選擇剛才建立的資料夾 5
6. JavaScript Lab 第一個 JS專案 • 在左邊點擊右鍵，New File，命名為index.html • Edit -> HTML Templates... -> 第一個Choose... • 選擇HTML5 6
7. JavaScript Lab 第一個 JS專案 • 在左邊點擊右鍵，New File，再增加三個檔案 – main.js – style.css – package.json 7
8. JavaScript Lab 第一個 JS專案 • 回到index.html，編輯檔案如下 8
9. JavaScript Lab 第一個 JS專案 • 再到main.js，編輯檔案如下 • package.json，編輯檔案如下 9
10. JavaScript Lab 測試執行 • 回到index.html，按下編輯器最右方的閃電符號 10
11. JavaScript Lab JavaScript Lab 今天晚上吃什麼 – 亂數選擇器 11
12. JavaScript Lab 預期畫面 12
13. JavaScript Lab 功能 • 點擊按鈕後，從下列選項中任意挑選一個並 顯示 • 按下按鈕後的動作 • 取得清單中的文字 • 任意選擇一個項目 13
14. JavaScript Lab 畫面的拆解 • 標題 • 置中 • 按鈕 • 置中 • 選項清單 • 靠左 14
15. JavaScript Lab 基本畫面元素 • 如何產生標題？ • 如何決定標題上的文字？ • 如何產生按鈕？ • 如何決定按鈕上的文字？ • 如何產生清單？ • 如何撰寫清單上的項目？ 15
16. JavaScript Lab 畫面編排 • 如何讓標題與按鈕置中？ • 如何讓選單靠左？ 16
17. JavaScript Lab 功能拆解 • 如何讓按鈕按下之後有所動作？ • 如何取得清單中的文字？ • 如何任意挑選其中一個項目？ • 如何改變標題的文字？ 17
18. JavaScript Lab 建立專案 • 複製上一個例子的資料夾，重新命名：RandomSelector • 打開Brackets, File -> Open Folder... • 選擇RandomSelector資料夾 18
19. JavaScript Lab 先放置畫面內容 19
20. JavaScript Lab 修改 main.js 20
21. JavaScript Lab 結果不正 21
22. JavaScript Lab 修改 style.css 22
23. JavaScript Lab 選項跑到中間，但是符號還在旁邊 23
24. JavaScript Lab 再修正 style.css 24
25. JavaScript Lab index.html 匯入 jQuery 25
26. JavaScript Lab main.js 按鈕按了有反應 26
27. JavaScript Lab main.js 按鈕按了可以改變那個問號 27
28. JavaScript Lab main.js 按鈕按了可以拿到任一筆資料 28
29. JavaScript Lab main.js • 先計算li元件有幾個 • 產生對應的亂數範圍 • 使用這個亂數 29
30. JavaScript Lab Recap • 開發/測試環境 • HTML / CSS / JavaScript • jQuery • 亂數 30
31. JavaScript Lab 延伸 Lab • 在下方加上圖片，當選到特定項目時，下方也 能出現對應的圖片 31
32. JavaScript Lab JavaScript Lab 自動排課系統 Ryan Chung ryan@iii.org.tw 32
33. JavaScript Lab 社團活動公告網頁 • 小明是資訊社的社長，在每週三的晚上會舉辦 社課，想要做一個網頁來公告社團活動 • 自動產生活動場次號碼、舉辦日期 • 方便維護每次的活動主題 33
34. JavaScript Lab 預期畫面 34
35. JavaScript Lab 功能 • 社長方便維護 • 只要輸入開始日期，就可以自動推算每次活動日 期 • 只要將每個場次活動內容輸入，就可以自動編號 35
36. JavaScript Lab 檔案 • index.html：主要顯示頁面 • main.js：主要程式運作 • package.json：專案設定檔 • style.css：網頁樣式檔 • topic.js：存放資料 36
37. JavaScript Lab index.html 畫面 • 匯入 topic.js、main.js • 建立標題、表格(表格設定id) 37
38. JavaScript Lab topic.js 資料 • 建立一個陣列來存放資料 38
39. JavaScript Lab topic.js 資料 • 建立方便輸入日期的機制 39
40. JavaScript Lab package.json • 讓window物件直接在各個js檔可以使用 40
41. JavaScript Lab topic.js 資料 • 日期時間物件 –如何建立 –如何設定 –setMonth的輸入值 –setDate是什麼 • 函數的建立與呼叫 –函數的關鍵字 –如何建立、輸入輸出 –如何呼叫 41
42. JavaScript Lab main.js • 新增表格的標題內容 42
43. JavaScript Lab main.js • 表格的語法 –最外層 –標題 –列、資料欄位 43
44. JavaScript Lab main.js • 將資料呈現於表格中，並顯示場次編號 44
45. JavaScript Lab main.js • for 迴圈的使用 • 如何對應資料？ • 編號從幾開始？ 45
46. JavaScript Lab main.js 開始處理活動日期 • 先確認startDate是否可正確取得 46
47. JavaScript Lab 活動日期概念 • 確定了第一週的日期後 • 每週就是前一個活動日期的七天後 47
48. JavaScript Lab 出現的卻是... 48
49. JavaScript Lab 資料型態 • 字串 • 日期 • 數字 • ... 不同的資料型態可不可以相加？ 如何知道每個變數的資料型態？ 49
50. JavaScript Lab 時間運算 • 先將時間轉換成累積毫秒，運算完成後再轉回 一般日期時間格式 50
51. JavaScript Lab 日期時間物件 • getTime() • 為什麼要計算一天的毫秒量 • toLocaleDateString() 51
52. JavaScript Lab main.js 不想看到年份 52
53. JavaScript Lab style.css 畫面呈現優化 53
54. JavaScript Lab 總算完成！ 54
55. JavaScript Lab 嘗試在topic.js增加資料 • 畫面是否也能自動更新 55
56. JavaScript Lab 若在topic.js更改第一次活動日期 • 畫面是否也能自動更新 56
57. JavaScript Lab Recap • HTML –表格、id • JavaScript –多個檔案執行 –陣列、日期時間、函數、迴圈、字串處理 • CSS –置中對齊、邊界 –字體大小、邊框 57
58. JavaScript Lab Lab • 如果要讓停課的那幾天字變灰色，該怎麼做？ –條件判斷 • 能不能在網頁上讓使用者設定第一天的日期？ –日期輸入元件 –事件發生 58
59. JavaScript Lab JavaScript Lab 心理測驗-你的愛情是什麼滋味? Ryan Chung ryan@iii.org.tw 59
60. JavaScript Lab 需求 • 想要將網路上的心理測驗文字轉換成互動模式 • 使用者只要逐題作答就可以得到結果 60 Source:https://www.xcnnews.com/xz/2707643.html
61. JavaScript Lab 預期成果 • 每頁顯示一題目，使用者選擇後按下按鈕 • 最後會出現結果，並可重新開始作答 • 按鈕會依情境改變：開始、下一題、重新開始 61
62. JavaScript Lab 檔案 • index.html：主要顯示頁面 • main.js：主要程式運作 • package.json：專案設定檔 • style.css：網頁樣式檔 • data.js：存放資料 62
63. JavaScript Lab index.html 畫面 • 匯入 data.js、main.js • 建立標題、問題與選項區塊、選項區塊、按鈕 63
64. JavaScript Lab data.js • 直接下載使用 64 https://github.com/ryan403/love-taste-quiz/
65. JavaScript Lab 觀察data.js • 與原始心理測驗內容比對 • 了解 { }、[ ] 的用法 • Dictionary { } –Key-value Pair • Array [ ] –有順序性 65
66. JavaScript Lab package.json • 讓window物件直接在各個js檔可以使用 66
67. JavaScript Lab style.css 畫面呈現優化 67
68. JavaScript Lab main.js • 建立變數、建立按鈕事件處理 68
69. JavaScript Lab main.js • 兵分兩路，開始作答或繼續作答 • 想想一開始作答跟其他題的作答有什麼不一樣？ • 畫面上只有一顆按鈕 69
70. JavaScript Lab main.js 第一題的顯示 70
71. JavaScript Lab main.js - else • 檢查哪一個選項被使用者選取 71
72. JavaScript Lab main.js - else • 是要往下一題顯示還是通往結果 72
73. JavaScript Lab main.js – 通往最終結果 • 顯示結果標題、結果詳細內容 73
74. JavaScript Lab main.js – 顯示下一題 • 注意題號 74
75. JavaScript Lab 總算完成！ 75
76. JavaScript Lab Recap • HTML –div、h2、radio、label、button、checked • JavaScript –if...else –==、null • jQuery –:radio、empty()、attr()、each() –return false • 資料檔案 –陣列、字典、第x個、多層存取 76
77. JavaScript Lab Lab • PDP性格測驗 77
78. JavaScript Lab JavaScript Lab RPG極簡雛形製作 Ryan Chung ryan@iii.org.tw 78
79. JavaScript Lab 需求 • 做一個九宮格可以移動的遊戲雛形 • 可以移動主角，但不會走出範圍 • 可以判斷遇到人、障礙物 • 可以判斷走到終點 • 主角的圖案跟方向一致 79
80. JavaScript Lab 檔案 • index.html：主要顯示頁面 • main.js：主要程式運作 • package.json：專案設定檔 • style.css：網頁樣式檔 • images：存放圖片的資料夾 (https://ppt.cc/fN2Eox) 80
81. JavaScript Lab package.json • 讓window物件直接在各個js檔可以使用 81
82. JavaScript Lab index.html • 標題、canvas、div、p 82
83. JavaScript Lab style.css 83
84. JavaScript Lab main.js • 全域變數宣告、事件觸發 84
85. JavaScript Lab main.js • 設定地形、擺上主角 85
86. JavaScript Lab main.js • 擺上障礙物、敵人 86
87. 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
88. JavaScript Lab main.js • 按鍵判斷 • 座標設定 • 排除其他狀況 88
89. JavaScript Lab main.js • 判斷目標位置是否在邊界內 • 判斷目標位置是否有障礙物/敵人 89
90. JavaScript Lab main.js • 依據目標位置內容，顯示提示訊息於下方 90
91. JavaScript Lab 總算完成！進行測試 • 主角是否會走出邊界？ • 是否遇到障礙物、敵人會無法走，並出現訊息 • 是否有判斷抵達終點？ • 是否有依方向轉頭？ 91
92. JavaScript Lab Recap • HTML –canvas、div、id • JavaScript –image load、canvas draw image、cut image –for ... in、array、switch –keydown、preventDefault • 資料檔案 –圖片 92
93. JavaScript Lab Lab • 可以16 x 16嗎？ • 一個物品可以跨越多格嗎？ • 如何寫出小精靈？ • 如何寫出OOXX遊戲？ 93
94. JavaScript Lab JavaScript Lab Youtube心情點唱機 Ryan Chung ryan@iii.org.tw 94
95. JavaScript Lab 想要解決的問題 • MTV Video前面故事很長，只想聽副歌 • 希望可以串起來播放 • 可以方便設定每首歌的播放開始與結束時間 • 畫面總是充滿著置入行銷連結 • 不想結束時看到一堆相關影片 95
96. JavaScript Lab 不想看到最上面的標題 96
97. JavaScript Lab 每次影片結束時都會有一堆相關影片 97
98. JavaScript Lab 影片播放時常有置入行銷連結 98
99. JavaScript Lab 預期畫面 • 按下按鈕開始播放，並顯示歌曲標題 • 播完一首會接著播下一首 • 都只播設定好的副歌段落 99
100. JavaScript Lab 檔案 • index.html：主要顯示頁面 • main.js：主要程式運作 • package.json：專案設定檔 • style.css：網頁樣式檔 • playList.js：影片來源與播放起訖時間 100
101. JavaScript Lab index.html • iframe_api、playList.js、h1、div、button 101
102. JavaScript Lab package.json • 讓window物件直接在各個js檔可以使用 102
103. JavaScript Lab style.css 103
104. JavaScript Lab playList.js 104
105. JavaScript Lab main.js 105
106. JavaScript Lab 當Youtube API準備好時，設定播放器 106
107. JavaScript Lab 當播放器準備好時，設定按鈕事件 107
108. JavaScript Lab 一首播完就跳下一首 108
109. JavaScript Lab Recap • HTML –h1, h2, div, id, button • JavaScript –event trigger, object –if...else if • 資料檔案 –陣列 • 外部資源 –Youtube iFrame API 109
110. JavaScript Lab Lab • 瀏覽YouTube IFrame Player API • 瀏覽Player 變數有哪些 • 應用 –網頁遊戲與影片結合，勝利或特定情況就撥不同 影片 –影片串接 110
111. JavaScript Lab JavaScript Lab 網頁整合 Ryan Chung ryan@iii.org.tw 111
112. JavaScript Lab 目標 • 把目前做過的五個練習頁面變成一個網站 • 有一個首頁，然後可以跳至每個練習頁面 • 每個練習頁面也可以互相連結 • 每個練習頁面也可以回到首頁 112
113. JavaScript Lab Bootstrap • 方便好用的樣板，並已考慮桌面與行動端 113 https://getbootstrap.com/
114. JavaScript Lab Example : Carousel • 我們用Carousel這個範例來整合 • 下載：https://ppt.cc/f27Lrx 114 https://getbootstrap.com/docs/4.3/examples/
115. JavaScript Lab 建立一個新專案 • 在電腦中新增一個資料夾：MergePractice • 將剛才解壓縮的內容放至這個資料夾 • 再將過去練習的五個資料夾都搬進來 115
116. JavaScript Lab 首頁測試 • 先確定樣板範例的 index.html有正常運作 116
117. JavaScript Lab 新增 RandomSelect.html • 在資料夾中增加RandomSelect.html • 修改index.html上方的選單 117
118. JavaScript Lab 編輯RandomSelect.html • 先將index.html中的所有內容貼至 RandomSelect.html • 上方Head中，加入需要的CSS 118
119. JavaScript Lab 編輯RandomSelect.html • 修改上方選單中的連結 119
120. JavaScript Lab 編輯RandomSelect.html • main區塊中的大部分內容都刪掉 • 將原本RandomSelect中的index裡的Body中的內容貼過來 120
121. JavaScript Lab 編輯RandomSelect.html • 最下方加上我們需要的JS檔 121
122. JavaScript Lab RandomSelect中的main.js • 合併後需要考量選擇器是否要調整寫法 122
123. JavaScript Lab 測試 • 首頁可跳至RandomSelect，也可再回來 • RandomSelect可正常運作 123
124. JavaScript Lab 相同方法製作另外四個頁面 • 建立xxx.html • 把RandomSelect.html的內容貼過來 • 加上會用到的CSS • 修改Main區塊中的內容(原專案index.html) • 加上會用到的JS • 測試 124
125. JavaScript Lab 細節 • 增加頁面後，要再回去改其他幾頁的選單 • active類別可以讓該選單文字為白色 • 該頁面自己的選單href屬性設定為# • js檔中的圖片路徑 125
126. JavaScript Lab Recap • Bootstrap –樣板套用與修改 –選單 • JavaScript –放的位置、選擇器調整 • CSS –放的位置 • HTML –頁面超連結 126
127. JavaScript Lab JavaScript Lab 網站上線 Ryan Chung ryan@iii.org.tw 127
128. JavaScript Lab 目標 • 將完成的網站上線 128
129. JavaScript Lab 使用 GitHub Pages 129 https://pages.github.com/
130. JavaScript Lab 註冊一個GitHub帳號 130 https://github.com/join
131. JavaScript Lab 登入後，建立一個新的專案 • 點選照片旁邊的+，New repository 131 https://github.com/new
132. JavaScript Lab 本機設定 • 打開終端機應用程式 –Windows：cmd –Mac：Terminal • 找到專案資料夾 –cd MergePractice • Git 初始化 –git init • 加入所有檔案 –git add . 132
133. JavaScript Lab 本機設定 • 設定上傳描述標記 – git commit –m "First commit" • 對應遠端位置 – git remote add origin https://github.com/YourUserName/YourProgectName.git • 上傳檔案 – git push –u origin master 133
134. JavaScript Lab 設定GitHub Pages • 在Github網站中，進入自己的專案 • 點擊 Settings • 下拉至GitHub Pages • 將Source設定為 master branch • 按下Save 134
135. JavaScript Lab 測試網站是否已上線 • 打開瀏覽器，輸入網址 – https://YourUserName.github.io/YourProjectName 135
136. JavaScript Lab Recap • GitHub –註冊帳號 –建立Repo • 本機端 –終端機下指令 –建立Git、對應遠端、加入、標記、上傳 • GitHub –設定 –GitHub Page、Source Master Branch 136