JavaScript Guid

JavaScript は他の言語と違いブラウザが動作する環境であれば Text Editor(メモ帳など)が使えれば誰でもゲームプログラムを作成することが出来ます。
コンパイラなど専用のソフトをダウンロードする必要も無く、無料で始められるので、初心者には適しているかも知れません。
HTML と JavaScript のバージョンがアップされ、ゲームプログラムの作成に適するようになってきました。
またゲームが完成すればサーバーにアップロードして、ネットワークで公開することも出来ます。
説明を読むのが面倒な方は Hello から始めて下さい。

JavaScript のプログラムは簡単です。

<script type="text/javascript">
document.write("Hello World!!");
</script>

簡単なループのサンプルです。

<script>
for(var i=0; i<5; i++)
{   document.write("i の値:" + i + "<br>\n");
}
</script>

HTML の体裁を整えた場合です。

<html>
<head>
<title>Sample</title>
</head>
<body>
<script type="text/javascript">
document.write("Hello World!!");
</script>
</body>
</html>

JavaScript が動作するか否かは、使用するブラウザに依存します。
上記三種類のソースコードを test.html の名前でローカルフォルダー(例えば C:\TMP)に格納してダブルクリックで起動してみて下さい。
現在では Internet Explorer や Microsoft Edge や Google Chrome など、ほとんどのブラウザが JavaScript に対応しています。
対応はしていてもブラウザにより多少の違いがあり、使えない機能や書き方が異なる場合があるので要注意です。
JavaScript はコンパイルの必要が無い分、コンパイルで指摘される文法エラーや単純ミスが含まれていると実行されないだけなのでデバッグには少し苦労するかも知れません。
このコーナーは Internet Explorer と Google Chrome を使って Windows8.1 の環境で作成しています。
2015/10/07 以降は Microsoft Edge と Google Chrome を使って Windows10 の環境で作成しています。
2020/07/09 Microsoft Edge のアイコンが変わりバージョンアップされたようです。
以降はバージョンアップされた Microsoft Edge と Google Chrome を使って Windows10 の環境で作成します。
スクリプト言語とは事前に翻訳をしないで、実行時に命令を解析しながら実行するプログラム言語です。
ウエブサイトで使われるスクリプトには、クライアントサイドスクリプト言語(CSL)とサーバーサイドスクリプト言語(SSL)があります。
- クライアントサイドスクリプト言語(CSL)とはクライアントのコンピュータ(パソコン)上で動作するもので JavaScript がその代表です。
  マウスやキーボードの操作などクライアントサイド(オペレータとのやり取り)を担当します。
  最近では、ほとんどのブラウザが JavaScript を使えるようになってきました。
- サーバーサイドスクリプト言語(SSL)はサーバー上で動作するもので Perl や PHP が有名です。
  複数のユーザーが情報を交換しながらプレイするゲームなどは、サーバー上で動作する SSL が活躍します。
  SSL が動作するか否かは、サーバーにその機能が備わっているか否かによります。
  最近ではセキュリティの関係からサーバー上で動作するプログラムは敬遠されるようです。
- 超初心者のプログラム入門(JavaScript)では、原則として SSL のプログラムは使いません。
  SSL は超初心者のプログラム入門(PHP) や超初心者のプログラム入門(Perl) などを参照して下さい。
CGI(Common Gateway Interface) はホームページの標準的なインターフェースです。
決められた呼び出し形式によりプログラムを実行して HTML(HyperText Markup Language)文を文字列として吐き出します。
ブラウザは、この出力文字列(HTML文)を受け取ってホームページ上に表示します。
CSL も SSL も HTML 文を文字列として吐き出します。
従って JavaScript や Perl のプログラムを作成するには HTML の文法に精通していることが必須です。
html タグは大文字でも小文字でもＯＫですが、XHTML(エックスエイチティーエムエル)の影響か小文字が使われる例が増えてきています。
JavaScript のプログラムは <script type="text/javascript"> と </script> で囲んで <head> </head> または <body> </body> の中に記述します。
JavaScript の関数を <head> の中に、呼び出すコードを <body> で定義している例を良く見かけます。
 は、非対応ブラウザで <script> タグが解釈されない場合に、中身をHTMLのコメントとして処理するためです。
最近のブラウザは JavaScript に対応しているので必要ないかも知れません。
HTML4.01 では language 属性が却下され、代わりに type 属性が必須属性として定義されました。
しばらくは両方が混在すると思うので注意が必要です。
HTML4.01 からの書き方です。
<script type="text/javascript">  </script>
HTML4.01 以前の書き方です。
<script language="JavaScript">  </script>
最近では JavaScript が幅を利かして、script と書けば JavaScript を指すようです。
<script> document.write("Hello!!"); </script>

イベントハンドラ（onXXX="～"）に記述したスクリプト言語の文字コードを指定するため HTML4.01 では、HTML のヘッダ部に下記のような META 記述を行うことを推奨しています。
私の JavaScript のページでは文字コードに "utf-8(BOM 付き)" を使っているので次のようになります。

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>JavaScript Sample</title>
</head>
<body>
   :
<input type="button" value="OK" onclick="～">
   :
</body>
</html>

charset は次のように省略することも出来ます。(UTF-8 は大文字でも小文字でもＯＫ)

<meta charset="UTF-8">

起動するブラウザによって、プログラムの動作に違いが生じることもあるので留意して下さい。
規定値で JavaScript 機能はオンになっていると思うのですが、起動出来ないときは[ツール]→[インターネットオプション]→[セキュリティ] からオンに設定して下さい。
詳細はネット上で説明されているページが沢山あるので検索して下さい。
JavaScript のページを開くときにブロックされているコンテンツを許可が表示されたときは許可して下さい。
以前は無かったのですが、セキュリティの強化で表示されることがあるようです。 (^_^;)
単純なミスや変数名の打ち間違いは、事前にコンパイルすればすぐ解ります。
所が JavaScript ではコンパイルしないので、エラーが発見されるのは実行された時です。
実行時にエラーが発見されると JavaScript は処理を中断します。
プログラムが途中から進まないときは、JavaScript のエラーを疑って下さい。(F12 キーで確認)
事前にエラーをチェックするソフトもあるようなので、これを使うのも一法かも知れません。
プログラムを修正して動かなくなったときは、修正箇所を精査して下さい。
私の経験ではプログラムのデバッグ中にエラーが出て動かなくなり、元に戻らなくなったことがあります。
適当なタイミングでバックアップを取り、欲張らずに少しずつ進めるのがお勧めです。
最近ではブラウザにデバッグ機能が実装されていて、Internet Explorer11 では[F12]キーでこの機能を利用することが出来ます。
デバッグ機能を起動すると処理が中断したときの場所や原因を教えてくれます。 (●^o^●)
詳細は開発に便利な JavaScript についてなどを参照して下さい。
プログラミング上の注意事項です。
- 引用符や括弧の対「(){}' "」には注意を払って下さい。
  ' と " はどちらも同じで、' の中で引用符を使うときは " で囲みます。
  同様に " の中で引用符を使うときは ' で囲みます。
  ペアーが崩れると、予期しない行にエラーが指摘されたり、意味不明のメッセージが表示されます。
- 変数は宣言する必要が無いのでつづりを間違えても教えてくれません。
  つづりを間違えると、新しい変数が使われたと誤解され、その結果予期しない結果をもたらします。
- 「+」演算子は、数値の計算をする以外に、文字列を結合する時にも使われます。
  数値演算で加えたつもりが、文字として結合されていたなんてことは良くある話です。
  Javascript の変数や「Keyword 検索／演算子」を参照して間違えないように注意して下さい。
- 配列のコピーには「参照とディープコピー」があり要注意です。
  参照を使うと元の配列に影響が及びます。
  配列の反転は、元の配列自体を反転します。
- デバッグ中にプログラムを修正して保存しても、直ちに反映されないことがあります。
  どうもブラウザのキャッシュ機能が関わっているようです。
  そのときは、ブラウザを立ち上げ直して下さい。
デバッグツールに頼りすぎると時間ばかり浪費してろくなことはありません。
頼りになるのは document.write() と window.alert() でしょうか。
document.write("実行を確認しました<br>"); はホームページ上に表示されます。
window.alert("ここまで実行されました"); はダイアログボックスで知らせてくれます。
変数 y, x の値を確認するときは、次のように書きます。
window.alert("Mouse Click (y:" + y + " x:" + x + ")");
console.log() は F12 キーを押してコンソールウインドウから実行したときに印字してくれます。
コメントアウトなどを利用して、欲張らずに少しずつ進める方法がお勧めです。
コメントはＣ言語と同様に //コメントや /*コメント*/ が使えます。
HTML 文のコメントは  なので混同しないようにして下さい。
JavaScript のゲームには「現在のページで完結する」ものと「新しいページを呼び出す」ものがあります。
現在のページで完結するゲームでは DOM（Document Object Model）を取得して直接書き換えます。
Image Click や Text chenge などを参考にして下さい。
新しいページを呼び出すゲームでは、ページが変わると現在の情報が失われるのでセマンティック(ゲーム状態の連続性)を確保する必要があります。
方法としては、ページを更新するときにパラメーターとして渡す方法や、ファイルに記録するなどの方法が考えられます。
肥満度の計算やハイ・アンド・ローゲームなどを参考にして下さい。
HTML では、色・サイズ・レイアウトなどの表示スタイルは CSS(Cascading Style Sheets) を使うように奨励されています。
このコーナー(JavaScript のホームページ自体)を CSS を使って書き直しています。
CSS の説明は CSS Before 及び CSS After を参照して下さい。
Java と JavaScript は全く別の言語です。
最近携帯電話のジャバアプリや家電製品の制御で Java(Java2) が注目されています。
Java は Sun Microsystemes が開発したプラットフォームを選ばない「どの環境でも動作する」が「うたい文句」の言語です。(^_^;)
Ｃ言語はマシンに依存したネイティブコードを吐き出すのに対して、Java は Java Virtual Machine(JVM)の環境で動作する中間コードを吐き出します。
Java ではソースプログラムをコンパイルして中間コードファイル(.class)を作成するコンパイラが必要です。
Java には DOS モードや Windows モードで動作するプログラム以外に、クライアントサイドで動作するアプレット(Applet)とサーバーサイドで動作するサーブレット(Servlets)やJSP(JavaServer Pages)があります。
Java Applet が動作するか否かは、使用するブラウザに依存します。
サーブレットや JSP を動かすには、これに対応した WWW サーバーが必要です。
Java は超初心者のプログラム入門(Java) を参照して下さい。
Applet, Servlets, JSP は超初心者のプログラム入門(Java Net Game) を参照して下さい。

前田稔の超初心者のプログラム入門
 超初心者のプログラム入門(JavaScript)