PR

変数につまずくのはもうやめたい!

2008年5月20日(火)
須田 超一

formデータの読み取り

formタグで指定された内部のデータにアクセスするには、いくつかの方法があるので紹介していきます(図2)。

リスト1のように、「form name="f1"」「input name="text1"」としたとき、DOMツリーをたどってvalue属性(テキストフィールドの入力値)にアクセスするには、リスト2のように3通りの方法があります。

リスト2の(1)の「forms[0]」は、html内のformの数をゼロ番から数えて、何番目にあるかということを意味しています。複数formがある場合は、「forms[0]」「forms[1]」「forms[2]」…と番号が増えてきます。リスト2の(2)とリスト2の(3)は、formのname属性をキーにしてアクセスする方法で、こちらの方が、直感的で分かりやすいと思います。

今回は、前回学習した「getElementById」を使って、DOMツリーを意識しないで、直接テキストフィールドにアクセスしてみたいと思います(リスト3)。つまり、取得したいテキストフィールドにid属性:text1を指定して、「document.getElementById("text1")」とします。リスト3では、この値を、変数text1に代入して、以降はtext1で参照可能にしています。テキストフィールドのvalue属性を参照するには、「text1.value」で簡単に表現できるようになります。

リスト3で使っているalertは、JavaScriptでデータの確認によく使う方法で、閲覧したい変数などを、alertの括弧の中に入れて使用します。「alert(text1.value)」と指定すると、テキストフィールドに入っている文字を取得できたかどうか確認することができます(index4.html)。

図1:formタグで指定された内部データへのアクセス方法と入力データのチェックについて(クリックで拡大)

入力データのチェックをしてみる

ユーザが入力したデータは、そのまま利用するのではなく通常は、入力値チェックを行います。ここでは、ユーザが入力したデータが数値がどうかのチェックをしてみましょう(index5.html)。

リスト4は、formのテキストフィールドを読み込む部分です。type属性がbuttonのinputタグに、onclickのイベントハンドラを設定して、readText()というJavaScript関数を呼び出すようにしています。これで、マウスでボタンを選択すると、readText()関数が実行されます。

イベントハンドラを使ってJavaScript関数を呼び出す仕組みは、前回の「第1回 そろそろ本気で学びませんか?」でも紹介していますので、参考にしてください。

では、「readText()」の中を見てみましょう(リスト5)。まず、前項目の説明で、「text1.value」には、ユーザが入力した値が入っています。この値を、「str_val」という変数に代入して、「str_val」の中の値をif文で調べるようにします。

if文の中では、数値かどうかのチェックをします。if文の最初の評価式は、「isNaN(str_val)」と「str_val==""」を「||」でつないでいます。「||」は、論理演算子と言って、「または」という意味になります。つまり、「A || B」と記述したら「AかBのどちらかが成り立つ」と言う意味になります。プログラミング的な表現をすると、「AとBのどちらかが真(true)」ならと言います。

今回の例では、「isNaN(str_val) 、または、str_val == ""が成り立つなら」と考えます。

「isNaN」は、数値かどうかを調べる関数で、数値でない場合は、真(true)、数値の場合は、偽(false)と判断します。後半の、「str_val==""」は、「str_val」の中に「空文字(何も入っていない)」かどうかを調べています。空文字を表現するときは、ダブルクオーテーション(")を2つ連続させて書くか、シングルクオーテーション(')を2つ連続して書きます。

以上をまとめると、ifの括弧の中は、「str_valが数字でないか、または、空文字のどちらかが成り立つ(真(true))場合」と表現できます。これが成り立つ場合は、「"数値以外の文字が入っています"」と表示されるようにします。

elseの部分は、「それ以外の場合は」と解釈します。つまり、「数値以外でない場合」とは、「数値の場合」になるので、「"数値のみです"」と表示するようにします。

結果を表示させる領域を、「id="message"」として作成したサンプルは、index6.htmlになります。

ここで紹介した論理演算子の例は、論理演算子のページを参照してください。また、数値かどうかのチェック方法には、いくつか方法がありますので各自研究してみてください。

株式会社ITコア R&Dグループリーダー/有限会社グローバルイーネットワーク 代表取締役

有限会社グローバルイーネットワーク代表取締役。ITコアでは、クラウドサービスやオープンソースの研究開発に従事。株式会社東芝で半導体メモリの開発やシステム開発を経験後、南カリフォルニア大学やボンド大学のビジネススクールで経営学を学びMBA取得。
ITと経営戦略を武器にして、多方面で事業活動を展開中。 2011年は、バルーンアート事業を立ち上げます。デジタルハリウッド講師(PHP/Ajax)。 アメブロはこちら

Think IT会員サービス無料登録受付中

Think ITでは、より付加価値の高いコンテンツを会員サービスとして提供しています。会員登録を済ませてThink ITのWebサイトにログインすることでさまざまな限定特典を入手できるようになります。

Think IT会員サービスの概要とメリットをチェック

他にもこの記事が読まれています