フロントエンドエンジニアを目指している、まゆ(@Ymayu_it)です。
今日は
- デジタル時計の写経
- GitHubをノートにまとめる
- 独学JavaScriptをノートにまとめる
上記3つをしていったので、これらについてまとめていきます。
目次
デジタル時計の写経
昨日、完全未経験で6ヶ月後にバックエンドになった友人からJavaScriptのオブジェクトとプロパティ、メソッドについて見方を教わったのでそちらを少し意識して写経しました。
html <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="style.css"> <title>javascript-Dijital Clock</title> </head> <body> <div id="clock"></div> <script type="text/javascript"> setInterval(displayClock, 500); function displayClock () { var time = new Date(); var hrs = time.getHours(); var min = time.getMinutes(); var sec = time.getSeconds(); var en = 'AM'; if(hrs > 12){ en = 'PM' } if(hrs > 12){ hrs = hrs -12; } if(hrs == 0){ hrs = 12; } if(hrs < 10){ hrs = '0' + hrs; } if(min < 10){ min = '0' + min; } if(sec < 10){ sec = '0' + sec; } document.getElementById('clock').innerHTML = hrs + ':' + min + ':' + sec + ' ' + en; } </script> </body> </html>
引用:How To Make A Working Clock On A HTML Page Using Javascript.
今回の写経は、
- HTML内に<script>~<script>を入れ込む形
- メソッドsetIntervalで一定間隔で実行
- オブジェクトfunction
- 変数varの箱がtime,hrs,min,sec,enの5つありそれぞれ日付、時、分、秒、AMorPM
Dateオブジェクト利用 - if関数を使って午前と午後、正午を分ける
- documentのIDで指定したclockを代入して表示
ここまでわかりました!!
うれしい…(合っているかは定かではないけれど…)
明後日、月曜日は友人からの課題で「じゃんけんゲームの作成」があるので、一度自分で1から作ってみようと思います!
GitHubについてノートにまとめる
Gitがわからないから図式化されたものを見つけたので、実際に書いて頭を整理
わかれば便利なんだと思うけど、これが頭に無いと今何やっているのか全然わからない😭#Gitの基礎 https://t.co/rWsRAO8Uts #Qiita pic.twitter.com/bHccUeOh5r
— Mayu_Yamada|JavaScript (@Ymayu_it) October 10, 2020
全体像が不明なので図式化されたものを探すとあったので、ノートにまとめました!
今日は22時から、もりけん先生によるGit講座があるのでまたまとめていきます。
本:独学JavaScriptをノートにまとめる
JavaScriptのコードを書くだけじゃ理解ができないので、並行してこちらもまとめていきます。
独学JavaScript本がわかりやすい
独習JavaScript 第2版がとてもわかりやすかったので、ノートにまとめました!
JavaScript
・インタプリタ型
インタプリタ型のメリット
・ソースコードの変更や実行が簡単
インタプリタ型のデメリット
・実行速度が遅いAJax
サーバーからのレスポンスが無くても他の作業ができる優れものノートにまとめると頭が整理される🙏🏻🌈
※間違ってたらごめんなさい
※字汚い pic.twitter.com/wBzszudHLa— Mayu_Yamada|JavaScript (@Ymayu_it) October 10, 2020
オブジェクト指向には3つ
①カプセル化
②継承
③ポリモーフィズム変数で
・かわっていいもの
・かわってはいけないもの
があるカプセル化は
変数へのアクセスの制限をしたいときに最適な方法
(例 大人数でプロジェクトを作るときなど)「変わってはいけないもの」へのアクセス制限#友の説明
— Mayu_Yamada|JavaScript (@Ymayu_it) October 10, 2020
明日は復習で変数から!
昨日疑問に思ったJavaScriptの書き方について

といった疑問を記載しました。
本日JavaScriptの本を読むと答えがあったので掲載していきます!
記述方法は4つ
①〈script〉〜〈/script〉
②外部ファイル化
srcを使う
③イベントハンドラ
④URL内に記述詳しくは次 pic.twitter.com/pSD694m62c
— Mayu_Yamada|JavaScript (@Ymayu_it) October 10, 2020
これから③のイベントハンドラ方式を電卓では使われいていることがわかります(多分)。
おわりに
最初は全くわからなかったJavaScriptがこの1週間で徐々に読めるようになってきました!
ただまだ「書けるのか」と聞かれると力不足なので頭を使いながら、明日作ってみようと思います^^!
Gitはまとめて、実際にaddしてcommitしてPushを繰り返し、pull requestもして慣れて行こうと思います。
不明点が多いのでまずはノートにまとめる。
もりけん塾(@terrace_tech)