上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
 第一回目は、Javaスクリプトを使って、HTMLを書き出していきます。
 色々スクリプトから文字や画像を表示する方法はあるのですが、今回のこれ一つを覚えておけば十分です。
 なぜなら、HTMLタグをそのまま表示させることが出来るから。

 HTMLが分かっていれば、画像やdivブロック、そしてテキストを書く方法は分かっているはず。そのHTMLをそのまま表示させることが出来ます。




スクリプトの書き方・定型文



 HTMLにJavaスクリプトを書くとき、そのままHTMLに直接スクリプトの命令文を書いても、その命令文がそのままテキストとして表示されてしまいます。
 そのため、Javaスクリプトの命令文を書くときは、「ここからここまでJavaスクリプトですよ」というHTMLタグを書く必要があります。

<script type="text/javascript">
<!--

ここにスクリプトの命令文

//-->
</script>


 これは、HTMLのどこに書いても構いません。




HTMLに書き出す



 次は、Javaスクリプトから、HTMLを書き出してみましょう。
 一つ重要な決まり事があって、HTML側に、あらかじめ「ここでスクリプトを処理するよ」という「divブロック」を作っておきます。(必ずしもdivブロックでなくとも構いません)

<div id="koko"></div>

 こんな感じです。
 「id」を設定した場所に、予めHTMLタグをJavaスクリプトから書き出す場所を設定しておくわけです。

 そして、必ずこの設定したIDの後に、Javaスクリプトを実行させるようにします。

<div id="koko"></div>

<script type="text/javascript">
<!--

ここにスクリプトの命令文

//-->
</script>




書き出すための命令文

document.getElementById("koko").innerHTML='ここに、自由にHTMLタグを書けます。';


■赤字の「koko」が、先ほど予め作っておいた、ID名です。これは、自由に設定出来ますが、HTML側のIDとスクリプト側のID名を必ず同じ名前にします。

■Javaスクリプトの1命令文を書いた後は、文末は必ず「;」で閉じます。

■Javaスクリプトの1命令文中では、改行をしてはいけません。書き出したいHTMLで改行させたい場合は「<br>」等を利用します。

■「innerHTML=」の後の「' '」「" "」の入れ子に注意してください。
 HTMLタグを書くとき、IDやstyleを設定したタグをよく書きます。例えば…

(×)
document.getElementById("koko").innerHTML="<div style="abc">ダメな例</div>";


(◎)
document.getElementById("koko").innerHTML="<div style='abc'>良い例</div>";

document.getElementById("koko").innerHTML='<div style="abc">良い例</div>';


 このように、「' '」「" "」の入れ子には十分注意します。




今回出来たスクリプト



<div id="koko"></div>

    :
    :
    :

<script type="text/javascript">
<!--

document.getElementById("koko").innerHTML='ここに、自由にHTMLタグを書けます。';

//-->
</script>


 これを実行させると、

「<div id="koko"> </div>」の中に「ここに、自由にHTMLタグを書けます。」というテキスト(HTML)が挿入されます。

■特徴

  • <img>タグを書き出させれば、画像も呼び出せます。
  • <style>タグで、スタイルシートを書き出すことも出来ます。
  • スタイルシートを書き出す場合、「リンク(<a>タグ)」のスタイルシートを設定した場合は、動作しません。
  • <script>タグで、「スクリプト」を書き出させた場合も動作しません。




■次は「訪問者が行うマウスアクション」に反応させます。
訪問者が行うマウスアクションに反応させる
このエントリーをはてなブックマークに追加
Wed.03.23.2011
Comment
Trackback
Comment Form
質問するときは?
  • 不具合が出ているページのURLを書き込む。
  • 使っているブラウザ(IE、Firefoxなど)を書き込む※IE6はサポート外です。
  • 次の人が確認できるように、使っているテンプレートの記事ページ、或いは各カスタマイズ記事ページにコメントを書きこむ。
コメント時の注意
やっぱり自分で解決したい時
特定の記事のみでレイアウトが崩れる場合
全ページでレイアウトが崩れる場合
メールフォーム
Bookmarks
Page Top
Copyright © SAKILab All Rights Reserved.
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。