cre8cre8
AskMe♥

cre8cre8なJavaScript入門
~変数を使っていろいろなことができるようになろう~

前回の記事のクリックしたらJavaScriptが動作するのと比べると、
今回の記事からはちょっと退屈な記事となります。
退屈ですが、Cre8Cre8では楽しくわかりやすくをモットーに解説してきますので、
頑張って学習していきましょう!

それでは、変数を学んでいきます。
変数とはなんぞや?っと思うかもしれませんが、
今までの記事を読んでいただいていた場合はすでになんと使っております!!(ナッナンダッテー)
好きなデータを一時的に保存してあとで使う
そう!あの機能です!!!(どれやw)

言葉で説明するより、コードを書いて動きを確かめるほうが
わかりやすいので、実際に書いて動かしてみましょう!

html
1<!doctype html>
2<html>
3  <head>
4    <meta charset="utf-8">
5  </head>
6
7  <body>
8    <input type="text" id="name" placeholder="あなたのお名前は?">
9    <button id="run">JavaScript run</button>
10    <h1 id="output"></h1>
11
12    <script>
13      document.getElementById("run").addEventListener("click", function() {
14        // テキストボックスに入力されたデータを変数に保存する
15        var name = document.getElementById("name").value;
16
17        // nameという変数名で入力したデータを表示できる
18        alert(name);
19
20        // 何度でも使える
21        document.getElementById("output").innerText = name;
22      });
23    </script>
24  </body>
25</html>

上記のJavaScriptはテキストボックスに入力したデータ(名前)を
ダイアログで表示し、さらに、ブラウザにも表示します。

解説ですが、まず、
var name = document.getElementById("name").value;
上記のコードで変数 name に入力されたデータを保存しています。
変数を使うときは必ず var を忘れずにつけてください。
var がなくても動きます。ですが、つけるとつけないでプログラムの意味が変わりますので、
var を忘れずにつけてくださいね。(またちゃんと解説しますので…)

alert(name);
document.getElementById("output").innerText = name;
上記で name を使っています。このように変数に入れた値は何度でも使うことができます。
フォームに入れたデータを使うために何度も document.getElementById("name").value
書かなくていいため、楽ちんですね。

変数という名前の通り、途中でデータを書き換えることもできます。
サンプルを書いてみましょう!

html
1<!doctype html>
2<html>
3  <head>
4    <meta charset="utf-8">
5  </head>
6
7  <body>
8    <input type="text" id="name" placeholder="あなたのお名前は?">
9    <button id="run">JavaScript run</button>
10    <h1 id="output"></h1>
11
12    <script>
13      document.getElementById("run").addEventListener("click", function() {
14        // テキストボックスに入力されたデータを変数に保存する
15        var name = document.getElementById("name").value;
16
17        // nameという変数名で入力したデータを表示できる
18        alert(name);
19
20        // 変数を書き換える
21        name = "書き換えてみますた";
22
23        // 書き換えられた内容がブラウザに表示される!
24        document.getElementById("output").innerText = name;
25      });
26    </script>
27  </body>
28</html>

上記のJavaScriptを実行すると、
ダイアログはテキストボックスに入力したデータが表示されますが、
ブラウザに表示されるのは書き換えてみますたと表示されます。

name = "書き換えてみますた";
の行でnameに新たなデータを入れているためです。

これで変数の基本的な操作ができるようになりました。
上記の内容がわかれば、難しいJavaScriptに出会っても、
変数に関しては、なんとなくしている操作がわかるようになると思います。
もっと理解して表現の幅を広げるために、いろいろなJavaScriptを書いてみてくださいね。
それでは、最後に
名前を入れてもらったら、ようこそ。さん。と表示するコードを書いて終わりましょう。
(
にはフォームで入力したデータが入ります。)

html
1<!doctype html>
2<html>
3  <head>
4    <meta charset="utf-8">
5  </head>
6
7  <body>
8    <input type="text" id="name" placeholder="あなたのお名前は?">
9    <button id="run">JavaScript run</button>
10    <h1 id="output"></h1>
11
12    <script>
13      document.getElementById("run").addEventListener("click", function() {
14        var name = document.getElementById("name").value;
15
16        name = "ようこそ。" + name + "さん。"
17
18        document.getElementById("output").innerText = name;
19      });
20    </script>
21  </body>
22</html>

コメントを消していますので、どう動いているか考えてみてください。
ちょっと難しいかもしれませんが、頑張ってくださいね。

次回の記事は条件分岐をわかりやすく解説します。
これができるようになると、簡単なゲームも作れるようになります。
それでは、お楽しみに!!

≪ 前の記事
cre8cre8なJavaScript入門
~クリックしたらなんか動くようにしよう~
次の記事 ≫
cre8cre8なJavaScript入門
~if文(条件分岐)を使って簡単なDQ風ゲームを作ってみよう~

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

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