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

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

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

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

```html
<title>カウンター</title>
<meta charset="utf-8">
```
タイトルの下に`meta-tag`を追加してください
では、最後に`javascript`が使えるようにしていきましょう

```html
<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をこうしてみてください！

```html
<title>カウンター</title>
<meta charset="utf-8">
<script src="Click.js"></script>
<button>クリックボタン</button>
```
これは、クリックボタンというボタンを表示させるものです
しかし何もまだ命令していないので何も起こりません
なので、このようにしてみてください

```html
<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をこのように変更してください

```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を変更してください

```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から

```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にするということです

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