【JavaScript】HTML&JavaScript入門-簡単なBMI計算実装してみた

Javascript

【JavaScript】HTML&JavaScript入門-簡単なBMI計算実装してみた

html&JavaScript入門-BMI値計算-

htmlとJavaScriptを学習しているので、今回はBMI値を計算するページを作ってみました。

ちなみにBMIの計算式は

BMI=体重[kg]÷(身長×身長)

で求められます。

簡単な計算をhtmlとJavaScriptを用いて実装していきます。

フォルダファイル構成

まずは、作業フォルダを作成します。

今回は適当なフォルダに下記の図のようにjsフォルダとindex.htmlファイルを作成しました。

folder_img_html_javascript

jsフォルダ内にapp.jsファイルを作成します。

folder_img_js_create

表示出力結果

どんな画面表示になるのかは、下記の図のようになります。

体重の値と、身長の値を入力してBMIボタンをクリックすると、BMI値を返して表示させるシンプルなデザインになります。

script_html_exe_result1

次に、最終結果の出力表示を示します。

適当に体重と身長の値を入力してBMIを計算した結果です。

result_javascript_html_sampple

htmlソースコード

次に、htmlファイルのコードを紹介します。index.htmlファイルの内容。

javascriptソースコード

続いて、JavaScriptのコードをご紹介します。app.jsファイルの内容。

まとめ

まずは、簡単なコードを書いてみましょう。

コメントも一緒に書くと学習向上が早いし、コメントを書く癖付けになりますよ。

 

JavaScriptを独学で学習していくには、やはり自分でコードを書いてみないと、頭に残らないと思います。最初はJavaScript入門の参考書を買ってみてパラパラと読んだだけでしたが、ざっくりC#みたいなif文,for文など基本の仕様はわかってるからっていう体で読み終わって、何も学習できてなかったです。

ある時、ちょっと簡単なJavaScriptを書いてみようと、いざコードを書き始めると、タグやmeta基本のコードなどが全然わかっていなくて出来ると思い込んでいただけなんだなと思いました。

独学するなら自分でコードを書いてみることをしていかないと学べないなとすごく思いました。