遊べるJavaScript入門ロゴ

クリックすると写真表示後に少し遅れて紹介文が表示する

写真と文章(テキスト)を表示する方法は色々考えられるようですが、ここでは、

①「if文」を使って、選ばれた写真を表示する準備をして
②一定時間が経過したら選択した写真を提示して
③同時にその写真の説明文を表示する

というJavascriptのプログラムを作っています。

「.setAttribute」と「.textContent」「setTimeout」 を使っています

写真の入れ替え表示は「.setAttribute」で、テキストの入れ替えは「.textContent」を使って、HTML内の「id」で指定した部分に入れ替えて表示させています。 

また、少し考えていただく時間を設けるために、「setTimeout」をつかって、写真を表示してから、少し遅れて文章を表示させるようにしています。

そして、全問が終了すると、ボタンを消して「次に進めないようにしています。


********** ボタンをクリックすると動作します。

下に、北から南にある国立公園の写真8枚を用意しています。 横のボタンを押すと1枚目の写真が表示されますので、その写真が、どこの国立公園の写真なのかを考えてください。 4秒後に答えと説明文(2つの文章)が表示されます。

もう一度、同じボタンをクリックすると次の問題に移動します。8問が終了すると、ボタンが消えて問題が終了します。


 公園名を表示


 説明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のきれいな風景写真を使わせていただいたのですが、画像を変えるだけでも面白いものになるでしょう。

また、例えば、2問目以降に移る際に、前の答えを消したり、また、タイマー関数の「setInterval」や「setTimeout」などを応用して、一定時間表示すると答えをいったん消したり、問題が終了すると、ボタンだけでなく、回答などを消すことなどもできそうですね。 

適当な頭の運動とおもっていると楽しめますね。


記事の目次へ


PR



(来歴)R6.5作成  R6.12月確認
PR

AmazonのJavascript本 送料無料


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



記事の目次へ

電子工作の記事の目次へ