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のオブジェクト

JavaScriptのオブジェクト
オブジェクト 説明
window 現在のウィンドウを表すオブジェクト
document HTML文書を表すオブジェクト
history 履歴を表すオブジェクト
Date 現在の日時を表すオブジェクト

変数

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

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

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;
}

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のコードを組み立てることができる。

ECMAScript for XML (E4X)

ECMAScript for XML (E4X)は、ネイティブXMLサポートをECMAScriptに出力するプログラミング言語拡張である。E4Xでは、XMLをプリミティブ型として扱うことができる。

var xml = <root>
              <node attr="0">foo</node>
          </root>;

Debug.print(xml.node);
Debug.print(xml.node.@attr);
Debug.print(xml.node["@attr"]);

文字列からXMLオブジェクトを生成することもできる。

var src = "<root><node attr='0'>foo</node></root>">;
var xml = new XML(src);

Debug.print(xml.node);
Debug.print(xml.node.@attr);
Debug.print(xml.node["@attr"]);
var xml = <root>
              <node1>foo</node1>
              <node1>bar</node1>
              <node2 num="0">baz</node2>
              <node2 num="1">
                  <node2Child>qux</node2Child>
              </node2>
          </root>;
var children = xml.children();
var children2 = xml.*;

for (var prop in children) {
    Debug.print("children[" + prop + "]=" + children[prop]);
}

for each (var value in children2) {
    Debug.print("value = " + value);
}

子ノードや属性を追加することができる。

var xml = <root>
              <node1>foo</node1>
          </root>;

Debug.print("追加前: " + xml.toString());

xml.addedNode = "bar";
xml.addedNode.@id = "baz";

Debug.print("追加後: " + xml.toString());

delete 演算子を用いてノードを削除することができる。

var xml = <root>
              <node1>foo</node1>
              <node1>bar</node1>
              <node2 num="0">baz</node2>
              <node2 num="1">
                  <node2Child>qux</node2Child>
              </node2>
          </root>;

Debug.print("削除前: " + xml.toString());

delete xml.node1[1];
delete xml.node2.@num;

Debug.print("削除後: " + xml.toString());

XML分の一部を変数にすることもできる。

var attrName = "code";
var tagName = "name";
var attrVal = "0001";
var content = "商品1";
var xml = <order>
              <item {attrName}={attrVal}>
                  <{tagName}>{content}</{tagNae}>
              </item>
          </order>;

attrVal = "0002";
content = "商品2";

xml.appendChild(
    <item {attrName}={attrVal}>
        <{tagName}>{content}</{tagName}>
    </item>
);

Debug.print(xml.toXMLString());

delete xml.item[1];

Debug.print(xml.toXMLString());
スポンサーリンク