• 姓名: 丁丁
• 學號: 4070c027
• 回首頁

互動人機介面

• 期末
  • 點餐
  • 小遊戲
• 課後練習
  • 第一課：計算地球面積
  • 第二課：出拳
  • 第三課：計算BMI
  • 第四課：使用if控制UI的表單進行填寫
  • 第五課：推播網頁安全色的色碼大全
  • 第五課：找出某數值以內最大質數
  • 第六課：製作真實名單抽籤
  • 第六課：結合複選表單抽籤
  • 第六課：製作真實名單後，持續以複選表單來抽籤
  • 第七課：自動推算成績並輸出
  • 第七課：匯入資料成為二維陣列，並計算學生成績與顯示成績
  • 第七課：檢查身分證格式是否正確
  • 第七課：網頁小算盤
  • 第八課：產生許多殭屍的createElement的作法
  • 第八課：倒數器
  • 第八課：會跑的車車
  • 第九課：打殭屍
  • 第九課：會下降的飛碟
  • 第九課：拖曳配對遊戲
  • 第十課：中繼API
  • 第十課：結合API的網站
  • 第十一課：崑山資傳系老師們的簡介
  • 第十一課：處理JSON小程式
  • 第十一課：一台小飛機
  • 第十二課：手錶錶面更豐富
  • 第十二課：設飛碟遊戲更生動
• 第一堂課
  • 例題1-2-1:alert警告視窗
  • 例題1-2-2:document.write
  • 例題1-2-3:document.write搭配字串與數值
  • 例題1-3-1:透過 onclick 進行簡單互動
• 第二堂課
  • 例題2-2-1:第一個互動 getElementById
  • 例題2-3-1:使用 function 功能
  • 例題2-4-1:使用 .innerHTML 改變元素的內部資料
  • 例題2-4-1:使用 .outerHTML 改變元素的外部資料
• 第三堂課
  • 例題3-1-1:數值型別的變數宣告
  • 例題3-1-2:進行字串的累加與刪除
  • 例題3-1-3:使用 typeof() 判斷型別
  • 例題3-2-1:了解變數型別，很重要喔!大家幾乎都是字串
  • 例題3-2-2:變更型別 parsdFloat
  • 例題3-3-1:來做攝氏與華氏溫度轉換
  • 例題3-3-2:用是不是年輕人來顯示布林值
• 第四堂課
  • 例題4-2-1:用if回應 BMI 的結果好不好
  • 例題4-2-2:用 if 回應 BMI 的結果好不好-多重判斷
  • 例題4-2-3:用 if 設計一點點 UI 計算面積
  • 例題4-3-1:用 switch 取代 if 設計一點點 UI 計算面積
  • 例題4-4-1:丟骰子比大小
  • 例題4-4-2:丟骰子比大小 一點點UI
• 第五堂課
  • 例題5-1-1:自己決定骰子的數量
  • 例題5-1-2:使用迴圈處理骰子的亂數資料
  • 例題5-1-3:巢狀迴圈，用9X9乘法表處理
  • 例題5-1-4:巢狀迴圈，用9X9乘法表處理UI
  • 例題5-2-1:計算是否為質數
  • 例題5-3-1:用while迴圈做數字三角形
  • 例題5-3-1-1:用for迴圈做數字三角形
  • 例題5-3-2:上台報告抽抽樂
  • 例題5-3-3:用do，while上台報告抽抽樂
• 第六堂課
  • 例題6-1-1:第一個陣列資料
  • 例題6-1-2:用陣列設計不重複的抽籤名單
  • 例題6-2-1:網路匯入名單
  • 例題6-3-1:用陣列做複選表單
  • 例題6-3-2:用陣列做複選表單-全選/全不選
  • 例題6-4-1:製作撲克牌
  • 例題6-4-2:製作撲克牌-洗牌的功能
  • 例題6-4-3:製作撲克牌-翻牌的功能
• 第七堂課
  • 例題7-1-1:取得 windex 物件屬性
  • 例題7-1-2:修改 windex 物件屬性
  • 例題7-2-1:數值物件的處理
  • 例題7-2-2:字串方法的應用
  • 例題7-2-3:只取我要的資料
  • 例題7-2-4:常數與屬性
  • 例題7-2-5:可憐老師算期末成績
  • 例題7-2-6:計算式--錯誤克服
  • 例題7-3-1:了解陣列的方法
  • 例題7-3-2:二維陣列的應用
  • 例題7-4-1:用for迴圈列出location的屬性
• 第八堂課
  • 例題8-1-1:取得 document 的屬性
  • 例題8-1-2:用createelement 建立1000個星星
  • 例題8-1-3:新增刪除元件
  • 例題8-2-1:取得日期物件的內容方法
  • 例題8-2-2:顯示各地的時間
  • 例題8-2-3:計算幾天後的日期
  • 例題8-2-4:算倒數時間
  • 例題8-3-1:碼表設計
  • 例題8-3-2:自動倒數計時
  • 例題8-3-3:自動抽換圖片
  • 例題8-3-4:自動抽換圖片+淡出淡入 (setTimeout)
  • 例題8-3-5:方塊沿線跑
• 第九堂課
  • 例題9-1-1:暫停淡入淡出的照片抽換
  • 例題9-1-2:承上，練習addEevenListener
  • 例題9-1-3:承上，最多讓你停三次
  • 例題9-2-1:開新視窗，占用螢幕1/4大
  • 例題9-2-2:我要滑鼠座標
  • 例題9-2-3:滑鼠拖曳事件
  • 例題9-3-1:HTML drag and drop 單一拖曳事件
  • 例題9-3-2:HTML drag and drop 多重拖曳事件
  • 例題9-3-3:HTML5 drag and drop 一個蘿蔔一個坑
  • 例題9-4-1:打UFO砲台製作
  • 例題9-4-2:開始發射砲彈
  • 例題9-4-3:處理連續移動跟射擊
  • 例題9-4-4:完成打UFO的小遊戲
• 第十堂課
  • 例題10-2-1:建立固定風格樣式
  • 例題10-2-3:第一個Ajax資料處理
  • 例題10-3-1:使用responseXML
  • 例題10-3-2:左側資料填入右側方塊
  • 例題10-4-1:設計天氣小方塊
  • 例題10-4-2:CORS 跨站 ajax 的問題
  • 例題10-4-3:中繼程式 API CWB
  • 例題10-4-4:採用自己網站 API 的方式處理
• 第十一堂課
  • 例題11-1-1:第一個 JSON: 用 AQI 做解釋
  • 例題11-1-2:一個自我介紹的 JSON 格式輸出
  • 例題11-1-3:JSON 的陣列格式
  • 例題11-1-4:Ajax 回傳 JSON.parse 功能
  • 例題11-2-1:第一個畫方塊的 Canvas 畫布
  • 例題11-2-2:不同路徑的繪製
  • 例題11-2-3:滿天星星
  • 例題11-2-4:繪製UFO
  • 例題11-2-5:打UFO的遊戲
  • 例題11-3-1:地圖縮放
  • 例題11-3-2:資傳系平面圖
  • 例題11-3-4:變形的企鵝
• 第十二堂課
  • 例題12-1-1:星星會跑的背景圖
  • 例題12-1-2:星星會跑的背景圖
  • 例題12-1-3:鐘錶的動畫
  • 例題12-2-1:鐘錶的動畫-有音效喔
  • 例題12-2-2:UFO-有音效喔
  • 例題12-3-1:太陽-地球-月球 轉轉轉
  • 例題12-3-2:圓餅圖