Upgrade to Pro — share decks privately, control downloads, hide ads and more …

新聞記者的程式設計第一課

tkirby
October 30, 2015

 新聞記者的程式設計第一課

Javascript + p5js 入門

tkirby

October 30, 2015
Tweet

More Decks by tkirby

Other Decks in Technology

Transcript

  1. 程式基本概念 • 逐⾏行執⾏行 • 基本運算 • 條件執⾏行 • 重覆執⾏行 控制

    / 記憶 • 讀取儲存 • 名稱宣告 • 資料型態 • 指標 語法
  2. 程式基本概念 • 逐⾏行執⾏行 • 基本運算 • 條件執⾏行 • 重覆執⾏行 控制

    / 記憶 • 讀取儲存 • 名稱宣告 • 資料型態 • 指標 語法
  3. 1 + 2; 3 + 4; 7 + 8; 執⾏行(指令)

    3 7 15 結果(傳回值)
  4. 1 + 2; 3 + 4; 7 + 8; 四則運算

    1 == 1 2 != 3 5 <= 4 邏輯運算
  5. 1 == 1 2 != 3 5 <= 4 執⾏行(指令)

    true true false 結果(傳回值)
  6. 1 == 1 2 != 3 5 <= 4 true

    || false true && false (1 == 2 ) || ( 3 == 3 ) && (4 == 5)
  7. 程式基本概念 • 逐⾏行執⾏行 • 基本運算 • 條件執⾏行 • 重覆執⾏行 控制

    / 記憶 • 讀取儲存 • 名稱宣告 • 資料型態 • 指標 語法
  8. 1 + 2; 3 + 4; 7 + 8; 執⾏行(指令)

    3 7 15 結果(傳回值)
  9. A = 1 + 2; B = A + 4;

    C = B + 8; 執⾏行(指令) A = 3 B = 7 C = 15 結果(傳回值)
  10. A = 1 + 2; A = A + 3;

    執⾏行(指令) A = 3 A = ? 結果(傳回值)
  11. 2*2*2*2*2*2*2*2*2*2*2*2*2*2*2*2 A = 2 * 2; A = A *

    A; A = A * A; A = A * A; 幫我把 2 ⾃自乘 16 遍後存到 A 中
  12. 2*2*2*2*2*2*2*2*2*2*2*2*2*2*2*2 A = 2 * 2; A = A *

    A; A = A * A; A = A * A; 幫我把 2 ⾃自乘 16 遍後存到 A 中 如果還沒乘到第 16 遍就不要停
  13. 程式基本概念 • 逐⾏行執⾏行 • 基本運算 • 條件執⾏行 • 重覆執⾏行 控制

    / 記憶 • 讀取儲存 • 名稱宣告 • 資料型態 • 指標 語法
  14. A = 1; { A = A * 2;
 }

    跑 16 遍 這⼀一段
  15. A = 1; { A = A * 2;
 }

    16遍前 沒跑到 不要停
  16. A = 1; for(B=0;B<16;B=B+1)
 { A = A * 2;


    } B變成16前 沒跑到 不要停
  17. A = 1; for(B=0;B<16;B=B+1) { A = A * 2;


    } B=0 ; B<16 ; B=B+1 初始值 繼續的條件 累進的運算
  18. A = 1; B = 0; for(;B<16;)
 { A =

    A * 2; B = B + 1;
 }
  19. A = 1; B = 0; for(;;)
 { A =

    A * 2; B = B + 1;
 }
  20. A = 1; B = 0; for(;;)
 { A =

    A * 2; B = B + 1;
 if(B>=16) {
 break;
 } }
  21. A = 1; B = 0; for(;;)
 { A =

    A * 2; B = B + 1;
 if(B>=16) {
 break;
 } }
  22. 程式基本概念 • 逐⾏行執⾏行 • 基本運算 • 條件執⾏行 • 重覆執⾏行 控制

    / 記憶 • 讀取儲存 • 名稱宣告 • 資料型態 • 指標 語法
  23. 程式基本概念 • 逐⾏行執⾏行 • 基本運算 • 條件執⾏行 • 重覆執⾏行 控制

    / 記憶 • 讀取儲存 • 名稱宣告 • 資料型態 • 指標 語法
  24. A = 1; A = “台灣”; 數字 字串 true false

    A = 1 == 2; 邏輯值 = boolean = 布林
  25. A1 = 3 A2 = 1 A3 = 4 A4

    = 1 A5 = 5 A6 = 9 …
  26. A1 = 3 A2 = 1 A3 = 4 A4

    = 1 A5 = 5 A6 = 9 … B
  27. A1 = 3 A2 = 1 A3 = 4 A4

    = 1 A5 = 5 A6 = 9 … if(B==1) { C = A1; } if(B==2) { C = A2; } if(B==3) { C = A3; } if(B==4) { C = A4; } …
  28. A1 = 3 A2 = 1 A3 = 4 A4

    = 1 A5 = 5 A6 = 9 … for(i=0;i<10;i++) {
 if(B==i) { C = Ai; }
 }
  29. A = { “radius”: 5, “x”: 10, “y”: 10 }

    A[“x”] 物件 = Object = 雜湊 = Hash
  30. A = 1; A = “台灣”; 數字 字串 A =

    true; 邏輯值 A = [1,2,3 ..]; 陣列 A = {x: 1, …} 物件
  31. 程式基本概念 • 逐⾏行執⾏行 • 基本運算 • 條件執⾏行 • 重覆執⾏行 控制

    / 記憶 • 讀取儲存 • 名稱宣告 • 資料型態 • 指標 語法
  32. 程式基本概念 • 逐⾏行執⾏行 • 基本運算 • 條件執⾏行 • 重覆執⾏行 控制

    + 記憶 • 讀取儲存 • 名稱宣告 • 資料型態 • 指標 語法
  33. function A(C,D) {
 B = B + C + D;

    } A(1,2); A(3,4); A(5,6); 多個參數
  34. function A(C,D) {
 return B = B + C +

    D; } E = A(1,2); F = E + A(3,4); G = F + A(5,6); 傳回值
  35. 程式基本概念 • 逐⾏行執⾏行 • 基本運算 • 條件執⾏行 • 重覆執⾏行 控制

    / 記憶 • 讀取儲存 • 名稱宣告 • 資料型態 • 指標 語法
  36. a = (1 + 2 - 3) / 4 %

    5; if(a==1) {
 } for(i=0;i<5;i++) {
 break; } a = [1,2,3]; b = {c: 1}; function d(e,f) { return e + f;
 } a = true || false && (b == 2) var a = 1;
 function b() { var a = 2;
 } 四則運算 邏輯運算 條件執⾏行 資料型態 函式 重覆執⾏行 變數宣告與有效範圍
  37. a = [1,3,2,4,5,7,9,6,8,0]; b = [“#ff0000”,”#00ff00”,”#0000ff”]; sum = 0; for(i=0;i<10;i++)

    { sum += a[i]; }
 function draw() {
 last = 0; for(i=0;i<10;i++) { fill(b[i % 3]); arc(50,50,40,40,
 last * 6.28 / sum, (last + a[i]) * 6.28 / sum); last = last + a[i];
 } }