職業訓練校

職業訓練校(プログラマー養成科) 7週目まとめ ~ 実技・JavaScript実習 / Date・Mathオブジェクト、カウントダウン・表 など~

こんにちは。yuki(@Ryuki_4648)です。

プログラマー養成科の職業訓練・7週目のまとめです。
JavaScriptの基礎を学びながら、実践に近いプログラムを書いていくようになりました。

テキストは確かな力が身につくJavaScript「超」入門 第2版を使用しています。

前回の6週目の授業についてはこちらです。


職業訓練校(プログラマー養成科) 6週目まとめ ~ 実技・JavaScript実習 / 条件分岐・変数・定数・配列など~ こんにちは。yuki(@Ryuki_4648)です。 プログラマー養成科の職業訓練・6週目のまとめです。 今週から本格的にJavaS...

月曜日は「就職活動日」のため、火曜日から授業がありました。

職業訓練校では、1~2週間に一度「就職活動日」、月に1回程度「ハローワーク来所日」があります。
これらの日は授業が休みなので、個々で求職活動をしたり、自習したりします。


1.Dateオブジェクト

Dateオブジェクトは、「日時」を扱うためのオブジェクトです。

日時を取得して、そのまま出力すると、


このように表示されますが、このままだと少しわかりにくいです。

「2020年9月20日 9時」のようなわかりやすい日時で表示させるためには「年・月・日」などを個別に取得する必要があります。
ここで、Dateオブジェクトから日時を取得するメソッドを使います。

メソッド一覧の参考サイトはこちらです。


そのほか、if文を活用して「12時間表記」にするプログラムを書いたりしました。



2.Mathオブジェクト

小数点第〇位で切り捨てるファンクションを作成するために、Mathオブジェクトを使いました。

Mathオブジェクトについて↓




3.カウントダウンタイマーを作る

Dateオブジェクトを使って、カウントダウンタイマーを作りました。

「東京オリンピック開催まで あと100日6時間46分10秒」
のようなものです。

1秒ごとに再計算したり、一定時間で繰り返しファンクションを実行したり…など、テキストを読みながらでも結構難しくて、きちんと理解するのに時間がかかりそうです。



4.プルダウンメニュー

プルダウンメニューから項目を選ぶと、指定したページに移動するプログラムを書きました。

(多言語サイトにあるような、「日本語」「English」「中文」うち、どれかを選ぶとその言語のページに移動するようなものです。)

ここでは、イベント(onchange)の設定、データの取得、URLの書き換えを活用しました。
プログラム自体は複雑なものではありませんが、「ブール属性」、「selected属性」やdocument.querySelectorメソッドなど新しいものが出てきました。



5.承認パネルを作る

サイトのプライバシーポリシーの承認パネルを表示するプログラムをクッキー(Cookie、ブラウザに保存される小さなデータのこと)という仕組みを利用して書きました。

普段はブラウザはGoogle Chromeですが、この授業のみFireFoxを使用しました。

「js-cookier」というオープンソースのライブラリ(外部プログラム)を使いました。


6.画像の切り替え

よくWebサイトで見かけるような「サムネイル画像をクリックすると画像が切り替わる」プログラムを書きました。



7.スライドショーを作る

「次へ」「前へ」のボタンをクリックすると、スライドが切り替わるプログラムを書きました。





8.for文を使って表を作る

テキストにはありませんが、繰り返しのfor文、for文の入れ子を書く練習をしました。
htmlファイルにはidを指定した、中身が空のtableタグを記述し、中身の文字文字をJavaScriptを使って作っていきます。


1行3列のテーブル



3行3列のテーブル

次に3行3列のテーブルを作りました。



九九の表

9行9列のテーブルと繰り返しを利用して、九九の表を作る練習をしました。



9.感想

JavaScriptの授業では、1HTML/CSS同様、個人で制作→みんなの前での発表があります。
そのため1日1時間作成時間が設けられました。

HTML/CSSの作成発表についての記事はこちらです。↓


職業訓練校(プログラマー養成科) 5週目まとめ ~ HTML5/CSS3 応用・学科・Javascript 1日目 ~ こんにちは。yuki(@Ryuki_4648)です。 プログラマー養成科の職業訓練・5週目のまとめです。 今週はHTML/CSSの授...

今週の授業では、for文を書く練習をさせてもらったおかげで、理解力が深まったと思います。

カウントダウンタイマーを作ったり、応用されたものを一人で考えて書くのは、今の段階ではとても難易度が高いなと感じました。
色々作りながら学んでいきたいと思います。