• 姓名: 郭哲瑋
• 學號: 4070C020
• 回首頁

互動人機介面設計

• 期末
  • 點餐
  • 猜骰子

• 作業
  
  
  • 作業 1-4-1:計算地球體積
  • 作業 2-5-1:猜拳
  • 作業 3-4-1:BMI
  • 作業 4-5-1:表單填寫
  • 作業 5-4-1:RGB色碼
  • 作業 5-4-2:質數
  • 作業 6-5-1:匯入名單與抽籤連動
  • 作業 6-5-2:選單與抽籤連動
  • 作業 6-5-3:匯入名單+選單與抽籤連動
  • 作業 7-5-1:自動算成績
  • 作業 7-5-3:檢查學號格式
  • 作業 10-5-1:API應用
  • 作業 10-5-2:資料整合
  • 作業 11-4-1:資傳老師簡介
  • 作業 11-4-3:畫飛機

• 第一堂
  • 例題 1-2-1:使用 alter 顯示歡迎訊息
  • 例題 1-2-2:使用 document.write 取代 alert 的文字展示
  • 例題 1-2-3:使用 document.write 搭配字串與數值
  • 例題 1-3-1:透過onclick進行簡單互動
  • 例題 1-3-1:透過onclick進行簡單互動

• 第二堂
  • 例題 2-2-1:第一個互動 getElement
  • 例題 2-3-1:使用function功能
  • 例題 2-4-1:使用 .innerHTML改變元素的內部資料
  • 例題 2-4-2:使用 .outerHTML改變元素的外部資料

• 第三堂
  • 例題 3-1-1:數值型別的變數宣告
  • 例題 3-1-2:進行字串的累加與刪除
  • 例題 3-1-3:使用typeof()判斷型別
  • 例題 3-2-1:變數型別(很重要!!!!)
  • 例題 3-2-2:變更型別 parseFloat()
  • 例題 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:巢狀迴圈，用九九乘法表處理
  • 例題 5-1-4:巢狀迴圈，用九九乘法表處理(加上一點 UI)
  • 例題 5-2-1:計算是不是質數
  • 例題 5-3-1:用while迴圈做數字三角形
  • 例題 5-3-2:號碼抽籤
  • 例題 5-3-3:號碼抽籤-用do執行迴圈

• 第六堂
  • 例題 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:取得 window 物件的屬性
  • 例題 7-1-2:修改 window 物件的屬性
  • 例題 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: 自動抽換圖片+淡入淡出
  • 例題 8-3-5:

• 第九堂
  • 例題 9-1-1:暫停淡入淡出照片抽換
  • 例題 9-3-1:HTML5 drag and drop單一拖曳事件
  • 例題 9-3-2:HTML5 drag and drop多重拖曳事件

• 第十堂
  • 例題 10-2-1:建立固定風格樣式
  • 例題 10-2-3:第一個 Ajax 資料處理
  • 例題 10-3-1:使用 responseXML
  • 例題 10-3-2:左側資料填入右側方塊
  • 例題 10-4-1:CORS 跨站 ajax 問題
  • 例題 10-4-2:設計天氣小方塊
  • 例題 10-4-3:中繼程式 API - CWB
  • 例題 10-4-4:採用自己網站 API 的方式處理

• 第十一堂
  • 例題 11-1-1:第一個 JSON: 用 AQI 做解釋
  • 例題 11-1-2:JSON: 自我介紹
  • 例題 11-1-3:JSON: 使用多人的資料，建立統一的樣式輸出之JSON物件
  • 例題 11-1-4:JSON:回傳與 JSON.parse 功能
  • 例題 11-2-1:第一個畫方塊的 Canvas畫布
  • 例題 11-2-2:不同路徑的繪製
  • 例題 11-2-3:星空圖
  • 例題 11-2-4:畫飛碟
  • 例題 11-2-5:打飛碟
  • 例題 11-3-1:地圖縮放
  • 例題 11-3-2:資傳系平面圖
  • 例題 11-3-4:圖片變形

• 第十二堂
  • 例題 12-1-1:星空動畫
  • 例題 12-1-3:時鐘動畫
  • 例題 12-2-1:時鐘動畫+音效
  • 例題 12-2-2:打飛碟+音效
  • 例題 12-3-1:太陽-地球-月亮 動畫
  • 例題 12-3-2:圓餅圖設計