[JavaScript] 基本文法を個人的にまとめた。

JavaScriptについて、理解を深めるためにまとめる。
随時更新していく。

参考文献
☆生形可奈子『スラスラわかるJavaScript』

##変数
メモリに記憶するデータを入れるための箱のようなもの
入れられる値は1つ
　　
######宣言
var 変数名;　
var 変数名①, 変数名②

var x; //変数の宣言

#####代入
変数名 = 値;

x = 1; //変数の代入
x = 7;

※ 「右辺を左辺に入れる」という意味
※　代入するたび、上書きされる

#####初期化
var 変数名 = 値;

var x = 7; //初期化(宣言と代入の同時化)
console.log(x); //コンソールで変数を表示

※ 宣言と代入を同時に行う
※ 設定しない場合はundefinedと呼ばれる特殊値が入り、処理ができなくなる。
　利用する場合は事前に値を設定しなければならない

#####代入演算子
インクリメント(変数に1足す)　++
デクリメント(変数から1引く) --

##配列
複数の変数を1つにまとめたもの
各変数を要素と呼び、識別番号をインデックス（もしくは添え字）と呼ぶ

#####初期化
var 配列名 = [値①, 値②・・・];

 var number = [7, 77, 777]; //配列の初期化

#####要素の参照
配列名[インデックス];

 console.log(number[9]); //要素の参照

#####要素への代入
配列名[インデックス] = 値;

 number[2] = 111; //要素の代入

#####要素の追加
配列名[追加インデックス] = 値;

 number[3] = 1; //要素の追加
 number[9] = 21; //要素は連番でなくて構わない
 var number = []; //空の配列を作成
 number[7] = 2; //あとから要素を追加しても構わない
 number[3] = 123;
 console.log(number[7]);

#####要素数の取得
配列名.length;

 console.log(number.length); //要素数の取得

#####二次元配列

 配列名 = [[配列①], [配列②]];
 
 var number = [[1, 2, 3], [4, 5, 6]]; //二次元配列
 console.log(number[0][0]); // 1
 console.log(number[0][1]); // 2
 console.log(number[0][2]); // 3
 console.log(number[1][0]); // 4
 console.log(number[1][1]); // 5
 console.log(number[1][2]); // 6

2つの配列が1つにまとめたもの
※ 三、四次も可能だが、読みづらくなるため、二次までが現実的

##連想配列
数値で識別されていたインデックスを文字列に変えて、よりわかりやすくする
インデックスをキーと呼ぶ
オブジェクトのこと

#####初期化
var 連想配列名 = {キー名①： 値①, キー名②： 値②・・・};

var likes = {  //連想配列の初期化
  animal : "ねこ",
  drink : "炭酸水",
  sports : "野球",
  years : 77
};

#####要素の参照
連想配列名.キー名　もしくは　連想配列名[“キー名”]

console.log(likes.animal); //要素の参照
console.log(likes["drink"]); //この描き方もいける
var key = "sports"; //keyを用いて入れても構わない
console.log(likes[key]);
console.log(likes.country);
console.log(likes.years);

#####要素への代入
連想配列名.キー名 = 値;

likes.country = "ドイツ"; //要素の追加

##制御構文
「分岐」「反復」を実現する命令文
これ以外は「順次」

#####分岐処理
if (条件式) {
条件を満たす場合の処理
} else {
条件を満たさない場合の処理
}

#####比較演算子
=== 左右辺が等しい、かつデータ型も等しい場合　true
!== 左右辺が等しくない、もしくはデータ型が等しくない場合　true

#####論理演算子
&& 左右辺が等しい場合　true
|| 左右辺どちらか正しい場合　true
! 真偽値を反転

※ nullやundefinedの特殊値が空であることを利用して、
　変数に値があるかの確認に使われる

#####多方向分岐(3つ以上)
if (条件式①) {
条件を満たす場合の処理
} else if (条件式②) {
条件を満たす場合の処理
} else if (条件式③) {
条件を満たす場合の処理
} else {
すべての条件を満たさない場合の処理
}

　　　

<script>
	var name = "たけし";
	if (name == "たかし" && name == "たてし") { //論理演算子
		console.log("はい、元気です");
	} else {
		console.log("私ではありません");
	}
</script>


<script>
	var c;
	if (!c) { //!演算子
		console.log("cは空っぽです");
	}
</script>

<script>
	var name = "たけし";
	if (name == "たかし" && name == "たてし") { //多分岐処理
		console.log("はい、元気です");
	} else if (name == "たくし") {
		console.log("違います");
    } else if (name == "たこし") {
		console.log("私ではありません");
  } else {console.log("休みです");
	}
</script>


#####switch文
switch (変数) {
case 値①：
変数 == 値①の場合の処理
case 値②：
変数 == 値②の場合の処理
case 値③：
変数 == 値③の場合の処理
default：
すべてに一致しない場合の処理
}
if文を簡略化して、すっきりさせたもの
変数の値を軸に分岐
※ break文：一致した文のブロックから強制的に外れることができる
※ あくまでもif文をわかりやすくするためのもの
ほとんどはif文が使われる（switch文では値やデータ型の比較ができないため）
単純な条件式であれば、コードの見やすさからも検討できる

　<script>
	var p = 7;
	switch (p) { //switch文
		case 1:
			console.log("pは1です");
	　　 case 3:
			console.log("pは3です");
		case 7:
			console.log("pは7です");
			break; //break文、defaultのコンソールは表示されなくなる
		default:
		    console.log("一致しません");
	}
　　</script>

#####反復処理➡︎同じ処理を繰り返したい場合に使用する（ループ）
while (継続条件式) {
繰り返す処理
}

#####for文
for (初期化式,; 継続条件式; 増減式) {
繰り返す処理
}
繰り返し処理のなかで、変数の値を変更することができる(カウンタ変数)
※ 初期化式：初めの1回目のみ実行
※ 継続条件式：1回の繰り返し処理の最初に毎回実行
※ 増減式：1回の繰り返し処理の最後に毎回実行

#####for-in文

for (var 変数名 in 連想配列名) {
  連想配列名[変数名]
}

連想配列で繰り返し処理を使用する場合に用いる
要素数分行われる

####繰り返しの制御
繰り返し処理の中断や強制終了を命令する構文

#####break文
繰り返しのブロックから強制的に外れるようにする
処理の途中で繰り返しを終了させる際に利用k

#####continue文
1回分の処理途中で抜け、次の処理へ移動させる
継続条件式がfalseになるまで繰り返す
ある条件のときに処理を行わないようにする際に利用

##関数
一連の処理（よく使うもの、記述に手間のかかるもの）に名前をつけて1つにまとめたもの
引数（処理の材料）を使って、処理を行い、戻り値（処理の結果）を作る
自作関数（自身で定義したもの）、組み込み関数(あらかじめ組み込まれているもの)がある
引数、戻り値は省略可能

#####定義
function 関数名() {
処理;
}

#####呼び出し
関数名();
定義と呼び出しの記述順は関係なし
ただ定義するだけでは実行されないため、呼び出しをしなければならない

#####定義[引数あり]
function 関数名(引数を入れるための変数名) {
処理;
}

※複数指定
function 関数名(変数名①, 変数名②・・・) {
  処理;
}

#####呼び出し[引数あり]
関数名(引数として渡す値);

 ※複数指定
 関数名(値①, 値②・・・);

#####定義[戻り値あり]
function 関数名() {
処理;
return 戻り値;
}

#####呼び出し[戻り値あり]
戻り値を入れるための変数名 = 関数名();

#####組み込み関数
parseInt（パースイント）：数字列（文字列型）を数値型（整数）に変換
parseFloat（パースフロート）：数字列（小数点を含む文字列型）を数値型（実数）に変換
isNaN（イズナン）：指定値がNaN（Not-a-Number）か調べる
encodeURIComponent：指定の文字列をURLエンコード（使用不可の文字を使用可能な特殊文字に変換）する
decodeURIComponent：指定の文字列をURLデコード（エンコードされた文字を元々の状態に復元）する

エンコード：“関数”➡︎%E9%96%A2%E6%95%B0
デコード：%E9%96%A2%E6%95%B0➡︎“関数”

#####スコープ
変数の有効範囲の設定のこと
　　　　　　
グローバル
すべての関数で参照可能
関数の外側で宣言した変数、宣言を省略した変数が対象
ページが更新されなければ、同じ値を持ち続ける

ローカル
特定の関数のみ参照可能
関数の内側で宣言した変数、関数の引数
Uncaught ReferenceError: str is not defined
関数が呼びだされる毎に、値が初期化される

※両スコープに同名変数がある場合、ローカルが優先される
原則ローカルを使うのが望ましい（変数名の衝突を避けるため）

#####代入
変数名 = 定義済の関数名;

#####関数式
変数名 = function 関数名() {
処理
};
定義と代入を同時に行う
匿名関数（関数名の省略による）の表記も可能

#####即時関数
(function(引数を入れる変数名) {
処理;
})
(引数の値);
定義と同時に実行される（1回しか呼び出さない場合）

#オブジェクト
JavaScriptで扱うデータ（文字列、数値、関数など）すべてを指す
2つから構成される

####メソッド
関数を持つ要素

####プロパティ
値（文字列や数値）を持つ要素

#####作成
var オブジェクト名 = {キー名 : 関数, ・・・};

var obj = {
  name : "もんた",
  say : function() {
    console.log("よろしくね");
  }
};

#####呼び出し
オブジェクト名.キー名();

obj.say();

#####thisキーワード
this.キー名

say : function() {
  console.log(this.name + "、よろしくね"); //thisキーワード
}

自身のオブジェクトが持つメソッドやプロパティを利用できる

#####callメソッド
メソッドを持つオブジェクト名.メソッド名.call(メソッドを使用したいオブジェクト名);

①var samp = {
   name : "ぽんた",
 }
 obj.say.call(samp); //callメソッド

②var obj1 = {
   name : "さんた",
   say : function(age, from) { //引数を設定
     console.log(this.name + "、よろしくね");
     console.log(age + "歳です。");
     console.log(from + "出身です。");
   }
 };
 var samp1 = {
   name : "こんた",
 };
 obj1.say.call(samp1, 7, "沖縄");　//引数の中身

・原則メソッドは所有するオブジェクトでしか呼び出せない
　➡︎それを他オブジェクトでも使えるようにする方法

#####applyメソッド
var param = [7, "沖縄"];　　　　//第2引数以降は配列形式
obj1.say.apply(samp1, param); //applyメソッド

###組み込みオブジェクト
その名の通りJavaにあらかじめ組み込まれているオブジェクト
#####Object
・すべてのオブジェクトの元
　➡︎所有するメソッド、プロパティの使用制限なし

####Date
var オブジェクト名 = new Date(年, 月,　日);
Dateオブジェクト名.メソッド名()

var today = new Date();
console.log(
  today.getFullYear() + "/" +
 (today.getMonth() + 1) + "/" +
  today.getDate()
);

日時操作機能

[メソッド]
getFullYear：日時データの「年」を返す
getMonth：日時データの「月」を返す
　　　　　 0~11の数値で管理されているため、取得した値に+1をしなければならない
getDate：日時データの「日」を返す
getHours：日時データの「時間」を返す
getMinutes:日時データの「分」を返す
getSeconds：日時データの「秒」を返す

####Math
Math.メソッド名(数値);

console.log(Math.ceil(7.5));  //切り上げ
console.log(Math.floor(7.5)); //切り捨て
console.log(Math.round(7.5)); //四捨五入

計算機能
オブジェクトの生成がいらない

[メソッド]
ceil：小数点以下を切り上げた結果を示す
floor：小数点以下を切り捨てた結果を示す
round：小数点以下を四捨五入した結果を示す

####Array(アレイ)
配列操作機能

#####lengthプロパティ
要素数を取得する

#####pushメソッド
配列名.push(要素1, 要素2・・・);

var numbers = [1, 2, 3];
numbers.push(4, 5); //pushメソッド
console.log(numbers);

要素の追加

#####joinメソッド
配列名.join("区切り文字");

var numbers = [1, 2, 3];
var str = numbers.join(" "); //joinメソッド
console.log(str);

要素を連結させ、文字列として1つにまとめる

#####reverseメソッド
配列名.reverse();

var numbers = [1, 2, 3];
numbers.reverse(); //reverseメソッド
console.log(numbers);

要素の順番を入れ替える

#####sortメソッド
配列名.sort();

var words = ["Tokyo", "Osaka", "Nagoya"];
words.sort(); //sortメソッド
console.log(words);

要素をアルファベット順にする

####String
文字列操作機能

#####indexOfメソッド
文字列.indexOf("検索文字列");

var teamname = "チームどすこい";
var index = teamname.indexOf("どすこい"); //indexOfメソッド

指定の文字列が何文字目に出現するかを調べる

#####sliceメソッド
文字列.slice(開始位置, 終了位置);

var name = teamname.slice(0, index);      //sliceメソッド
console.log(name);

・指定の文字列から一部抜粋をする
・「0」番目から数える

#####splitメソッド
文字列.split("区切り文字", 配列の最大要素数);

var frase = "勝って 兜の 緒を 締めよ";
var words = frase.split(" "); //splitメソッド
console.log(words);

指定の区切り文字で文字列を分解させ、変換の結果を返す

#####正規表現
/パターン/オプション

/abc/       ※文字列にabcが含まれているかチェック
/[abc]/     ※文字列にabcどれかが含まれているかチェック
/[a-zA-Z]/  ※文字列にa〜z、A〜Zいずれかが含まれているかチェック
/[^a-aA-Z]/ ※文字列にアルファベットが含まれていないかチェック
/abc|xyz/   ※文字列にabcもしくはxyzが含まれているかチェック

/^0[0~9]{1,4}-?[0~9]{1,4}-?[0~9]{4}$/ ※電話番号の正規表現(数字と文字のみ、0から始まる、市内外局番は1〜4桁、加入者番号は4桁、ハイフンの有無なし)

[表現方法]
[ ]：かっこ内のいずれか一文字に一致する
-：[ ]と組み合わせると文字の範囲を表す
^：文字列の先頭　※[ ]と組み合わせると否定の意味になる
$：文字列の末尾
. ：一文字と一致する（改行以外）
¥n：改行と一致する
|：文字列（複数）のいずれかと一致する
( )：パターンをグループ化する　※グループ化によって全体に対して繰り返し文字を適用できるようになる

[繰り返し文字]
?：直前の文字0もしくは1文字分と一致する
*：直前の文字が0文字以上連続する部分と一致する
+：直前の文字が1文字以上連続する部分と一致する
{n}：直前の文字がn文字分と一致する
{n,}：直前の文字がn文字以上連続する部分と一致する
{n,m}：直前の文字がn文字以上、m文字以下の範囲で連続する部分と一致する

[オプション]
i：大小文字を区別なしで照合する
g：パターンと一致する部分文字列（複数）をすべて検索する
m：複数行の文字列の指定をする

・一般的なWebサイトの入力フォームに対して、
　正しい形式で行われているかをチェックするために使われている文字列のパターンを特定するための手法

#####matchメソッド
文字列.match(正規表現);

var date = "2020/11/05";
var result = date.match(/[0-9]+/g); //matchメソッド
console.log(result);

文字列から正規表現と一致する部分を探し、戻り値として返す

#####replaceメソッド
文字列.replace(正規表現, "置換文字列");

var message = "This is it";
var result = message.replace(/is/g, "at"); //replaceメソッド
console.log(result);

文字列から正規表現と一致する部分を探し、指定の文字列に置き換える

##イベント
Web上で発生する出来事（ページの表示、ボタンのクリックなど）のこと
イベントを起こすためにはWebページとイベントハンドラを関連付けなければならない
イベント駆動型モデル：イベント発生時に行う処理を呼び出す仕組み
　　　　　　　　　　　➡︎イベントハンドラ：イベントの発生を検知して処理を呼び出す機能
　　　　　　　　　　　　　　　　　　　　　要素の属性値として指定
　　　　　　　　　　　　　　　　　　　 　　※イベントハンドラ名は「on + イベント名」

#####clickイベント➡︎ボタンクリック時に発生
<タグ名 イベントハンドラ名="JavaScriptによる処理内容">タグ名>

<button onclick="alert('おはよう');">クリック</button>

--関数を用いることが多い  
<head>
  <script>
    function say() {
      alert("おはよう");
    }
  </script>
</head>

<body>
  <!-- clickイベント -->
  <button onclick="say();">クリック</button>
</body>

""（ダブルクォーテーション）の中は'（シングルクォーテーション）
同じ記号にしてしまうと、文字列が無効になる

#####loadイベント➡︎ページ表示時に発生

body要素の属性に指定する
すべてのHTMLタグの読み込み後に実行
script要素内や.jsファイル内の場合はHTMLタグの読み込み前に実行

#####mouseover/mouseoutイベント➡︎カーソルが乗った時/外れた時に発生

#####focus/blurイベント➡︎フォーカスがされている時/されていない時に発生

#####changeイベント➡︎選択項目の変更時に発生

犬
猫
猿

#####thisキーワード➡︎イベント発生元の特定

<input type="button" value="ボタン①" onclick="check(this);">
<input type="button" value="ボタン②" onclick="check(this);">
<input type="button" value="ボタン③" onclick="check(this);">

##ブラウザオブジェクト
ブラウザやWebページに関する情報を持つオブジェクトの総称
ブラウザ上で行う機能の提供をしている
ブラウザオブジェクトのメソッドやプロパティを利用するには、オブジェクト名(小文字）を指定する

####Windowオブジェクト➡︎すべてのブラウザオブジェクトの親
(window.)location.href --Locationオブジェクトのhrefプロパティを利用

・ウィンドウ全体に関する情報を持つ
・先頭に記述しなければならない
　➡︎省略が可能であり、書かれないことが多い

#####alertメソッド➡︎警告用のダイアログボックスを表示
alert("表示するメッセージ");

#####confirmメソッド➡︎確認用のダイアログボックスを表示
confirm("表示するメッセージ");

<script>
  function check() {
    var result = confirm("確認用メッセージ")
    if (result) {
        console.log("OK");
    } else {
        console.log("NG");
    }
  }
</script>

<button onclick="check();">クリック</button>

#####open/closeメソッド➡︎ウィンドウもしくはタブを開く/閉じる
open("URL", "ウィンドウ名", "オプション1=値1,（・・・）”);　--第2引数以降は省略可能

<button onclick="open('browser-object1.html', null, 'width=300, height=150');">開く</button>

window.close();　--window.の省略不可

<button onclick="window.close();">閉じる</button>

[オプション]
width：ウィンドウの幅
height：ウィンドウの高さ
top：デスクトップ画面上からウィンドウまでの距離
left：デスクトップ画面左からウィンドウまでの距離

#####setlnterval/clearlntervalメソッド➡︎タイマーを設定する/解除する
setlnterval(関数名もしくは関数式, 時間間隔); --時間間隔はミリ秒（1/1000）で指定

clearlnterval（タイマーID）; --タイマーIDはsetlntervalの戻り値

<script>
  var count = 0;
  var timer = setInterval(output, 1000); //setIntervalメソッド
  function output() {
    count++;
    console.log(count + "秒経過");
    if (count >= 10) {
      clearInterval(timer); //clearIntervalメソッド
    }
  }
</script>

・処理開始の間隔を指定
・似たメソッドとしてsetTimeout/claerTimeoutがある
　➡︎処理終了から何秒後に次の処理開始をするか指定（書き方は同じ）

#####Locationオブジェクト➡︎WebページのURL情報を持つ
location.href = "移動先URL";

loctaion.href = "http://www.google.co.jp/";

<button onclick="location.href='browser-object1.html';">移動</button>

#####Histroyオブジェクト➡︎Webページの閲覧履歴情報を持つ
history.back();

<button onclick="history.back();">戻る</button>

#####Documentオブジェクト➡︎Web上すべての部品情報を持つ
document.フォーム名.フォーム内要素名 //フォーム要素の取得

document.frm.message

<body>
   <form name="frm">                     //ここにアクセスできる
     <input type="text" name="message"> //ここにアクセスできる
   </form>
</body>

Documentオブジェクトを介して、個々のHTML要素にアクセスができる

##DOM(Document Object Model)
スクリプトでHTML要素を自由に操作するための仕組み
Documentオブジェクトが持つ要素構造そのものやその機能を指す
ツリー構造で表現する（例えばhtml：親要素、p：子要素、head：兄弟要素、pの中身やimg：孫要素）

###getElementById/getElementsByNameメソッド➡︎要素の取得（＝アクセス）
document.getElementById("id属性値");
document.getElementsByName("name属性値"); //重複が考えられるため、複数要素の可能性があリえる

<script>
  function setValue() {
    var elm = document.getElementById("tx1")  --ボタンを押すことでID：tx1を持つ要素のvalue属性に値を設定する
    elm.value = "にゃんぱす〜";
    --
    document.getElementById("tx1").value = "にゃんぱす〜";  --変数を使わない場合
  }
</script>

<input id="tx1" type="text">
<input id="tx2" type="text">
<input id="tx3" type="text">
<button onclick="setValue();">押してみて</button>
----
<script>
  function SetValue() {
    var elm = document.getElementsByName("tx1");
    for (var i = 0; i < elm.length; i++) {
      elm[i].setvalue = "おはよーそろー";
    }
  }
</script>

<input name="tx1" type="text">
<input name="tx1" type="text">
<input name="tx1" type="text">
<button onclick="SetValue();">押してね</button>

・戻り値はHTML要素
・getElementsByNameメソッドはElementが複数形であることに注意

#####属性値の変更
要素.属性名 = 値;

#####CSSクラスの変更
要素.className = "CSSクラス名";

#####innerHTMLプロパティ➡︎要素の中身を書き換え
要素.innerHTML = 文字列;

<script>
  function showImage() {
    var htmlstr = "";    --空文字で初期化
    for (var i = 1; i <= 3; i++) {　--HTML文字列の生成
      htmlstr += "<img src='images/xxx' + i + ".jpg">";
    }
    document.getElementById("imageArea").innerHTML = htmlstr;　--生成されたHTML文字列を<div>要素として設定
    this.disabled = true; //ボタンの無効化処理 --関数内のthisキーワードによってイベント発生元要素を表す
  }
</script>

<button id="btn" onclick="showImage();">読み込み</button>
<div id="imageArea">画像が読み込まれます。</div>

#####イベントハンドラの変更
要素.イベントハンドラ = 定義済の関数名;
もしくは
要素.イベントハンドラ = function 関数名() {
};

document.getElementById("btn").onclick = showImage;　--上から順に読み込まれるため、このままだとコンパイルエラーになる

<button id="btn">読み込み</button>

HTMLとスクリプトを分離するため、イベントハンドラはスクリプトで設定

#####onloadイベントハンドラ
window.onload = 関数名もしくは関数式;

window.onload = function() {
  document.getElementById("btn").onclick = showImage;
};

--引数有りの場合
function showImage(number) {
    var htmlstr = "";    
    for (var i = 1; i <= 3; i++) {　
      htmlstr += "<img src='images/xxx' + i + ".jpg">";
    }
    document.getElementById("imageArea").innerHTML = htmlstr;　 
} 
window.onload = function() {
  document.getElementById("btn").onclick = function() {
    showImage(1);
  };
};