目次

JavaScriptの概要

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

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

JavaScriptの使用方法

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

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

<SCRIPT>タグに記述

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

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

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

<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における文字列リテラルの例を示す。

var foo = "bar";
alert("bar");

ダブルクォーテーションを含む文字列の場合、文字列をシングルクォーテーションで囲むか、ダブルクォーテーションの前にバックスラッシュを記述する。

var foo = 'Say "Hello"';
var bar = "Say \"Hello\"";

JavaScriptのデータ型

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

JavaScriptのデータ型はtypeof演算子で判定することができる。

var x = 1;
if (typeof x === 'number') {
  //
}
if (typeof x === 'string') {
  //
}
if (typeof x === 'undefined') {
  //
}
if (typeof x === undefined) {
  //
}

JavaScriptのコメント

/* 」と「 */ 」に囲まれた部分はコメント(注釈)となる。コメントは複数行にわたってもよい。ただし、入れ子(ネスト)にすることはできない。

// 」以降から行末までもコメントとなる。これを単一行コメントという。

コメントの使用例を次に示す。

<script>
    /*
        警告ダイアログを表示する関数
    */
    function foo() {
        // 警告ダイアログを表示する
        alert("警告");
    }
</script>

switch case

switch (式)
{
    case 値1:
        // 処理1
        break;
    case 値2:
        // 処理2
        break;
    default:
        // 処理3
        break;
}

with

withブロックを使用すると、親オブジェクトの名前を省略することができる。たとえば、次のようなコードがあったとする。

var foo = document.getElementById('foo');
var bar = document.getElementById('bar');

withステートメントを使用すると、上記のコードは次のように記述することができる。

with (document) {
  // このブロック内ではdocument.を省略できる
  var foo = getElementById('foo');
  var bar = getElementById('bar');
}

this

オブジェクト内以外のthisはグローバルオブジェクトを表す。

var foo = 1;

function getFoo()
{
    return this.foo;
}

この場合、this.fooはグローバル変数fooである。

オブジェクト内のthisは自オブジェクトを表す。

var obj = {
    foo: 1,
    getFoo: function() {
        return this.foo;
    }
}

この場合、this.fooはobj.fooを表す。

変数

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

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

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のオブジェクト
オブジェクト 説明
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 現在のウィンドウを表すオブジェクト

JavaScriptのオブジェクト

DOM

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

JavaScriptの例外処理

JavaScriptで例外処理を行うには、try catch文を使用する。

try {
  statements
}
[catch (e) {
  statements
}]
...
[finally {
  statements
}]

eval( formula )

eval()は、文字列をJavaScriptのコードとして評価するビルトイン関数である。引数にはJavaScriptコードを表す文字列を指定する。

eval()関数の使用例を次に示す。

<script type="text/javascript">
<!--
    var formula = "1 + 2";
    var answer = eval(formula);
    document.write(answer);
-->
</script>

上記のJavaScriptの実行結果を次に示す。

変数answerに格納されるのは"1 + 2"という文字列ではなく、式として評価した結果、つまり3である。

もうひとつeval()関数のサンプルコードを次に示す。

<script type="text/javascript">
<!--
    var documentWrite = "document.write('test');";
    eval(documentWrite);
-->
</script>

上記のJavaScriptの実行結果を次に示す。

このように、JavaScriptのコードを組み立てることができる。

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