忍者ブログ
[PR]
×

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。



2017/06/27 05:47 |
JavaScript2-2:innerHTML

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;

function loadDate(){
    document.getElementById("time").innerHTML=new Date;
    window.setTimeout("loadDate();",1000);
}

function changeText(){

    var node=document.getElementById("disp");
    i=!i;
   
    if(i){
        node.innerHTML="押すたびに変更";
    }else{
        node.innerHTML="されます";
    }
}

 
よく考えてみたらdivもブロック要素ですが。

PR


2008/04/25 17:38 | Comments(0) | TrackBack(0) | JavaScript

トラックバック

トラックバックURL:

コメント

コメントを投稿する






Vodafone絵文字 i-mode絵文字 Ezweb絵文字 (絵文字)



<<その他1-3:セキュリティ対策3:クロスサイトリクエストフォージェリ | HOME | JavaScript2-1:XMLHttpRequest>>
忍者ブログ[PR]