O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.
設計⼈人學寫程式做什麼?
馮於懋@創新產品設計系.南臺科技⼤大學
May 1, 2014
• 每個⼈人都該學寫程式。
• 增強邏輯能⼒力,有助流程設計。
• 以更多元的⾓角度作設計。
• 跟⼯工程師溝通更容易。
• 可以⾃自⼰己做Prototype。
如果想要學寫程式,
應該從哪⼀一種語⾔言開始學起好呢?
英語。
但,今天不⽤用。
⽤用中⽂文語法學寫程式
變數
變數
• 變數就是儲存器
• ⽤用來儲存資料(數值、字串、物
件等等)
針對⼀一個變數,你只能對它:
• 設定變數
• 讀取變數
設定變數
將a設為10
將b設為5
!
a: 10
b: 5
讀取變數
將c設為a
將d設為b+3
!
c: 10
d: 8
⼩小組討論
a: 10
b: 5
我要作哪幾步才能交換兩變數的值,讓:
a: 5
b: 10
* 提⽰示:可以⽤用第三個變數c
運算
將c設為10+5
將c設為10-5
將c設為10*5
將c設為10/5
將c設為10-5*3
將c設為(10-5)*3
將c設為(a-b)*3
適⽤用情境
• 儲存現況:如現在遊戲的分數
• 暫存資料:如交換兩數中的c
• 常數:⼀一個在這程式裡會⼀一直⽤用
到但永不會變的數,如pi
• 傳遞資料:搭配函數使⽤用,有參
數和傳回值兩種
資料型態
• 數字
• 字串
• 布林值
• 陣列
• 物件
函數
函數
• ⼀一連串可重複利⽤用的程式碼
• 可傳⼊入參數
• 可傳回傳回值
⼀一連串可重複利⽤用的程式碼
定義:
做⼀一個美味蟹堡(){
先舖麵包
放上⽣生菜
放上⾁肉餅
加蕃茄醬
加酸⿈黃⽠瓜
蓋上麵包
}
呼叫:
做⼀一個美味蟹堡()
有傳⼊入參數的函數
定義:
做⼀一個美味蟹堡(x, y, z){
先舖麵包
放上⽣生菜 * x
放上⾁肉餅
加蕃茄醬 * y
加酸⿈黃⽠瓜 * z
蓋上麵包
}
呼叫:
做⼀一個美味蟹堡(1, 0.5, 2)
->
先舖麵包
放上⽣生菜 * 1...
有傳回值的函數
定義:
三⾓角形的斜邊⻑⾧長(a, b){
將c設為 (a^2 + b^2) ^ 0.5
傳回 c
}
呼叫:
將d設為 三⾓角形的斜邊⻑⾧長(3, 4) * 100 + "公分"
->
將c設為 (3^2 + 4^2) ^ 0...
⼩小組討論
在⽇日常⽣生活中,
舉⼀一個函數的例⼦子,
是可傳⼊入參數並有傳回值的?
以上述教的⽅方法寫下來,包含定義
與呼叫和執⾏行過程及結果。
判斷
判斷
• 如果 OO 就 XX
判斷
如果( OO )就{
XX
XX
XX
}
判斷
z: 10
b: 5
如果( z > b )就{
通過(30)
}
判斷
OO是個布林值,布林值
只有兩個可能:是/否
YES/NO
TRUE/FALSE
1/0
XX是要執⾏行的程式碼,
可以是多⾏行
⽐比較運算 >, <, =, >=, <=, !=
將a設為 10 > 5
a: YES
將a設為 10 < 5
a: NO
將a設為 10 = 5
a: NO
⽐比較運算 and
將a設為 YES and YES
a: YES
將a設為 YES and NO
a: NO
將a設為 NO and YES
a: NO
將a設為 NO and NO
a: NO
⽐比較運算 or
將a設為 YES or YES
a: YES
將a設為 YES or NO
a: YES
將a設為 NO or YES
a: YES
將a設為 NO or NO
a: NO
⽐比較運算 not
將a設為 not(YES)
a: NO
將a設為 not(NO)
a: YES
進階判斷
如果( OO )就{
XX
}否則就{
YY
}
⼩小組討論
⽼老婆:下班後買⼗十個包⼦子回來,如果看到賣⻄西⽠瓜的
就買⼀一個。
⽼老公:好。
下班後,⽼老公帶著⼀一個包⼦子回家。
⽼老婆:為什麼只有⼀一個包⼦子?
⽼老公:因為我看到賣⻄西⽠瓜的。
!
試⽤用剛剛學的判斷語法分別寫出⽼老婆的...
迴圈
迴圈
• 連續執⾏行⼀一段程式 n 次
迴圈
i由1到5{
在畫⾯面顯⽰示("$")
}
->
$
$
$
$
$
迴圈
i由1到5{
在畫⾯面顯⽰示(i)
}
->
1
2
3
4
5
巢狀迴圈
i由1到5{
j由1到i{
在畫⾯面顯⽰示(“$”)
}
}
->
$
$$
$$$
$$$$
$$$$$
無限迴圈
• 真正迴圈的定義⽅方式分成三部份
• 初始化
• 每⼀一圈結束要做的事
• 每⼀一圈結束後要繼續下⼀一圈的條件
• 無限迴圈就是指第三點的條件下錯
了,導致永遠離開不了這個迴圈
事件
事件
• 系統通知程式的管道
• 系統很有事的時候,會告知程式
事件
• 當 燙傷 就 沖脫泡蓋送
• 當 ⼿手指點到畫⾯面 就 進⼊入下⼀一⾴頁
• 當 搖⼀一下⼿手機 就 隨機排列播放
清單
事件處理函數
• 當發⽣生某事件時要執⾏行的函數
• 我們只需定義此函數,不⽤用呼叫
• 當發⽣生某事件時,系統會⾃自⼰己呼
叫它
事件處理函數
當⼿手指點到畫⾯面(){
XX
XX
XX
}
回顧
今天學到了
• 變數
• 函數
• 判斷
• 迴圈
• 事件
變數就是儲存器
⼀一連串可重複利⽤用的程式碼
如果 OO 就 XX
連續執⾏行⼀一段程式 n 次
系統通知程式的管道
說真的,如果想要學寫程式,
應該從哪⼀一種語⾔言開始學起好呢?
HTML / CSS / JavaScript
• 不⽤用特別的開發環境,⽤用記事本就可以寫,
⽤用瀏覽器就可以開。
• ⽀支援所有⾏行動裝置,容易跨平台。
• JavaScript較不嚴謹,適合初學者。
• JavaScript和Flash ActionScript、Java都很
類似,未...
結束。
Próximos SlideShares
Carregando em…5
×

設計人學寫程式做什麼?

4.395 visualizações

Publicada em

Publicada em: Engenharia
  • Seja o primeiro a comentar

設計人學寫程式做什麼?

  1. 1. 設計⼈人學寫程式做什麼? 馮於懋@創新產品設計系.南臺科技⼤大學 May 1, 2014
  2. 2. • 每個⼈人都該學寫程式。 • 增強邏輯能⼒力,有助流程設計。 • 以更多元的⾓角度作設計。 • 跟⼯工程師溝通更容易。 • 可以⾃自⼰己做Prototype。
  3. 3. 如果想要學寫程式, 應該從哪⼀一種語⾔言開始學起好呢?
  4. 4. 英語。
  5. 5. 但,今天不⽤用。
  6. 6. ⽤用中⽂文語法學寫程式
  7. 7. 變數
  8. 8. 變數 • 變數就是儲存器 • ⽤用來儲存資料(數值、字串、物 件等等)
  9. 9. 針對⼀一個變數,你只能對它: • 設定變數 • 讀取變數
  10. 10. 設定變數 將a設為10 將b設為5 ! a: 10 b: 5
  11. 11. 讀取變數 將c設為a 將d設為b+3 ! c: 10 d: 8
  12. 12. ⼩小組討論 a: 10 b: 5 我要作哪幾步才能交換兩變數的值,讓: a: 5 b: 10 * 提⽰示:可以⽤用第三個變數c
  13. 13. 運算 將c設為10+5 將c設為10-5 將c設為10*5 將c設為10/5 將c設為10-5*3 將c設為(10-5)*3 將c設為(a-b)*3
  14. 14. 適⽤用情境 • 儲存現況:如現在遊戲的分數 • 暫存資料:如交換兩數中的c • 常數:⼀一個在這程式裡會⼀一直⽤用 到但永不會變的數,如pi • 傳遞資料:搭配函數使⽤用,有參 數和傳回值兩種
  15. 15. 資料型態 • 數字 • 字串 • 布林值 • 陣列 • 物件
  16. 16. 函數
  17. 17. 函數 • ⼀一連串可重複利⽤用的程式碼 • 可傳⼊入參數 • 可傳回傳回值
  18. 18. ⼀一連串可重複利⽤用的程式碼 定義: 做⼀一個美味蟹堡(){ 先舖麵包 放上⽣生菜 放上⾁肉餅 加蕃茄醬 加酸⿈黃⽠瓜 蓋上麵包 } 呼叫: 做⼀一個美味蟹堡()
  19. 19. 有傳⼊入參數的函數 定義: 做⼀一個美味蟹堡(x, y, z){ 先舖麵包 放上⽣生菜 * x 放上⾁肉餅 加蕃茄醬 * y 加酸⿈黃⽠瓜 * z 蓋上麵包 } 呼叫: 做⼀一個美味蟹堡(1, 0.5, 2) -> 先舖麵包 放上⽣生菜 * 1 放上⾁肉餅 加蕃茄醬 * 0.5 加酸⿈黃⽠瓜 * 2 蓋上麵包
  20. 20. 有傳回值的函數 定義: 三⾓角形的斜邊⻑⾧長(a, b){ 將c設為 (a^2 + b^2) ^ 0.5 傳回 c } 呼叫: 將d設為 三⾓角形的斜邊⻑⾧長(3, 4) * 100 + "公分" -> 將c設為 (3^2 + 4^2) ^ 0.5 c: 5 將d設為 5 * 100 + "公分" d: "500公分"
  21. 21. ⼩小組討論 在⽇日常⽣生活中, 舉⼀一個函數的例⼦子, 是可傳⼊入參數並有傳回值的? 以上述教的⽅方法寫下來,包含定義 與呼叫和執⾏行過程及結果。
  22. 22. 判斷
  23. 23. 判斷 • 如果 OO 就 XX
  24. 24. 判斷 如果( OO )就{ XX XX XX }
  25. 25. 判斷 z: 10 b: 5 如果( z > b )就{ 通過(30) }
  26. 26. 判斷 OO是個布林值,布林值 只有兩個可能:是/否 YES/NO TRUE/FALSE 1/0 XX是要執⾏行的程式碼, 可以是多⾏行
  27. 27. ⽐比較運算 >, <, =, >=, <=, != 將a設為 10 > 5 a: YES 將a設為 10 < 5 a: NO 將a設為 10 = 5 a: NO
  28. 28. ⽐比較運算 and 將a設為 YES and YES a: YES 將a設為 YES and NO a: NO 將a設為 NO and YES a: NO 將a設為 NO and NO a: NO
  29. 29. ⽐比較運算 or 將a設為 YES or YES a: YES 將a設為 YES or NO a: YES 將a設為 NO or YES a: YES 將a設為 NO or NO a: NO
  30. 30. ⽐比較運算 not 將a設為 not(YES) a: NO 將a設為 not(NO) a: YES
  31. 31. 進階判斷 如果( OO )就{ XX }否則就{ YY }
  32. 32. ⼩小組討論 ⽼老婆:下班後買⼗十個包⼦子回來,如果看到賣⻄西⽠瓜的 就買⼀一個。 ⽼老公:好。 下班後,⽼老公帶著⼀一個包⼦子回家。 ⽼老婆:為什麼只有⼀一個包⼦子? ⽼老公:因為我看到賣⻄西⽠瓜的。 ! 試⽤用剛剛學的判斷語法分別寫出⽼老婆的程式與⽼老公 的程式。
  33. 33. 迴圈
  34. 34. 迴圈 • 連續執⾏行⼀一段程式 n 次
  35. 35. 迴圈 i由1到5{ 在畫⾯面顯⽰示("$") } -> $ $ $ $ $
  36. 36. 迴圈 i由1到5{ 在畫⾯面顯⽰示(i) } -> 1 2 3 4 5
  37. 37. 巢狀迴圈 i由1到5{ j由1到i{ 在畫⾯面顯⽰示(“$”) } } -> $ $$ $$$ $$$$ $$$$$
  38. 38. 無限迴圈 • 真正迴圈的定義⽅方式分成三部份 • 初始化 • 每⼀一圈結束要做的事 • 每⼀一圈結束後要繼續下⼀一圈的條件 • 無限迴圈就是指第三點的條件下錯 了,導致永遠離開不了這個迴圈
  39. 39. 事件
  40. 40. 事件 • 系統通知程式的管道 • 系統很有事的時候,會告知程式
  41. 41. 事件 • 當 燙傷 就 沖脫泡蓋送 • 當 ⼿手指點到畫⾯面 就 進⼊入下⼀一⾴頁 • 當 搖⼀一下⼿手機 就 隨機排列播放 清單
  42. 42. 事件處理函數 • 當發⽣生某事件時要執⾏行的函數 • 我們只需定義此函數,不⽤用呼叫 • 當發⽣生某事件時,系統會⾃自⼰己呼 叫它
  43. 43. 事件處理函數 當⼿手指點到畫⾯面(){ XX XX XX }
  44. 44. 回顧
  45. 45. 今天學到了 • 變數 • 函數 • 判斷 • 迴圈 • 事件 變數就是儲存器 ⼀一連串可重複利⽤用的程式碼 如果 OO 就 XX 連續執⾏行⼀一段程式 n 次 系統通知程式的管道
  46. 46. 說真的,如果想要學寫程式, 應該從哪⼀一種語⾔言開始學起好呢?
  47. 47. HTML / CSS / JavaScript
  48. 48. • 不⽤用特別的開發環境,⽤用記事本就可以寫, ⽤用瀏覽器就可以開。 • ⽀支援所有⾏行動裝置,容易跨平台。 • JavaScript較不嚴謹,適合初學者。 • JavaScript和Flash ActionScript、Java都很 類似,未來想進階學習較容易。
  49. 49. 結束。

×