あどべんと。未経験大学生によるJavaScript入門日誌-第1話

拝啓

実はJavaScriptに関しては完全未経験ってほどではないのですが大学のアレがアレでアレしているのでちょっとアレをすることにしました。

やっとTechrachoの趣旨に(若干)沿った記事が書けそうな気がしています。

BPS社内でハローワールドしかやらないマンとしてのイメージが定着してきつつあるのが若干癪です。

JavaScript入門

JavaScriptとJavaを同じものだと思っていた時期はありませんか?
僕にはありました。JavaScriptの話をしているのに「あーJavaね!あれでしょあれ、30億のデバイスで走るやつ!」とかドヤ顔で知ったかぶりしてしまったときの恥ずかしさといったら、もう一生忘れられないレベルですよね。
幸いにも僕はやらかしたことありません(たぶん)が、今日もこのネーミングのせいで地球のどこかで顔を真っ赤にしている誰かがいると思うと僕まで赤面してしまいます。

インストール

インストールもなにもブラウザとエディタがあれば十分でしたね。エディタはなんでもいいですが、ブラウザは今回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

こちらはちょっとだけややこしく見えますが、もっとキレイに作れるんですかね。いずれにしろエンジョイ勢なので細かいところは気にせず、とりあえず動けばいいや精神でやっていきます。

センチメートルをメートルに直して、そっから小数点以下第2位で切り捨てアレしてアレしてます。アラートだと鬱陶しいので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とアレが表示されます。

ちなみに僕はもやし体型でした。はやくヘチマになりたいです。

以上

皆さんもヘチマ目指して頑張りましょう。

Ruby on RailsによるWEBシステム開発、Android/iPhoneアプリ開発、電子書籍配信のことならお任せください この記事を書いた人と働こう! Ruby on Rails の開発なら実績豊富なBPS

この記事の著者

Yuki.K

1995年生まれ。慶應大学SFCに在学中。 夢も希望もなくキャンパスを彷徨っていたところ、夢と希望いっぱいのBPS村に引きずり込まれてしまった大学生アルバイト。 雑用担当

Yuki.Kの書いた記事

週刊Railsウォッチ

インフラ

Rubyスタイルガイドを読む

BigBinary記事より

ActiveSupport探訪シリーズ