NaN
(Not a Number) ノットアナンバー
数字じゃありませんよという戻り値。
isNaN
「数字ではないことを調べたい」という
isNaN(1)
→false（数字だからfalse)
フォームを作りましょう。
<!--身長と体重の入力欄-->
<p>身長 <input type="text" id="height"></p>
<p>体重 <input type="text" id="weight"></p>
<p><button>計算</button></p>
onclickじゃないのを早く覚えるといいらしい。
とりあえず今日は<button onclick>でやりましょう。
プログラムのターゲットになる対象には
id属性を使う。
idはデザインというよりプログラムの方に連動することが多い。
function calc(){
}
関数であるためには丸括弧をつけないといけない。
要素オブジェクトの値を呼び出すバリューというのがある。
要素はhtmlに記述しただけではオブジェクト化されていない。
→
オブジェクトにしてやらないといけない。
舞台装置にのってるオブジェクトだけ（ドキュメントオブジェクト）だけが、要素を取得するメソッドを使用できる。
getElementById
ゲットエレメントアイディー
キャメルケースだから気を付けて。Idがidなだけでも動かない。
それで指定したのを全部引っ張ってこれる。
（なんならHTML上の段落の内容とかパラグラフ全部とか。）
height = document.getElementById('height');
こうするとイコールより右が「オブジェクト」になる。
言い換えれば、このイコールより右側部分が、html上に書かれたフォームの四角部分をプログラム的に記述したともいえる。
さて、その四角部分がもっている入力値を取得するにはですよ、
height = document.getElementById('height').value;
と記述する。
入力欄には、valueプロパティが必ずあります。
パラグラフ<p>とかはinnerHTMLとかいうらしい。要素の中に書かれたコンテンツだとかなんとか。
--->bmi.js
console.log('foo!');
var height; //身長(m)
var weight; //体重(kg)
var bmi; //BMI値
function calc(){
height = document.getElementById('height').value;
weight = document.getElementById('weight').value;
bmi = weight / (height * height);
console.log(height, weight);
console.log(parseInt(bmi));
}
それではBMIの結果をHTML上に出しましょう。(consoleじゃなく)
html側：
<p id="result"></p>
これは最初は何も表示されてない。
↓
.jsのfuctionのなか
document.getElementById('result').innerHTML = bmi;
これがさっきのinnerHTML。
パラグラフはさっきのバリューを持っていないから、今度のは.innerHTMLになる。
しかもそのオブジェクトに、変数bmiの値を代入する。
すると、ボタンを押したときにさっき何も表示されてなかったときにbmiが表示される。
--->bmi.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>BMI計算プログラム</title>
<link rel="stylesheet" href="bmi.css">
</head>
<body>
<h1>BMI</h1>
<!--身長と体重の入力欄-->
<p>身長 <input type="text" id="height">(m)</p>
<p>体重 <input type="text" id="weight">(kg)</p>
<p><button onclick="calc()">計算</button></p>
<p id="result"></p>
<script src="bmi.js"></script>
</body>
</html>
--->bmi.js
var height; //身長(m)
var weight; //体重(kg)
var bmi; //BMI値
function calc(){
height = document.getElementById('height').value;
weight = document.getElementById('weight').value;
bmi = weight / (height * height);
document.getElementById('result').innerHTML = bmi;
console.log(height, weight);
console.log(parseInt(bmi));
}
来週以降
条件分岐などが終わったら
Jクエリーに突入しますよ。
