見出し画像

JavaScript（クリックしたら動く）

SOZ

ブラウザを動かすことができるJavaScriptを勉強します。
HTMLやCSSで作られたものを動かします。

・四角をクリックしたら、回転したら丸になる。

いってみましょう。

画像1

HTMLとCSS記入

<!DOCTYPE html>
<html lang="ja">
<head>
   <meta charset="UTF-8">
   <title>四角と丸</title>
   <style>
       .box{
           width: 100px;
           height: 100px;
           background-color: yellow;
           cursor: pointer;
       }
   </style>
</head>
<body>
   <div class="box"></div>
</body>
</html>

boxというクラスを作り、サイズと色をつけて、後で動きをつけていくので、「cursor: pointer;」としておきます。

画像2

クリックしたら背景が変わるようにしたい

・スクリプトタグをbodyの一番下に作る。
・「'use strict';」でブラウザが間違いをチェックしてくれる。
・JavaScriptから要素を指定する際に利用する、idをつける。
・この中⬇️にクリックされた動作を書く。
document.getElementById('target').addEventListener('click',() =>{
    ここ
});
 <!DOCTYPE html>
<html lang="ja">
<head>
   <meta charset="UTF-8">
   <title>四角と丸</title>
   <style>
       .box{
           width: 100px;
           height: 100px;
           background-color: yellow;
           cursor: pointer;
       }
   </style>
</head>
<body>
   <div class="box" id="target"></div>

   <script>
       'use strict';
       document.getElementById('target').addEventListener('click',() =>{
           document.getElementById('target').style.background = 'pink';
       });
   </script>
</body>
</html>
「EventListener」は何かが起きると何かをするというときに使う。
() => {}  :アロー関数
document.getElementById('target').style.background = 'pink';
document.getElementById('target').style.borderRadius= '50%';
・background = 'pink';　で背景色がピンクに変わる。
・borderRadius= '50%'　で円になる。（追加）

クリックした後の動作をCSSに移動させる

headのstyleタグの中に追加
.maru{
           background-color: pink;
           border-radius: 50%;
 }
<script>
       'use strict';
       document.getElementById('target').addEventListener('click',() =>{
           document.getElementById('target').classList.add('maru')
       });
 </script>

先程の動作が同じになることを確認する。

アニメーションを追加する

・transition: 0.9s;
アニメーションにかける時間をboxプロパティに追加
・transform: rotate(360deg);
回転をmaruプロパティに追加
<!DOCTYPE html>
<html lang="ja">
<head>
   <meta charset="UTF-8">
   <title>四角と丸</title>
   <style>
       .box{
           width: 100px;
           height: 100px;
           background-color: yellow;
           cursor: pointer;
           transition: 0.9s;
       }
       .maru{
           background-color: pink;
           border-radius: 50%;
           transform: rotate(360deg);
       }
   </style>
</head>
<body>
   <div class="box" id="target"></div>
   <script>
       'use strict';
       document.getElementById('target').addEventListener('click',() =>{
           document.getElementById('target').classList.add('maru')
       });
   </script>
</body>
</html>
もう一度クリックしたら元に戻したい。
add⇨toggleに変更
document.getElementById('target').classList.toggle('maru')　

定数にする

document.getElementById('target')　を定数にする。
const target = document.getElementById('target');
       target.addEventListener('click',() =>{
           target.classList.toggle('maru')
       });

動きが同じになるか、念の為に確認しておきます。

今の段階でこうなっています。

<!DOCTYPE html>
<html lang="ja">
<head>
   <meta charset="UTF-8">
   <title>四角と丸</title>
   <style>
       .box{
           width: 100px;
           height: 100px;
           background-color: yellow;
           cursor: pointer;
           transition: 0.9s;
       }
       .maru{
           background-color: pink;
           border-radius: 50%;
           transform: rotate(360deg);
       }
   </style>
</head>
<body>
   <div class="box" id="target"></div>
   <script>
       'use strict';
       const target = document.getElementById('target');
       target.addEventListener('click',() =>{
           target.classList.toggle('maru')
       });
   </script>
</body>
</html>

きょうは、ここまで！

なにとぞ　なにとぞー