《初心者必見》１番最初のJavaScript！＃３

5648 ワード
CSS JavaScript HTML 初心者 HTML テキストリンク

目標

JavaScriptのみで、四角形から丸に変化する図を１００個作成できようになる。

必要知識

HTML、CSSの基礎(Progate)

環境

・Mac
・VS Code

①HTMLを使用せず、JavaScriptのみで繰り返し処理のfor文を用い四角形を１００こ作成。

<body>
  <script>
    'use strict'
    // ①繰り返し処理の（for）を使って、まず変数iを生成し０を代入（let i = 0）、1度処理が終わるとiに1足され（i++）、iが100になるまで繰り返す処理を定義。
    for (let i = 0; i < 5; i++){

      // ②定数divにHTMLのdiv要素を生成（createElement）し代入。
      const div = document.createElement('div');

      // ③定数divに対してCSSのboxを指定適用させる
      div.classList.add('box');

      // ④四角形の中（div）に数字を表示させるため（textContent）に変数iを代入。
      div.textContent = i;

      // ⑤divに対してクリック（'click'）した場合（addEventListener）④へ。
      div.addEventListener('click', () => {

        // ⑥CSS（classList）のcircleを指定適用させ、toggleでクリックした時に適用時は外し、適用してない場合は適用させる。
        div.classList.toggle('circle');
      });

      // ⑦divをブラウザに表示させるため、bodyの子要素にdivを追加（appendChild）させる事で可能になる。
      document.body.appendChild(div);
    }

  </script>
</body>

②数字を四角形の真ん中に表示させるためCSSを編集

<style>
    body{
      display: flex;
      flex-wrap: wrap;
    }

    .box{
    width: 100px;
    height: 100px;
    background: skyblue;
    cursor: pointer;
    transition: 0.8s;
    margin: 0 8px 8px 0;
    /* ⑧四角形（div）の真ん中に数字を表示させるため、横をext-align: center;で縦をline-height: 100px;（要素のheightと同じpx数で縦の中央に）で中央に表示 */
    text-align: center;
    line-height: 100px;
    }

    .circle{
      background: pink;
      border-radius: 50%;
      transform: rotate(360deg);
    }
  </style>

参考：ドットインストール

yiiテンプレートにおける判断方法
Tyvj P 1065津の貯蓄計画