【WEBアプリ】カウントアプリ

てと

2023年1月25日 20:53

今回は、カウントアプリを作っていきます。

今回作成するのは、
＋ボタンを押すと、カウントが増えて、
- ボタンを押すと、カウントが減っていく、
簡単なカウントアプリです。

1. 初期データのダウンロード

① 以下のURLにアクセス

https://drive.google.com/drive/folders/1OxdbvddFX9LbKy8bEfGwf-8EFSVYi2uY?usp=share_link

② カウントアプリ　教材.zip をダウンロード

③ ダウンロードにあるZipファイルを解凍。

【Zipファイルの解凍方法】
Macの場合、Zipファイルをダブルクリック
Windows の場合、わからない場合は、以下のサイトを見る

④

の「基本的なはじめ方」を参考に準備する。

2. ＋(プラス) ボタンを押したら数字が増える

①必要なテキスト・ボタンの配置

【buttonタグとは】
<button>ボタンの文字</button>
と表す。
ボタンタグは、文字の書かれたボタンを作成するもの。
クリックした際に、〇〇をするなどの記載もできる。

【pタグとは】
<p>テキストの内容</p>
と表す。
pタグは、一般的な文字を表示するときに使うもの。
paragraphのpから取っている。

② ボタンを押したらアラート

onlicked はクリックされたら。
plusNumber()の () は、関数(function) を意味する。

【関数って何？】
JavaScriptで、複数の指示をまとめておけるくくりのようなもの。
HTMLから、ボタンが押されたら呼び出すことなどもできる。

※ 関数は、呼ばれない限り動かない。

index.html と main.js を両方とも保存して、chromeに移動して、リロード。

③ ボタンを押されたら、数字を増やす。

＋ボタンを押しても、何も起きない。

やり方がわからない人は、

の「Consoleの確認の仕方」を確認。

【変数って何？】
変数とは、数字や文字を保管しておくもの。
let number = 0;
のように書く。

numberという人が、0という数字を持ってるイメージ。

【代入と値一致の違い】
数学では、a = b は、aとbの値が等しいことを表すが、
プログラミングでは、aにbを代入することを表す。

a ← b のイメージ

※ちなみに、値が一致していることは、
a === b　や a == b など複数個の=を使って表す。

④ 増えていく、numberをテキストに反映させる。

consoleでのnumberは、増えていくが、画面のテキスト「0」には変化がない。そこで、ボタンを押すごとに、テキストも新しい数値に更新していく。

index.html と main.js を両方とも保存して実行。

【JS8行目　解説】
document…HTML上にあるすべての要素
.getElementById(“aaa”)…そのうち、aaaというidをもつ要素について
.textContent … そのテキストの内容を
= 〇〇; …〇〇に変更

3. - (マイナス)ボタンが動くようにする

【TRY】マイナスボタンを動くようにしよう。

今までのコードを参考にしながら、マイナスのボタンを押したら、数字が減って表示されるようにしよう。

※できるだけ、解答を見ずにやってみよう。

【解答】マイナスボタン動作

うまく、動いていなかったら、コードで違うところを確認しよう。

あれ、でも0からマイナスボタンを押すと、マイナスになってしまう。

① マイナスにならないように調整しよう

【条件分岐って何？】
もし、〇〇なら、××するコード。

if (条件の内容){
　そうだった場合に動くコード
}

と書く。

つまり、

numberが0よりも大きい、つまり1以上だった場合のみ、
number から1引いて、表示する。

というコード！

マイナスボタンを押し続けても、0のまま。

4. デザインを調整しよう

① 中央よせ

【Bodyとは】
サイト内に載っているボタンやテキストを全て括った一番大きい括り。

【センタリング】text-align: center;

指定した要素の中にある要素の、文字や写真の中央よせをする。

②文字の大きさを変える

【idとは】

要素（タグ <p>など）につける名前のようなもの。

※
idのなかに、大文字や記号（「-」と「_ 」のみ）、数字は使えるが、
スペースを使うことはできない。

【CSSでのid指定】

CSSでidで要素（タグ <p>など）を指定する場合は、
#　を使用する

【pxとは】
pxとは、ディスプレイのライト一個の大きさ。
cmやmmなどと同じような、長さの単位。

③ボタンに色を載せよう。

【CSSの数々の指定できること】
・width : 横幅
・height : 縦幅
・background-color : 背景色
・color : 文字色
・font-size : 文字の大きさ

5. 画像を入れよう

①画像を入れる

②画像の大きさを指定する

【CSSの数々の指定できること】
・width : 横幅
・height : 縦幅
・background-color : 背景色
・color : 文字色
・font-size : 文字の大きさ
・margin-top : 要素の外側の上の部分に余白を作る

6. 完成

これで完成です。
お疲れ様でした！

7. 解答データ