フォームとインナー HTML を使って動的にページ内の文章を変更しよう問題 1. つぎの指示と画面を参考に HTML を組みなさい仕様テキストボックスに任意の文字を入力し [ コメント ] ボタンをクリックすると下部の文章がテキストボックスの内容に置き換わるフォーム名 : f1 テキストボ

Size: px

Start display at page:

Download "フォームとインナー HTML を使って動的にページ内の文章を変更しよう問題 1. つぎの指示と画面を参考に HTML を組みなさい仕様テキストボックスに任意の文字を入力し [ コメント ] ボタンをクリックすると下部の文章がテキストボックスの内容に置き換わるフォーム名 : f1 テキストボ"

ともあきいとえ
5 years ago
Views:

フォームとインナー HTML を使って動的にページ内の文章を変更しよう問題 1. つぎの指示と画面を参考に HTML を組みなさい仕様テキストボックスに任意の文字を入力し [ コメント ] ボタンをクリックすると下部の文章がテキストボックスの内容に置き換わるフォーム名 : f1 テキストボックス名 : t1 関数名 : MM() test-a.

1 フォームとインナー 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

問題 2. つぎの指示と画面を参考に HTML を組みなさい仕様メニューを選ぶとその問題の解答が右側に表示される関数名 CH() フォーム名 f1 メニュー名 s1 メニューの項目問題を選んでください "" 第 1 問ウ第 2 問エ第 3 問ア第 4 問イ test-b.htm function CH(){ a=document.f1.s1.value; if( a!

2 問題 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

問題 3. つぎの指示と画面を参考に HTML を組みなさい仕様メニューを選ぶと

CHANGE() フォーム名 category メニュー名 menu メニュー項目値 : 0

com/ 値 : 3 スポーツ切替文字 : サンスポリンク先 : http://www.sanspo.

3 問題 3. つぎの指示と画面を参考に HTML を組みなさい仕様メニューを選ぶとそれに該当するリンク先が表示される切り替わった文字をクリックすると該当するサイトにジャンプする関数名 CHANGE() フォーム名 category メニュー名 menu メニュー項目値 : 0 カテゴリーを選んでくださいリンク先を選んでくださいと表示される値 : 1 検索サイト切替文字 : ヤフーリンク先 : 値 : 2 ニュース切替文字 : 朝日新聞リンク先 : 値 : 3 スポーツ切替文字 : サンスポリンク先 : インナーテキスト名 LINK 表 1 行目の背景色 :#99FF66 表の横幅 : 300 枠線 : 1 A タグの書式 font-size:18pt:font-weight:bold; -3-

4 test-c.htm function CHANGE(){ a=parseint( document.category.menu.value ); switch( a){ case 1:LINK.innerHTML=" < A HREF= ヤフー < /A ";break; case 2:LINK.innerHTML=" < A HREF= 朝日新聞 < /A ";break; case 3:LINK.innerHTML=" < A HREF= サンスポ < /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-

5 ワンポイントインナー 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

教材ドットコムオリジナル教材

教材ドットコムオリジナル教材問題次の画面写真を参考にソースを組みなさい画像素材は次のサイトにある http://www.kyouzai.com/kenshu/index.htm トップ大学専門学校授業 10 月 31 日画像素材ファイル名 :index.htm( フレーム定義ファイル ) menu.htm( 左フレーム表示メニューページ ) top.htm( 右フレーム表示似顔絵イラスト表示ページ ) touroku.htm(