「学んで遊ぶ」第2回 JavaScript クリックイベントで効果実感。

さて、このコーナーも第2回です。

 

長くやってもしょうがないので、今回は大詰めです!

 

こんな感じで  効果を出しちゃいましょう(⋈◍>◡<◍)。✧♡

 

晴れボタンを押して、「今日は晴れです。アイスクリームが食べたいです。」

 

を出しちゃいましょう。

 

まずは、ソースをべた張り。

 ※ソーリー 文字化けが生じます

下のコードを、メモ帳を開きまして、</html> まで張り付けまして、保存する際に「全てのファイルを選択」して、ab.html, a.htmlでも、拡張子をhtmlにしてください。

そして、htmlファイルができますので、ブラウザを開いて、ファイルをドラック&ドロップでブラウザにダイブせさてください。

動作は大丈夫でした。

 

 

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
body {font-family:sans-serif;line-height: 1.6;font-weight: 700;}

#content_2 {visibility: hidden;min-width: 150px; height: 40px; background-color:#498BF4; color: #fff; }

p {background-color:#fff; padding: 8px 15px; border:4px solid #000;transition:all ease 0.4s;
  color: #000;text-align: center;}
  </style>
</head>
<body>

  <p id="kumori">晴れ</p>
  <p id="content_2">今日は晴れです。アイスクリームが食べたいです。</p>


<script>
(function(){
  'use strict';

  var getE = document.getElementById('kumori');
  var con_2 = document.getElementById('content_2');

  getE.addEventListener('click', function(){
    if(con_2.style.visibility === "hidden"){
      con_2.style.visibility = "visible";
} else {
   con_2.style.visibility = "hidden";
}

});

})();

</script>

</body>
</html>

 

 

 

上の</html>までをコピペして、メモ帳に張って、a.htmlで、保存します。(.htmlのaの部分はローマ字で任意で大丈夫です)

 

そのファイルを、ブラウザに張り付けてみましょう。クリックして、閉じる処理のものが出来上がります。

 

処理の流れをみてみましょう。

 

これを利用して、「もっと読む」ボタンや、「開く」「閉じる」ボタンなど、応用は色々できます。

 

1:クリックする

 

2:クリックしたら、コンテンツが出てくる

 

3:コンテンツを閉じたいので、もう一度クリックする

 

大まかに分類したら、以上の処理ですね^0^

 

では、まず1の部分。

 

クリックをする前に、コンテンツが出ていたら嫌ですよね。

 

なので、コンテンツ部分:今日は晴れです。アイスクリームが食べたいです。の部分を消します。

 

そこで、登場するのが、

 

id

idの名前はなんでも良いです。マークみたいなものです。それを

 

CSS

ホームページなどを、装飾する言語を使って、消しちゃいます。

 

・visibility: hidden 消す、非表示

・visibility: visible 出す、表示

 

.という意味です。覚える必要はありません。忘れたら検索すればいいです。

ただ、こういうものがあるといのだけは忘れないでください。全て忘れたら検索できませんからね^0^

 

では、JavaScriptにいきましょう

 

まずは function

 

これは、「これからやるぜって感じです。走るぜってイメージでいいです」厳密にいうと、関数処理、処理をまとめたものなど、イメージでわかっていればいいです。

 

そして、'use strict';

 

これは、流行りです。厳密にエラーチェックをして、処理が高速化されます。

 

10回くらい書けば、覚えます。忘れたら、検索しましょう。

 

document.getElementById(’’);

 

これは、('')の中にidを入れてあげると、その要素をいじって遊べます。

 

var getE ※getEの名前はなんでもOK.

 

var は変数宣言。毎回、document.getElementByIdを書くのは面倒くさいですよね。

 

なので、getEの中に入れちゃいましょう。

 

下の var con_2も同じです。

 

文章が長くなってきたので、もう一度イメージしましょう。

「晴れ」と書かれて囲まれているのは、

 

var getE = document.getElementById('kumori');

 

です。なぜかid名はくもり。多分、晴れ、曇り、雨で分岐してやろうと思ったのですが、失敗しました。気にしないでください♪

 

要は、id名はボタンが晴れというテキストだろうが、kumoriでいいんです。なんでも、大丈夫ってことです。

 

「今日は晴れです。アイスクリームが食べたいです。」

 

は、

var con_2 = document.getElementById('content_2');

です。

 

絵をイメージしたら、

 

処理に進みましょう。

 

getE.addEventListener('click', function()

 

上を訳すと、

getE に

イベントをつけます addEventListener どんな?

 

クリックだよ。click

 

どんな?は独り言です・・・

 

その後にfunctionが続きます。走りますよ。

 

そして、分岐処理です。

 

if(con_2.style.visibility === "hidden"){
      con_2.style.visibility = "visible";
} else {
   con_2.style.visibility = "hidden";
}

 

・styleとは上で言っていた,

cssの状態です。

 

「今日は晴れです。アイスクリームが食べたいです。」が、出ていないときは、

「今日は晴れです。アイスクリームが食べたいです。」を表示しましょう。

 

それ以外は

  消しましょう。

 

そして、即時間数で忘れがちなもの

 

最後の

 

})();

 

 

();部分

 

}); だと動きません。

 

ちょっと長くなってしまいましたが、お付き合い有難うございました。

 

これを利用して、色々な事に応用できますので、試してみてください。

 

この話題は今回で最終回ですね・・・

 

寂しいですが、またすぐにお会いしましょう^0^

 

 

この記事を書いた人

NATSU

クリエイター


お問い合わせメールフォーム