JavaScript Guid

  1. JavaScript は他の言語と違いコンパイラなど専用ソフトの必要が無く、初心者には適しているかも知れません。
    その反面コンパイルすれば指摘される文法エラーや単純ミスが含まれていると実行されないだけなのでデバッグには少し苦労するかも知れません。
    JavaScript が動作するか否かは、使用するブラウザに依存します。
    JavaScript が組み込まれた HTML のファイルをローカルフォルダー(例えば C:\)に格納してダブルクリックで起動してみて下さい。
    現在では Internet Explorer や Google Chrome など、ほとんどのブラウザが JavaScript に対応しています。
    対応はしていてもブラウザにより多少の違いがあり、使えない機能や書き方が異なる場合があるので要注意です。
    このコーナーは Internet Explorer と Google Chrome を使って Windows8.1 の環境で作成しています。
    2015/10/07 移行は Microsoft Edge と Google Chrome を使って Windows10 の環境で作成しています。

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

  3. スクリプト言語とは事前に翻訳しないで実行時に命令を解析しながら実行するプログラム言語です。
    スクリプトには、クライアントサイドスクリプト(CSL)とサーバーサイドスクリプト(SSL)があります。
    クライアントサイドスクリプトとはクライアントのコンピュータ上で動作するもので JavaScript がその代表で、マウスやキーボードの操作などクライアントサイドの処理を担当します。

  4. サーバーサイドスクリプト(SSL)はサーバー上で動作するもので Perl や PHP が有名です。
    複数のユーザーが情報を交換しながらプレイするゲームなどは、サーバー上で動作する SSL が活躍します。
    SSL が動作するか否かは、サーバーにその機能が備わっているか否かによります。
    最近ではセキュリティの関係からサーバー上で動作するプログラムは敬遠されるようです。
    超初心者のプログラム入門(JavaScript)では SSL のプログラムは使いません。
    SSL は 超初心者のプログラム入門(PHP)超初心者のプログラム入門(Perl) などを参照して下さい。

  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>
    

    イベントハンドラ(onXxxx="~")に記述したスクリプトの言語を指定するため HTML4.01 では、HTML のヘッダ部に下記のような META 記述を行うことを推奨しています。
    私の JavaScript のページでは文字コードに "utf-16" を使っているので次のようになります。
    <html>
    <head>
    <meta http-equiv="Content-Script-Type" content="text/javascript" charset="utf-16">
    <title>JavaScript Sample</title>
    </head>
    <body>
       :
    <input type="button" value="OK" onclick="~">
       :
    </body>
    </html>
    

  7. 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) を参照して下さい。

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

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

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

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