フォームとインナー HTML を使って動的にページ内の文章を変更しよう 問題 1. つぎの指示と画面を参考に HTML を組みなさい 仕様 テキストボックスに任意の文字を入力し [ コメント ] ボタンをクリックすると 下部の文章がテキストボックスの内容に置き換わる フォーム名 : f1 テキストボックス名 : t1 関数名 : MM() test-a.htm function MM(){ a=document.f1.t1.value; if( a!="" ){ A.innerHTML=document.f1.t1.value; < BODY BGCOLOR=#FFCCFF < FORM NAME=f1 < INPUT TYPE=TEXT NAME=t1 < INPUT TYPE=BUTTON VALUE= コメント onclick=mm() < DIV ID=A 上に入力してボタンを押す < /DIV ----------------------------------------- -1-
問題 2. つぎの指示と画面を参考に HTML を組みなさい 仕様 メニューを選ぶと その問題の解答が右側に表示される 関数名 CH() フォーム名 f1 メニュー名 s1 メニューの項目 問題を選んでください "" 第 1 問 ウ 第 2 問 エ 第 3 問 ア 第 4 問 イ test-b.htm function CH(){ a=document.f1.s1.value; if( a!="" ){ A.innerHTML=document.f1.s1.value; < BODY BGCOLOR=#FFCCFF < FORM NAME=f1 < SELECT NAME=s1 onchange=ch() < OPTION VALUE="" 問題を選んでください < OPTION VALUE= ウ 第 1 問 < OPTION VALUE= エ 第 2 問 < OPTION VALUE= ア 第 3 問 < OPTION VALUE= イ 第 4 問 < /SELECT 正解 :< SPAN ID=A < /SPAN ------------------------------------------ -2-
問題 3. つぎの指示と画面を参考に HTML を組みなさい 仕様 メニューを選ぶと それに該当するリンク先が表示される 切り替わった文字をクリックすると該当するサイト にジャンプする 関数名 CHANGE() フォーム名 category メニュー名 menu メニュー項目 値 : 0 カテゴリーを選んでください リンク先を選んでください と表示される 値 : 1 検索サイト 切替文字 : ヤフー リンク先 : http://www.yahoo.co.jp/ 値 : 2 ニュース 切替文字 : 朝日新聞 リンク先 : http://www.asahi.com/ 値 : 3 スポーツ 切替文字 : サンスポ リンク先 : http://www.sanspo.com/ インナーテキスト名 LINK 表 1 行目の背景色 :#99FF66 表の横幅 : 300 枠線 : 1 A タグの書式 font-size:18pt:font-weight:bold; -3-
test-c.htm function CHANGE(){ a=parseint( document.category.menu.value ); switch( a){ case 1:LINK.innerHTML=" < A HREF=http://www.yahoo.co.jp/ ヤフー < /A ";break; case 2:LINK.innerHTML=" < A HREF=http://www.asahi.com/ 朝日新聞 < /A ";break; case 3:LINK.innerHTML=" < A HREF=http://www.sanspo.com/ サンスポ < /A ";break; default : LINK.innerHTML=" リンク先を選んでください "; < STYLE A{ font-size:18pt:font-weight:bold; < /STYLE < BODY BGCOLOR=#FFFFFF < FORM NAME=category < TABLE ALIGN=center WIDTH=300 BORDER=1 < TR< TD BGCOLOR=#99FF66 ALIGN=center < SELECT NAME=menu onchange=change() < OPTION VALUE=0 カテゴリーを選んでください < OPTION VALUE=1 検索サイト < OPTION VALUE=2 ニュース < OPTION VALUE=3 スポーツ < /SELECT < /TD < /TR < TR< TD < P< DIV ID=LINK リンクカテゴリー < /DIV < /TD < /TR < /TABLE --------------------------------------- ワンポイント インナーテキスト インナーテキストとは タグで囲われている文字です タグは本来は < B ようこそ < /B というように使われ この場合ならば ようこそ が < B タグに対するインナーテキストと呼ばれます ( インナーテキスト内にタグが入っていればインナー HTML と呼びます ) 使用方法としては 切り替えたい文字を < DIV などのタグで囲い それに ID 属性を設定します そして その ID の innerhtml プロパティに対して 別な文字を代入すれば動的に文字を変更できます 例えば 以下の例では Aという ID属性のタグのインナーテキストは こんにちは となります < DIV ID=A こんにちは < /DIV このインナーテキストを onclick などのイベントハンドラ ( 利用者のマウスの動きなどに反応して動く命令群 ) と組み合わせれば 動的にページの内容を切り替えることができます ワンポイント スタイル < STYLE ~< /STYLE で囲われた部分には タグを記述し そこに書かれたタグはそれ以降すべてその書式になります 例えば < STYLE TD{ font-color:#ff0000; < /STYLE と書かれたページでは < TD タグ内の文字色がすべて#ff0000 になります タグ名 { 変更したい書式名 : 設定値 ; という文法になります ; で区切れば書式をいくつも設定することが可能です また タグもいくつでも併記することが可能です -4-
ワンポイント インナー HTML を使ったイエスノーテストインナー HTML を使ったイエスノーテストです 質問を考えればあとは関数を繰り返して使うだけです いろいろな問題を考えてみましょう インナー HTML の部分は1 行で入力しましょう 途中で改行してしまうとエラーになってしまいます t-check.htm < html< head< title 行き先チェック < /title < script language="javascript" function Y2(){ A.innerHTML=" < BR< font 週末は時間に余裕がある < /font< BR< BR< onclick=y31 () はい < /a < onclick=n31 () いいえ < /a "; function N2(){ A.innerHTML=" < BR< font 週末は時間に余裕がある < /font< BR< BR< onclick=y32 () はい < /a < onclick=n32 () いいえ < /a "; function Y31(){ B.innerHTML=" < BR< font 温泉に行きましょう! < /font "; function N31(){ B.innerHTML=" < BR< font 近くのおいしいお店に行こう! < /font "; function Y32(){ B.innerHTML=" < BR< font 九州に行きましょう! < /font "; function N32(){ B.innerHTML=" < BR< font 野球を見に行こう! < /font "; < /script < style FONT{ font-size:16pt;background-color:#330066;color:#ffffff; A{ font-size:12pt;font-weight:bold; < /style < /head< body bgcolor=#ffffff leftmargin=0 topmargin=0 < table width=100% height=100% border=0 < tr< td valign=top align=center height=80 <table BORDER=0 WIDTH="100%" BGCOLOR="#66cc66" align=center cellpadding=10 < tr< td align=center 旅行行き先チェック < /td < /tr < /table < /td < /tr < tr< td valign=top align=center < div align=center < h2 旅行行き先チェック < /H2 < /div < bloclquote < div align=center< font 最近 仕事で疲れている < /font< BR< BR< onclick=y2 () はい < /a < onclick=n2 () いいえ < /a < /div < BR< P ID=A < /P < P ID=B < /P< BR < /bloclquote < /td < /tr < tr< td valign=bottom align=center <table BORDER=0 WIDTH="100%" BGCOLOR="#66cc66" align=center cellpadding=10 < tr< td align=center 旅行行き先チェック < /td < /tr < /table < /td < /tr < /table < /body < /html ------------------------------------------ -5-