• 姓名: YOHOHO
• 學號: 4070c023
• 回到個人首頁

互動人機介面

• 期末
  • 例題 1
  • 例題 1-txt
  • 例題 2
• 第十二堂課
  • 例題 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使用上述的資料，搭配相關的說明來輸出 JSON 資訊：
  • 例題 11-1-3使用多人的資料，建立統一的樣式輸出之 JSON 物件
  • 例題 11-1-4假裝上一題設定的 JSON 樣式為 API 回傳值，這時就需要用到 JSON.parse 的轉換功能！
  • 例題 11-2-1畫方塊canvas
  • 例題 11-2-2使用 canvas 繪製路徑圖示
  • 例題 11-2-3使用 canvas 繪製星星圖示
  • 例題 11-2-4使用 canvas 繪製 UFO 飛碟
  • 例題 11-2-5使用 canvas 的功能進行美化作業
  • 例題 11-3-1將整張圖示放置到 canvas 畫布中，同時進行畫面重製處理等任務
  • 例題 11-3-2讓照片顯示特殊樣式，提供焦點給使用者明瞭位置
  • 例題 11-3-4將畫布的元素進行旋轉
  • 例題 11-4-1課後練習
  • 例題 11-4-2課後練習
  • 例題 11-4-3課後練習
• 第十堂課
  • 例題 10-2-1使用 javascript 的功能，調整傳統單純 CSS 無法處理的方塊問題
  • 例題 10-2-建立 function.js 檔案，並將上面的函數丟進去！備用！
  • 例題 10-2-3開始使用 Ajax 進行背景的資料傳輸行為
  • 例題 10-3-1使用既有的 HTML 網頁資料，以 ajax 進行篩選的作業
  • 例題 10-3-1取得額外的文件，直接丟進系統中的某個方塊應用
  • 例題 10-4-1設計網頁小方塊格式
  • 例題 10-4-2讓小方塊填入中央氣象局的氣象參數資料
  • 例題 10-4-3透過自己網站的中繼站，進行天氣狀態嵌入
  • 例題 10-4-4氣象資料的更新功能
  • 例題 10-5-1課後練習中繼站
  • 例題 10-5-1-1課後練習
• 第九堂課
  • 例題 9-1-1了解不同的事件，使用 javascript 內部事件的處理方式，取消 HTML 原始碼內的事件觸發語法
  • 例題 9-1-2使用 addEventListener 取代 onmouse 等事件監聽方式
  • 例題 9-1-3使用 removeEventListener 移除 onmouse 等事件監聽方式
  • 例題 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開始射擊飛碟動
  • 例題 9-5-1課後練習
  • 例題 9-5-2課後練習
  • 例題 9-5-3課後練習
• 第八堂課
  • 例題 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-3設計標題圖片的隨機變換功能
  • 8-3-4設計標題圖片的隨機變換功能-加上淡出淡入特效
  • 8-3-5設計小方塊會在大方塊裡面，沿著圍牆四處走動
  • 8-4-3設計小方塊會在大方塊裡面，沿著圍牆四處走動
  • 8-4-1課後練習
  • 8-4-2課後練習
• 第七堂課
  • 例題 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 列出目前頁面的所有資料
  • 例題 7-4-2 列列出目前瀏覽器所在的螢幕相關
  • 例題 7-5-1 課後練習
  • 例題 7-5-3 課後練習
• 第六堂課
  • 例題 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 撲克牌翻牌小遊戲
  • 例題 6-5-1 課後練習
  • 例題 6-5-2 課後練習
• 第五堂課
  • 例題 5-1-1 自己決定骰子數量
  • 例題 5-1-2 使用迴圈職骰資
  • 例題 5-1-3 巢狀迴圈 用九九乘法表
  • 例題 5-1-4 巢狀迴圈 用九九乘法表疫點點UI
  • 例題 5-2-1 植樹
  • 例題 5-3-1 用 WHILE 迴圈數字做三角形
  • 例題 5-3-1-1 用 WHILE 迴圈數字做三角形
  • 例題 5-3-2 上台報告抽籤
  • 例題 5-3-3 上台報告抽籤
  • 例題 5-4-1 課後練習
  • 例題 5-4-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
  • 例題 4-5-1 課後練習
• 第三堂課
  • 例題 3-1-1 數值型別的變數宣告
  • 例題 3-1-2 字串累加予刪除
  • 例題 3-1-3 了解變數型別，很重要
  • 例題 3-2-1 使用 typeof() 判斷型別
  • 例題 3-2-2 變更型別 parseFloat()
  • 例題 3-3-1 來做溫度攝氏與華視
  • 例題 3-3-2 用是不是年輕人來顯示布林直
  • 例題 3-4-1 課後練習
• 第二堂課
  • 例題 2-2-1 第一個互動getElementBy??
  • 例題 2-3-1 使用 function
  • 例題 2-4-1 使用 .innerHTML 改變元素的內部資料
  • 例題 2-4-2 使用 .outerHTML 改變元素的外部資料
  • 例題 2-5-1 課後作業
• 第一堂課
  • 例題 1-2-1 使用 alert 警告視窗
  • 例題 1-2-2 使用 document.write
  • 例題 1-2-3 使用 document.write搭配字串與數值
  • 例題 1-3-1 使用 onclick 進行簡單互動
  • 例題 1-4-1 地球