JavaScriptでBMIの計算をしてみる
HTML
<p>身長<input type="number" id="shincho">cm</p>
<p>体重<input type="number" id="taijuu">kg</p>
<p><button type="button" id="keisan">計算する</button></p>
<p>あなたのBMIは<span id="kekka"></span>です！</p>
<script src="○○.js"></script>input タグ
input タグには、たくさんの型があります。
書き方は
<input type = "" name = "" >type のところに、いろいろある属性を入力
name のところは、任意の名前を入力します。
どの値が、どの入力欄に対応しているのか わかるようになります。
（id/class のようなもの。JavaScript・PHPの操作使う）
Web初心者の私は、属性をすべて覚えきれないので、チートシートをお借りして参考にしています。
下記URLをお借りいたしました。
他にも検索したらたくさん出てきますので、私みたいな初心者の方にお勧めです！
button タグ
<p><button type="button">ボタンの内容</button></p><button>タグで囲んだテキストや画像がボタン上に表示されます。
HTMLを指定することもできます。
input タグにも、buttonタグはありますが、ボタン上に文字を入れたい場合は、
<p>
<input type="button" value="ボタンの内容" onclick="keisan()">
</p>のように、「value」と「onclick」を使います。
value (属性)
valueは、主にinputタグなどの入力フィールドの初期値を設定できます。
元々入力されており変更できるため、初期値をあらかじめ設定しておくことで入力する側の負担軽減にもつながります。
空欄にしておけば何も入力されていない状態になります。
onclick タグ
要素をクリックしたときに、どのような処理を行うかを設定することができます。
このあと、JavaScriptで関数を使いますが、そのときに使う関数の名前にできます。
span タグ
文章内の文字をspanタグで囲うことで、囲んだ要素だけデザインを変えられます。
文章の一部を変更するのに対して、div タグは、囲った文章全体を一つのまとまりとしていろいろな操作をするものです。
ここで囲った中身は、JavaScriptで出力できます。
JavaScript
let s = document.getElementById("shincho");
let t = document.getElementById("taijuu");
let kei = document.getElementById("keisan");
let ke = document.getElementById("kekka");
kei.addEventListener("click", () =>{
let rValue = Math.floor(t.value/( (s.value/100)*(s.value/100)));
kekka.textContent= rValue
});let
let は変数です。文法については別のページにて紹介しています。
まずは、変数にてこれから使うものを宣言します。
document.getElementById(“○○”);
これは、ページに書いてあるHTMLから呼び出すものです。
Iｄだけではなく、Tagname というものもあり、
Id は、<div id = “○○”>のように、名前をつけて、それを取ってくるもの
ここでいうと <input id=”height”>
Tagname は、<input>タグの中の botton のように、頻回に使わないタグを指します。
○○.addEventListener(“click”,”○○”);
ユーザーがなにかアクションしたときにこうしてください。という命令文。
対象要素.addEventListener(種類, () => {
//ここに処理を記述
});これは引数を２個指定できます。
かっこの中には、関数を書いても大丈夫です。
この場合は、計算するボタン（ボタンのidを、keisan にHTMLでしている）を
クリックしたとき（crick）、関数の命令（BMIの計算と結果出力）してね
という意味になります。
これを作成できるまでにすごく時間がかかりました。
意味を理解しながら作らないと、エラーばかり出てしまいます。
大切なのは、エラーが出たときになんのエラーなのか、どこまで動いているのか確認することです。
一緒にがんばりましょう。
コメント