Ta-kaku.jp Tools
Update 2010/02/06
技術メモ内容
トップページ
ハードやソフトの技術メモです。 ほとんど、個人の備忘録のレベルですので高度なことは書かれていません。 皆様に少しでもお役に立てれば幸いです。
MENU
4.JavaScript
サイト更新情報
2008/10/18
「Ta-kaku Tools 住所検索・郵便番号検索・事業所名検索・駅検索・電話局番検索」を Ver2.202 にリビジョンアップしました。
更新内容は以下の通りです。
・「xxx1丁目」の様に「全角の数字」と「丁目」が続いている文字列が入力されると検索できない事がある不具合を改修しました。
2008/10/01
Ta-kaku Tools Whois検索 Ver1.000をリリースしました。
2008/09/30
「Ta-kaku Tools 住所検索・郵便番号検索・駅検索・電話番号(局番)検索 」を Ver2.201 にリビジョンアップしました。
更新内容は以下の通りです。
・電話番号(局番)検索機能を正式版にしました。 ・無効な数値に対して住所の検索を行っていた処理を改善しました。 ・局番0120指定でGoogleMapがおかしな場所を示していた不具合を修正しました。 ・「東京駅駅」のように入力されると、関係の無いデータが出力される不具合を修正しました。
過去の情報
関連キーワード
技術メモ インデックス
カテゴリーを選択してください。
インストール
プログラミング言語
マークアップ言語
データベース言語
スクリプト言語
MS-Office
その他
Webアプリケーション
の開発方法
4.JavaScript 技術メモ
追加日時の新しい方から掲載しています。
第4章 JavaScriptについて
登録日:2006/10/03   分類:Webシステム
目的
    JavaScriptは、Netscape Communications 社が開発したプログラミング言語で、
    DHTML(ダイナミックHTML)の動作を実現する要素となります。
    Javaと名前が似ていますが、全く別物ですので混同しないでください。

    JavaScriptは、主にブラウザーのリロードなしに、描画内容を変更する為に
    使用されます。
    しかし、それ以外にも様々な機能があります。
    ここでは、JavaScriptの記述方法と代表的な機能について説明したいと思います。

目次
    1.JavaScriptのコードの入れ方
    2.コメント
    3.定数
    4.変数
    5.配列
    6.イベントハンドラ
    7.関数
    8.ドキュメントオブジェクトモデル
    9.クラス
    10.正規表現
    11.よくあるコーディング例

1.JavaScriptのコードの入れ方

    1-1.HTMLに直接埋め込む指定(推奨しません)

        --- sample4_1.html --->
        <html>
            <head>
                <meta http-equiv="Content-Script-Type" content="text/JavaScript">
                <title>HTMLに直接埋め込む方法</title>

                <script type="text/javascript">    ... JavaScriptの記述開始
                <!--                               ... HTMLにはコメントとして
                    document.write("Sample");          扱わせます
                // -->                             ... JavaScriptには、"-->" 
                                                       をコメントとして、HTMLには
                                                       コメントの終了となるようにします
                </script>                          ... JavaScriptの記述終了
            </head>
            <body>
                <noscript>                         ... JavaScript未対応の記述開始
                    JavaScriptがOFFになっています。
                </noscript>                        ... JavaScript未対応の記述終了
                     :
            </body>
        </html>
        <--- sample4_1.html ---

    1-2.HTMLの外部ファイルとして指定(推奨します)

        --- sample4_2.html --->
        <html>
            <head>
                <meta http-equiv="Content-Script-Type" content="text/JavaScript">
                <title>HTMLの外部ファイルとして指定</title>

                <!-- JavaScriptの外部ファイルをインクルード -->
                <script type="text/javascript" src="sample4_2.js"></script>
            </head>
            <body>
                <noscript>                         ... JavaScript未対応の記述開始
                    JavaScriptがOFFになっています。
                </noscript>                        ... JavaScript未対応の記述終了
                     :
            </body>
        </html>
        <--- sample4_2.html ---

        --- sample4_2.js --->
        <!--
        document.write("Sample");   ... JavaScriptの開始や終了
        //-->                           といった手続きは不要です
        <--- sample4_2.js ---

2.コメント

    // この行の以降の文字がコメントになります

    /* この間がコメントになります */

3.定数
    true
        「真」を表します。値は、0以外です。

    false
        「偽」を表します。値は、0です。

    null
        未設定の状態の値を表します。
        これは、数値の 0 や、文字列の "" とは異なり、メモリ上に明示的に
        値がセットされていない(値用のメモリエリアが確保されていない)状態を指します。

            - 例 -

            アドレス格納エリア
                  +--------+
             0x100| 0x1000 | ... 値が入っているメモリアドレスが確保されている
                  +--------+         メモリエリア"ABCD" の値を指しています
             0x101| 0x1004 | ... 値が入っている場合は、null ではない"" の
                  +--------+         値を指しています
             0x102| 0x0000 | ... 値のアドレスが入っていない
                  +--------+
                       :

            値格納エリア
                  +--------+
            0x1000| "ABCD" | ... これらのデータの格納位置は、OSによって設定されます
                  +--------+
            0x1004|     "" |
                  +--------+
                       :

    undefined
        定義されていないことを示します。

        - 例 -
        if (SAMPLE == undefined)
        {
            document.write("SAMPLEは定義されていません");
        }

    NaN
        数値でないことを示します。
        ビルトイン関数のリターン値などに使用されます。

    Infinity
        無限であることを示します。
        ビルトイン関数のリターン値などに使用されます。

4.変数
    半角英数字とアンダーバーが使用できます。ただし、先頭の数字は不可です。
    大文字と小文字は区別されます。

5.配列

    5-1.配列の生成

        (1) 構文

            配列の変数名 = new Array(生成する要素数);

        (2) 初期化(例)

            - 宣言と同時に初期化 -
            samp = new Array("zero", "one", "two"); ... 要素数は、0から順に取られます

            samp = new Array(3);    ... 3つのエリアを配列で準備します。
            samp[2] = "two";        ... 要素数は、初期化時に決定します。
            samp[4] = "four";
            samp[6] = "six";

    5-2.配列の操作

        (1) 配列要素の数(例)

            samp = new Array("zero", "one", "two");
            for (cnt = 0; cnt < samp.length; cnt ++)
            {
                alert(samp[cnt]);
            }
                ↓
            「zero」, 「one」, 「two」と順にメッセージボックスが表示されます。

        (2) 配列の連結(例)

            atoc = new Array("A", "B", "C");
            dtof = new Array("D", "E", "F");
            atof = atoc.concat(dtof);
            alert(atof);

                ↓ ... 配列の内部は、以下のようになります。

            atof[0] ... "A"
            atof[1] ... "B"
            atof[2] ... "C"
            atof[3] ... "D"
            atof[4] ... "E"
            atof[5] ... "F"

        (3) 配列のソート

            昇順

                samp[0] ... "B"
                samp[1] ... "C"
                samp[2] ... "A"
                samp.sort();

                    ↓ ... 配列の内部は、以下のようになります。

                samp[0] ... "A"
                samp[1] ... "B"
                samp[2] ... "C"

            降順

                samp[0] ... "B"
                samp[1] ... "C"
                samp[2] ... "A"
                samp.reverse();

                    ↓ ... 配列の内部は、以下のようになります。

                samp[0] ... "C"
                samp[1] ... "B"
                samp[2] ... "A"

6.イベントハンドラ

    6-1.構文

        JavaScriptのイベントハンドラは、HTMLタグの要素部分に指定します。

        HTMLのタグ属性(第1章 1-3.(4)より)

            <タグ 属性="値">
                  ~~~~~~~~~
        ボタンをクリックすると何かのアクションを起こす例

            <input type="button" onclick="alert('クリックされました')">
                                 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~この部分が
                                                                      イベントハンドラ
        複数のアクションを起こす場合
            <input type="button" onclick="alert('1つ目のアクション')
                ; alert('2つ目のアクション')">

    6-2.リファレンス

        一部のJavaScriptイベントハンドラは、特定のブラウザに使用が限定されるもの
        があります。

        ページ          onLoad          ロード時
                        onUnload        移動時
        ウィンドウ      onResize        リサイズ時
                        onMove          移動時
        フォーム        onSubmit        サブミット時
                        onReset         リセット時
                        onChange        フォームのオブジェクト変更時
        オブジェクト    onFocus         フォーカス取得時
                        onBlur          フォーカス喪失時
        マウスボタン    onClick         クリック時
                        onDblClick      ダブルクリック時
                        onMouseDown     押した時
                        onMouseUp       離した時
        マウスカーソル  onMouseOver     指定オブジェクトの上にある時
                        onMouseOut      指定オブジェクトの上から離れた時
                        onMouseMove     移動した時
        キー            onKeyDown       押した時
                        onKeyUp         離した時
                        onKeyPress      押し続けた時
        ファイル        onDragDrop      ドラッグ&ドロップ時
                        onAbort         イメージの読込みが中断時
                        onError         読込みエラー発生時
                        onSelect        テキスト選択時

7.関数

    7-1.構文

        function 関数名(パラメータ, パラメータ) ... パラメータは省略可, 複数指定可
        {
            文
            return 値 または 式;                ... 省略可
        }

    7-2.特殊な引数の使い方

        (1) フォームオブジェクトを渡す(例)

            function sample(form)
            {
                form.text1.value = "テキストの文字列";
            }        ~~~~~オブジェクト名称

        (2) 可変引数(例)

            function sample()   ... パラメータの記述は省略できます
            {
                var result = 0;
                for (cnt = 0; cnt < sample.arguments.length; cnt ++)
                {                   ~~~~~~~~~~~~~~~~~~~~~~~パラメータ数の取得
                    result += sample.arguments[cnt];
                }             ~~~~~~~~~~~~~~~~~~~~~関数自体のパラメータとして
                return result;                     呼び出す事ができます
            }

            // 呼ぶ側
            answer = sample(1, 2, 3);

8.ドキュメントオブジェクトモデル

    JavaScriptは、Web画面をリアルタイムに変化させる事ができます。
    これは、Web画面のオブジェクトを直接操作できる事を意味します。

    今回の講座は、HTMLが対象となっています。
    第1章で紹介した通り、HTMLは、<html>, <head>, <body> などの要素から
    構成されています。
    これらの構成要素は、「ドキュメントオブジェクトモデル」という概念で、
    ブラウザ上でオブジェクト生成されます。

    JavaScriptや他のクライアントWeb言語(Javaアプレット, VBスクリプトなど)は、
    このドキュメントオブジェクトモデルを直接操作する事でWeb画面を変化させる事
    ができます。

    ドキュメントオブジェクトモデルは、DOM と呼ばれています。

    以下の階層構造を理解する事で、JavaScriptで使用可能なプロパティとメソッドを
    把握する事ができます。

    8-1.オブジェクト生成の例
        以下のような図式を 「DOM Tree」 と言います。

        [document]                                  ... オブジェクト
          +--<html>                                 ... 要素
               +--<head>                            ... 要素
               |    +--<title>                      ... 要素
               |         +--"タイトル"              ... テキスト
               +--<body>                            ... 要素
                    +--<a>                          ... 要素
                    |    +--"href"                  ... 属性
                    |    +--"http://sample.com/"    ... テキスト
                    +--<h1>                         ... 要素

    8-2.DOMは、windowsオブジェクトのインヘリタンス

        DOMのトップオブジェクトである document は、
        オブジェクトの先頭ではありません。
        Windowsを例にすると、document は、以下のように位置しています。

        [上位オブジェクト]    ... トップレベルのオブジェクト(未調査)
          +--[navigator]      ... ブラウザやプラグインなどの情報が
          |                       格納されたオブジェクト
          +--[window]         ... ウインドウのオブジェクト
               +--[frame]     ... フレームのオブジェクト
               +--[history]   ... 過去のURLリストのオブジェクト
               +--[document]  ... DOMのオブジェクト
               +--[location]  ... ロケーション(URL)のオブジェクト

        上図の通り、DOM は windows オブジェクトのインヘリタンスです。
        従って、document オブジェクトから windows のメンバを使用する事が可能です。

    8-3.使用可能なDOMのメンバ

        以下のサイトに詳しく説明されていますので、ご参照ください。

            初心者のためのホームページ作り/Web for beginner ホームページ作成支援
            オブジェクトリファレンス/JavaScriptリファレンス
            http://www.scollabo.com/banban/java/object.html

            W3Schools Online Web Tutorials
            HTML DOM Reference
            http://www.w3schools.com/htmldom/dom_reference.asp

9.クラス

    JavaScriptでは、クラス定義無しにメゾッドやインスタンスが使用できます、
    従って、クラスの宣言は必要ありません。

    9-1.メゾッドの内部記述パターン

        //コンストラクタの宣言(C言語のクラスの宣言に該当します)
        function sample(val)
        {
            // プロパティの宣言
            this.value = val;

            // メソッドの宣言
            this.func  = function ()
                         {
                             confirm(this.value);
                         }
        }

        // インスタンスの生成
        wkInstance = new sample(123);           ... パラメータに 123 を指定して
                                                    value を初期化している
        // メソッド呼び出し
         wkInstance.func();

    9-2.メゾッドの外部記述パターン

        共有される function の場合は、メゾッドを外部記述します。

        //コンストラクタの宣言(C言語のクラスの宣言に該当します)
        function sample(val)
        {
            // プロパティの宣言
            this.value = val;   ---------+

            // メソッドの宣言
            this.func  = sub_sample; <------+
        }                                |  |
                                         |  |   ... sub_sample() が sample() の
        // 外部記述されたメソッド        |  |       メンバとして追加されている
        function sub_sample()   ------------+
        {                                |
            confirm(this.value); <-------+      ... sampleクラスのプロパティを使用
        }

        // インスタンスの生成
        wkInstance = new sample(123);           ... パラメータに 123 を指定して 
                                                    value を初期化している
        // メソッド呼び出し
         wkInstance.func();

10.正規表現

    開発を進めて行くと、画面のテキストボックスなどから入力されたデータが適切か
    どうか確認する必要がでてきます。
    その際、正規表現を理解しておく事で、入力判定を効率よく行なう事が可能になります。
    正規表現は、VBでも他の言語でもほぼ共通の概念で使用できますので、参考になると
    思います。

    10-1.正規表現の例

        ?特定の文字列を判定

            直接文字列そのものを判定します。

            (1) 書式

                /文字列|文字列/

            (2) 例1

                samp = "ABCDEFG";

                if (null != (result = "abcdefg".match(/A/)))
                {   // "Aがマッチしました" と出力される
                    document.write(result + "がマッチしました");
                }

                例2

                samp = "ABCDEFG";

                if (null != (result = "abcdefg".match(/AB|DF|XZ/)))
                {   // "ABがマッチしました" と出力される
                    document.write(result + "がマッチしました");
                }

        ?任意の文字を判定

            (1) 書式

                /..文字列/          ".." は、文字の数(ここでは2文字)

            (2) 例

                samp = "ABCDEFG";

                if (null != (result = "abcdefg".match(/..E/)))
                {   // "CDEがマッチしました" と出力される
                    document.write(result + "がマッチしました");
                }

        ?任意の文字いずれかを判定

            (1) 書式

                /[文字]/            文字列を指定しても、各文字で判定が行なわれる

            (2) 例

                samp = "ABCDEFG";

                if (null != (result = "abcdefg".match(/[CGZ]/)))
                {   // "CGがマッチしました" と出力される
                    document.write(result + "がマッチしました");
                }

        ?任意の文字以外のいずれかを判定

            (1) 書式

                /^[文字]/           文字列を指定しても、各文字で判定が行なわれる

            (2) 例

                samp = "ABCDEFG";

                if (null != (result = "abcdefg".match(/[CGZ]/)))
                {   // "Zがマッチしました" と出力される
                    document.write(result + "がマッチしました");
                }


        ?特定文字の存在する数で判定

            (1) 書式

                /文字{数}]/

            (2) 例

                samp = "ABBCCCC";

                if (null != (result = "abcdefg".match(/B{2}/)))
                {   // "BBがマッチしました" と出力される
                    document.write(result + "がマッチしました");
                }

    10-2.正規表現の種類

        以下のページをご参照ください。

            とほほのJavaScriptリファレンス 正規表現
            http://www.tohoho-web.com/js/regexp.htm

11.よくあるコーディング例

    11-1.ブラウザーに文字列を表示するには

        --- sample4_3.js --->
        document.write("この文字列がブラウザーに表示されます");
        <--- sample4_3.js ---

        --- sample4_3.html --->
        <html>
            <head>
                <title>ブラウザーに文字列を表示</title>
                <meta http-equiv="Content-Script-Type" content="text/JavaScript">
                <script type="text/javascript" src="sample.js"></script>
            </head>
            <body>
                <!-- ここには、特に何も指定する必要はありません -->
            </body>
        </html>
        <--- sample4_3.html ---

    11-2.マウスのON/OFFで表示を変更するには

        HTMLの属性のみで実現する方法(推奨しません)

            --- sample4_4.html --->
            <html>
                <head>
                    <title>マウスのON/OFFで表示を変更するには</title>
                </head>
                <body>
                    <!-- JavaScriptのマウスイベントを利用して
                        、直接img の属性にイメージをセットしています -->
                    <img src="after.gif" onmouseover = "this.src='before.gif'"
                        onmouseout  = "this.src='after.gif'">
                </body>
            </html>
            <--- sample4_4.html ---

        外部ファイルで実現する方法(推奨します)

            --- sample4_5.js --->
            // イメージ切り替えの関数
            // pIns ... img のオブジェクト
            // pImg ... イメージファイル
            function sample(pIns, pImg)
            {
                pIns.src = pImg;    // ここで属性にセット
            }
            <--- sample4_5.js ---

            --- sample4_5.html --->
            <html>
                <head>
                    <title>マウスのON/OFFで表示を変更するには</title>
                    <meta http-equiv="Content-Script-Type" content="text/JavaScript">
                    <script type="text/javascript" src="sample.js"></script>
                </head>
                <body>
                    <!-- JavaScriptのマウスイベントを利用して、
                         関数 sample() をコールしています -->
                    <!-- その際、img のオブジェクト自身を
                         パラメータで渡しています         -->
                    <img name="img_out" src="before.gif"
                    onmouseover="sample(this, 'over.gif');"
                    onmouseout ="sample(this, 'out.gif');">
                </body>
            </html>
            <--- sample4_5.html ---

    11-3.日時を表示するには

        現在時刻の取得

            --- sample4_6.js --->
            samp = new Date();
            <--- sample4_6.js ---

        よく使用する形式(YYYY/MM/DD hh:mm:ss)に編集

            --- sample4_7.js --->
            // Dateオブジェクトの生成
            date = new Date();

            // 日時データの収集
            YY = date.getYear();            // 年
            MM = date.getMonth() + 1;       // 月
            DD = date.getDate();            // 日
            hh = date.getHours();           // 時
            mm = date.getMinutes();         // 分
            ss = date.getSeconds();         // 秒

            // 日時データの調整
            if (YY < 2000)
            {
                YY += 1900;
            }
            if (MM < 10)
            {
                MM = "0" + MM;
            }
            if (DD < 10)
            {
                DD = "0" + DD;
            }
            if (hh < 10)
            {
                hh = "0" + hh;
            }
            if (mm < 10)
            {
                mm = "0" + mm;
            }
            if (ss < 10)
            {
                ss = "0" + ss;
            }

            // 日時データの編集
            datetime = YY + "/" + MM + "/" + DD + " " + hh + ":" + mm + ":" + ss;
            <--- sample4_7.js ---

    11-4.数値<--->文字列の変換を行なうには

        数値--->文字列

            sample = "" + 123;

        数値<---文字列

            sample = eval("123");

            sample = parseFloat("123.456");

最後に
    JavaScriptの特徴を生かした Ajax という使い方があります。
    こちらは、「第6章 XMLについて」で詳しくご紹介致します。

参考

    初心者のためのホームページ作り/Web for beginner ホームページ作成支援
    http://www.scollabo.com/banban/index.html

    とほほのJavaScriptリファレンス
    http://www.tohoho-web.com/js/index.htm

    W3Schools Online Web Tutorials
    http://www.w3schools.com/

---

・本ページの内容は、Ta-kakuが住所検索のページを作成する際に独自で調査した内容を
  講座的にまとめたものです。

・記述に誤りがある場合は、訂正して読み替えてください。

・技術的な内容にはお答えできませんので、予めご了承ください。
PR