Web プログラミング

【もりけん塾78記事】JavaScript「デジタル時計」｜GitHubをノートにまとめる

フロントエンドエンジニアを目指している、まゆ（@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についてノートにまとめる

 

全体像が不明なので図式化されたものを探すとあったので、ノートにまとめました！

 

今日は22時から、もりけん先生によるGit講座があるのでまたまとめていきます。

本：独学JavaScriptをノートにまとめる

JavaScriptのコードを書くだけじゃ理解ができないので、並行してこちらもまとめていきます。

独学JavaScript本がわかりやすい

独習JavaScript 第2版がとてもわかりやすかったので、ノートにまとめました！

 

 

 

明日は復習で変数から！

 

昨日疑問に思ったJavaScriptの書き方について

私
他の人の電卓のコードをみると<script>の中にJavaScriptを入れていたので、組み込む方法と組み込まない方法があるのかな？

 

といった疑問を記載しました。

 

本日JavaScriptの本を読むと答えがあったので掲載していきます！

 

これから③のイベントハンドラ方式を電卓では使われいていることがわかります（多分）。

 

おわりに

最初は全くわからなかったJavaScriptがこの1週間で徐々に読めるようになってきました！

 

ただまだ「書けるのか」と聞かれると力不足なので頭を使いながら、明日作ってみようと思います^^!

 

Gitはまとめて、実際にaddしてcommitしてPushを繰り返し、pull requestもして慣れて行こうと思います。

不明点が多いのでまずはノートにまとめる。

もりけん塾（@terrace_tech）

Thanks：もりけんさん

 

もりけんさんの『武骨日記』へ

 

Post Views: 97

-Web, プログラミング

© 2021 Mayu_Yamada