javascript を使用してみる_1 関数の実行まで 20221209作業

# 動的サイトを読める必要性

動的サイトはjavascriptが使用されていますが

javascriptで何かシステムを作った経験がないため
自分の勉強を兼ねて備忘録として残します

https://www.youtube.com/watch?v=ig3GosWuKF0

上の動画がとても分かりやすかったです！
こちらの動画を参照にしながら作っていきます！！


# HTMLタグ　HEADタグ BODYタグの準備


https://html5boilerplate.com/

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2629668/12534345-8a47-2c86-2241-008c741057e3.png)

index.html のみ使用する

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2629668/e6da2975-9c2d-b850-4d2e-f9c24aefe7c9.png)

VScode で確認する

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2629668/d1175de9-31ed-4160-3793-54bd56a44818.png)


この中の　＜body＞ タグは使わないので消す

以下のようなソースコードになる
```
<!doctype html>
<html class="no-js" lang="">

<head>
  <meta charset="utf-8">
  <title></title>
  <meta name="description" content="">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <meta property="og:title" content="">
  <meta property="og:type" content="">
  <meta property="og:url" content="">
  <meta property="og:image" content="">

  <link rel="manifest" href="site.webmanifest">
  <link rel="apple-touch-icon" href="icon.png">
  <!-- Place favicon.ico in the root directory -->

  <link rel="stylesheet" href="css/normalize.css">
  <link rel="stylesheet" href="css/main.css">

  <meta name="theme-color" content="#fafafa">
</head>

<body>
 hello word
</body>

</html>
```

ブラウザで確認すると以下のようになる

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2629668/fefc6440-7d5b-9d5d-700f-faf54182649e.png)

# Bootstrap

css や html のパーツ群を　コピペで使える
bootstrap　で利用する　ことができます

https://getbootstrap.com/

上記サイトで <!-- CSS only --> の部分をコピーして
```
  <link rel="stylesheet" href="css/normalize.css">
  <link rel="stylesheet" href="css/main.css">
```
の部分に貼り付ける！

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2629668/c343cb99-5a04-2246-d606-01b14b383d33.png)

これで　bootstrap の css が読み込まれたよ
という事になり　

bootstrap の HTML をコピペするだけで使えるようになります

# さまざまなドキュメントを使ってみる

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2629668/871173b6-5f89-6dfd-703d-eb70939b6e03.png)

# 間を開けたい時はspacing を使う

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2629668/e092113c-09c2-e40d-caf7-57ade3d8a507.png)

crass に ms-1 を追加すると表示されるようになった

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2629668/5a2af066-5c1d-5db7-d2e8-ffdd2f5d3591.png)

card title の左側に隙間ができることを確認

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2629668/54631e1e-e2d4-7f5b-832b-81cec00dac8f.png)

上記のhtmlはとにかく
bootstrap の componentos を使ってみました

```
<body>

  <div class="alert alert-primary" role="alert">
    A simple primary alert—check it out!
  </div>

  <button type="button" class="btn btn-primary">Primary</button>
  <button type="button" class="btn btn-secondary">Secondary</button>
  <button type="button" class="btn btn-success">Success</button>
  <button type="button" class="btn btn-danger">Danger</button>
  <button type="button" class="btn btn-warning">Warning</button>
  <button type="button" class="btn btn-info">Info</button>
  <button type="button" class="btn btn-light">Light</button>
  <button type="button" class="btn btn-dark">Dark</button>
  
  <button type="button" class="btn btn-link">Link</button>

  <button type="button" class="btn btn-outline-primary">Primary</button>
 
  <div class="ms-1 card mb-3" style="max-width: 540px;">
    <div class="row g-0">
      <div class="col-md-4">
        <img src="..." class="img-fluid rounded-start" alt="...">
      </div>
      <div class="col-md-8">
        <div class="card-body">
          <h5 class="card-title">Card title</h5>
          <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
          <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
        </div>
      </div>
    </div>
  </div>

  <div class="spinner-grow" role="status">
    <span class="visually-hidden">Loading...</span>
  </div>

</body>
```

# javascript　ファイルを作成

test.js ファイルを作成後
index.html ファイルから　test.js　ファイルを
呼び出すようにする


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2629668/95a8afcf-c3a4-16d8-2152-1cae507545f5.png)

以下の部分が　JavaScript　を読み込むために必要
"test.js" は同じディレクトリにあるため読み込めますが
場合によっては ./ などファイルパスを合わせる必要があります

```
  <script src="test.js"> </script>
```

## test.js ファイルを編集

https://www.youtube.com/watch?v=ig3GosWuKF0

こちらのyoutube動画
29:33　くらいからの内容を見て書いてきました

```test.js
//変数
let word = "CEML AI TASK FORCE";
console.log(word);
//配列
let num_b = ["one","two","three","three","three"];
console.log(num_b[0]);
//繰り返し　ループ文
let index = 0;
while(index < 4){
    //繰り返したい命令
    console.log(num_b[index]);
    index++;
}
//関数
const test = (arg) => {
    //ここに実行したい命令を書く
    if(num_b.length > arg){
        console.log("5より大きいです");
    }else{
        console.log("5より小さいです");
    }
};

//関数の実行
test(6);
test(3);

```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2629668/118f781d-d2a9-8a39-7e47-0c8c17771624.png)

いい感じで動いてます！

yotubeの動画では
50:43 の部分まで出来ました！