[Work/Class/Web基礎/2_JSBasic]

JavaScriptの基礎 計算と文字列の連結と外部JSファイル

JavaScriptの四則演算

JavaScriptの変数

JavaScriptでは,変数は整数などの区別がなく全て,

var 変数名;

という形で宣言する.varは変数variableの略である.

宣言した変数に値を代入するには,

変数名 = 10;

とする.

以下のように,宣言と同時に値を代入しても良い.

var 変数名 = 10;

四則演算

変数a, b, cを使った四則演算の例は以下の通り.(変数a, b, cは既に宣言されて値が入っているものとする.

a = b + c;
a = b - c;
a = b * c;
a = b / c;

文字列の連結

JavaScriptでは,文字列もそのまま他の変数と同じように扱うことが可能である.

var firstString = "文字列を変数に代入するよ!";

のように,ダブルクォーテーションで文字列を囲んで利用する.

さらに「+」演算子により,文字列同士を連結することができる.

var resultString = "最初の文字列" + "次の文字列";

連結の際に普通の数字が入っている変数を連結すると,数字がそのまま文字列として連結される.

var a = 200;
alert("変数aの中身は" + a + "ですよ!");

以下のコードは,ボタンを押して計算結果をalertを使って表示するプログラムである.文字列の連結を使って,文字と計算結果を連結させている.→動作確認ページ

<!DOCTYPE html>
<!-- 221_JSBasic_CalcInJS.html -->

<html lang="ja">
<head>
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta charset="utf-8" />
  <title>JavaScriptの基礎 ボタンを押したら計算する.</title>

	<script type="text/javascript">
	  function onClickButton(){
	      var result;
	      //varは変数(variable)を表す.JSでは整数や小数の区別がない.
	      var firstNumber = 10;
	      var secondNumber = 20;
	      var result = firstNumber + secondNumber;
	      alert("計算結果は" + result + "です!");
	  }
	</script>
</head>
<body>

  <input type="button" value="ボタンを押したら実行" onclick="onClickButton();" />

</body>
</html>

JavaScriptを外部ファイルに記述する

CSSファイルのように,JavaScriptの記述部分のみをhtmlの外にファイルとして書き,それをhtmlにリンクすることで,htmlがすっきりとし,また複数のhtmlファイルで使い回すことができる.

外部JavaScriptファイルを指定するには,headタグ内に

<script type="text/javascript" src="./読み込みたいJavaScriptファイル.js" ></script>

と記述すれば良い.

このJavaScriptファイルを指定する時,絶対パス,相対パスの両方が使える.ここでは相対パスで同じディレクトリに存在するJavaScriptファイルを読んでいる.

以下が先のボタンで四則演算を行い表示するプログラムをhtmlファイルとJavaScriptファイルに分けたものである.→動作確認ページ

htmlファイル「222_JSBasic_CalcInJS_IncludeJSFile.html」は以下の通り.

<!DOCTYPE html>
<!-- 222_JSBasic_CalcInJS_IncludeJSFile.html -->

<html lang="ja">
<head>
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta charset="utf-8" />
	<title>JavaScriptの基礎 ボタンを押したら計算するのを外部jsファイルで</title>

	<!-- 外部ファイルにしたJavaScirptを読み込む.ここでは相対パス -->
	<script type="text/javascript" src="./222_JSBasic22_CalcInJS_IncludeJSFile.js">
	</script>
</head>
<body>

  <input type="button" value="ボタンを押したら実行" onclick="onClickButton();" />

</body>
</html>

対応するJavaScriptファイル「222_JSBasic_CalcInJS_IncludeJSFile.js」は以下の通り.

/* 222_JSBasic_CalcInJS_IncludeJSFile.js */
    function onClickButton(){
    var result; 
    //varは変数(variable)を表す.JSでは整数や小数の区別がない.
    var firstNumber = 10;
    var secondNumber = 20;
    var result = firstNumber + secondNumber;
    alert("計算結果は" + result + "です!");
}

この二つを同じディレクトリに置いてhtmlファイルを開くと動作する.