https://www.slideshare.net/smatsuda413/javascript-with-generative-art
#xhack勉強会
無料で公開されているさまざまなGenerative Art With JavaScriptのソースコードを読む自信がつく
時間を書ければ自力で何でもやれると実感できる
HTMLのテンプレート
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
</body>
</html>
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<h1 id="myname">hello world</h1>
<script type="text/javascript">
var myname = document.getElementById("myname");
console.log(myname);
</script>
</body>
</html>
head要素
body要素
id属性、class属性
JavaScriptの実行順序
log出力
// ログ出力
console.log("ログです");
関数宣言
記述：
// 関数宣言(引数なし)
function 関数名(){
}
// 関数宣言(引数あり)
function 関数名(arg1, arg2, ...){
}
用例：
function sayHello(){
console.log("Hello");
}
sayHello();
function sayHelloByName(name){
console.log("Hello, " + name);
}
sayHelloByName("松田");
setInterval 一定間隔で関数オブジェクトを実行する
記述：
// 第一引数に関数オブジェクトをセット
// 第二引数に実行間隔をミリ秒単位でセット
setInterval(関数名, 1000);
// 関数オブジェクトが引数を持つ場合は
setInterval(関数名, 1000, arg1, arg2, ...);
用例：
setInterval(function(){ alert("Hello"); }, 3000);
setInterval(sayHello, 3000);
setInterval(function(){ sayHelloByName("松田"); }, 3000);
setInterval(sayHelloByName, 3000, "松田");