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

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


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日目)

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

アーノ君の所見

今日の詳しい学びはこちらだよ。

  • 定数について
    • const 〇〇 = □□

なんだかややこしくも見えるけど、要するに定数にはこんな役割があるってことだね。

  • 長いコードを省略できる
  • IDが変わった時など、対応しやすい

「じゃあ何でわざわざ長いコードも用意したの…?」

こんな質問がナンセンスなことは3,000年も生きている僕は良く知っているから、聞かないでおくよ!

スポンサードサーチ

次回予告

チャプターを2つに分けてから理解度がぐんっと上がった感じがするね。
もちろん時間に余裕がある時は、どんどん進めていこう!

このプログラミング独学日記は、継続的に勉強していく過程での失敗や改善を発信していくから、僕の失敗からどんどん学んでいってね!

✅今日のおさらい

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

■GitHub:JavaScript Practice(8日目)

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

ぜひ、ツイッターもフォローして一緒に頑張っていこう!


初心者ザウルスが独学でプログラミングをマスターするまで、あと92日。

次へ進む

Coming soon…