JavaScript演習１

リンク

MDN Web Docs

MDN Web Docs - JavaScript

Tailwind CSS Docs

Font Awesome

JavaScriptの動きのあるサイト

ILY GIRL – Mika Pikazo Exhibition 2023

DEMI DO (デミドゥ)

株式会社コンピュータ技研

ベイク チーズタルト

JavaScriptの基本

01 DOMについて・Elementの取得とNodeの操作

JavaScriptの言語としての基本仕様とブラウザでの開発環境、DOMについてやElementの取得方法などを学びます。

Note.

JavaScriptについて DOMとElementについて

Kadai.

kadai01

Preview.

kadai01

イベント

02 - 03 イベントとイベントハンドラー

エレメントにイベントの設定方法などを学びます。

Note.

イベントとイベントハンドラー

Kadai.

kadai02

Preview.

kadai02

ブラウザの座標

04 ブラウザ座標系の操作

JavaScriptでブラウザの各種座標系、変数と定数、条件分岐について学びます。

Note.

ブラウザの座標関係

Kadai.

kadai03

Preview.

kadai03

変数・定数

05 変数と定数

JavaScriptの変数や定数について学びます。

Note.

変数と定数

Kadai.

kadai04

Preview.

kadai04

ループとイベント

06 ループ処理とイベントの組み合わせ

ループ処理とイベントを組み合わせて、Elementsへのイベントの方法を学びます。

Note.

ループ 要素群の取得

Kadai.

kadai05

Preview.

kadai05

配列

07 - 08 配列を使った処理

配列の参照やデータの保存などについて学びます。

Note.

配列 クラス属性の操作

Kadai.

kadai06

Preview.

kadai06

条件分岐

09 条件分岐 - if や switch

ifやswitchの条件分岐を使った処理について学びます。

Note.

条件分岐

Kadai.

kadai07

Preview.

kadai07

タイマー関数

10 インターバルタイマーを使った、一定間隔の処理

タイマー関数を利用して、経過時間ごとにイベントを実行する非同期処理の方法を学びます。

Note.

タイマー関数

Kadai.

kadai08

Preview.

kadai08

関数

11 関数について

関数の利用や関数の実装方法について学びます。

Note.

関数

Kadai.

kadai09

Preview.

kadai09

座標とイベントを組み合わせた処理

12 - 15. スクロールに合わせたエレメントへのイベント

ページのスクロールに合わせてエレメントへイベントを実行する方法を学びます。

Note.

BoundingClientRect Intersection Observer

Kadai.

kadai10 kadai11 kadai12

Preview.

kadai10 kadai11 kadai12

etc

16. 応用

今まで学習したJavaScriptのプログラム内容を組み合わせて実装してみます。

Note.

Kadai.

kadai13

Preview.

kadai13