JavaScript Guid

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

  2. 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>
    

  3. 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 の環境で作成します。

  4. スクリプト言語とは事前に翻訳をしないで、実行時に命令を解析しながら実行するプログラム言語です。
    ウエブサイトで使われるスクリプトには、クライアントサイドスクリプト言語(CSL)とサーバーサイドスクリプト言語(SSL)があります。

  5. CGI(Common Gateway Interface) はホームページの標準的なインターフェースです。
    決められた呼び出し形式によりプログラムを実行して HTML(HyperText Markup Language)文を文字列として吐き出します。
    ブラウザは、この出力文字列(HTML文)を受け取ってホームページ上に表示します。
    CSL も SSL も HTML 文を文字列として吐き出します。
    従って JavaScript や Perl のプログラムを作成するには HTML の文法に精通していることが必須です。
    html タグは大文字でも小文字でもOKですが、XHTML(エックスエイチティーエムエル)の影響か小文字が使われる例が増えてきています。

  6. 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">
    <!--
    document.write("Hello!!");
    // -->
    </script>
    

    HTML4.01 以前の書き方です。
    <script language="JavaScript">
    <!--
    document.write("Hello!!");
    // -->
    </script>
    

    最近では JavaScript が幅を利かして、script と書けば JavaScript を指すようです。
    <script>
    document.write("Hello!!");
    </script>
    

  7. イベントハンドラ(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 は大文字でも小文字でもOK)
    <meta charset="UTF-8">
    

  8. 起動するブラウザによって、プログラムの動作に違いが生じることもあるので留意して下さい。
    規定値で JavaScript 機能はオンになっていると思うのですが、起動出来ないときは[ツール]→[インターネットオプション]→[セキュリティ] からオンに設定して下さい。
    詳細はネット上で説明されているページが沢山あるので検索して下さい。
    JavaScript のページを開くときに ブロックされているコンテンツを許可 が表示されたときは許可して下さい。
    以前は無かったのですが、セキュリティの強化で表示されることがあるようです。 (^_^;)

  9. 単純なミスや変数名の打ち間違いは、事前にコンパイルすればすぐ解ります。
    所が JavaScript ではコンパイルしないので、エラーが発見されるのは実行された時です。
    事前にエラーをチェックするソフトもあるようなので、これを使うのも一法かも知れません。
    実行時にエラーが発見されると JavaScript は処理を中断します。
    最近ではブラウザにデバッグ機能が実装されていて、Internet Explorer11 では[F12]キーでこの機能を利用することが出来ます。
    デバッグ機能を起動すると処理が中断したときの場所や原因を教えてくれます。 (●^o^●)
    詳細は 開発に便利な JavaScript について などを参照して下さい。

  10. デバッグツールに頼りすぎると時間ばかり浪費してろくなことはありません。
    頼りになるのは document.write() と window.alert() でしょうか。
    document.write("実行を確認しました<br>"); はホームページ上に表示されます。
    window.alert("ここまで実行されました"); はダイアログボックスで知らせてくれます。
    変数 y, x の値を確認するときは、次のように書きます。
    window.alert("Mouse Click (y:" + y + " x:" + x + ")");
    console.log() は F12 キーを押してコンソールウインドウから実行したときに印字してくれます。
    コメントアウトなどを利用して、欲張らずに少しずつ進める方法がお勧めです。
    コメントはC言語と同様に //コメント や /*コメント*/ が使えます。
    HTML 文のコメントは <!-- コメント --> なので混同しないようにして下さい。
    特に引用符や括弧の対「(){}' "」には注意を払って下さい。
    ' と " はどちらも同じで、' の中で引用符を使うときは " で囲みます。
    同様に " の中で引用符を使うときは ' で囲みます。

  11. JavaScript のゲームには「現在のページで完結する」ものと「新しいページを呼び出す」ものがあります。
    現在のページで完結するゲームでは DOM(Document Object Model)を取得して直接書き換えます。
    Image ClickText chenge などを参考にして下さい。
    新しいページを呼び出すゲームでは、ページが変わると現在の情報が失われるのでセマンティック(ゲーム状態の連続性)を確保する必要があります。
    方法としては、ページを更新するときにパラメーターとして渡す方法や、ファイルに記録するなどの方法が考えられます。
    肥満度の計算ハイ・アンド・ローゲーム などを参考にして下さい。

  12. HTML では、色・サイズ・レイアウトなどの表示スタイルは CSS(Cascading Style Sheets) を使うように奨励されています。
    このコーナー(JavaScript のホームページ自体)を CSS を使って書き直しています。
    CSS の説明は CSS Before 及び CSS After を参照して下さい。


  13. Java と JavaScript は全く別の言語です。
    最近携帯電話のジャバアプリや家電製品の制御で Java(Java2) が注目されています。
    Java は Sun Microsystemes が開発したプラットフォームを選ばない「どの環境でも動作する」が歌い文句の言語です。(^_^;)
    C言語はマシンに依存したネイティブコードを吐き出すのに対して、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)