【JavaScript編】プログラミング独学日記：8日目

08/19/2020

こんにちは、アーノ君です！

JavaScriptの学びも後半に入ってきたね。

もう少しでJSのチャプターが終わるから、ラストスパート一緒に頑張っていこう！

この独学日記では、

ドットインストールでの学び・成果の報告
NoCodeの学び・成果の報告
gitHubに公開した学習プロセスのシェア

この3つを紹介していくよ。

僕はスキル0の初心者ザウルスだから、しばらくはドットインストールでの学びをシェアしていくね。

■ドットインストール：はじめてのJavaScript(全11回)
　- #07 定数を使ってみよう
　- #08 divを増やしてみよう

■GitHub：JavaScript Practice（8日目）

■ツイッター：アーノ君＠プログラミング・ザウルス🦖

スポンサードサーチ

【プログラミング独学】今日の学び

今日はドットインストールから以下を学んだよ。

JavaScriptに触れてみよう：はじめてのJavaScript

#06 定数を使ってみよう
#07 divを増やしてみよう

JavaScriptのコードはHTML, CSSと比べて少し複雑に見えるから、今回のセクションが盛り沢山に感じるよ。

でも慣れてくると今まで勉強してきたことを繰り返していることに気がつくよ。たくさんコードを書いていって、少しずつ慣れていこう！

プログラミング独学の成果【7日目】

こちらが今日のプログラミング箇所だよ。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>JavaScript Practice</title>

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

    .box{
      width: 100px;
      height: 100px;
      background-color: #208eff;
      cursor: pointer;
      transition: 0.8s;
      margin: 0 8px 8px 0;
    }

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

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

  <script>
   'use strict';

   const target1 = document.getElementById('target1')
   const target2 = document.getElementById('target2')
   const target3 = document.getElementById('target3')

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

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

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

  </script>
</body>
</html>

今日の大きな変化は、ボタンを2度クリックすると形が元に戻るようになったこと！ “toggle” というコードにしてあげることで変化させることができたよ。

■前回：アーノ君のJavaScript練習サイト（7日目）
■今回：アーノ君のJavaScript練習サイト（8日目）

面白いね。
僕がスマホに反応する指を持っていたら、ずっとタップしちゃうだろうな！