はじめに

この記事は私の脱コピペを目指すために書いている自分用のメモです。

※内容について、誤った知識やもっとわかりやすい表現等ございましたら、ご指摘いただけますと幸いです。

1. HTMLを書き換える

index.html に書いたものをJSを使って書き換えてみる

main.js

'use strict';
document.getElementById('id名').textContent = 書き換えたい文字列();

.getElementByIdでIdを取得して.textContentで書き換える。
例）以下

index.html

<html>
  <head>
    <meta charset="utf-8" />
  </head>
  <body>
    <div id="example">書き換え前</div> 

    <script>
      'use strict';
       document.getElementById('example').textContent = '書き換え後'();
    </script>
  </body>
</html>

index.htmlの結果

書き換え後

2. if文(条件分岐)とは

もし○○だったら実行、もし○○かつ○○だったら実行といった
ある条件が成り立つかどうかで動作を変えるのがif文

「もし、〜であるなら〜しなさい」

mian.js

if(条件式1) {
  条件式1が true の時に実行する処理;
}

mian.js

let x = 1;
if(x === 1) {
  console.log('YES');
}

結果

YES

といった感じ。

3. elseとは

if文にプラス「ではなかったら」の条件を付ける文

「もし、〜であるなら〜しなさい。それ以外であれば〜しなさい」

mian.js

if(条件式1) {
  条件式1が true の時に実行する処理;
} else {
  すべての条件式が false の時に実行する処理;
}

mian.js

let x = 1;
if(x === 4) {
  console.log('YES');
} else {
  console.log('NO');
}

結果

NO

といった感じ。

4. else ifとは

if文を使う時に、複数の条件で分岐させることができる文

「もし、〜であるなら○○。～であるなら○○。それ以外であれば〜しなさい」

mian.js

if(条件式1) {
  条件式1が true の時に実行する処理;
} else if(条件式2) {
  条件式1 が false で条件式2が true の時に実行する処理;
} else {
  すべての条件式が false の時に実行する処理;
}

mian.js

function exam(result) {
  if(result > 90) {
    console.log('合格');
  } else if(result > 80){
    console.log('修正');
  } else {
    console.log('不合格です');
  }
}

結果

exam(92);
>> 合格

といった感じ。

5. if文を入れ子(ネスト)で使う

if文のブロック(｛｝)の中に別のif文を記述することもできます。

mian.js

if (条件式1) {
  条件式１が true の時に実行する処理;
  if(条件式2) {
    条件式2が true の時に実行する処理;
  } else {
    条件式2が false の時に実行する処理;
  }
} else {
  条件式1が false の時に実行する処理;
}

mian.js

function exam(result) {
  if(result > 80) {
    if(result > 90) {
      console.log('合格');
    } else {
      console.log('修正');
    }
  } else {
    console.log('不合格');
  }
}

結果

exam(78);
>> 不合格

といった感じ。

Javascript基礎知識＃3(if文)

はじめに

目次

1. HTMLを書き換える

2. if文(条件分岐)とは

3. elseとは

4. else ifとは

5. if文を入れ子(ネスト)で使う