JavaScript 何に使う｜VB.NET-TIPS などプログラミングについて

2019/04/04

JavaScript とはブラウザで実行されるクライアントプログラムのことですが、 HTMLで記述されたWebページを動的に変更したりするために使います。

主なjavaScriptの機能としては以下の様なものがあります。

HTML要素の操作（HTMLの要素の属性値、CSSプロパティを変更、HTML要素そのものの生成）
HTML要素などによる動作の指定
Webサーバとの通信によるデータのやり取り（Ajaxを利用）

■HTML要素の操作（HTMLの要素の属性値、CSSプロパティを変更、HTML要素そのものの生成）

以下のソースを見て下さい。これは p タグで囲って テストメッセージ を表示するだけの HTML ソースです。これをブラウザ表示させると テストメッセージ が表示されます。

<html>
<head>
    <meta charset="utf-8">
    <title>test 1</title>
</head>
<body>
    <p>テストメッセージ</p>
</body>
</html>

この p タグの中身を変更するには JavaScript のソースを以下の様に記述します。
このソースをブラウザで表示させるといきなり こんにちは が表示されます。
body タグに記述された script タグの中の JavaScript のソースが順次実行されるため、このソースを読込むと同時に JavaScript のソースが実行され こんにちは のみが表示されます。

<html>
<head>
    <meta charset="utf-8">
    <title>test 1</title>
</head>
<body>
    <p>テストメッセージ</p>
<script>
var elements = document.getElementsByTagName('p');
elements[0].innerText = 'こんにちは';
</script>
</body>
</html>

上のソースでいきなり document オブジェクトが出てきましたが、これはブラウザーに読み込まれたウェブページ全体を示すオブジェクトです。このオブジェクトの getElementsByTagName メソッドを使ってタグのオブジェクトの一覧を取得します。
getElementsByTagName に 'p' を指定し、p タグの一覧を取得します。結果はオブジェクト配列となりますので、上の例では配列の最初のプロパティ innerText へ こんにちは を設定します。

ここで テストメッセージ を1行追加して以下の様にし、ブラウザに表示すると、当然なのですが最初の1行目しか こんにちは となりません。そこで、 JavaScript 部分を以下の様にすれば全てのp タグの中身のテキストを こんにちは に変更できます。

<html>
<head>
    <meta charset="utf-8">
    <title>test 1</title>
</head>
<body>
    <p>テストメッセージ</p>
    <p>テストメッセージ</p>
<script>
var elements = document.getElementsByTagName('p');
for (var i = 0; i < elements.length; i++) {
    elements[i].innerText = 'こんにちは';
}
</script>
</body>
</html>

getElementsByTagName 複数のタグの一覧を取得しますが、特定のオブジェクト（エレメント）を取得したい場合があります。その場合には getElementById で指定した ID名 のオブジェクトが取得できます。
以下のソースでは各 p タグに ID を別な名前で割り当てています。 JavaScript では2行目の ID を指定して getElementById を呼出します。返されたオブジェクトの innerText へ こんにちは を設定します。

<html>
<head>
    <meta charset="utf-8">
    <title>test 1-2</title>
</head>
<body>
    <p id="msg1">テストメッセージ</p>
    <p id="msg2">テストメッセージ</p>
<script>
var element = document.getElementById('msg2');
element.innerText = 'こんにちは';
</script>
</body>
</html>

■HTML要素などによる動作の指定

上の例では、ソースをブラウザで表示したとたんにメッセージが変化していましたが、これでは面白くないので、ボタンを2個設置して、ボタンを押下した時にそれぞれのメッセージが変化する様にソースを変更してみます。

<html>
<head>
    <meta charset="utf-8">
    <title>test 1-3</title>
</head>
<body>
    <p id="msg1">テストメッセージ</p>
    <p id="msg2">テストメッセージ</p>
    <button onclick="changeMsg('msg1');">msg1</button>
    <button onclick="changeMsg('msg2');">msg2</button>
<script>
//メッセージ変更関数
function changeMsg(strId) {
    var element = document.getElementById(strId);
    element.innerText = 'こんにちは';
}
</script>
</body>
</html>

上のソースでは各ボタン要素のマウスクリックイベントが発生した時に、関数 changeMsg を呼出す様にしています。
実際に以下のボタンをクリックして下さい。 テストメッセージ が こんにちは に変化します。

テストメッセージ

onclick の様なイベントは他にもいろんなものがありますが、以下に一部を示します。必要に応じて各イベントの処理を行います。

onkeydown ：キーが押した時のイベント
onkeyup ：キーを放した時のイベント
ondblclick ：マウスの左ボタンをダブルクリックした時のイベント
onmouseover：マウスのカーソルを要素の上に合わせた時のイベント
onmouseout ：マウスのカーソルを要素の上から外した時のイベント

いろんな動作に関してのイベント処理の例は別の機会に追々紹介したいと思います。

■Webサーバとの通信によるデータのやり取り（Ajaxを利用）

Webページ上でページを移動しないで、サーバからデータを取得し一部分を動的に変更したい場合があります。この時に用いる方法がAjax（Asynchronous JavaScript XML）と言われるものです。 JavaScript でサーバ側から渡されるXMLデータ（JSONデータもできます）をページ上に反映させます。手順としては以下の通りです。

クライアント側からサーバ側にデータ取得等に必要な引数等を送信する
サーバ側は引数データを受け取って返信すべきデータを整形しクライアント側に送信する
クライアント側はサーバ側から受信したデータをページ上に表示する

Ajax の処理には XMLHttpRequest というオブジェクトを使います。 XMLHttpRequest のメソッド、プロパティは以下の通りです。

メソッド	説明
open(method, url [, async [, user[, pass]]])	新しく作成されたリクエストを初期化する method : HTTP リクエストメソッド("GET", "POST", ...) url　　: リクエストを送信する URL を表す async　: 操作が非同期的に行われるかどうかを示します user　 : 認証プロセスで使用するユーザー名 pass　 : 認証プロセスで使用するパスワード
send([body])	リクエストをサーバーに送信します body : POST リクエストの場合に使用します
abort()	メソッドは、すでに送信された要求を中止します
プロパティ	説明
onreadystatechange	EventHandler で、これは readyState 属性が変化する度に呼び出されます
readyState	リクエストの状態を返します (0):UNSENT XMLHttpRequest クライアントは作成済みだが、まだ open() メソッドは呼ばれていない (1):OPENED open() が呼び出し済み (2):HEADERS_RECEIVED send() は呼び出し済みでレスポンスヘッダーを受け取り済み (3):LOADING レスポンスボディを受け取り中。ResponseType が "text" か空文字の場合、responseText はロードするごとに部分テキストを持つ (4):DONE 取得操作が完了している（データ転送が完全に成功したか失敗したかどちらか）
responseText	リクエストに対するレスポンスがテキスト形式で入った DOMString を返すか、リクエストが失敗した場合や、まだ送信されていない場合は null を返す
responseXML	リクエストに対するレスポンスが入った Document を返すか、またはリクエストが成功しなかった場合、まだ送信されていない場合、 XML または HTML として解釈できなかった場合は null を返す
status	リクエストに対するレスポンスのステータスを返す
statusText	HTTP サーバーから返ってきたレスポンス文字列が入った DOMString を返す

以下に Ajax 処理の簡単な例を示します。このソースで行われるのは、ボタンを押下した時にAjax処理関数を呼出します。 Ajax の手順は以下の通りです。

XMLHttpRequest オブジェクトの生成
サーバへのリクエストの設定を行う（ここでは GET でこのソースが存在するディレクトリのテキストファイルが対象）
イベントハンドラの登録（データ受信が完了でステータスが正常の場合、受信データを表示）
リクエストをサーバーに送信

イベントハンドラの登録では、ここで処理が動作するわけでは無く、単に関数の登録のみを行っています。 XMLHttpRequest オブジェクトの readyState プロパティの値が変化した時に起動される関数を定義しています。結果的にこの関数が走るのは send された後になります。

<html>
<head>
    <meta charset="utf-8">
    <title>test ajax</title>
</head>
<body>
    <h1>test ajax</h1>
    <p id="msg1">テストメッセージ</p>
    <button onclick="getAjax();">Ajax</button>
<script>
//Ajax関数
function getAjax() {
    //XMLHttpRequestの生成
    var xhr = new XMLHttpRequest();
    //サーバへのリクエストの設定を行う
    xhr.open('GET', 'test_ajax.txt');
    //イベントハンドラの登録
    xhr.onreadystatechange = function () {
        if (xhr.readyState == 4) {
            //データ受信完了
            if (xhr.status == 200) { 
                //ステータスが正常の場合、返信データを表示
                var elem = document.getElementById("msg1");
                elem.innerText = xhr.responseText;
            } else {
                alert("status = " + xhr.status);
            } 
        }
    };
    //リクエストをサーバーに送信
    xhr.send();
//    xhr.abort();
}
</script>
</body>
</html>

実際の Ajax 処理では上記の様に XMLHttpRequest そのものでプログラムするわけでは無く、 JQuery と呼ばれるライブラリを利用し、もっと簡略化された記述で処理を行います。この辺りは別の機会に紹介したいと思います。

JavaScript
0CM

コメントを書く