カテゴリー
サインイン 新規登録

間違いや改善の指摘

内容の技術的な誤り・誤字脱字やミスのご報告・解説やトピックの追記/改善のご要望は教材をさらに良くしていく上でとても貴重なご意見になります。

少しでも気になった点があれば、ご遠慮なく投稿いただけると幸いです🙏

実際には誤りではなく勘違いであっても、ご報告いただけることで教材のブラッシュアップにつながります。

質問ポリシー①

教材受講者みなさんのスムーズな問題解決のために、心がけていただきたいことがあります。

教材の内容に関する質問を投稿しましょう

教材の内容に関係のない質問や教材とは異なる環境・バージョンで進めている場合のエラーなど、教材に関係しない質問は推奨していないため回答できない場合がございます。

その場合、teratailなどの外部サイトを利用して質問することをおすすめします。教材の誤字脱字や追記・改善の要望は「文章の間違いや改善点の指摘」からお願いします。

1-2

四則演算と文字列

JavaScriptではHTMLだけではできなかった数字の計算をさせることができます。また文字列もプログラミングによって簡単に追加ができます。ここではJavaScriptでの四則演算や文字列の取り扱いについて解説します。

足し算・引き算

まず足し算の計算結果を表示してみましょう。

小学校の算数で習った時と同じように+-で足し算、引き算ができます。先ほど作成したhello.htmlを下記の様に書き換えて、document.writeの命令を使い計算結果をHTMLに表示します。

hello.html
12345678910111213
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>

[実行結果]
image

このように足し算をした結果が表示されます。

掛け算・割り算

JavaScriptや多くのプログラミング言語でも掛け算は*(アポストロフィ)、割り算は/(スラッシュ)の記号を利用します。全角の×÷は利用できないので注意しましょう。

hello.htmlを以下のように編集してください。

hello.html
12345678910111213
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>

[実行結果]

image

その他の演算子

四則演算以外にも演算子はたくさんあります。演算子とは+や-などの記号のことです。数字の計算に演算子を一覧にまとめましたのでどんな計算結果になるか実際にコードを書いてみて試してみるとよいでしょう。

演算子 説明
+ 足し算
- 引き算
* 掛け算
/ 割り算
% 割り算の余り
() ()内の計算を優先して計算
例:2 * (2+3)
++ 1を加算
-- 1を減算

文字列

コンピュータの世界では文字や記号や数字を並べた文章のことを文字列と言います。

文字列を表示は先ほど「Hello World」を表示したように""(ダブルクォーテーション)で囲みます。複数の文字列をつなげて表示もできます。いくつかの文字列の書き方を試してみましょう。

hello.htmlを以下のように編集してください。

hello.html
12345678910111213
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>

[実行結果]
image

+で「今日は」と「月曜日です」をつないでひとつの文章として表示できます。

HTMLタグを""で囲んでHTMLを記述もできます。この例ではbrタグを記述して改行をしています。

"1 + 2 = "の部分は""で囲まれているためここは数字ではなく文字列として扱われるため「1 + 2 = 」とそのまま表示されます。

この文字列に(1 + 2)の計算結果の3をつなげて表示しています。文字列をつなげる+と足し算をするための+を混同しないように気を付けましょう。