　はじめに

こちらは学習用のメモになります。
今回は JavaScriptの基本的は基礎についてまとめていきたいと思います。

出力

console.logでJavaScriptの実行結果がわかります。

＊実行結果を見る方法は実行したブラウザを左クリックして検証を押してConsoleを見ると実行結果がわかります。

index.js

console.log('Hello World');

①変数

index.js

let text = 'Hello World';

letは変数を宣言するもの。後ろの言葉を変数にする。

変数は書き換えることができます。

index.js

let text = 'Hello World';

//変数の更新
text = 'Hello world2';

②定数

index.js

const bigText = 'Hello world';

定数は変数と似ているのですが、変数は上書きや更新ができるのですが定数は書き換えができないです。
つまり、定数は文字列を変えたくないときに使う。

＊余談
・プログラミングでは単語が二つ重なる場合は、間の単語は大文字にするかアンダーバーを入れる。
・varでも変数を定義できるのですが最近だと変数と定数を使い分けるためにletとconstを使い分けることが多い。

③配列

配列とは複数の文字列を入れて定義することができる。

index.js

let prefecture = ['山梨','東京','神奈川','埼玉'];

//一つ目の要素を取り出す
console.log(prefecture[0]);

＊余談
プログラミングでは、カウントは０から始める

④ループ文（繰り返し）

ループ分は繰り返し処理をしたいときに使う。

1.for文

for文にはいつくか種類があります。
・for 　　繰り返しの回数を指定する場合に使う
・for in　　現在はあまり使われていない
・for of　(ES6から) 使いやすい

1) for of

index.js

const scores =[10,20,30];

// one of them(それらの中の一つ)
for(score of scores ){
  console.log(score);
}

2) for

index.js

// for(初期値;繰り返す条件;増減　++ --)
for(let i=0;i<10;i++){
  console.log(i);
}

iが10以下なら繰り返す。

2.while文

下のサンプルではindexが５以下の場合、繰り返すループ文

index.js

//初期値
let index = 0;
//whileの（）の中に条件式
while(index < 5){
//繰り返したい命令文
  console.log(index);
//indexの更新
  index++;
}

⑤条件分岐

1.if/else文

ifはもし〜だったらこうすると言った処理がしたいときに使う。

下のサンプルでは先ほど定義したprefecture.length(prefectureの要素の数）が3以上なら実行する。

index.js

//成立する条件
if(prefecture.length > 3){
//条件が満たされれば実行
   console.log(prefecture);
} else {
//条件が満たされなければ実行
   console.log('ないよ！');
}

2.swich文

if文と同じような意味。
現在はほとんどif文で書かれていることが多い。
理由はif文の方が使いやすく複雑にならないから。

index.js

const data =1;

switch(data){
  case 1:
      console.log('1です');
      break;
  case 2:
      console.log('2です');
      break;
  case 3:
      console.log('3です');
      break;
  default:   
      console.log('1-3ではありません');
      break;

  //注意　breakは必ず記述する
   
}

⑥関数

関数(function(機能）)は、
・　同じ命令を何度も使いたいとき
・　任意のタイミングで命令を実行させたい時
に使います。

関数は２種類
・　組み込み関数・・・準備してある関数
・　ユーザー定義関数・・・自由に作れる関数

下のサンプルでは先ほど定義したprefecture.length(prefectureの要素の数）が3以上なら実行する。

index.js

const test = () => {
   //ここに実行したい命令を書く
   if(prefecture.length > 3){
      console.log(prefecture);
   } else {
     console.log('ないよ！');
   }
};

//functionを用いた書き方（基本的には上の書き方が主流になっているみたいです）
// function test(){
//   if(scores.length > 3){
//     console.log(prefecture);
//   } else {
//    console.log('ないよ！');
//   }
// }

//こちらの記述で実行させる
test();

引数を使ったやり方

index.js

const test = (arg) => {
   if(prefecture.length > arg){
      console.log(prefecture);
   } else {
     console.log('ないよ！');
   }
};

//argに５が代入される
test(5);

⑦オブジェクト

オブジェクトは複数の値(変数/定数）や関数を持つことができる。

値（変数/定数）->プロパティ
関数->メソッド

index.js

const dora ={
  color: 'blue';
  size: 'large';
  purfume: 'mint';

  //関数も置くことができる
  eatSweets: () =>{
    console.log('どら焼きを食べた');
  }
};

//オブジェクトの中身を取り出す
console.log(dora);

//オブジェクトの中のcolorだけを取り出す
console.log(dora.color);

//オブジェクトの中の関数を取り出す
console.log(dora.eatSweets());

デフォルトで設定されているオブジェクトを呼び出す

1.window

windowはWebブラウザ全体のオブジェクト

index.js

//windowのプロパティ全てを取り出す
console.log(window);

//例えばブラウザの高さが知りたい時
console.log(window.innerHeight);

//ブラウザにポップアップを出すことができる
window.alert('Hello world');

2.document

documentはWebブラウザ上に表示されているページ全体のオブジェクト

index.js

//documentのプロパティ全てを取り出す
console.log(document);

//よく使うdocumentの関数
//HTMLの何かを指定・参照したいときに使う(buttonタグを呼び込む）
console.log(document.getElementsByTagName('button')[0]);
//[0]をを指定すると一つ目のbuttonタグ取得する

＊getElementsByTagName:HTMLの何かを指定・参照したいときに使う

3.event

ユーザーがアクションしたタイミングで何かをしたいときに使う。

index.js

document.getElementsByTagName('button')[0].addEventListener('click', ()=> {
  //命令を書く
  //クリックした際にwindow.alertが発火される
  window.alert('Hello world');

});

//addEventListenerは引数を二つ指定できる
//一つ目の引数にはeventのタイプを入れる
//二つ目の引数には関数を指定する