XMLHttpRequestと直接は関係ありませんが、同時に使うことがほぼ前提になっているinnerHTMLについて解説しておきます。
JavaScript時計はよく見ますが、そのほとんどがinputタグ内に書かれたものです。
http://yuubiseiharukana.creativeroot.jp/ajax1/ajax1-2-1.html
| document.forms[0].sampleWatch.value=new Date(); <input type="text" name="sampleWatch"> |
なにしろ実質的に上の2行で実現できるのですから非常にお手軽だと言わざるをえません。
リアルタイムに更新を行いたいときも、window.setTimeoutを仕込むだけです。
今後JavaScript部分は別ファイルに追い出すことになりますが、この程度なら同一ファイルでかまわないでしょう。
http://yuubiseiharukana.creativeroot.jp/ajax1/ajax1-2-2.html
| <script type="text/javascript"> <!-- function openFile(){ document.forms[0].sampleWatch.value=new Date(); window.setTimeout("openFile();",1000); } --> </script> <body onload="openFile()"> <form> <input type="text" name="sampleWatch" size="60"> </form> </body> |
さて、フォーム時計はわかりやすいのはいいのですがデザイン的に困り者です。
cssでなんとかなるとはいえ、「今日は4月1日です」程度の文章がブロック要素で分断されてしまうのは何かと釈然としません。
どうにかしてインライン要素で表示しましょう。
getElementByIdというメソッドがあります。
HTMLタグのidプロパティを取得できます。
HTML内の適当な場所に
<div id="sampleWatchInc">さんぷる</div>
と入力した場合、
document.getElementById(sampleWatchInc);
と入力することで、その部分のオブジェクトを取得することができます。
さて、getElementByIdメソッドにはinnerHTMLというプロパティがあるのですが、上記の例で言うと具体的には<div>タグで挟まれた部分のことを示します。
というわけで
var node=document.getElementById(sampleWatchInc).innerHTML;
とするとnodeの中には"さんぷる"が入ります。
それはいいのですが、驚いたことに
document.getElementById(sampleWatchInc).innerHTML="ほげほげ";
と入力すると、<div>タグで囲まれた部分の「さんぷる」が「ほげほげ」に書き換えられてしまいます。
なんともあっさり文字列を変更できてしまいました。
さて、最後にリアルタイム時計と、よくある押すと文字が変更になるボタンを置いておきます。
forms.nameがgetElementById.innerHTMLに変わっただけなので、簡単にわかると思います。
http://yuubiseiharukana.creativeroot.jp/ajax1/ajax1-2-3.html
| <script type="text/javascript" src="./ajax1-2-3.js"></script> <body onload="loadDate()";> <form> <input type="button" value="ボタンを押すと文字が変わる" onClick="changeText()"> </form> <div id="time">さんぷる</div><br /> <div id="disp">さんぷる</div> |
http://yuubiseiharukana.creativeroot.jp/ajax1/ajax1-2-3.js
|
var i=0; |
よく考えてみたらdivもブロック要素ですが。
