コメントは、プログラム説明などを記述するために使う。しかし、実際にコメントが活躍するのは、別な使い方をするときである。プログラムコードを変更するときに、元に戻せるように、変更前のコードをコメントにしておき（これを、「コメント・アウトする」という）、変更後のコードを書き加えるという方法である。
もう一つの使い方は、alert()関数やconsole.log()関数で変数の値を確認することができあるが、確認する必要がなくなったときは、これらのコードを削除せずにコメント・アウトして残して置き、必要になったらコメントから戻すという使い方である。コメントをこのように使うことで、同様のコードを何度も入力するという手間が省ける。
コメントの書き方は2種類あって、1行だけをコメントにする場合と、複数行をまとめてコメントにする書き方である。
//と書くと、その行の行末までがコメントとなる。
// コメントは行末まで
/* 〜 */と書くと、/*がコメントの始まりで、*/がコメントの終了を表し、〜の部分（複数行も可）がコメントとなる。
/* for( var i = 1 ; i < 1000; i++ ){ conosole.log(i); } */↑
マウスポインターを重ねるとか、クリックするといったイベントが発生したときに行う処理を指定するのが、イベントハンドラーである。 （※同じ要素に同じイベントハンドラーで複数定義したい場合は、インラインではない方法を使わないといけないことに注意する必要がある。） イベント名を属性名として、値にイベントハンドラーの処理をするJavascript関数を指定する。イベントハンドラーを要素の属性として重複して指定することもできる。以下のようなものがある（全て小文字で良いのだが、分かりやすさのために単語の最初を大文字にした。これでもOKである。）。
イベントハンドラーと同様に、イベントの発生に対応して関数を呼び出す方法に、イベントリスナーを使用する方法がある。 キーボードのキーを押すというイベントの発生に対して、キャラクターを移動するという仕組みをイベントリスナーを使って実装しよう。
Firefoxでは、キーを押す(keydown)というイベントの発生に対してKeyDownFunc()という関数を呼び出すイベントリスナーは、以下の命令で設定し、開始する:
document.addEventListener("keydown" , KeyDownFunc);
KeyDownFunc()関数は以下のように定義した。
// キーが押された時の処理 // 矢印キーで、キャラクターを移動する function KeyDownFunc(e){ // 入力情報を取得 // キーコード var key_code = e.keyCode; if(key_code == 39){ move_chara('r'); } if(key_code == 37){ move_chara('l'); } if(key_code == 38){ move_chara('u'); } if(key_code == 40){ move_chara('d'); } // 出力テスト //console.log("code:" + key_code); e.preventDefault(); }
function KeyDownFunc(e)の定義では、
//console.log("code:" + key_code);
とコメントアウトしてある部分のコメントを解除すると、キーが押されたときにkey_codeの値をFirefoxのWebコンソールのロギングで確認できる。 これを利用して、[→](39番)、[←](37番)、[↓](40番)、[↑](38番)キーを押したときのキーのコードを調べて、キャラクターを動かす関数move_chara(方向)を呼び出して、キャラクタを動かしている。
また、[↑]、[↓]キーがブラウザのスクロールに設定されているブラウザで、それを無効にするために、以下のコードも追加してある。
e.preventDefault();↑
Webページは、タグで指定されたHTML文書の要素（element）の階層的な集まりである。 DOM(Document Object Model)という規格に従っているWebブラウザでは、JavaScriptで操作できるようにこれらの要素を取得することができ、その要素のプロパティの参照や変更ができる。id属性で付けられたid値によって、その要素を取得するのが、getElementById()関数である。
getElementById()関数の使い方の例をしめす。
<div id="character"> <img src="c.png" alt="character"> </div> <script> var element = document.getElementById("character"); var x = Number( element.style.left.match(/\d+/) ); var y = Number( element.style.top.match(/\d+/) );
x = x + 10; element.style.left = x + "px"; </script>
element.style.leftは、id="character"要素のleftプロパティの値であり、"20px"のような文字列である。座標値の20を取り出すため、正規表現を使ったmatchメソッドを使い、更に文字列から数値データにするために、Number()関数を使用して、横方向の座標値xを計算している。縦方向の座標値yについても同様である。
xに10を加えて、"px"を付け加えて、element.syle.leftに代入することで、id="character"要素のleftプロパティを変更し、横方向に10px移動して表示させている。
↑Javascriptでアニメーションを実現しようとするとき、従来は、setInterval()関数かまたはsetTimeout()関数を使用した。これらは、ブラウザが描画する準備ができていないときに実行されたり、ブラウザが非表示でも実行されるためにメモリの消費が多いという欠点があった。requestAnimationFrame()関数はそのような問題を回避するために導入された。60fps（1秒間に60フレーム、約16.7ms）以内で再描画の準備が整ったら、指定された関数が実行されるようになる。
使い方は、例えば下のようにanimate()関数を再帰的に定義して、animate()関数を実行するようにする。move_enemy()関数が60fps以内で呼び出されて実行される。実際の実行間隔は、デバイスやブラウザの処理能力に依存する。
var requestId = 0; function animate(){ requestId = window.requestAnimationFrame(animate); // 繰り返す処理 move_enemy(); }
この例でアニメーションを終了する場合は、以下のようにcancelAnimationFrame()関数を、実行されたrequestAnimationFrame()関数の戻り値のrequestIdを引数として実行する。
window.cancelAnimationFrame(requestId);
時間経過を考慮して、アニメーションの速度を制御したい場合は、Date.now()関数で時刻を取得し、経過時間を越えていたら再描画の繰り返し処理を実行するように工夫する。 下の例は、move_enemy()関数を30msごとに実行するようにしたものである。
var msec = Date.now(); // 描画時刻を保持するグローバル変数 var requestId = 0; function animate(){ var t = Date.now(); if( t - msec > 30 ){ msec = t; // 繰り返す処理 move_enemy(); } requestId = window.requestAnimationFrame(animate); }↑
setInterval()関数は一定時間ごとに指定された関数を繰り返し実行する。例えばAnimate()という関数を80msごとに実行したい場合は、以下のようにする。
var myTimer = setInterval('Animate()', 80 );
myTimerには、タイマーの識別子が格納される。 この識別子は、タイマーを停止するときに、clearInterval()関数を実行するとき、その引数として利用される。
clearInterval(myTimer);↑
setTime()関数では、一定時間後に指定された関数を1回だけ実行する。これを利用してアニメーションを実現するには、例えばAnimate()という関数を80msごとに実行したい場合は、以下のように、run()を再帰的に定義して実行する。
var myTimer = run(); function run() { myTimer = setTimeout('run()', 80 ); Animate(); }
myTimerには、タイマーの識別子が格納される。 この識別子は、タイマーを停止するときに、clearTimeout()関数を実行するとき、その引数として利用される。
clearTimeout(myTimer);↑