＜本日のテーマ＞JavaScript(jQuery)についてです
1限目 学科 jQuery基礎jQueryの使い方について
2限目 学科 jQuery基礎jQueryの導入
3限目 学科 jQuery基礎課題制作
4限目 学科 jQuery基礎課題制作
5限目 学科 jQuery基礎課題制作
【参考資料】
jQueryについて
jQueryを利用する時の基本事項を理解し、自分のサイトに導入して動きのあるサイトを作りましょう。
参考サイト
【動画】
- JavaScriptとは？
https://youtu.be/H8dTOgqh8G4 (3:06) - JavaScriptあれこれ
https://youtu.be/QWzdF2_wGvI（14:59） - jQueryとは？jQueryの読み込み方法
https://youtu.be/RSQAgv0Y8ko（13:35） - jQueryの実装例
https://youtu.be/1m2TgevpIFU（10:01） - 覚えておくのはこの3点・ソースを見てサイトの仕組みは、もう分かる
https://youtu.be/dI8HTOjMSEU（10:23） - よく使うキーワードの一例とCSS
https://youtu.be/-KITTC1tBWI（13:58）
jQueryの利用方法（復習）
jQueryを利用する時は実装するための参考サイトを検索し利用方法を理解しましょう。
検索は、「jQuery （実装したいキーワード）」で検索します。
良く使うキーワードの例は、以下の通りです。
- スライダー
- カルーセル
- ハンバーガーメニュー
- ライトボックス
- ドリルダウン
- フェード
- スクロール など
参考サイト
- 動くWebデザインアイディア帳
- jQuery サンプル集 / Web Design Leaves
- 7つのサンプルでjQueryを学ぼう！「jQueryが全く分からない人のため」の超初級者向け入門講座
- jQueryでできること10選。動的サイトの制作やプログラミングを簡略化！
- 初心者でも簡単！jQueryのWeb制作術と自作プラグイン活用法 | 侍エンジニアブログ
- jQuery を用いたWeb デザイン
ワンポイントアドバイス
見本となるサイトがたくさんあるのがWebページの良いところです。
「こんな動きのページ作れますか？」のような依頼はよくあります。
その見本のサイトを解析できれば実装が可能です。
本日の課題
提出課題はありません。
就職活動に応じた作品制作、ポートフォリオのまとめやコーディングの続きを進めましょう。