サンプルで学ぶJavaScript入門

JavaScriptの概要

このドキュメントでは JavaScript の使用方法と文法を説明します。JavaScript は Netscape 社の開発した HTML 内に埋め込み可能なオブジェクト指向スクリプト言語です。クライアント側（主にブラウザ）で動作するスクリプト言語で、文法がJavaに似ています。ただし、Javaテクノロジと直接の関わりはありません。 Ajax として使うこともできます。

JavaScriptに似たMicrosoft JScriptなどが出てきたため、標準規格であるECMAScripがEcma Internationalによって策定された。現在ではJavaScriptやJScriptはECMAScriptの実装のひとつという位置づけになっている。

JavaScriptの使用方法

HTMLからJavascriptを使用するには、以下の方法があります。

  1. <SCRIPT>タグに記述
  2. 外部ファイルに記述
  3. 各要素のイベント属性に記述
  4. <A>タグのhref属性に記述

<SCRIPT>タグに記述

<SCRIPT>タグの値として直接Javaスクリプトを記述するか、src 属性に外部ファイルのURIを指定します。 

<script type="text/javascript">
<!--
  document.write("JavaScript");
// -->
</script>

スクリプトの記述部分が定義が <!-- と // --> で挟まれてコメントになっているのは、スクリプトが解釈できないブラウザではコメントとして扱われるようにしているためです。

外部ファイルに記述

JavaScriptを外部ファイルに記述しておき、それを利用する方法もあります。

<script type="text/javascript" src="www.js.com/js/sample.js">
</script>

外部ファイル www.js.com/js/sample.js には、Javaスクリプトを記述しておきます。 

document.write("JavaScript");

各要素のイベント属性に記述

各要素のイベント属性にスクリプトを記述すると、そのイベントが発生したときにスクリプトが実行されます。 属性値はダブルクォーテーション記号で囲みますが、属性値の中でダブルクォーテーション記号を使いたい場合は、実体参照を使用します。 

<button onclick="javascript:alert(&quot;JavaScript&quot;)">アラート</button>

<A>タグのhref属性に記述

<A>タグのhref属性にスクリプトを記述すると、アンカーがクリックされたときにスクリプトが実行されます。 

<a href="javascript:スクリプト"> 〜 </a>
<a href="javascript:history.back()">戻る</a>

JavaScriptのデータ型

JavaScriptのデータ型
型 説明
number 数値(整数及び浮動小数点数)
string 文字列
boolean ブール型(true又はfalse)
null null
undefined undefined
object オブジェクト
array 配列

変数

変数 とは、プログラムで扱われる数値や文字列などの値を一時的に記憶しておく領域のことです。変数を識別するために、ひとつひとつの変数に固有の名前を付けておきます。これを 変数名 といいます。

変数を使用する前に、どのような変数を使用するか、その変数名を明らかにしておくことを 変数の宣言 といいます。

JavaScript で変数を宣言する書式を次に示します。

var 変数名;

変数に値を入れることを 代入 といいます。変数に値を代入する書式を次に示します。

変数名 = 値 ;

値が数値の場合は数値を直接記述します。値が文字列の場合は、文字列をダブルクォーテーション記号で囲んで記述します。変数の宣言と代入の例を次に示します。

<script type="text/javascript">
<!--
    var age;
    var name;
    age = 20;
    name = "山田太郎";
// -->
</script>

ただし、JavaScript では変数の宣言を省略できます。したがって、変数の宣言をしなくても変数を使うことができます。つまり、いきなり変数への代入を書いてしまっても構いません。

例えば、上記の JAVA スクリプトは、次のように記述することもできます。

<script type="text/javascript">
<!--
    age = 20;
    name = "山田太郎";
// -->
</script>

ローカル変数

ローカル変数とは、宣言した関数内でのみ利用できる変数である。ローカル変数は、関数内で var キーワードを使って変数を宣言する。

グローバル変数

グローバル変数とは、プログラム全体で共有する変数である。グローバル変数を宣言するには、関数本体の外で変数宣言を行うか、 var キーワードを付けずに変数を行う。 

foo = 1;     // グローバル変数
var bar = 2; // グローバル変数

function func1()
{
    baz = 3;     // グローバル変数
    var qux = 4; // ローカル変数
}

function func2()
{
    var quux;
    quux = foo;
    quux = bar;
    quux = baz;
}

組み込み関数

JavaScriptには、さまざまな組み込み関数があらかじめ用意されている。

組み込み関数 説明
encodeURIComponent URIに含まれる特定の文字をエスケープシーケンスに置き換える。
eval 文字列をJavaScriptのコードとして評価する。
isNan 引数が数に変換できない場合はtrue、数に変換できる場合はfalseを返す。

JavaScriptのオブジェクト

JavaScriptには以下に示すオブジェクトが用意されている。

JavaScriptのオブジェクト
オブジェクト 説明
Array 配列を表すオブジェクト
Checkbox HTMLのチェックボックスを示すオブジェクト
console Webブラウザのデバッグコンソールへアクセスする機能を提供するオブジェクト
Date 現在の日時を表すオブジェクト
document HTML文書を表すオブジェクト
element HTMLの要素を表現するオブジェクト
Event マウスクリックなどのイベントを表すDOMインタフェース
Form HTMLのフォームを表すオブジェクト
Function 関数を表すオブジェクト
history 履歴を表すオブジェクト
Location 現在のURLを表すオブジェクト
Math 数学的な定数と関数を提供するオブジェクト
Navigator Webブラウザの情報を表すオブジェクト
Node DOMオブジェクトに共通するプロパティやメソッドを備えたインタフェース
Option HTMLのオプションを表すオブジェクト
Radio HTMLのラジオボタンを表すオブジェクト
Screen 画面を表すオブジェクト
Select HTMLのselectを表すオブジェクト
Storage ウェブストレージに関する操作を提供するオブジェクト
String Stringは文字列を表すオブジェクト
style HTML要素のスタイルを表すオブジェクト
window 現在のウィンドウを表すオブジェクト

DOM

DOM (Document Object Model)とは、JavaScriptからHTML文書を利用するために標準化された仕様である。HTML文書がウェブブラウザに読み込まれると、JavaScript内で文書や要素がDOMオブジェクトとして自動的に生成される。