cre8cre8
AskMe♥

cre8cre8なJavaScript入門
~クリックしたらなんか動くようにしよう~

前回のJavaScriptの記事は簡単でしたか?
今回も引き続きJavaScriptの簡単なサンプルを組んで、
「とりあえず、こう書けば動くんだ」
という感じでゆるく進めていきましょう。
最初が楽しければ、あとの勉強も楽しくなりますから。

それでは、JavaScriptでよく使う、
"クリックしたらなんか動く"
の処理を作っていきましょう。

それでは!さっそくサンプルコードです!

1<!doctype html>
2<html>
3<head>
4  <meta charset="utf-8">
5</head>
6
7<body>
8  <h1 id="clickme">Click me</h1>
9
10  <script>
11  document.getElementById('clickme').addEventListener('click', function() {
12    alert('クリックしたらなんか動いた');
13  });
14  </script>
15</body>
16</html>

Click meをクリックするとダイアログボックスがでましたか?
これでクリックしたらなんか動くJavaScriptを書けるようになりました。
表現の幅が広がりましたね。ね?簡単でしょ?

さて、これだけでは、ただただ、クリックするたびにダイアログがでます。それだけです。
なので、クリックするとメニューを開いたり閉じたりするJavaScriptを作ります。
ちょっと長いですが頑張ってトライしてみてください。

1<!doctype html>
2<html>
3<head>
4  <meta charset="utf-8">
5</head>
6
7<body>
8  <h1 id="openmenu">開けゴマ</h1>
9
10  <nav id="menu" class="hide">
11    <ul>
12      <li><a href="http://google.com">Google</a></li>
13      <li><a href="http://yahoo.com">Yahoo</a></li>
14      <li><a href="http://apple.com">Apple</a></li>
15    </ul>
16  </nav>
17
18  <style>
19  /* メニューを非表示にするためのCSS */
20  .hide {
21    display: none;
22  }
23  </style>
24
25  <script>
26  document.getElementById('openmenu').addEventListener('click', function() {
27    document.getElementById('menu').classList.remove('hide');
28  });
29  </script>
30</body>
31</html>

アクセスすると開けゴマと表示されていますね。
開けゴマをクリックすると、メニューが表示されましたか?

コードの概要ですが、
今回はCSSの display:none; を使用しています。(21行目)
このCSSが適用されると、その適用されたところは非表示になります。
なので、開けゴマをクリックされたときに、このCSSを無効にして、
非表示から表示に切り替える感じのコードです。

詳しく解説すると、18行目から23行目までの <style></style> で囲っている箇所はCSSといって、
レイアウトを制御することができます。
21行目に書いているCSSの display:none; は設定したものを非表示にするCSSです。
今回はクリックする前の初回アクセス時は、画面からメニューが消えておいて欲しいので、このCSSを使いました。
そして、このCSSで作成した.hide (クラスといいます。いろいろなレイアウトをまとめることができる)
html上で、<nav id="menu" class="hide"> と記述することでスタイルを適用することができます。

10行目のHTMLはCSSで作ったレイアウトの適用しています。
CSSで書いたレイアウトの指定の仕方は、 <nav id="menu" class="hide">class="hide" となります。
(他の方法もありますが、今回はこれをおぼえてくださいね)
CSSで作成した hide クラスを使っていますので、 hide 以外のクラス名をつけた場合はその名前にhtmlも変更してくださいね。
また、気をつけないといけない点ですが、CSSで書くときは . が必要ですが、htmlで指定するときは . が必要ありません。
注意してコーディングしてくださいね。

25行目からのJavaScriptは開けゴマをクリックした時に hide クラスを消去する処理を書いています。
開けゴマをクリックすると、html(10行目)が <nav id="menu" class="hide"> から <nav id="menu"> に変更されるので、
CSSレイアウトの display:none; が無効になりメニューが表示されます。

難しいですか?もし、難しいようでしたら、
今はこんな感じで、クリックしたら表示される処理を作れるのだと軽い気持ちでいってくださいな。
あとでふと見なおしたときに、霧が晴れたように理解するときが来ると思います。
わからないなりにも、自分で調べたり、改造したりしてみてくださいね。

次回は表現の幅を広げるために、JavaScriptの変数のお勉強をしていきましょう。
勉強と聞くと退屈なイメージがありますが、楽しく学べるように配慮しますので、
がんばってくださいね!それでは!お楽しみに!

≪ 前の記事
cre8cre8なJavaScript入門
~はじめてのJavaScriptで文字を装飾しよう~
次の記事 ≫
cre8cre8なJavaScript入門
~変数を使っていろいろなことができるようになろう~

いいねやコメントを送っていただけると中の人がしっぽ振って大喜びします♪

あなたへのおすすめの記事