- 2022.05.07
- JavaScript, クリックイベント, タブ切り替え, フロントエンド, もりけん塾,
もりけん塾 JavaScript課題16 タブ切り替えの実装
今回は、jsonデータを作って、タブ切り替えを実装する課題です。jsonデータの構成に少し悩みましたが、先に取り組んだ方々のコードやコメントを参考に、進めました。 お題 これはyahooのトップページ […]
JavaScript
- 2022.04.24
- DOMを生成, JavaScript, クリックイベント, バリデーション, フロントエンド,
もりけん塾 JavaScript課題15 モーダルにformを置いてリクエスト送信
前回はこちら お題 モーダル内に formをおいて、input(type number)値、input(type text)、を新たに作ったsubmitボタン押下で リクエスト、 APIから値を取って […]
- 2022.04.24
- DOMを生成, JavaScript, クリックイベント, フロントエンド, もりけん塾,
もりけん塾 JavaScript課題14 inputのvalueを取得して引数に渡す
前回はこちら↓ お題 13で作ったモーダル内にinput (typeはnumber)をおいて、クリックした際にinput(type number)のvalueを取得して、リクエストできるようにしてくだ […]
- 2022.04.13
- DOMを生成, JavaScript, クリックイベント, フロントエンド, モーダルウインドウ,
もりけん塾 JavaScript課題13 モーダルの表示とリクエスト送信の実装
課題13は、課題12の続きで、12で作ったボタンをクリックしたらモーダルウィンドウが開き、リクエスト送信できるようにします。 課題12の学習記録は、こちら↓ お題 クリックしたらモーダルが出てきて、1 […]
- 2022.04.05
- addEventListener, JavaScript, onclick, クリックイベント, もりけん塾,
もりけん塾 JavaScript課題12 クリックで、Fetchリクエストをする
今回は前回実装したものの続きで、クリックでFecthリクエストをする課題です。クリックイベントはJQueryでしか実装したことがなく、JavaScriptでどうやるんだろう？ちょっと難しそう、というと […]
- 2022.04.05
- defer, Fetch, JavaScript, try-catch-finally, もりけん塾,
もりけん塾 JavaScript課題11 APIから値を取得する
課題11は、Fetchを使って、APIから値を取得、取得した値を使ってDOMを表示する課題です。ちょっと難しそうですが、外部にあるデータをとってくる、ということを初めて行うので、ワクワクが大きかったで […]
- 2022.03.03
- JavaScript, 変数と関数, 非同期処理,
もりけん塾 JavaScript課題8 rejectを実行し、エラーを起こしてcatch節でエラーをキャッチ
課題8はPromiseのエラーの処理を実装します。 お題 つぎはresolveで解決するのではなく(resolveを実行するのではなく) 3秒後にrejectを実行してthenでその値をコンソール出力 […]
- 2022.02.26
- JavaScript, Promise, フロントエンド, もりけん塾, ローディング実装,
もりけん塾 JavaScript課題7 ローディングの実装
課題7は、Promiseを使ってローディングの実装をします。3秒後にローディング画像を取り除く、という課題です。 お題 loadingを実装してみてください。resolveになるまでの間にloadin […]
- 2022.02.23
- JavaScript, Promiseメソッド, setTimeout, タイマー処理, もりけん塾,
もりけん塾 JavaScript課題6 3秒後に解決するPromise
今回の課題は、前回のPromiseを3秒後に解決するようにする課題です。 お題 課題5で作ったものを3秒後に解決されるようにしてください 準備 ３秒後に解決、という方法がわからなかっので、調べてみまし […]
- 2022.02.21
- JavaScript, Promiseメソッド, もりけん塾,
もりけん塾 JavaScript課題5 Promiseを使って、解決された値を取得する
お題 前回の配列を使うのは一緒です。 4のこちらをつかって、こんどはPromiseオブジェクトを使って解決された値として受け取り、 [{to: "bookmark.html", img: "1.png […]