[Work/Class/Web基礎/js_basic]

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

JavaScriptの四則演算

JavaScriptの変数

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

var 変数名;
let 変数名;

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

varは古くから使われてきたが,C言語やJavaなどから移行してきた人が変数のスコープで戸惑うため,2015年移行の現在はletが使われることが多い.letはC言語やJavaと同じ変数スコープを持つ.

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

変数名 = 10;

とする.

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

let 変数名 = 10;

グローバル変数

JavaScriptでは,自動的に2つのオブジェクトが生成されている. 一つはwindowオブジェクト,もう一つはdocumentオブジェクトである.

windowオブジェクトは,そのタブ全体の実行環境のオブジェクトである.

documentオブジェクトは,そのHTMLコード全体を表現するオブジェクトである.

「どの関数からでもアクセスできて,値を保持することができる」グローバル変数を作るときには,単純に「関数定義の外で変数宣言をすれば良い」のだが,

window.変数名 = 初期代入する値;

という形で宣言すると,そのタブでのグローバル変数であることを「明示する」ことができるため,こちらを利用した方がミスが少なくなる場合もある.

(正確には「windowオブジェクトに変数をプロパティとして追加する」という表現になる)

上記のように予め定義したグローバル変数に関数中でアクセスする場合は同様に,

alert(window.変数名);

などのようにアクセスしてやれば良い.

もちろん,全ての変数をグローバル変数にするのは良い作法とは言えず,必要があるもののみグローバル変数として定義する,ということを忘れないようにしたい.

定数

2017年ぐらいから,「値を変更しない変数は,積極的に定数として宣言するべき」という風潮が強くなっている.

JavaScriptでいう「定数」は,「宣言時に値を入れたら,その変更できない」変数の意味である.

const numOfStudents = 60;

のようにconstというキーワードで宣言する.

四則演算

変数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ファイルを開くと動作する.