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

08/15/2020 08/18/2020

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

この記事からはついに「プログラミング言語」と呼べる “JavaScript” を学んでいくよ！（初心者の僕はHTML, CSSもプログラミング言語と読んでいたね。）

僕がよく騙されるポップアップなんかはJavaScriptで作られるみたい。アニメーションをプログラミングできるようになるなんて、楽しみだね！

この独学日記では、

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

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

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

■ドットインストール：はじめてのJavaScript(全11回)
　- #01 JavaScriptを使ってみよう
　- #02 ひな形となるファイルを作ろう
　- #03 クリックイベントを設定しよう

■GitHub：JavaScript Practice（6日目）

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

スポンサードサーチ

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

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

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

#01 JavaScriptを使ってみよう
#02 ひな形となるファイルを作ろう
#03 クリックイベントを設定しよう

はじめて触れるJavaScriptというプログラミングコード。
独学だと難しいかな、と不安だったけど、そんなことなかったよ！

今日は準備段階だったけど、もうすでに画面上に面白い変化が現れたよ。
ぜひ上のURLから、青い四角をクリックしてみてね。

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

なんだか今までのHTML, CSSとは全く違うコードが現れたよ。見てみよう。

<!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;
    }
  </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'

   });

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

今日書いたコードの中で、JavaScriptのコードは22〜30行目。

なんだかパッと見で「難しそう！」と感じるけど、1つ１つを見てみると英語になっているのがわかるね。

並び方や小文字大文字の区別とかが特に難しい印象だったけど、コーディングアプリのほとんどが自動入力をしてくれるのも簡単に進めることができた理由だよ。

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

今まで勉強していたHTML, CSSは「静的」つまり止まっているのに対してJavaScriptの特徴は「動的」つまり目に見えて動くようになることみたいだよ。

実際に青いボタンをクリックしてみると色が変わるのがわかるね。

アーノ君の所見

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

JavaScriptについて

JSを使ってできること

新しいコード

‘use strict’;
getElementById
addEventListener

JavaScriptの序盤だから、と油断していたら動画においていかれちゃった！
はじめて見るコードが並びはじめてびっくり。少し火吹いちゃったよ。

でも安心して。

上でも説明した通り、落ち着いて読んでみると簡単な英語が “わかりにくく” 並んでいるだけだったよ。

第一印象はとても悪かったけど、話しているうちにとっても仲良しになれる子っているよね。JavaScriptってそんな感じだと思うんだ。

きっと話してみると、とっても面白いに違いない。
明日はどんな変化が生まれるのか、お楽しみに！

スポンサードサーチ