javascript基礎文法

HTMLファイルにjavasciptを挿入する方法

  <script>

    'use strict'
    {  
      const x = 200;
      console.log(x);
    }
  </script>

javascriptのコード部分をscriptタグで囲う

※'use strict'について

use strictと記入すると、使用するコードは、strictモード（厳格モード）となる。
厳格モードになることで、非厳格モードよりも的確なエラーチェックが行われる。
例えば、下記の表のような非厳格モードで受け入れられていたミスをエラーに変換される。

チェック項目	非strict	strict
宣言されていない変数への代入	グローバル変数が作成される	エラー
書込み不可の変数への代入	何も起きない	エラー
書き込み不可プロパティへの代入	何も起きない	エラー
削除不可のプロパティの削除	何も起きない	エラー
プロパティ名の重複	最後に宣言したものがプロパティの値となる	エラー
関数の引数名の重複	重複した引数がそれより前にある同名の引数を隠す。	エラー
8進数標記	8進数として処理される	エラー

別ファイルからjsファイルを読み込む記法

<script src="js/main.js"></script>

scriptタグにsrc属性をつけ、ファイルパスを記述する

文字列について

//　ダブルコーテーション
console.log("hello world"); //
// シングルコーテーション
console.log('hello world');

文字列を扱う場合は、ダブルコーテーションもしくはシングルコーテーションで囲う

console.log('it/s me'); //it's me

文字列内でコーテーションを使用したい場合は、エスケープ文字を使う

数値の扱いについて

四則演算

// 足し算
console.log(10 + 3); //13
// 引き算
console.log(10 -3); //7
// 掛け算
console.log(10 * 3);// 30
// 割り算
console.log(10 / 3 ); //3.33333..５
// 余り
console.log(10 % 3); //1
// べき乗
console.log(10 ** 3); // 1000

文字列のようにシングルコーテーションやダブルコーテーションで囲わない

四則演算の省略形

let price = 100;

// let price = price + 100の省略形
price +=100; 
console.log(price);//200

let price = 100;

// let price = price - 100の省略形
price -= 100; 
console.log(price);//0

let price = 100;

// let price = price * 100の省略形
price *= 100; 
console.log(price);//10000

let price = 100;

// let price = price * 100の省略形
price /= 100; 

console.log(price);//1

インクリメントとデクリメント

インクリメント＝　１ずつ増えてくこと

let num = 100 ;
num ++ ;
console.log(num);// 101

デクリメント＝１ずつ減っていくこと

let num = 100 ;
num -- ;
console.log(num);// 99

文字列と数値の組み合わせ

引き算(-),掛け算(*),割り算(/)の場合、文字列は数値として扱われる

console.log('5' - 3);// 2

console.log('5' * 3);//15

console.log('5' / 3);// 1.66666..

一方で足し算（+）は、文字列として扱われ、結合される

let price = '5' + 3;
console.log(price);// 53

//typeofは対象の値のデータ型を表す文字列を返す演算子
console.log(typeof price);// string

上記の5を数値として扱いたい場合は、parseInt関数を使用する

// 使用法：parseInt(文字列,10) ※10は１０進数を表す
price = parseInt('5',10) + 3;
console.log(price);//8
console.log(typeof price);//number

※ 数字とは判断されない文字列にparseInt関数を使用すると、NAN（Not a number）となる

let price = parseInt('hello',10)
console.log(price); //NAN

真偽値

falseとして判定される値は、false, 0 , null, '' , undefinedの５つ
false以外の値は、trueとして判定される

console.log(Boolean(0)); //false
console.log(Boolean(null)); //false
console.log(Boolean(undefined));//false
console.log(Boolean(''));// false
console.log(Boolean(false)); //false
console.log(Boolean('hello')); //true
console.log(Boolean(1)); //true

定数と変数

定数　

• 不変なものを格納するもの。格納された値を変えることはできない
• 宣言方法：　const 変数名

変数　

• 可変なものを格納するもの。格納された値を変えることができる
• 宣言方法: let 変数名

定数の場合

const price = 100;
price++; 
//constで宣言するとTypeError: Assignment to constant variable.となる
console.log(price);

変数の場合

let price = 100;
price++; 
console.log(price); //101

if文

基本的なif文の書き方

const score = 20
if(score >= 80) {
 console.log('great');
}else if(score >= 60) {
  console.log('good');
}else {
  console.log('bad');
}// bad

上記のコードは、定数scoreの値で条件分岐をする場合の書き方
ポイントは以下の通り

• if(条件式){処理}という書き方をする
• else ifは、条件を付け足す際に使用する
• elseはどの条件にも当てはまらなかった場合の処理を書く際に使用する
• 条件を記載する箇所は、ブロック扱いとなるためセミコロン（；）はつけない。

条件演算子

条件が二つ（ifとelseのみ）の場合、以下のように省略した書き方を使うことができる
この省略されたものを条件演算子と呼ぶ

書き方：条件式　　? trueの場合の処理　：　falseの場合の処理

const score = 80;
score >= 90 ? console.log('great') : console.log('good'); // great

switch 文

const signal = "blue" ;

if (signal === "red"){
  console.log("stop");
}else if(signal === "yellow"){
  console.log("caution");
}else if(signal === "blue"){
  console.log("go");
}else{
  console.log("Worng Signal");
}

上記のif文のように===が多様される処理の場合、下記のようなswitch文で簡潔に書くことができる

const signal = "blue" ;

switch (signal){
  case "red" :
    console.log("stop");
    break;
  case "yellow" :
    console.log("caution");
    break;
  case "blue" :
    console.log("go");
    break;
  default:
    console.log("wrong signal");
}

switch文の書き方は以下の通り

switch (変数){
    case 変数の値　:
        処理内容;
        break;
    default:// 上記の条件に当てはまらない場合の処理をさせる
        処理内容
}

注意すること

• caseの後のコロン（：）をつけ忘れることが多いので注意が必要
• breakがないと、ブロック内の処理が終了しなくなるので忘れないこと

for文とテンプレートリテラル

for文は、繰り返しの処理を行う際に使用する構文

for(let i = 1 ; i <=10 ; i ++ ){
   console.log(`hello${i}`);
 }

ポイント

• 初期値　；　条件式；　インクリメント値をセミコロンで区切る
• i は仮の変数で、for文のブロックないで使用できる。主に処理の回数をカウントするために使用される
• console.log(｀hello${i}｀); の部分では、テンプレートリテラルを使用している。

テンプレートリテラルとは

文字列の中に変数を埋め込むことができる記法のこと
テンプレートリテラルは、以下のことに注意する必要がある

• 文字列全体を｀｀（バッククオート）で囲う
• 変数は＄{}で囲う

while文とdo while文

繰り返し処理の構文は、for文の他にもwhile文がある。
while文は、指定した条件が満たされている間、特定の処理を繰り返したい場合に使用する

例 hpが０未満になるまで処理を繰り返す処理

let hp = 100 ;
while (hp > 0){
  console.log(`your hp is ${hp}`);
  hp -= 15
}

上記のコードの場合、hp > 0の条件式でtrueを返す場合、処理をするようになっている。
hp -= 15の部分がないと永遠に繰り返すため、while文を使うときは、デクリメントもしくはインクリメントをするような処理を組み込まないといけないことに注意する。

上記のコードの場合、let hp = -100だった場合、一回もブロック内の処理をすることができない。
ブロック内の処理を一回だけでもさせたい場合は、do while文を使用する。

let hp = -100
do {
  console.log(`your hp is ${hp}`);
  hp -= 15
} while (hp > 0)

上記のようにすることで、ブロック内の処理をした後で、条件式の評価をするようになる。

continueとbreak

特定の条件になったら処理をスキップするような処理をしたい場合は、continueを使用する

for(let i = 1 ; i <= 10 ; i++) {
  if(i % 3 === 0){
    continue;
  }
    console.log(i);//1,2,4,5,7,8,10
}

上記のコードの場合、３の倍数の時処理をスキップするようになる

特定の条件を満たしたら、処理を終了させたい場合は、breakを使用する

for(let i = 1 ; i <= 10 ; i++) {
  if(i % 4 === 0){
    break;
  }
    console.log(i);// 123
}

上記の場合、変数iが４になったら処理を終了するようになる

continueとbreakはどちらも条件式とセットで使用する必要がある。

関数について

特定の処理をまとめることができるもの。
関数は以下のように、定義することができる。

functon 関数名()　{
    処理内容
}

例　挨拶をする関数

function hello() {
  console.log("こんにちは。田中太郎です");
  console.log("今日はいい天気ですね！");
}

関数を呼びだいしたい場合は、以下のようにする

// 関数名();
hello();

引数

上記の関数は、名前を名乗る部分を都度変えることができれば汎用的になりそうです。
名前の部分を変えたい場合は、以下のようにすると良い。

function hello(name) { //仮引数
  console.log(`こんにちは。${name}です`);　// テンプレートリテラル
  console.log("今日はいい天気ですね！");
}

hello("田口山田");//実引数

関数を呼び出す際に、値を関数に渡すことができる。この値を引数という。
引数は、関数を宣言する際に、（）内に定義することができる。この引数を仮引数という。
関数内の処理で使う変数を仮変数で書いておくことで、実際に値を渡された際に、代入するだけで処理ができるようになる。

関数を呼び出す際に、（）内に仮引数に代入する値を指定することができる。
この値を実引数という。

仮引数は、カンマ（,）で区切ることで何個も指定することができる。
仮引数が複数個ある場合、実引数は、仮引数と同じように定義する必要がある。

例　挨拶と名前の内容を引数で変えられる関数

function hello(greet,name) {
  console.log(`${greet}。${name}です`);
  console.log("今日はいい天気ですね！");
}

上記の関数は、１番目の仮引数として挨拶の文言を入れるgreetを定義し、２番目の仮引数として名前を入れるnameを宣言している。
この場合、関数を呼び出す際は、hello("挨拶の文言","名前")とする必要がある。

例えば 実引数を逆にしてみたら以下のような結果が出力されることになる。

function hello(greet,name) {
  console.log(`${greet}。${name}です`);
  console.log("今日はいい天気ですね！");
}
hello("田口山田","こんばんは");
//出力内容
//田口山田。こんばんはです。
//今日はいい天気ですね。

このように、引数は、順番ごとに区別されるため、実引数は、仮引数に習って設定する必要がある。

引数の初期値

仮引数を宣言する際に、何も値が渡されなかった場合に備えて、あらかじめ引数を設定しておくことができる。
この値は、実引数が渡された場合、上書きされる。

引数の初期値は以下のように設定することができる。

function hello(greet = "こんにちは",name = "田中") {
  console.log(`${greet}。${name}です`);
  console.log("今日はいい天気ですね！");
}

返り値

返り値とは、関数が呼び出し元に対して渡す値のこと。

function sum(a,b){
return a + b ;
}
let total = sum(10,9)
console.log(total);//19

return 処理内容　;とすることで、値を呼び出し元に渡すことができる。
また、returnは、関数の処理の終了を表す性質もある。
returnの下に、何かしらの処理を書いても、実行されないので注意。

function sum(a,b){
return a + b ;
console.log("合計金額は？");//実行されない
}
let total = sum(10,9)
console.log(total);//19

無名関数

無名関数とは、その名の通り関数名を定義せずに、宣言する関数のこと。
書き方は以下の通り

const sum = function(a,b,c) {
    return a + b ;
};
let total = sum(4,5,6) + sum(7,8,9);
console.log(total);//39

無名関数は、定数もしくは変数の中に代入する形で関数を宣言する。
無名関数は、定数や変数を宣言するのと同じ扱いのため、最後にセミコロンをつける

アロー関数

const sum = function(a,b,c) {
    return a + b + c ;
};
let total = sum(4,5,6) + sum(7,8,9);
console.log(total);//39

上記のような関数は下のように短く書くことができる。

const sum = (a,b,c) => a + b + c ;

上記の関数は、アロー関数という。function return {}を省略することができる。

const double = function(a){
    return a * 2 ;
};
let total = double(4);
console.log(total);//8

また、上記のような引数が一つの関数は以下のように（）も省略することができる。

const double = a => a * 2 ;