JavaScriptの使い方

JavaScriptの動作概要を説明し、どのように記述するか等の使い方を説明しています。

JavaScriptの動作と仕組み

 JavaScriptは、パソコンのブラウザ上で動作するプログラミング言語です。WebサーバーからダウンロードしたHTMLファイルにJavaScriptが記述されていると、パソコン側で実行されます。

JavaScriptの動作概要

 このため、Webサーバーに関係なく、パソコンに保存しているHTMLファイルを直接開いても、JavaScriptは動作します。JavaScriptは、一般的なブラウザではデフォルトで許可されています。

 又、JavaScriptはインタプリタ型言語と言われ、コンパイル不要です。コンパイルとは、プログラムをパソコンで分かるように変換する事ですが、人が見て分かり辛くなってしまいます。インタプリタ型言語では、コンパイルせずに逐次実行します。このため、実行時の確認がし易く、初心者でも比較的簡単に使えるプログラミング言語と言えます。

 JavaScriptは、ブラウザで表示している内容を書き換えたり、スタイルを変えたり、様々な事が出来ます。但し、パソコン側で動作するため、サーバー側のデータを更新する等は出来ません。

JavaScriptはサーバーのファイルを更新出来ない

 例えば、アンケートの回答をサーバーに保存する、誰でも書き込み出来る掲示板を作るといった事は出来ません。

JavaScriptの記述方法

 JavaScriptの記述方法は、2種類あります。HTMLファイルに直接記述する方法と、外部ファイルに記述してHTMLから呼び出す方法です。

JavaScriptの記述方法

 簡単なプログラムであれば、直接記述した方が手間になりません。複雑なプログラムでは、HTMLとは別に記述した方が分かり易くなります。又、複数のHTMLファイルから呼び出すプログラムも外部ファイルにしておくと、共通で利用出来て便利です。

HTMLファイルに記述する方法

 HTMLファイルに記述する方法は、以下の通りです。

【JavaScriptのHTMLファイルへの記述例】
<script>
<!--
document.write("テスト");
// -->
</script>

 HTMLのJavaScriptを動作させたい箇所で、<script>と</script>の間に命令文を記述します。document.writeは、記述した内容を書き出す命令文です。

 <!--と// -->はなくても動作しますが、JavaScriptに対応していないブラウザでは、プログラム自体が表示されてしまう可能性があります。このため、HTMLで解釈した時に、コメント扱いされるように記述します。又、各命令文の最後には、セミコロン(;)を記述します。

 上記のプログラムは、以下のようにテストと表示されます。

 尚、<script>は1つのHTMLファイルの中に複数記述出来ます。

外部ファイルに記述する方法

 外部ファイルに記述する方法は、以下の通りです。

【外部ファイルにJavaScriptを記述する例】
document.write("テスト");

 上記をファイル名.jsで保存します。一般的には、JavaScript専用のフォルダを作成し、そこに保存します。

 HTMLファイルでは、JavaScriptを動作させたい場所に、以下を記述して読み込ませます。

【外部ファイルのJavaScript読み込み例】
<script src="js/test.js"></script>

 js/test.js部分は、先ほど保存したフォルダ/ファイル名.jsを記述します。

 外部ファイルから読み込んでも、HTMLファイルに直接プログラムを記述したのと同じ結果が得られます。

 尚、上記を複数記述して、1つのHTMLファイルから複数の外部ファイルを読み込む事が出来ます。

コメント

 コメントを付ける事も出来ます。コメントは、命令文として認識されません。

【JavaScriptのコメント】
<script>
document.write("Hello"); // Hello出力
/*
document.write(a1);
切り分けのためa1出力を一時停止
*/
</script>

 赤字部分で//以降がコメントです。行の最初に//を記述すると、行全体がコメントになります。

 青字部分は複数行のコメントの時に使います。/*から*/までの間がコメント扱いになります。

 使い方の例としては、後で見て分かるように、この処理が何を示すのか記述したりします。又、プログラムがエラーになる場合、疑わしい箇所を一時的にコメントにして、エラーにならないか確認する時にも使います。

次のページ変数

  • このエントリーをはてなブックマークに追加