どうも！LSSです！！
昨日、JavaScriptで「おほしさまとって！」ってゲームを作りながら、
「やっぱ以前にもやったのに忘れていて、自分の過去記事を見直したり本やWebで確認したりした部分」
があったので、自分の備忘録的に書いておきます。
JavaScriptでタイマー
tm0=setInterval('tmf()',100);
タイマー名=setInterval('関数名()',ミリ秒);
この場合、「tm0」はタイマーに与える任意の名前。
tmf()は繰り返し呼び出す任意の関数名。
100は繰り返し呼び出す時間間隔で、ミリ秒で指定。
この一行で、「関数tmf()を0.1秒毎に繰り返し実行するタイマーを始動。名前はtm0。」として 動き始めます。
clearInterval(tm0);
clearInterval(タイマー名);
この場合、「tm0」はタイマーに与えた任意の名前。
この一行で「tm0という名前で延々と回していたタイマーを停止」という処理になります。
タイマーに名前をつけるのはこうやって止めるためだけかも？
またIntervalは止めるまで繰り返し呼び出しを行いますが、使い方は同じでIntervalをTimeoutに置き換えただけの、setTimeout、clearTimeoutなら一度だけの呼び出しになります。
CSSプロパティをJavaScriptから制御
maru.style.left=x+'px';
要素名.style.left=値;
この場合、「maru」は要素に与えたid名。<div id="maru"></div>みたいな。
CSSプロパティをJavaScriptから制御する時は、このように
要素名.style.CSSの項目名=値;
という形がとられますが、JavaScriptで書くCSSの項目名がCSSで書く時と同一文言ではないケースもあるという点には注意が要りそう。
（例えば、CSSのbackground-colorは、JavaScriptで指定するときはbackgroundColorとなります。）
使用例として
maru.style.left='100px';
とすると、
<div id="maru" style="left:100px;"></div>
と指定したのと同じ状態になります。
（'100px'…と文字列扱いで指定するのも忘れないようにしなきゃですね）
maru.style.bottom=y+'px';
も同様。
要素をクリックした時に指定の関数を実行するようにする
gamen.onclick=clk;
要素名.onclick=関数名;
参考書籍では関数名()ではなく関数名となっていたのでそのまま。
あと、HTMLでAタグに指定する時はonClickだったのが、JavaScriptのコード内から指定する場合はonclickなのも要注意ですね。
さっきのCSSの違いといい、法則性があるんでしょうか。
…こうしてみると、タイマーの開始・停止がそれぞれ１行でさっくり書けるのは結構お手軽ですね^^
CSSについては使うたびに書き方を調べないと…。
onclickイベントについてはもうちょっと掘り下げて調べた方がよさそう。
引数を渡す時とかどうするんだ？とか。
ってなとこで、今回はこのへんで！
次回もまた、よろしくお願いします^^
