程式語言與邏輯 高慧君 台北市立南港高中 2006年12月22日
電腦在生活中扮演的角色 教學者 (tutor) 工具 (tool) 受教者 (tutee) 學生能運用電腦輔助學習軟體進行學科學習 學生能運用電腦解決統計分析、文書處理、資料管理、與他人溝通等問題 受教者 (tutee) 電腦能接受命令並執行動作 學生為了指揮電腦作事，不但必須了解所欲執行的任務，且須精通與電腦交談的語言
網頁程式設計 靜態網頁設計 介紹網頁的標籤語言 (HTML)。 動態網頁設計 介紹網頁客戶端的程式語言(JavaScript)。
時間安排 (18小時) 標籤語言 (100分鐘) Java Script (800分鐘) 基本結構 文字標籤 圖片標籤 表格標籤 超連結標籤 物件 事件 函式 變數與常數 陣列 運算式 基本邏輯結構
教 學 想 法 (1) Learner Centered Environment 以同學們的經驗為出發點， 設計出案例為本之教材， 以期望能夠幫助同學們， 將日常生活經驗轉化與提昇為 電腦領域的專業思維。
教 學 想 法 (2) Knowledge Centered Environment 整理各教學單元之重點編製為授課講義， 循序地介紹相關原理與軟體功能， 以補足案例中所缺乏的知識結構性， 將零碎的學習經驗精緻化為系統化的記憶。
Hyper Text Markup Language 靜態網頁設計 (HTML) Hyper Text Markup Language
靜態網頁排版 (1) HTML網頁的基本結構 <html> <head> <title>網頁的標題</title> </head> <body bgcolor=yellow text = blue> 網頁的內容 </body> </html>
靜態網頁排版 (2) HTML網頁的基本結構 <html> <head> 在文件中分為： 頭部元件 <head>….</head> 身體元件 <body>….</body> <html> <head> <title>網頁的標題</title> </head> <body bgcolor=yellow text = blue> 網頁的內容 </body> </html>
靜態網頁排版 (3) HTML網頁的基本結構 <html> <head> 頭部元件包含檔案相關資訊， 例如：網頁的標題<title>…</title> <html> <head> <title>網頁的標題</title> </head> <body bgcolor=yellow text = blue> 網頁的內容 </body> </html>
靜態網頁排版 (4) HTML網頁的基本結構 <html> <head> 身體元件顯示網頁的內容 標籤中可加入相關屬性設定， 例如： 背景顏色(bgcolor) 背景圖(background 文字顏色(text) <html> <head> <title>網頁的標題</title> </head> <body bgcolor=yellow text = blue> 網頁的內容 </body> </html>
HTML網頁的基本結構 Title yellow blue 標題內容 Head HTML bgcolor text Body
靜態網頁排版 (5) 文字的排版 <font face=細圓體 size=20pt color=blue> 文字內容 範例 <font face=細圓體 size=20pt color=blue> 文字內容 </font>
靜態網頁排版 (6) 圖片的排版 <img src=pic.gif width=200 height=300 border=0> 範例 <img src=pic.gif width=200 height=300 border=0>
靜態網頁排版 (7) 表格的排版 地區 溫度 台北 12~18 彰化 20~24 <table> <tr> <td>地區</td> <td>溫度</td> </tr> <td>台北</td> <td>12~18</td> <td>彰化</td> <td>20~24</td> </table> 範例 地區 溫度 台北 12~18 彰化 20~24
靜態網頁排版 (8) 超連結 以文字做為連結點： <a href=小叮呤.htm>小叮呤</a> 以圖片做為連結點： <a href=雪人.htm><img src=snow.gif></a> 範例
靜態網頁排版 (9) Font size 20pt 文字內容 Body A Table Img src 圖片檔名 TD 儲存格內容 TR href 網址 超連結點
動態網頁主題設計 主題：動物保育
網頁主題設計 (1) 需準備的素材 (1) 動物圖片一張 (2) 保育宣導文字一句 (3) 動畫小圖示若干個 作品觀摩
網頁主題設計 (2) 找圖片 在 google 輸入關鍵詞「動物名稱」，選擇「圖片」。
網頁主題設計 (3) 找標語 進入「中文維基百科」，搜尋「北極熊」。
網頁主題設計 (4) 找小圖示 進入「阿芳圖庫」，選取「素材屋」。
網頁主題設計 (5) 找網頁程式 進入「麻辣學園」，選擇「JavaScript」。
網頁主題設計 (6) Java Script：漫天飛舞 修改「圖片檔數目」及「圖片檔名稱」
網頁主題設計 (7) Java Script：游標跑馬燈 修改跑馬燈的文字內容「message」
動態網頁主題設計 主題：撲克牌遊戲
案例研究(1)：撲克牌發牌 基本觀念 物件 函式 事件 指定運算 <html> <head> <script language=JavaScript> function deal() { document.images.card.src=”28.gif”; } </script> </head> <body> <img name=card src=”0.gif”> <input type=button value=發牌 onclick=deal() > </body>
案例研究(2)：隨機發牌 基本觀念 物件 函式 事件 指定運算 變數宣告 Math 物件 四則運算式 <html> <head> <script language=JavaScript> function deal() { var number; number=Math.floor(Math.random()*52+1); document.images.card.src=number + “gif”; } </script> </head> <body> <img name=card src=0.gif> <input type=button value=發牌 onclick=deal() > </body> </html>
? 案例研究(3)：隨機發兩張牌 基本觀念 物件 函式 事件 指定運算 變數宣告 Math 物件 四則運算式 <html> <head> <script language=JavaScript> function deal() { var number; number=Math.floor(Math.random()*52+1); document.images.card1.src=number + “gif”; document.images.card2.src=number + “gif”; } </script> </head> <body> <img name=card1 src=0.gif> <img name=card2 src=0.gif> <input type=button value=發牌 onclick=deal() > </body> </html> 基本觀念 物件 函式 事件 指定運算 變數宣告 Math 物件 四則運算式
案例研究(4)：交換位置 基本觀念 物件 函式 事件 指定運算 變數宣告 循序結構 <html> <head> <script language=JavaScript> function change() { var temp; temp = document.images.card1.src; document.images.card1.src = document.images.card2.src; document.images.card2.src = temp; } </script> </head> <body> <img name=card1 src=11.gif> <img name=card2 src=37.gif> <input type=button value=交換 onclick=change() > </body> </html>
案例研究(5)：隨機發五張牌 function deal() { var cards=new Array(53); for (i=1; i<=52; i++) { cards[i] = i; } number=Math.floor(Math.random()*52+1); temp = cards[number]; cards[number] = cards[i]; cards[i] = temp; document.images.card1.src=cards[1] + ".gif"; document.images.card2.src=cards[2] + ".gif"; document.images.card3.src=cards[3] + ".gif"; document.images.card4.src=cards[4] + ".gif"; document.images.card5.src=cards[5] + ".gif"; 基本觀念 陣列 重覆結構 洗牌演算法
案例研究(6)：洗牌演算法 洗牌 原始資料：1, 2, 3, 4, ……, 52 重新洗牌：26, 31, 15, 7, ……, 49 亂數1 洗牌 原始資料：1, 2, 3, 4, ……, 52 重新洗牌：26, 31, 15, 7, ……, 49 演算法 (1) 從數字1~52中隨機選出一個數，以 r 表示 (2) 將第1個位置的數與第r個位置的數交換 (3) 應用(1)(2)的步驟於剩餘位置的每個數字
案例研究(6)：洗牌演算法 洗牌 原始資料：1, 2, 3, 4, ……, 52 重新洗牌：26, 31, 15, 7, ……, 49 亂數2 洗牌 原始資料：1, 2, 3, 4, ……, 52 重新洗牌：26, 31, 15, 7, ……, 49 演算法 (1) 從數字1~52中隨機選出一個數，以 r 表示 (2) 將第1個位置的數與第r個位置的數交換 (3) 應用(1)(2)的步驟於剩餘位置的每個數字
案例研究(6)：洗牌演算法 洗牌 原始資料：1, 2, 3, 4, ……, 52 重新洗牌：26, 31, 15, 7, ……, 49 亂數3 洗牌 原始資料：1, 2, 3, 4, ……, 52 重新洗牌：26, 31, 15, 7, ……, 49 演算法 (1) 從數字1~52中隨機選出一個數，以 r 表示 (2) 將第1個位置的數與第r個位置的數交換 (3) 應用(1)(2)的步驟於剩餘位置的每個數字
案例研究(6)：洗牌演算法 洗牌 原始資料：1, 2, 3, 4, ……, 52 重新洗牌：26, 31, 15, 7, ……, 49 亂數4 洗牌 原始資料：1, 2, 3, 4, ……, 52 重新洗牌：26, 31, 15, 7, ……, 49 演算法 (1) 從數字1~52中隨機選出一個數，以 r 表示 (2) 將第1個位置的數與第r個位置的數交換 (3) 應用(1)(2)的步驟於剩餘位置的每個數字
案例研究(6)：洗牌演算法 洗牌 原始資料：1, 2, 3, 4, ……, 52 重新洗牌：26, 31, 15, 7, ……, 49 亂數5 洗牌 原始資料：1, 2, 3, 4, ……, 52 重新洗牌：26, 31, 15, 7, ……, 49 演算法 (1) 從數字1~52中隨機選出一個數，以 r 表示 (2) 將第1個位置的數與第r個位置的數交換 (3) 應用(1)(2)的步驟於剩餘位置的每個數字
案例研究(6)：洗牌演算法 洗牌 原始資料：1, 2, 3, 4, ……, 52 重新洗牌：26, 31, 15, 7, ……, 49 亂數6 洗牌 原始資料：1, 2, 3, 4, ……, 52 重新洗牌：26, 31, 15, 7, ……, 49 演算法 (1) 從數字1~52中隨機選出一個數，以 r 表示 (2) 將第1個位置的數與第r個位置的數交換 (3) 應用(1)(2)的步驟於剩餘位置的每個數字
案例研究(6)：洗牌演算法 洗牌 原始資料：1, 2, 3, 4, ……, 52 重新洗牌：26, 31, 15, 7, ……, 49 亂數7 洗牌 原始資料：1, 2, 3, 4, ……, 52 重新洗牌：26, 31, 15, 7, ……, 49 演算法 (1) 從數字1~52中隨機選出一個數，以 r 表示 (2) 將第1個位置的數與第r個位置的數交換 (3) 應用(1)(2)的步驟於剩餘位置的每個數字
案例研究(6)：洗牌演算法 洗牌 原始資料：1, 2, 3, 4, ……, 52 重新洗牌：26, 31, 15, 7, ……, 49 (1) 從數字1~52中隨機選出一個數，以 r 表示 (2) 將第1個位置的數與第r個位置的數交換 (3) 應用(1)(2)的步驟於剩餘位置的每個數字
案例研究(6)：洗牌演算法 洗牌 原始資料：1, 2, 3, 4, ……, 52 重新洗牌：26, 31, 15, 7, ……, 49 (1) 從數字1~52中隨機選出一個數，以 r 表示 (2) 將第1個位置的數與第r個位置的數交換 (3) 應用(1)(2)的步驟於剩餘位置的每個數字
Java Script 基本概念 註：可以配合「流程圖」單元的例題授課
物件 (50分鐘) 教師說明什麼是物件 教師示範常用的物件 (1) 物件的屬性 (2) 物件的事件 (1) document物件 (2) image物件 (3) Math物件
函式 (50分鐘) 教師說明什麼是函式 教師示範函式的使用 function 函式名稱(參數1, 參數2....) { 函式內容 return 某值; } 教師示範函式的使用
變數與常數 (50分鐘) 教師說明什麼是變數 教師說明變數的資料型態 (1) 數值 (2) 字串 (3) 布林值 (4) NULL
變數與常數 (50分鐘) 教師示範變數的使用 教師介紹資料型態轉換函數 (1) var number = 28 // 數值 (2) var student_name = “林小華” // 字串 教師介紹資料型態轉換函數 (1) eval( ) 將字串轉為數值 (2) parseInt( ) 將字串轉為指定底數的整數 (3) parseFloat( ) 將字串轉為浮點數值
運算式 (50分鐘) 教師說明什麼是運算元 教師說明什麼是運算式 (1) 數學運算元：+, -, *, /, % (2) 指定運算元：= (3) 比較運算元：>, ==, <, >=, <=, <> (4) 邏輯運算元：&&, ||, ! (5) 字串運算元：+ 教師說明什麼是運算式 number = Math.random()*52+1
陣列 (50分鐘) 教師說明什麼是陣列 教師示範陣列的使用 arrayObjectName = new Array([arrayLength]) arrayObjectName = new Array([element0,element1, …elementN]) 教師示範陣列的使用 cards = new Array(52) cards[1] = 1 cards[2] = 2 cards[3] = 3 cards[4] = 4
基本邏輯結構 (150分鐘) 教師說明什麼是循序結構 教師說明什麼是選擇結構 教師說明什麼是重複結構 單向選擇結構 雙向選擇結構 計次式重複結構 條件式重複結構 遞迴式重複結構
教育理論與 程式語言教學活動
兩大學派 指導主義 (Instructionalism) 建構主義 (Constructivism) 著重教師角色的「教學理論」 例如：Bloom的精熟學習理論 (Mastery Learning) 建構主義 (Constructivism) 著重學生角色的「學習理論」 例如：Gagné的信息處理模型(Information Processing Model) Piaget的認知建構論(cognitive construmctivism) Vygotskey的社會建構論(social constructivism)
指導主義 (1) 指導主義(instructionalism) 知識本身與學知識的人是分別獨立存在的。 學生在面對新知識時像一張白紙，當外界對它塗上知識的色彩，它才獲得新知識。 教育過程是教師以權威對有如空白的學生指導，替他們建立知識。 以教師與教材為中心的教學方式。
指導主義 (2) Bloom 教學目標分類 情感領域 認知領域 6.評價 5.綜合 5.性格化 4.分析 4.組織 3.運用 3.價值評價 2.領會 2.反應 1.知識 1.接受
指導主義 (3) Bloom 學校學習模式 學習結果 學生特點 成績水準和種類 先決認知行為 學習任務 學習速率 先決情感行為 情感結果 教學質量
指導主義 (4) Bloom 精熟學習理論 學習任務中，包含許多小單位，有些是獨立的。 1 2 3 4 5 或 幾種可能的 學習安排 2 1 一組不按順序排列的學習任務
指導主義 (4) Bloom 精熟學習理論 學習任務中，包含許多小單位，有些緊密相關的。 前項學習任務是後項學習任務的必要條件 5 1 2 3 4 5 必須的學習安排 一組按順序排列的學習任務
建構主義 (1) 建構主義(Constructivism) 知識是基於學習者在現實世界中， 事務經驗及事件本身的作用關係。 學習是心智建造的結果。 學生不可能象白紙一般，而是帶著已有的觀念，去接觸新觀念。
建構主義 (2) 建構主義(Constructivism) 當新舊知識無法融合銜接時，學生會發生 「認知衝突」的現象。 教師以輔導者的立場，幫助發生認知衝突的學生，讓他們能夠把新舊知識兩者比較分析，以排除衝突，達到真正了解新資訊的意義。
建構主義 (3) Gagné的信息處理模型 動機階段 1. 激活動機 教師的教學事項 學生的學習階段 期望 2. 向學習者告知學習目標 注意： 選擇知覺 領會階段 3. 引起注意 編碼： 初步儲存 獲得階段 4. 刺激回憶 5. 提供學習指導 記憶儲存 保持階段 恢復 6. 增強保持 回憶階段 遷移 概括階段 7. 促進學習遷移 反應 操作階段 反饋階段 8. 引起操作：提供反饋 強化
建構主義 (4) Piaget的認知建構論 吸收知識的基本認知架構稱為基模(scheme)。 對學習者而言 新知識與原來預期一樣，知識直接進入資料庫 新知識與原來預期不一樣，你有三種選擇： 不去管他們(很平常的作法) 在腦中改變它們使這些知識能契合腦中已有的資訊(更平常做法) 改變思想方式使與新知識契合(很不平常的做法) 消除前後差異的唯一方法，就是使基模組被修正。 迷思概念
建構主義 (5) 迷思概念(misconception) 是一種學習者自己建構出來的，針對自己經驗的合理的解釋，但卻是一種不周全的解釋，學習者可能忽略許多應考慮的因素。 可以說是和『標準答案』不一樣的想法 可以說是一種『錯誤答案』 也可以是一種不知道正確答案的迷惑
建構主義 (6) 迷思概念：以前的人認為世界是平的 矛盾： 站在岸上看出海的船，都是先不見船頭，再次是船尾，然後才是船桿
建構主義 (7) “Fish is Fish” (1970) Written by Leo Lionni 看看小魚兒在想像飛翔的鳥、乳牛、站著的人類 都是〝魚〞的變身 Leo Lionni的圖畫裡 有著認知發展中 具體運思期的表徵
建構主義 (8) Vygotsky 的社會建構論 認為智力發展最主要的引擎是文化。 努力探究語言在建構過程中所扮演的角色。 認為人如果沒有機會講話，學習就無從發生。 在教學上著名的應用有「鷹架」與「近側發展區間」
建構主義 (9) 鷹架理論 (Scaffolding) 提供符合學生認知層次的支持、導引和協助， 以幫助生由需要協助而逐漸能夠獨立完成某一任務，進而使其由低階的能力水準發展到高階的能力水準。
建構主義 (10) 近側發展區 (Zone of Proximal Development，或ZPD) Vygotsky認為學生的能力有兩種。 實際能力：學生能夠獨力解決問題的能力水準。 潛在能力：學生在教師的指導協助，或在與能力較佳的 同儕合作下，得以解決問題之可能到達的能力水準。 在實際能力和潛在能力之間存在有一段待發展的距離， 即「近側發展區」。
The End …. 敬請指教～