遊べるJavaScript入門ロゴ

写真表示のあと少し遅れて紹介文を表示するJavaScript

写真と文章(テキスト)を表示する方法は色々あると思いますが、ここでは、「if文」を使って、写真は「.setAttribute」、テキストは「.textContent」で入れ替える方法を取っています。 また、「setTimeout」で遅れて文章を表示させています。

********** プログラムはここから

下のボタンを押すと北から南にある国立公園の写真が合計8枚表示されますので、それがどこの国立公園の写真なのかを考えてください。4秒後に答えと説明文が表示されます。


 公園名を表示


 説明1を表示

 説明2を表示

**********プログラムはここまで

もう一度初めから表示させるには、再読み込み(F5キー)してください。

PR

コードの考え方や注意点など

主要なコード部分は以下のとおりです。  全体のコードは、画面を右クリックして、ページのソースを表示して、このHPのHTMLから見てください。(//で注釈を入れています)

<p><img id="myMphoto" src="img/ko_main.jpg">
<button id="myBtn" onclick="myShow()">国立公園の写真を見る 4秒後に回答表示</button></p>
<p id="myName1"> 公園名を表示</p>    //ここへ文章を表示させます
<br>
<p id="myName2"> 説明1を表示</p>
<p id="myName3"> 説明2を表示</p>

<script> 
let myTimes = 0;
function myShow() {     //ボタンが押されたときの処理
myTimes++;
if (myTimes == 1) {      //最初の写真
  document.getElementById('myMphoto').setAttribute('src' , 'img/ko_daisetusan.jpg'); //写真表示
  setTimeout(myShow , 4000);   //4秒待機
    function myShow() {     //以下を一斉に表示
     document.getElementById('myName1').textContent = '大雪山・・・';
     document.getElementById('myName2').textContent = '旭岳(2291m)・・・';
     document.getElementById('myName3').textContent = 'アイヌの人・・・';
    }

} else if (myTimes == 2) {   //2番目の写真
   ・・・以下2~7を繰り返し 以下省略
   ・・・ 最後にボタンを小さくする処理
  document.getElementById('myBtn').textContent = ''; //ボタンを小さくした }
}
}
}


私が勝手に決めた「変数」などは、先頭に「my」をつけていますので、適宜変更していただくといいのですが、それ以外の、JavaScriptのメソッドやオブジェクトは大文字・小文字に注意して間違いのないようにしてください。

ここでも、DOM(Documentt Object Model)のメソッドの「.getElementById」「.setAttribute」やプロパティーの「.textContent」を使っています。

これらは、画面に画像やテキストを表示させるための基本的な方法ですので、この使い方や書き方をマネて覚えておくと便利に使えるでしょう。

JavaScriptの難しい定義や理屈は、私自身も難しくて、まだまだ理解できませんが、私の覚え方は、「うしろにイコール(=)のあるものはプロパティーで、『’ ’か” ”』で囲む…」 と覚えています。

ここでは、環境省のHPを参考にして引用させていただきましたが、わたしは、HPのサイドメニューにクイズなどをいれる目的でJavaScriptを勉強しており、さらにアレンジできる要素はあるので、いろいろなものを作ってみたいと思っています。

記事の目次へ


PR



(来歴)R6.5作成  
PR

AmazonのJavascript本 送料無料


楽天ブックスは品揃え200万点以上!



記事の目次へ

電子工作の記事の目次へ