《初心者必見》１番最初のJavaScript！#2

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

目標

JavaScriptで定数を利用し、四角形から丸に変化する図を作成できようになる。

必要知識

HTML、CSSの基礎(Progate)

環境

・Mac
・VS Code

①divタグ（四角形）を３つ用意

<body>
  <div class = "box" id="target1"></div>
  <div class = "box" id="target2"></div>
  <div class = "box" id="target3"></div>
</body>

解説：bodyタグの中にidを設定した空のdivタグを３つ用意。

<style>
    body{
　　　　　　　　　　　　　/* ↓divタグを横並びに */
      display: flex;
　　　　　　　　　　　　　/* ↓横幅がなくなった場合要素を折り返す　*/
      flex-wrap: wrap;
    }

    .box{
    width: 100px;
    height: 100px;
    background: skyblue;
    cursor: pointer;
    /* ↓アニメーションが変化する時間 */
    transition: 0.8s;
    margin: 0 8px 8px 0;
    }

    .circle{
      background: pink;
      border-radius: 50%;
      /* ↓３６０度回転させるアニメーション */
      transform: rotate(360deg);
    }
  </style>

解説：headerタグ内にstyleタグを用意しCSSコードを記述。

②作成したdivタグに対しJavaScriptを定義。

<script>
    // 記述ミスを表示
    'use strict';

  // 複数使用する場合はconst(定数)で管理すると便利。
    const target1 = document.getElementById('target1');
    const target2 = document.getElementById('target2');
    const target3 = document.getElementById('target3');
</script>

解説：全てのコード(document)に対し、target1、target２、target３を対象とする(getElementById)コードを３つ定義し、それぞれ定数target1,target2,target3に代入。

③代入した定数に対して、どのような変化をさせるのか定義

target1.addEventListener('click' ,() => {
      target1.classList.toggle('circle');
    });

    target2.addEventListener('click' ,() => {
      target2.classList.toggle('circle');
    });

    target3.addEventListener('click' ,() => {
      target3.classList.toggle('circle');

解説：指定した定数に対して（target1など）、クリック('click')すると、toggleを使ってCSSで定義したcircleが適用されていれば外し、適用されていなければ適用させるよう実行(addEventListener)する。

結果

スカイブルーの四角形の図をクリックすると、回転しながらピンクの円の図に変化し、逆にピンクの円の図をクリックすると回転しながらスカイブルーの四角形に戻る。

参考：ドットインストール「はじめてのJavaScript」

Numpyベースのndarrayのデータ型
Windowsの下でMySqlデータベースのデータフォルダの位置を交換します