拝啓
実はJavaScriptに関しては完全未経験ってほどではないのですが大学のアレがアレでアレしているのでちょっとアレをすることにしました。
やっとTechrachoの趣旨に（若干）沿った記事が書けそうな気がしています。
BPS社内でハローワールドしかやらないマンとしてのイメージが定着してきつつあるのが若干癪です。
JavaScript入門
JavaScriptとJavaを同じものだと思っていた時期はありませんか？
僕にはありました。JavaScriptの話をしているのに「あーJavaね！あれでしょあれ、３０億のデバイスで走るやつ！」とかドヤ顔で知ったかぶりしてしまったときの恥ずかしさといったら、もう一生忘れられないレベルですよね。
幸いにも僕はやらかしたことありません（たぶん）が、今日もこのネーミングのせいで地球のどこかで顔を真っ赤にしている誰かがいると思うと僕まで赤面してしまいます。
インストール
インストールもなにもブラウザとエディタがあれば十分でしたね。エディタはなんでもいいですが、ブラウザは今回Chromeを使います。
入門
とりあえず
$ touch test.html test.js
とかやってあげると、準備は万端ですね。そしたら
test.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>test</title>
<script src="test.js"></script>
</head>
<body>
<h1>hoge</h1>
</body>
</html>
test.js
alert("Hello!");
なんてやってあげれば毎度おなじみのハローワールド完成です。
次にいきます。
HTML側でボタンを追加してみます。
<input type="button" value="button" onclick="hello();">
次はJS側をいじります。
function hello() {
alert("Hello, World");
}
ボタンを押してみるとhello()が呼び出されてハロワできます。
続いて、テキストボックスを組み込んでみます。
HTML側は
<input type="text" id="box">
JS側は
function hello() {
var value = document.getElementById('box').value;
alert(value);
}
テキストボックスにHello, World!とか入力してボタンを押せばアラートされますね。
ちょっと応用してみる
JavaScriptを始めたら、まずはBMIを計算するのが世間の常識ということで、身長と体重を入れるとBMIを表示してくれるものを作ります。
BMIは身長(m)と体重(kg)を使って、身長 / 体重^2で計算できるそうですが、メートルではなくてセンチメートルを使えるようにします。
test.html
先程と同じようにテキストボックスとボタンを追加していきます。色々と雑なのは大目に見てください。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>test</title>
<script src="test.js"></script>
</head>
<body>
<h1>BMI</h1>
<p>身長<input type="text" id="height">cm</p>
<p>体重<input type="text" id="weight">kg</p>
<p><input type="button" value="click!" onclick="bodymass();"></p>
<p>BMI =<div id="bmi">？</div></p>
<p>あなたは<div id="eval">？</div></p>
</body>
</html>
test.js
こちらはちょっとだけややこしく見えますが、もっとキレイに作れるんですかね。いずれにしろエンジョイ勢なので細かいところは気にせず、とりあえず動けばいいや精神でやっていきます。
センチメートルをメートルに直して、そっから小数点以下第２位で切り捨てアレしてアレしてます。アラートだと鬱陶しいのでdocumentうんたらかんたら.innerHTMLに代入する感じにしてます。
function bodymass() {
var height = document.getElementById('height').value;
var weight = document.getElementById('weight').value;
var eval, bmi;
height = parseFloat(height) / 100;
weight = parseFloat(weight);
bmi = weight / Math.pow(height, 2);
bmi = Math.floor(bmi * 100) / 100;
if(bmi < 18.5) {
eval = 'もやし体型';
} else if(bmi < 25) {
eval = 'ヘチマ体型';
} else {
eval = 'アボカド体型';
}
document.getElementById('bmi').innerHTML = bmi;
document.getElementById('eval').innerHTML = eval;
}
ちゃんと正の数で身長と体重を入力してボタンを押せばBMIとアレが表示されます。
ちなみに僕はもやし体型でした。はやくヘチマになりたいです。
以上
皆さんもヘチマ目指して頑張りましょう。