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

08/16/2020 08/19/2020

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

引き続きJavaScriptの勉強を進めていくけど、今回の学びでは驚きの変化があるよ！ぜひチェックしてみてね。

この独学日記では、

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

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

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

■ドットインストール：はじめてのJavaScript(全11回)
　- #04 コードを詳しく見ていこう
　- #05 エラーメッセージを読み解こう
　- #06 CSSのクラスを操作してみよう

■GitHub：JavaScript Practice（7日目）

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

スポンサードサーチ

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

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

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

#04 コードを詳しく見ていこう
#05 エラーメッセージを読み解こう
#06 CSSのクラスを操作してみよう

今日のセクションでは、青いボタンのクリック後の動き方に面白い変化を加えることができたよ。

コードが複雑になってきているから難しいかな、って感じもするけど、エラーが出た時の対処方法なんかも#05で説明してくれているから、初心者でも安心できるね！

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

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

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

  <style>
    .box{
      width: 100px;
      height: 100px;
      background-color: skyblue;
      cursor: pointer;
      transition: 0.8s;
    }

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

<body>
  <h1>アーノ君のプログラミング独学日記</h1>
  <p>JavaScriptの練習サイト</p>
  <div class="box" id="target"></div>

  <script>
   'use strict';

   document.getElementById('target').addEventListener('click', () => {
    // document.getElementById('target').style.background = 'pink'
    // document.getElementById('target').style.borderRadius = '50%'
    document.getElementById('target').classList.add('circle');

   });

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

まずは下のサイトからそれぞれ、青いボタンを押して動き方をチェックしてみよう！

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

6日目のボタンではクリックをすると色が変わる仕組みになっているけど、今回は色の変わり方に変化を加えたよ。

誰がどうやってこんなプログラミングを作ったのかな？
やっぱり恐竜の僕には人間がとても賢く見えて、羨ましいよ。

おバカな恐竜の僕でもプログラミングできるように設計してくれているのはとても感謝だね！

アーノ君の所見

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

よく使うコードについて

getElementById()
EventListener
classList.add(‘〇〇’);

エラーの見つけ方について
CSSアニメーションについて

今日は特に進むスピードが早かったから、3つだけに分けて正解だったよ。

昨日チラッと触れたコードをそれぞれ定義してくれていたね。

getElementById()＝()内で指定したIDをの要素を取得する
EventListener＝何かイベントが起きたら、指定の処理をする
classList.add(‘〇〇’);＝〇〇のクラスを追加する

また、こうしたプログラミングが分からずにエラーが出てしまう時は “【CSS編】プログラミング独学日記：3日目” でも出てきたデベロッパーツールを使うと、簡単にエラーの原因と場所がわかるみたいだね！

CSSアニメーションについてはあまり詳しく触れなかったけど、どうやら色んな種類があるみたいだよ。

気になるからこれも独学で勉強してみようかな！

でも詰め込みすぎるとお腹いっぱいになっちゃうから、自分のペースで進めていこうね。こうやってじっくりとスキルを身につけていかれるのが独学で勉強をする理由の1つだからね。

スポンサードサーチ