なかなか手が出せずに有耶無耶になっている部分が多いJavaScriptの基本を理解しようと思います。
JavaScritpの記入場所
HTMLの中にはjavascriptを記入できる場所は4箇所あります。
- headの中に記述。HTMLのhead内部にスクリプトを直接欠けます。bodyを読み込ませる前にjacvascriptを優先的に読み込ませたい場合などはここに記述します。
- bodyの中に記述。javascriptで何かを表示させたいときはbody内部の表示位置にjavascriptを記述します。その他ではページの表示を優先させたい場合など、headにスクリプトを入れる必要がない場合、bodyの最下部に記述します。
- タグの中に記述。簡単なスクリプトでイベントを組み込ませる方法もありますが、簡単なスクリプトならCSSで書いた方がスッキリするので最近はあまり使いません。
- 外部ファイルにして記述。複数のページや別サイトで同じ処理をしたい時には外部ファイルにしてそれぞれのページで読み込ませます。
javascriptの基本構文
スクリプトを記述するには基本的なルールを守らなくてはいけません。
- 大文字と小文字は区別される
- スクリプト内の空白と改行は無視されるう
- 文の区切りにはセミコロンを付ける
大文字と小文字
javascriptの大文字と小文字は区別されますので、名前をつけるときは注意しなくてはいけません。
var num = 1; document.write("<p>" + num + "</p>"); document.write("<p>" + Num + "</p>");
上記の例で言うと、num = 1 と定義されていますので小文字で「num」、と記述されていない限り出力はされません。
実際に記述してみた結果がこちらです。
上の変数が小文字のnumと記述されている方だけ1と出力されました。
javascriptに限らずプログラミング言語のほとんどは小文字と大文字の区別があります。
javascriptでの空白と改行は見やすくするため
scriptの内部の単語と単語の間や、文ごとで空白や改行を入れたとしてもスクリプトの動作には何も影響しません。長い文章を一行で書いてしまうと、とても見難くなってしまいますので、それを防止するための改行や空白となります。
以下の文はすべて同じ意味となります
var num = 1; var num = 1; var num = 1; var num = 1;
当たり前ですが、単語の途中に空白を入れてしまった場合は意味が変わります。
文の区切りはセミコロンで
javascriptでは文の区切りにセミコロンを利用しますが、このセミコロンの区切りって実は無くてもエラーにはならないのです。
一定の文で勝手に判断して区切ってくれるのですが、意図しないところで区切られてしまいエラーになる危険性もあります。保守の面でも記切りはちゃんと書いてくれたほうがわかりやすいので、しっかりセミコロンで区切るようにしましょう。
javascriptの改行の定義から、セミコロンで区切ってさえあれば、一行で書いても良いのです。ファイルサイズを減らすためにすべて一行にしてからアップロードする方法もあります。