初心者でもわかる！〜(簡単な)カウンターを作ろう！〜

こんにちは！

今回は初心者でもわかるように解説していきながら
カウンターを作りたいと思います

HTMLを使おう！

では、javascriptを使う前に必要なのはHTMLです
HTMLを書いていきます
ここでは、私がいつもしているやり方でやっていきます
まず、タイトルを決めます
ここでは、カウンターにします
では、書いていきます

<title>カウンター</title>

これで、タイトルがカウンターになりました
では、次に日本語が使えるようにしていきます
これがないと文字化けが起こってしまいます

<title>カウンター</title>
<meta charset="utf-8">

タイトルの下にmeta-tagを追加してください
では、最後にjavascriptが使えるようにしていきましょう

<title>カウンター</title>
<meta charset="utf-8">
<script src="Click.js"></script>

下に追加したのはClick.jsというファイルを
javascriptとして読み込むものです
これで、HTMLの最初の処理が終わります
では、javascriptを次から書いていきますが、まだファイルを作っていません
なので、新しくClick.jsというファイルを作ってください

javascriptは読み込めるかな？

では、実際にClick.jsの中に書いて読み込まれるかを確認してみましょう
このコードをClick.jsの中に書いてみましょう

Click.js

document.write("クリック");

そして、クリックと表示していればOKです！
では、次に移る前にこの文章は消してきれいな状態にしてください！

クリックを検知

今回は初心者編ということでたくさんのtagや文法を使っていきたいので
cssを使わずにbutton-tagでやっていきます
では、HTMLをこうしてみてください！

<title>カウンター</title>
<meta charset="utf-8">
<script src="Click.js"></script>
<button>クリックボタン</button>

これは、クリックボタンというボタンを表示させるものです
しかし何もまだ命令していないので何も起こりません
なので、このようにしてみてください

<title>カウンター</title>
<meta charset="utf-8">
<script src="Click.js"></script>
<button onclick="alert('クリック！')">クリックボタン</button>

これでボタンを押してみると...
クリックゲームとアラートが鳴りました
これを崩してみていくと

onclick→ボタンが押されたとき
alert→クリックと書いたアラートを表示させる
このようになります
これで、クリックが検知されたということになります

変数って何？

今から変数を使っていきます
変数とは、数や文字を保存することができるすぐれものです

例えば変数aというものがありこの変数には「15」という数字が入っています
このときこのaという変数は15と全く同じものとなります

使っていったほうがわかりやすいと思います
では実際に使っていきます
jsファイルにこの文章を入れてみてください

Click.js

let a = 15;

これで「a」という変数が作られました
そしたら、これをalertで出してみましょう

Click.js

let a = 15;
alert(a);

これで15と表示されたと思います
このように変数をたくさん使っていきます
では、またこれを消してください

関数を使おう！

さっきのHTMLをみてたくさん処理をしたいなと思った人はいないと思いますが
たくさんの処理をしないとクリックゲームは作れません
なので、関数というものを使っていきます

中学・高校生は数学で三角関数とか嫌な思い出が沢山あると思いますが
ここでの関数はそういうものとは一切関係ありません

では、jsファイルにこれを打ち込んでみてください

Click.js

function a() {
alert("クリック！");
}

そしたらHTMLをこのように変更してください

<title>カウンター</title>
<meta charset="utf-8">
<script src="Click.js"></script>
<button onclick="a()">クリックボタン</button>

では、これでボタンを押してみてください！
さっきと同じ処理がされました！
この関数というのはたくさんの処理を一つにまとめるものです
では、この関数は後で再利用するので残しておいてください

本題

今までやってきたことを組み合わせて作っていきましょう！
まずはじめにjsファイルにクリック数を入れる変数を作ります！

Click.js

let click = 0;
function a() {
alert("クリック！");
}

関数の上である一行目に書いてください
そしたらつぎにクリックされたときに増やすようにしていきましょう

Click.js

let click = 0;
function a() {
click++;
alert(click);
}

では、何度もボタンを押してみてください
1,2,3...というように増えていきました！
click++というのはclickという変数の中の数を1増やすという意味です！
しかしalertだけだと気持ち悪いのでhtmlに表示されるようにしていきます
HTMLを変更してください

<title>カウンター</title>
<meta charset="utf-8">
<script src="Click.js"></script>
<button onclick="a()">クリックボタン</button>
<div id="click_html"></div>

これはdiv-tagで何でも使えます
例えば四角を表示させたり、文字をクリックしたりと...
こんかいはclick_htmlというIDを作ってあげました
これをjsで読み込んであげましょう

Click.js

let click = 0;
function a() {
click++;
document.getElementById('click_html').innerHTML = click ;
}

これで、ボタンを押すと表示されました

最終作業

見た目を変更していきます
まずHTMLから

<title>カウンター</title>
<meta charset="utf-8">
<script src="Click.js"></script>
<div id="click_html"></div>
<button onclick="a()">+1</button><br>
<button onclick="b()">-1</button><br>
<button onclick="c()">リセット</button>

まず、div-tagを上に持っていき順番を変えました
そして、マイナスとリセットも作っていきます
<br>というのは改行という意味です
ではjsファイルを作っていきます

Click.js

let click = 0;
function a() {
click++;
document.getElementById('click_html').innerHTML = click ;
}
function b() {
click--;
document.getElementById('click_html').innerHTML = click ;
}
function c() {
click=0;
document.getElementById('click_html').innerHTML = click ;
}

これで終わりです
マイナスとリセットを作りました
※click--というのはclick++と反対の意味で１を引くということです
※click=0というのはclickという変数の中身を0にするということです

おしまい

では、これで終わりたいと思います
できない等のことがあればコメントで教えて下さい