教材の内容に関係のない質問や教材とは異なる環境・バージョンで進めている場合のエラーなど、教材に関係しない質問は推奨していないため回答できない場合がございます。
その場合、teratailなどの外部サイトを利用して質問することをおすすめします。教材の誤字脱字や追記・改善の要望は「文章の間違いや改善点の指摘」からお願いします。
JavaScriptではHTMLだけではできなかった数字の計算をさせることができます。また文字列もプログラミングによって簡単に追加ができます。ここではJavaScriptでの四則演算や文字列の取り扱いについて解説します。
まず足し算の計算結果を表示してみましょう。
小学校の算数で習った時と同じように+
、-
で足し算、引き算ができます。先ほど作成したhello.html
を下記の様に書き換えて、document.write
の命令を使い計算結果をHTMLに表示します。
hello.html12345678910111213 Copied!<!DOCTYPE html>
<html>
<head>
<title>JavaScript Sample</title>
</head>
<body>
<script>
document.write(10 + 30);
document.write("<br />");
document.write(40 + 20);
</script>
</body>
</html>
[実行結果]
このように足し算をした結果が表示されます。
JavaScriptや多くのプログラミング言語でも掛け算は*
(アポストロフィ)、割り算は/
(スラッシュ)の記号を利用します。全角の×
や÷
は利用できないので注意しましょう。
hello.html
を以下のように編集してください。
hello.html12345678910111213 Copied!<!DOCTYPE html>
<html>
<head>
<title>JavaScript Sample</title>
</head>
<body>
<script>
document.write(30 * 10);
document.write("<br />");
document.write(30 / 75);
</script>
</body>
</html>
[実行結果]
四則演算以外にも演算子はたくさんあります。演算子とは+や-などの記号のことです。数字の計算に演算子を一覧にまとめましたのでどんな計算結果になるか実際にコードを書いてみて試してみるとよいでしょう。
演算子 | 説明 |
---|---|
+ | 足し算 |
- | 引き算 |
* | 掛け算 |
/ | 割り算 |
% | 割り算の余り |
() | ()内の計算を優先して計算 例:2 * (2+3) |
++ | 1を加算 |
-- | 1を減算 |
コンピュータの世界では文字や記号や数字を並べた文章のことを文字列と言います。
文字列を表示は先ほど「Hello World」を表示したように""
(ダブルクォーテーション)で囲みます。複数の文字列をつなげて表示もできます。いくつかの文字列の書き方を試してみましょう。
hello.html
を以下のように編集してください。
hello.html12345678910111213 Copied!<!DOCTYPE html>
<html>
<head>
<title>JavaScript Sample</title>
</head>
<body>
<script>
document.write("今日は" + "月曜日です")
document.write("<br />")
document.write("1 + 2 = " + (1 + 2));
</script>
</body>
</html>
[実行結果]
+
で「今日は」と「月曜日です」をつないでひとつの文章として表示できます。
HTMLタグを""
で囲んでHTMLを記述もできます。この例ではbr
タグを記述して改行をしています。
"1 + 2 = "
の部分は""
で囲まれているためここは数字ではなく文字列として扱われるため「1 + 2 = 」とそのまま表示されます。
この文字列に(1 + 2)
の計算結果の3をつなげて表示しています。文字列をつなげる+
と足し算をするための+
を混同しないように気を付けましょう。