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