本節の目的
これまでに学んだJavaScriptの「代入」、「四則演算」及び「表示」に関する演習を行いそれらの意味を確認しましょう。
演習
以下の指示に従い、JavaScriptの最も基本的な機能である代入と四則演算の演習を行い、これらの記述方法と動作を確認してください。
- 本節の演習では、exjsフォルダの学生番号exjs1.htmlを利用します。
- 「学生番号exjs1.html」をエディタで開き、head要素中で指定しているJavaScriptファイル名を「./myscript.js」から 「./myscript2.js」に変更し保存します。
- 次に、「myscript2.js」ファイルを新たに作ります。エディタを利用して、以下のJavaScriptによる処理の定義をコピー＆ペーストしてください。ペーストしたファイルは、 「myscript2.js」として、exjsフォルダに保存して下さい。
function subst () { nenrei = 18 ; nenrei = nenrei + 1; document.write(nenrei) ; } - 「学生番号exjs1.html」のbody要素の内容 (<body>の次から</body>の前まで) を全部消し、そこに、次のHTMLをコピー＆ペーストした後、上書き保存して下さい。
<p> <script type="text/javascript"> subst(); </script> </p>
この表記は、前回の「Webページが表示されると同時に起動する処理」の記述法 と同じです。こちらを参照してください。now_time()の代わりに、今定義した subst() 関数を呼び出しています(処理させようとしています)。 - 上記の学生番号exjs1.htmlをWebブラウザで表示して、nenreiの値が表示されることを確認してください。
19 が表示されましたか？ また、19が表示される処理の流れがわかりますか？
もし、処理の流れや内容が理解できない場合は、前のページを再度学習して下さい。 - 次に、先ほどのmyscript2.js の最後に(3.でペーストしたものの下に)、以下のJavaScriptによるの処理の定義をコピー＆ペーストして、上書き保存して下さい。
function calcbmi () { weight = 62.5 ; hight = 1.72 ; bmi = weight / (hight * hight) ; document.write(bmi) ; } - 「学生番号exjs1.html」のbody要素の内容として、次のHTMLを、4.でペーストしたもののすぐ下にコピー＆ペーストし、上書き保存して下さい。
<p> <script type="text/javascript"> calcbmi (); </script> </p> - 上記の学生番号exjs1.htmlをWebブラウザで表示して、bmi値が表示されることを確認してください。
（小数点以下が10桁以上ある値として表示されると思います。） - 小数点以下を四捨五入するために、JavaScriptがもっているMath.round()関数(メソッド)を適用してみましょう。
Math.round()関数は、引数を四捨五入してくれる関数です。
以下の紫字の行をmyscript2.jsの当該部分に挿入して保存し、Webブラウザで学生番号exjs1.htmlを再読み込みして下さい。
function calcbmi () { weight = 62.5 ; hight = 1.72 ; bmi = weight / (hight * hight) ; bmi = Math.round(bmi) ; document.write(bmi) ; }
bmi値が整数値として表示されましたか？ - weightとhightの値を、体重と身長の値を適当に(例えば、皆さんのものに)変更して保存し、bmi値を表示して下さい。
これらのファイルは、課題ファイルとして提出してもらいますので、実際の身長や体重を知られてしまうのが嫌な人は適当な数値を用いてください。