JavaScriptの記述作法

JavaScript

JavaScriptの記述場所

JavaScriptはHTML文書内でscript要素を使って記述します。 body要素内はもちろん、head要素内にもscript要素の記述が可能です。

avaScriptコード

ただしHTML文書に直接コードを書のは利用性、可読性、管理保守の観点からあまりされません。 外部ファイルにコードを書いてhead内でjsファイルを読み込み、必要な箇所で処理を呼び出すのが一般的です。

外部JavaScriptファイルを読み込んで使う方法

まず外部ファイルを作成します。 内容は以下の通りで「http://hogehoge.net/js/JavaScript.js」に格納するものとします。

unction HelloWorld(){
  document.write("Hello World!");
}

HTMLからJavaScriptファイルを読み込み、HelloWorldメソッドを呼び出します。


<title>例1</title>



HelloWorld();


これで本文中に「Hello World!」と表示されるようになります。

実行結果

HTMLに直接JavaScriptを記述して使う方法

基本的に非推奨ですが、直接HTMLファイルにJavaScriptを記述することもできます。 その場合は以下のようになります。


<title>例2</title>

  function HelloWorld(){
    document.write("Hello World!!(ヘッダー)<br>");
  }




  HelloWorld();//headに記述したHelloWorldメソッドを呼び出す
  document.write("Hello World!!!(ボディー)<br>");//直接命令を書くこともできる



これで本文中に「Hello World!!(ヘッダー)」と「Hello World!!!(ボディー)」が表示されるようになります。

実行結果

実行結果

スクリプト文を直接記述する形はファイル数が少なくなる利点がありますが、ソースが煩雑になり、他のHTMLファイルからHelloWorld関数を呼び出す事もできません。複数のページに同じ処理を記述した場合、管理やメンテナンスが煩雑になってしまいます。

もちろんケースバイケースではありますが、基本的に外部ファイルに書いた方が良いでしょう。

JavaScript記述の基本事項

文末に「;」(セミコロン)を付ける

「;」は文末を表します。末尾に必ず付けましょう。

全て半角文字で書く

全角文字は使えません。(※文字列とコメントは例外的に使用できます)

特に全角スペースを見落として想定外の挙動を起こす事が多いので、プログラミングの際には全角スペースが見える環境で開発しましょう。

大文字・小文字は別物として認識される

関数「amaru」を作ったら「Amaru」では呼び出せません。大文字・小文字を混在させるのはミスの元なので、全て小文字で統一した方がいいでしょう。

小文字の関数の文頭を大文字に変換するミスがありがちです。 テキストエディタの設定によってはアルファベット先頭を自動で大文字に変換する事もあるので注意しましょう。

JavaScriptソース内で認識されないもの

以下はJavaScirptプログラム内でコンピュータから認識されません。

これを利用したJavaScirptプログラムの手っ取り早い軽量化・秘匿化の手段として、上記全てを取り払う手法があります。 JavaScriptやjQueryモジュールをダウンロードすると通常版と軽量版に分かれていることがありますが、軽量版とはそういうことです。

コメント行の書式

コメントが一行の場合は先頭に「//」を、複数行の場合は「/*」~「*/」で囲います。 以下は全てコメントとして正しい様式です。

/一行コメント

/*一行コメント*/

/*複数行の
コメント*/

/* -------------- 
 目立つコメント 
-------------- */

コメントを活用すれば処理を理解しやすくなるので、有効に使いましょう。

eyecatch

JavaScriptの変数と命名規約

eyecatch

JavaScriptとは

JavaScriptの記事

eyecatch

画像ポップアップとスワイプ可能なプラグイン「baguetteBox.js」

eyecatch

jQueryライブラリを読み込む

eyecatch

JavaScriptの配列

eyecatch

JavaScriptの繰り返し処理

eyecatch

JavaScriptの条件分岐

eyecatch

JavaScriptのDOM

JavaScriptの記事一覧HOME