36日目
本日は…
■JavaScriptで動く車
・jQueryは1.8.3までと1.9.1以降で使えるメソッドに差異がある
→ライブラリを使う上では注意が必要
・スマホは外部からの読み込みで動かすのがいい（いちいちjsファイルをダウンロードしていられない）
※●CDN＝Content Delivery Network
※<script src=""></script>で読み込む
・書き方は $(function(){ 中に色々 });
→更に中に$('セレクタ').オブジェクト('引数１','引数２');といった具合
・CSSを書き換える目的：見ている人のタイミングで書き換えることにある（UX的な）
■セレクタ
＜CSS2.1のセレクタ＞
・子セレクタ ＞ ※特定要素の直下にある指定要素だけを選ぶ
ex)li > span とるすと、liの中にspanとしてあっても、それが更にdivなどに入れ子になっていると選択されない
・隣接セレクタ ＋ ※特定の要素の隣（次）にある要素を選ぶ
ex)li.secod li.thridと並んでいた時、secondを指定すると、次のthirdから選択される
・first-child ※並んでいる要素の一番最初だけ選択
ex)ulが複数ある場合は、そのすべてのliの一番目を選択できる
擬似クラスが増えている
→続きは予習
■JavaScriptで車を走らせる
コレを走らせる。
基本的には
１．HTMLを書く
２．cssをあてる
３．JavaScriptをあてる
の順番に作っていく
＜以下わかりにくい文字による解説＞
HTMLは、棒人間をスタートさせるためのボタン領域、棒人間の表示領域で構成
cssでは動き回るために棒人間画像のサイズを指定し、position:absolute;で座標を指定。更にボタンに対して動きを呼び出すための関数をイベント指定
最後にJavaScriptで、棒人間の領域（x座標など）を取得し、ボタンがクリックされたら座標に＋５pxずつし、右へ5pxずつ移動する指定をする。これを５００になるまで、１０ミリ秒間隔で繰り返す、という指示を出す。５００になったら座標は０に戻る。
同時に、ボタンに書くvalueをスタートとストップを入れ替えつつ、スタートを押されると、animatingがtrueかfalseか判断する関数のうち、初期値がfalseなのでstopを出す、という方を通る。かつ、動き自体はスタートしたいので、先の関数（動かす関数）を実行する。そして最後にanimatingが！で逆の値になるので、次はtrueとなり、表示がstartになり、関数の動き自体は止まる（clearTimeout）。
<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>アニメーション</title>
<style>
/*棒人間の座標と箱の大きさ
を決めてやる*/
#car {
position: absolute;
top: 150px;
left:20px;
width: 150px;//オブジェクトの幅高さ
height:100px;
z-index:999;
}
#oval{
position: absolute;
top: 540px;
left: 10px;
background: #eee;
border: 1px solid black;
width: 148px;
height: 20px;
border-radius:50%;
z-index:998;
}
#box {
position: absolute;
top: 550px;
left: 10px;
background: #000;
width: 150px;
height: 200px;
}
/*車の座標を決めてやる*/
</style>
<script>
var INTERVAL =10;//アニメーションの間隔
var y=0;//y座標
var animating=false;//アニメーション実行中かどうか
var timer;//タイマーのID
function move(){
aCar = document.getElementById('car');//aCarにdiv=carを入れている
y =y +5;//xの一回目は０＋５で５になる
aCar.style.top =y + 'px';//aCarの縦方向の座標（styleのleft値）をいじらせてもらっている
if (y > 550){
y=0;//500までいったら0に戻してあげている
}
timer=setTimeout('move()',INTERVAL);//10ミリ秒間隔で関数を動かす、という(move）が終わったら、move＝自分自身が動くということ→再帰
}//
function startStop(){
if(animating){//animating=falseなのであるif(animating ==true)の意味なので今回はelseにいく
clearTimeout(timer);//setTimeoutがここでとまる
document.getElementById('sBtn').value='スタート';
}else{
document.getElementById('sBtn').value='ストップ';
move();
}
animating=!animating;//falseだったanimatingが!で、trueになって終わる
}
</script>
</head>
<body>
<h1>DOMによるアニメーション</h1>
<form>
<p>
<input type="button" id="sBtn" value="スタート" onclick="startStop();"><!--id と スタートストップ関数が埋まってる -->
</p>
</form>
<!--大事なところ！！-->
<div id="car">
<img src="bou.png">
</div>
<!--大事なところここまで！-->
<div id="oval">
</div>
<div id="box">
</div>
</body>
</html>
