【プロゲート復習】Javascriptで計算結果を表示する。

プログラミング
難易度:★☆☆☆☆

この記事では、Javascriptで

  • 文章をメッセージ表示する
  • 計算結果をメッセージ表示する
  • コメントを書く
  • 変数の使い方

ここら辺に触れていきます。想定読者は、

Javascriptを1から学習したい!

プロゲートで学んだ事を復習したい!

こんな方に向けての記事となります。

前回記事のおさらい〜 初めてのメッセージ表示

前回記事では、Javascriptでメッセージ表示を行いました。

【初心者】JavaScriptの使い方。0からプログラムを動かすまで解説
JavaScriptとはJavaScriptのコードサンプルJavaScriptのブラウザ確認ここら辺について触れていきます。JavaScriptで、メッセージを表示させるまでを解説していきます。この記事に...

コードの準備をしたい方は以下のコードをコピーしてください

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">    
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" 
      integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <title>Document</title>
</head>
<body>
    <h1>イージーな人生を歩みたい!</h1>
     <p class="yamada">知識をつけて、楽に生きる</p>

     <script type="text/javascript" src="sample.js"></script>
</body>
</html>

sample.js

alert("Hello!");

このソースを入れると、index.htmlを開いた時に以下のメッセージ表示が出てくると思います。

alert(“Hello!”); の部分がメッセージ表示ですね!
alert()がメッセージを表示する役割を果たし、
()内の””で囲われたものがメッセージ内容です。

ここまでを前回行いました。

今回はこのメッセージ表示をもう少し応用してみましょう。

文章を表示するときは、”(ダブルクォーテーション)で囲う

数値をメッセージ表示させる

プログラミングでは、数値を扱うこともできます。

数値は文字列と違い、クォーテーションで囲みません

数値は、足し算や引き算の計算が可能です

早速見ていきます。

alert(3);

数値もメッセージ表示が可能です。ここまでは文章とさほど変わりません。
では、次に足し算を行ってみましょう。

alert(3 + 2);

計算結果の5が表示されましたね!

3+2は、、、6じゃないの??

まぁ無視します。プログラムは決して計算結果を間違うことはありません。
予想外の表示がされたときは、プログラムを組んだ人間が悪いのです!

次はかけ算を行いましょう。

alert(3 * 2);

計算に使える記号(演算子)を表にまとめます!

演算子意味
+足し算
引き算
*かけ算
/割り算
%{% %}余りを返す

ちなみに『+』は文章をつなぎ合わせることもできます。

alert("山田" + "太郎");

数値は計算が出来る。『+』は文章を繋ぎ合わせる事ができる
 

ソースにコメントを書く

コメントはプログラムと認識されません。

そのため、ソースコードの説明を書くために利用されています

1行コメント

一行ずつコメントを書く際には『 //』を利用します。

下のコードでは、『//山田太郎君を表示します』の部分はソースと認識されません

//山田太郎君を表示します
alert("山田" + "太郎");

複数行コメント

複数行にわたるコメントを書くときは、『/*』と『*/』で囲みます。

/* 
   複数行コメント
   この部分はコメントです
 */
alert("山田" + "太郎");
コメントをたくさん書くことで、後からみた時にコードの意味が分かりやすくなります。
コメントがないと、『このコードは何の意図があって書いたのだろう??』となります

変数を使う

プログラミングでは、『変数』という重要な概念があります。

変数とは、データ(値)の入れ物です。

箱についてる名前が『変数名』で、箱の中身が『変数の値』となります。

実際に使ってみましょう!

変数は、『var 変数名 = 値』で定義します。

プログラミングの『=』は「左辺を右辺に代入する」という意味です。

これは本当に気をつけてください。自分は、ずっと「等しい」という意味だと思っていました笑

varは『これから変数を定義します』という宣言です。

実際に使ってみましょう。イメージは『name』という箱に『太郎』という値を入れていきます。

var name = "太郎";
alert(name);

『太郎』は箱の中身だね!

そうなんです!変数という箱はこういう風に使います!

んー、、でも、、

どうしましたか?

なんかめんどくさくなったような、、普通に『”太郎”』って書いた方が早くない?

素晴らしい視点ですね!確かに今のコードではそっちの方が1行で済んでいいですね!
しかし、変数には驚きのメリットがあるのです!

え!なに!?

次回のお楽しみ!!です!

Javascriptで計算結果を表示しよう

今回のまとめです。

  • 文章をメッセージ表示する
  • 計算結果をメッセージ表示する
  • 変数がどんなものか少し知る

この辺が理解できていれば、問題なしです!

さて、次回は変数の真髄に触れていきます!

これを知れば、プログラミングがなぜ効率化出来るのか、少し近づけます!

ではっ!

コメント