３
4.0以上６ |
表示 |
３ |
好きな文字列を入れたいPart1 4.0以上 |
前回までの表示/非表示だと元々自分が決めた文章しか表すことが出来なかったね。
だって、ある１つの文章を表示したり非表示にしたりするだけだったからね。
今回の命令では、表示非表示ではなく、文字列を挿入するんだ。
つまり、文字列をいくつも用意しておいて、そのうちの必要な文字列だけを表示させることだってできるんだね。
（※前回のdisplayを使えば実は可能）
じゃあ、今回新しくやる命令を見てみよう。
例えば、
<SPAN id="text">この部分を操作</SPAN>
の部分を操作したいとしよう。
そのとき、他の場所からtext.innerText="操作しました"を実行するとするね。
そのとき、""で囲まれた部分がidのついたタグの中に入るんだ。
つまり、
<SPAN id="text">この部分を操作</SPAN>
↓
<SPAN id="text">操作しました</SPAN>
このようになるんだね。
表示部分は、
この部分を操作
↓
操作しました
のようになる。
今回の命令をよく見てみると、innerText。つまり、テキスト（文字）を挿入するという意味なんだ。
テキストを挿入するというのはどういうことか、もし次のような命令を実行すると。
text.innerText="<B>ヨッシーが</B>操作しました" ←タグが入った
<SPAN id="text">この部分を操作</SPAN>
↓
<SPAN id="text"><B>ヨッシーが</B>操作しました</SPAN> ←タグも文字として認識される
つまりこれを表示すると、
この部分を操作
↓
<B>ヨッシーが</B>操作しました ←タグも文字として認識される
このように、タグを使った文字には変換できないんだ。
じゃあ、タグを使いたいときはどうすればいいのか？
大丈夫,このあともよく似た命令が出てくるからね、そこできちんとタグを使えるものも教えていくからね。
実はトップページで使っている物とほとんど同じ物がこの命令でできるんだ。
（※このあとやる２つの命令でもできる）
じゃあ、プログラムを簡単に作ってみよう。
| 左側 <SPAN
onmouseover="text.innerText='<B>ホームページ</B>を作るための言語'"
onmouseout="text.innerText=''"> 右側 <FONT color="green" id="text"></FONT> ←このように文字を入れる範囲を作っておく。入った文字は緑色になるように指定。 |
これを実行すると、
|
HTML講座
スタイルシート講座 JavaScript講座 DHTML講座 ↑マウスが上に乗ると説明が表示される。 |
↑<FONT color="green" id="text"></FONT>の間に入るので、表示される文字列は全て緑色。タグはそのまま表示されることを確認。 |
この後もよく似た命令が出てくるので、それぞれの働きの違いを理解していこうね。
オブジェクトの表示/非表示 Part2
好きなHTML文を入れたいPart2