• 姓名: 張耕梓
• 學號: 4070C047
• 回個人首頁

互動人機介面

• 期末
  • 期末:點餐
  • 期末:點餐api
  • 期末:小遊戲
• 第十二堂課
  • 例題12-1-1讓星空圖示可以移動，主要是向下移動，讓砲台有點像是往上跑的感覺
  • 例題12-1-2將剛剛的技巧放置到射擊遊戲上
  • 例題12-1-3設計一個手錶表面與運作相關
  • 例題12-2-1指針轉動產生音效
  • 例題12-2-2讓遊戲有聲音
  • 例題12-3-1太陽、地球、月球的軌道與動畫示意
  • 例題12-3-2互動產生圓餅圖
• 第十一堂課
  • 例題11-1-1使用上述的資料，搭配相關的說明來輸出 JSON 資訊：
  • 例題11-1-2建立關於自己的一些簡易的自我介紹物件
  • 例題11-1-3使用多人的資料，建立統一的樣式輸出之 JSON 物件
  • 例題11-1-4假裝上一題設定的 JSON 樣式為 API 回傳值，這時就需要用到 JSON.parse 的轉換功能！
  • 例題11-2-1第一個方塊！
  • 例題11-2-2使用 canvas 繪製路徑圖示
  • 例題11-2-3使用 canvas 繪製星星圖示
  • 例題11-2-4使用 canvas 繪製 UFO 飛碟
  • 例題11-2-5使用 canvas 繪製 UFO 飛碟
  • 例題11-3-1使將整張圖示放置到 canvas 畫布中，同時進行畫面重製處理等任務
  • 例題11-3-2讓照片顯示特殊樣式，提供焦點給使用者明瞭位置
  • 例題11-3-4將畫布的元素進行旋轉
• 第十堂課
  • 例題10-2-1使用 javascript 的功能，調整傳統單純 CSS 無法處理的方塊問題
  • 例題10-2-2建立 function.js 檔案，並將上面的函數丟進去！備用！
  • 例題10-2-3開始使用 Ajax 進行背景的資料傳輸行為
  • 例題10-3-1使用既有的 HTML 網頁資料，以 ajax 進行篩選的作業
  • 例題10-3-2取得額外的文件，直接丟進系統中的某個方塊應用
  • 例題10-4-1設計網頁小方塊格式
  • 例題10-4-2讓小方塊填入中央氣象局的氣象參數資料
  • 例題10-4-3自己撰寫中繼網頁，達到避免 CORS 的問題
  • 例題10-4-4透過自己網站的中繼站，進行天氣狀態嵌入
• 第九堂課
  • 例題9-1-1使用 javascript 內部事件的處理方式，取消 HTML 原始碼內的事件觸發語法
  • 例題9-1-2使用 addEventListener 取代 onmouse 等事件監聽方式
  • 例題9-1-3使用 removeEventListener 的事件處理模式
  • 例題9-2-1根據螢幕的大小，自動規範新開視窗的大小
  • 例題9-2-2應用滑鼠移動事件，取得滑鼠游標的座標
  • 例題9-2-3應用滑鼠移動事件，設計物件的拖曳 (drag and drop) 行為
  • 例題9-3-1單一物件拖曳與單一拖曳目標
  • 例題9-3-2多重拖曳與放置目標
  • 例題9-3-3個蘿蔔一個坑的設計方式
  • 例題9-4-1製作一個可以用鍵盤移動的滑動小砲台
  • 例題9-4-2準備發射砲彈
  • 例題9-4-3發射砲彈後，砲台還能夠持續移動
  • 例題9-4-4開始射擊飛碟
• 第八堂課
  • 例題8-1-1使用 for .. in .. 迴圈，列出 document 的屬性
  • 例題8-1-2使用 for 迴圈，搭配 createElement 來建立新的元件
  • 例題8-1-3使用 for 迴圈，增加 INPUT 元素
  • 例題8-2-1使用 Date 物件的方法來取得相關的參數
  • 例題8-2-2使用 toLocaleString 的方法，都用台灣語系來顯示不同地區的時間
  • 例題8-2-3使用上述方法來取得未來日期
  • 例題8-2-4使使用上述方法開始倒數日期
  • 例題8-3-1設計網頁碼表功能
  • 例題8-3-2自動倒數計時
  • 例題8-3-3跑馬燈的淡出淡入功能
  • 例題8-3-4跑設計標題圖片的隨機變換功能-加上淡出淡入特效
  • 例題8-3-5設計小方塊會在大方塊裡面，沿著圍牆四處走動
• 第七堂課
  • 例題7-1-1取得瀏覽器視窗的相關屬性值
  • 例題7-1-2動態修改自己啟用的瀏覽器視窗相關視窗屬性參數
  • 例題7-2-1數值格式的轉化
  • 例題7-2-2了解字串物件的方法應用
  • 例題7-2-3將使用者輸入的資料立刻轉成大寫，並且避免輸入錯誤的方式
  • 例題7-2-4列出 Math 屬性
  • 例題7-2-5使用開根號函數進行成績計算
  • 例題7-2-6使用 error 物件檢查 eval 程式碼的錯誤
  • 例題7-3-1理解陣列的方法原因
  • 例題7-3-2匯入與直接輸出二維陣列
  • 例題7-4-1列出目前頁面的所有資料
• 第六堂課
  • 例題6-1-1設定好陣列後，將陣列內容用不同的方式印出來到螢幕上
  • 例題6-1-2不會重複的抽獎名單
  • 例題6-2-1讓使用者匯入名單來處理陣列的動作
  • 例題6-3-1以陣列的值來處理表單的生成
  • 例題6-3-2全選與全不選的 checkbox 按鈕
  • 例題6-4-1雙層迴圈搭配陣列來列出撲克牌牌面
  • 例題6-4-2撲克牌的洗牌效果
  • 例題6-4-3撲克牌翻牌小遊戲
• 第五堂課
  • 例題5-1-1用按鈕來決定數值的變化，針對 UI 的設計想法
  • 例題5-1-2使用迴圈處理骰子的亂數資料
  • 例題5-1-3使用巢狀迴圈處理99乘法表
  • 例題5-1-4巢狀迴圈一點點ui99乘法表
  • 例題5-2-1判斷質數
  • 例題5-3-1用while迴圈做數字三角形
  • 例題5-3-1-1用for迴圈做數字三角形
  • 例題5-3-2上台報告的抽籤
  • 例題5-3-3上台報告的抽籤
• 第四堂課
  • 例題4-2-1用if回應BMI的結果好不好
  • 例題4-2-2用if else 回應BMI結果
  • 例題4-2-3使用 if 設計簡單的 UI
  • 例題4-3-1使用 switch 設計簡單的 UI
  • 例題4-4-1使用亂數擲骰子，並與用戶比較大小
  • 例題4-4-2加上簡單 UI 設計
• 第三堂課
  • 例題3-1-1:數值型別的變數宣告
  • 例題3-1-2:進行文字的新增與刪減測試
  • 例題3-1-3:了解變數型別，很重要
  • 例題3-2-1:使用typeof() 判斷型別
  • 例題3-2-2:透過 parseFloat(), parseInt() 轉換文字為數值
  • 例題3-3-1:來做溫度攝氏與華氏溫度的轉換
  • 例題3-3-2:我是不是年輕人來顯示布林直
• 第二堂課
  • 例題2-2-1:第一個互動 getElementsById
  • 例題2-3-1:使用function功能
  • 例題2-4-1: 使用 .innerHTML 改變元素的內部資料
  • 例題2-4-2: 使用 outerHTML 功能，修改元件外部的資料
• 第一堂課
  • 例題1-2-1:使用alert警告視窗
  • 例題1-2-2:使用 document.write 函數
  • 例題1-2-3:使用 document.write 搭配字串與數值
  • 例題1-3-1:透果onclick進行簡單互動
  • 課後練習1-4:地球
• 回家作業
  第十一課
  • 11-4-1課後作業
  • 11-4-3課後作業
第十課
• 10-5-1課後作業
• 10-5-2課後作業
第九課
• 9-5-1課後作業
• 9-5-2課後作業
第八課
• 8-4-1課後作業
• 8-4-2課後作業
• 8-4-3課後作業
第七課
• 7-5-1課後作業
• 7-5-2課後作業
• 7-5-3課後作業
• 7-5-4課後作業
第六課
• 6-5-1課後作業
• 6-5-2課後作業
• 6-5-3課後作業
第五課
• 5-4-1:課後作業
• 5-4-2:課後作業
第四課
• 4-5-1:課後作業
第三課
• 3-4:課後作業
第二課
• 2-5:課後作業
第一課
• 課後練習1-4:地球