Javascriptの演算子
四則計算(加減乗除、和差積商を求める計算)
四則計算の記号には【算術演算子】といい次の記号を使用
求めるもの 算術演算子
和(足し算、加算) +
差(引き算、減算) -
積(掛け算、乗算) *
商(割り算、除算) /
start04.htmlファイルを開いて下さい。開いたら次のコードを記述しなさい。
document.write('12＋2×3は、');
document.write(12 + 2 * 3);
document.write('です。<br>');
document.write('12－4÷2は、');
document.write(12 - 4 / 2);
document.write('です。<br>');
console.log('12＋2×3は、' , '12 + 2 * 3' , '12－4÷2は、' , '12 - 4 / 2');
記述を終えたらブラウザで確認し、全てを確認するために1行目と4行目のコードにコメントアウトしなさい。
解説
1行目と3行目、3行目と6行目は文字列として書き出している。1行目と3行目をコメントアウトした場合、2行目と5行目は計算させるための数式を記述している
3行目と6行目のようにHTMLのbr要素<br>(XHTMLでは<br />)を記述することによりブラウザで表示する際に改行させている。このように文字列の場合、HTML要素を記述してブラウザに表示することも可能
簡単な計算結果の表示
strat05.htmlを開きなさい。開いたら次のコードを記述しなさい
document.write('この50円記念切手1シートは、5枚入で');
var price = 50;
var piece = 5;
var totalPrice = price * piece;
document.write(totalPrice);
document.write('円です。');
console.log(price , piece , totalPrice);
この50円記念切手1シートは、5枚入で250円です。
と表示されたら完成。fin05.htmlとして保存すること。
解説
ここでさせたい計算は【50円記念切手が5枚でいくらか？】で変数に代入する数値を変えることによって色々な単価と枚数の記念切手の金額を求められるという発想で考える
1行目で単価(50円)を変数priceとして宣言
2行目で枚数(5枚)を変数pieceとして宣言
3行目で単価×枚数の計算結果を変数toalPriceとして宣言し変数priceと変数pieceをかけあわせた式を代入
4行目でブラウザに書き出すことの指定は変数totalPrice
文字列と数値の計算結果を同時に表示1
fin05.htmlを下記コードに書き換えなさい
var message = 'この50円記念切手1シートは、5枚入で';
var message2 = '円です。';
var price = 50;
var piece = 5;
var totalMessage = message + price * piece + message2;
document.write(totalMessage);
console.log(price , piece , totalMessage);
この50円記念切手1シートは、5枚入で250円です。
と、同じ表示が出来たか確認しなさい。確認したらfin05_01.htmlとして保存
解説
文字列のメッセージも変数として代入することにより金額の計算に加え文字列と計算結果を合わせて表示させた
1行目で【この50円記念切手1シートは、5枚入で】という文字列を変数messageとして宣言
2行目で【円です。】という文字列をmessage2として宣言
5行目でブラウザに表示する内容を変数totalMessageとして宣言し加算の演算子【+】を使用して変数messageと変数message2の間に変数priceと変数piceを掛けあわせる計算式を代入したものを結合
6行目はブラウザに表示されるのは変数totalMessageとした
文字列と数値の計算結果を同時に表示2
1では【+】と【*】の組み合わせなので自動で文字列は結合され数値は正しい計算ができたが文字列が全て【+】で結ばれている場合の弊害を知りましょう
var message = '記念切手5枚入のシートと10枚入のシートを合わせると';
var message2 = '枚の記念切手が手に入ります。';
var piece = 5;
var piece2 = 10;
var totalMessage = message + piece + piece2 + message2;
document.write(totalMessage);
console.log(piece , piece2 , totalMessage);
fin05_02.htmlを上記コードに書き換えなさい。書き換え終えたらブラウザで表示。
記念切手5枚入のシートと10枚入のシートを合わせると510枚の記念切手が手に入ります。
このように表示され計算が合わないことが分かる。正しい計算させるために
5行目に手を加える
var totalMessage = message + (piece + piece2) + message2;
このように書き換えなさい
【()】で囲むことにより数値型の変数は数値型と認識され正しい数値型の計算となる
確認したらfin05_03.htmlとして保存
簡易テスト
ファイルを新規に作りJavascriptの変数を使って下記をブラウザに表示しなさい
その際にconsole.log()も必須
1ダースの鉛筆は3人で分けると4本づつ配られます。
<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Javascript簡易テスト</title>
</head>
<body>
</body>
</html>
ヒント
1ダース=？
配られるということは割ることが出来る
