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

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

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

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

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

index.html のみ使用する

VScode で確認する

この中の　＜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>

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

Bootstrap

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

上記サイトでの部分をコピーして

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

の部分に貼り付ける！

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

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

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

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

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

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

上記の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　ファイルを
呼び出すようにする

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

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

test.js ファイルを編集

こちらの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);

いい感じで動いてます！

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