第2章 書き方の基本
この章では JavaScript の基本てきな書き方について説明します。
homepage
# **書き方の基本** *** ## **1.書き方のルール** + 基本的に半角の英数字と記号のみを使う。 + 文字列を扱う場合はシングルクォート(')かダブルクォート(")で囲む。 + 大文字と小文字は別の文字として扱われる。 + 命令文の末尾にはセミコロン(;)で付ける。 + 複数行に渡るひとまとまりの命令群を{}で囲む。囲まれた範囲をブロックと呼ぶ。 <br><br> ##**2.JavaScriptの記入場所** * ヘッダー内に HTMLのヘッダーに記入します。ここに書いたスクリプトは、body部分より前に読み込まれます。関数（処理を１まとめにしたもの）などはここに記入します。 ``` <html> <head> <script type="text/javascript"> ここにJavaScriptのソースを記入。 </script> </head> </html> ``` * body内に 何かを表示するようなスクリプトの場合、実際に表示する位置に記入します。 ``` <html> <head> </head> <body> <script type="text/javascript"> ここにJavaScriptのソースを記入。 </script> </body> </html> ``` JavaScriptを完全に読み込むまでbody内の読み込みは行なわれないので、 ページの表示に時間がかかってしまいます。 最近はページの読み込み速度が重視されるようになったため、 JavaScriptはbodyの一番下、</body>の直前に記述することが多くなりました。 * タグ内に タグの中にイベントを組み込んで、そこに直接JavaScriptを記入できます。関数を呼び出したり、簡単なスクリプトを記入します。 タグの中に記入するには、aタグのhref属性を使ったり、 イベントを用います。以下のような使い方ができます。 ``` <a href="JavaScript:ソース記入">クリックしてね</a><br> <input type="button" value="Click!" onclick="ソース記入"> ``` 最近はタグ内に記述することはあまり推奨されていません。 * 外部ファイルに 複数のWebページ内で同じ処理を行いたい場合は、外部ファイルにスクリプトを書いて、それを各ページが読み込むようにします。 外部ファイルにJavaScriptを記述して、scriptタグで読み込むようにします。 ``` <script type="text/javascript" src="JavaScriptファイルのURL"></script> ``` #### **例** HTMLファイルとJavaScriptファイルが、同一ディレクトリに配置されているです。 + [sample2-1.html] ``` <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Hello World</title> </head> <body> <script src="sample2-1.js"> </script> </body> </html> ``` + [sample2-1.js] ``` document.writeln('Hello World!'); ``` <br> #### **実行結果** Hello World! <br><br> ## **3.コメント** コメントとは、スクリプトの中に自由に記述できるメモ書きのようなものです。 + **一行のコメント** //(スラッシュ2つ)よりも後ろの文字がコメントとなります。 命令文の後ろに記述することもできます。 ``` //コメントです。 // var x = 6; I will NOT be executed var x = 5; // I will be executed ``` + **複数行のコメント** /* と */で囲んだ範囲がコメントになります。コメントは何行になってもかまいません。 ``` /* コメント１ コメント２ */ ``` <br><br> ## **4.値の出力** ### **4-1.ダイアログボックスの表示** 数字や文字列などの値を表示して確認するには、alertというJavaScriptの命令を使います。 ``` alert("表示する値"); ``` #### **例** [sample2-2.html] ``` <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> </head> <body> <script> alert("ようこそ！"); </script> </body> </html> ``` #### **実行結果**  ### **4-2.コンソールに値の出力** ``` console.log("表示する値"); ``` #### **例** [sample2-3.html] ``` <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> </head> <body> <script> console.log("ようこそ！"); </script> </body> </html> ``` #### **実行結果** <!--graph2-2.png--> <img src="https://i.loli.net/2019/08/22/MSIp3hCocGa2zk6.png" width="40%"/> <br> Chromeの場合は、F12をクリックし、次のように下部にコンソールが表示されます。 <!--graph2-3.png--> <img src="https://i.loli.net/2019/08/22/mL9JeYKpHuvtw6z.png" width="40%"/> *** > **練習** >> **問題**[ex2-1.html] 「ITJOBでITを勉強しましょう。」をalertで表示ください。
content
戻る
