SQLの窓 イラストAC フリー素材

2021年06月27日

2021年 前期試験問題( 7 ) : 12

WEB アプリケーションを作成する上で、PHP はサーバ側のに情報を登録するという大きな役割があります。それに対して JavaScript画面をコントロールするという役割があります。その為に必要な知識は多岐にわたり、HTMLの知識も必要です。

まず、画面上の要素を特定する為に HTML ではという属性を定義する必要があります。通常、画面上のデータをサーバに送信する為に必要な属性は属性なので、この二つの属性は同じ値を設定すると混乱せずに済みます。そして、その属性の値を使用して要素そのものである『オブジェクト』を参照する為に使用するのが、document オブジェクトのメソッドのです。( JavaScript のメソッドでは正確に大文字小文字を区別して記述してください )

このメソッドで取得されたオブジェクトは、その対象となる HTML要素そのものです。よって、通常 HTML で記述可能な属性は、このオブジェクトのプロパティとして存在します。ですから、INPUT 要素の入力された値は、プロパティを参照して取得する事になります。

HTML 要素の参照方法は他にもあって、前述の FORM 内のデータ入力に必ず設定する属性を使用するメソッドは、属性の値が 画面内に同一で複数存在する事を許されているので、取得できたオブジェクトが配列になります。ですから、特定の HTML 要素を参照するには、オブジェクトに [0] を付加して先頭のオブジェクトを参照します。

この方法は、よく似たメソッドである document.getElementsByTagName を例に取ると以下のようになります。
var obj = document.getElementsByTagName("input")[0];
画面上の値を取得したり設定する事は、HTML 要素のオブジェクトのブロパティを操作する事で可能ですが、その操作をいつ行うかが重要な知識です。PHP は、ソースが呼び出されたらソースコードの先頭より実行されていきますが、HTML の画面では通常表示されればユーザの入力待ちになります。

このような場合、JavaScript が実行されるきっかけはユーザの処理に委ねられます。そして、殆どの場合それはユーザがボタンをした時に実行される事になります。

そのような処理を JavaScript で記述する為に、HTML 要素には『』という属性が用意されています。この属性の頭2文字は on です。単純なボタン処理を記述すると以下のようになります。
<script> function myaction() { alert("ボタンがクリックされました"); } </script> <input type="button" value="実行" on="myaction()">
この例よりも解るように、この属性の値は JavaScript を記述する事ができます。そして、一般的には関数を作成してその関数を呼び出させてその中で目的の処理を行います。上記例では、単純なボタンを使用しましたが WEB アプリケーションで実際に使用する場面では、FORM の属性を使用します。
<script> function myaction() { if ( !confirm( "送信しますか?" ) ) { return false; } return true; } </script> <form id="frm" on="return myaction()"> </form>
このような処理を作成する事によって、ユーザが入力を正しく完了したかどうかを検証し、入力しなおす場合はキャンセルする事ができます。
posted by at 2021-06-27 10:59 | 講師生活 | このブログの読者になる | 更新情報をチェックする