JavaScript

前回で、async/awaitを使って外部のデータを取得し、件数を選んで表示できるようになった。ただし、通信に失敗すると画面が「読み込み中...」のまま止まってしまう。シリーズ最終回の今回は、try/catch/finallyとrespon...

前回は、fetch()と.then()を使って外部のToDoデータを画面に表示した。.then()を続ける書き方は、処理が増えると読みにくくなっていく。今回はasync/awaitという書き方に整理しなおし、取得する件数を選べる機能と、デー...

これまでの記事では、ToDoリストの内容をフォームから自分で入力してきた。今回からは、Webサーバーが公開しているデータをJavaScriptで取得し、画面に表示する方法を3回に分けて扱う。初回はfetchの基本を押さえよう。1. fetc...

前回までで、ToDoの追加・完了チェック・削除ができるところまで作ってきた。ただし、このままではページを再読み込みするたびにリストの内容が消えてしまう。今回はlocalStorageを使ってブラウザにデータを保存し、再読み込みしてもリストが...

前回は、フォームに入力された文字列を配列（todos）に追加するところまでを確認した。今回は、その配列の中身を実際に画面上のリストとして表示し、さらに「完了チェック」と「削除」の機能を追加していくことにしよう。 1. style.css（C...

これまでの記事では、ブラウザに時計やカレンダーを表示する題材を通して、DOM要素の操作やイベントリスナーの使い方を扱った。今回からは、それらの知識を踏まえて「ToDoリストアプリ」を3回に分けて作っていくことにしよう。初回となる今回は、フォ...

前回ご紹介した、『ブラウザで「アナログ時計・デジタル時計・カレンダー」を表示するHTML＋Javascript』プログラムコードを改良してみよう。以下にそのプログラムコードを以下に示す。✅ 1. index.html（HTMLファイル）<!...

今回は、ブラウザで「アナログ時計・デジタル時計・カレンダー」を表示するHTML＋Javascriptをご紹介しよう。各構成は以下の通りとなる。HTML構造<div class="clock" id="analog-clock">  <div...

今回は、先回ご紹介した「カレンダーを表示する関数」のうち、以下のコードを詳しくみていくことにしよう。const todayString = `${today.getFullYear()}-${String(today.getMonth() ...

今回は、「ブラウザにカレンダーを表示しよう（１）」でご紹介しているJavaScriptファイルのうち、「カレンダーを表示する関数」を詳しくみていくことにしよう。このコードは、カレンダーをHTML形式で表示する関数である。// カレンダーを表...