Home Page of Toddling Web Study Group
javascript と html と css とでインターラクティブに   旧～い PC 達でも現役に!!

<span id="ID"><span/span> タグに Javascript で書き込んでインタラクティブに

このサイトの各ページの、タイトル左下部の [▼ページ移動を表示] のプルダウンメニューは、Javascript のみで作成されています。

javascript の関数 documentGetElementByID("ID").innerHTML="Text"; は ID の設定されたオブジェクトに 2 つの " (ダブルクオーテーション) に囲まれた Text を書き込みます。
～.innerHTML で出力される Text は

1. タグ < と > など、ブラウザーは html で解釈して表示する。
2. 行末に \ (バックスラッシュ) を記述して改行することで複数行に展開できる。
3. "(ダブルクウォーテーション)に挟まれたテキスト内で "～" は使えず (囲む開始側の " が 内部の囲まれる開始側の " で終端になってしまう)、 ' ～' (シングルクォーテーションで挟む) で代替することができる。
4. 複数の空白文字 (半角スペース) や tab 文字は 1 文字のみ有効なのでスクリプトの整形に使うことができる。

つまり、この 4 つに注意すれば、html 文と css 文を出力することができ、プログラム的な整形も施すことができます。

• イベントを発生する要素に関数を実行するイベントを記述します。
• html 文、css 文を書き出す span 要素や div (style 設定可) 要素に ID="ID" を付します。
<span style="～" onclick="action1();"> クリック <span style="font-weight:bold;" id="arrow_mark">&gt;|</span> </span><span id="for_img"></span>

<script>
var _sw=0;
function action1(){
    if(_sw==0){    <!-- "" 内 を改行して整形 -->
        document.getElementById("for_img").innerHTML="\
            <img src='./images/imgreact1.png' style='height:6em;'>\
        ";
        document.getElementById("arrow_mark").innerHTML="|<";
        _sw=1;
    } else {    <!-- 整形なし -->
        document.getElementById("for_img").innerHTML="<img src='./images/imgreact2.png' style='height:6em;'>";
        document.getElementById("arrow_mark").innerHTML=">|";
        _sw=0;
    }
}
</script>

---

つぶやき･･･

HTML と CSS、Javascript、… 全部テキストじゃないか! 　じゃぁ、素人なりのやり方で!!

素人は、専門家のように「必要とされる知識量が多すぎ精一杯で」、「関連する『専門外の知識』へのアプローチが出来ない・少ない」、「蛸壺のタコ」ではありません。「知識量」が少なく、「『新しもの』は苦手」でも、ちょっとした知見と工夫---「ちょっと試して」「ちょっと失敗」「ちょっと調べなおして」の繰り返し (現役者と違ってケツを敲かれない)---でそれなりのことが出来るようです。「アイデア」で、縛られるもののない「自由さ」と「ゆとり」を持って創っていくのも面白い世界です。
後期高齢者となって～年、認知症の予防にもなるかな???????...