Javascript with Generative Art

1. JavaScriptの基本構文で
アート表現ハンズオン

2. 前提条件
• if, for, 変数宣言, 関数宣言
• getElement(s)By …

3. 使う関数
• setTimeout, setInterval,
clearTimeout, clearInterval

4. 覚えること、これだけ
• CANVAS API
• Colors, Styles, and Shadows
• Line Styles, Rectangles, Paths, Transformations
• Text, Image Drawing, Pixel Manipulation

5. if
if 条件分岐 ()の中が条件を満たした時に、
{ ... } を実行する

6. if
// console.log … 動作確認用の履歴を出力する
if ( 10 > 5 ) {
console.log(“10は5より大きいです”);
}

7. for
for( 初期条件; 繰り返し条件; 後処理 ){
// 繰り返し実行したい処理
}

8. for
// 前提条件 i = 0 、i < 5を満たす限り繰り返す
// 繰り返すたびにiは+1される
// i … integer 慣用的に使われる
for(var i=0; i<5; i++){
console.log("res: " + i);
}

9. for
// 前提条件、後処理は省力できる
// res … result or response 慣用的に使われる
var i = 0;
for( ;i<5; ){
console.log("res: " + i);
i = i+1;
}

10. 変数宣言
• var (どこからでも参照可、なるべく使わない)
• let (ブロックスコープ、迷ったらこれ)
• const (定数、再代入不可)

11. 関数
function 関数名 (){ 処理 }

12. 関数
function method_name(){
console.log(“関数を実行”)
}

13. 関数(引数あり)
function 関数名 (引数1,引数2, …){ 処理 }

14. 関数(引数あり)
// arg … argument 慣用的に使われる
function method_name(arg1, arg2){
console.log(“結果: ” + arg1 + arg2)
}

15. オブジェクト
{ } 中括弧, : コロンで構造を表現
{
name: “松田”,
age: 33,
pet: {
name: “tama”,
type: “dog”
}
}

16. 関数オブジェクト
var func = function(name){
console.log(“hello, ” + name);
}

17. setTimeout()
• 一定時間経過後に一回だけ処理を実行する`関数`
• setTimeout(関数function[, 一定時間の指定, 引数1,
引数2, …)

18. setInterval()
• 一定間隔で繰り返し処理を実行する`関数`
• setInterval(関数function, 一定時間の指定[, 引数1, 引
数2, …])

19. 関数の引数には色々と渡せる
• オブジェクトを渡してみる
• 関数オブジェクトを渡して実行してみる

20. getElementById(“identify”)
• document.getElementById(“sampleId”)
• document.getElementsByClassName(“sampleClassName”)
• document.getElementByTagName(“sampleTagName”)