実技 JavaScript(jQuery)実習

-本日のアジェンダ-

1限目
実技 JavaScript(jQuery)実習
jQueryの使い方について

2限目
実技 JavaScript(jQuery)実習
jQueryの導入

3限目
実技 JavaScript(jQuery)実習
課題制作

4限目
実技 JavaScript(jQuery)実習
課題制作

5限目
実技 JavaScript(jQuery)実習
課題制作

本日のテーマ

jQueryを自分のサイトに導入しましょう

jQueryの導入

jQueryを自分のサイトに導入して動きのあるサイトを作りましょう。

参考サイト

jQueryの利用方法(復習)

jQueryを利用する時は実装するための参考サイトを検索し利用方法を理解しましょう。
検索は、「jQuery (実装したいキーワード)」で検索します。
良く使うキーワードの例は、以下の通りです。

  • スライダー
  • カルーセル
  • ハンバーガーメニュー
  • ライトボックス
  • ドリルダウン
  • フェード
  • スクロール など

参考サイト

本日の課題

コーディングを進めましょう。
5限目の終わりまでに、
今日できたところまでのサイトをサーバに仮アップしましょう。

学科 JavaScript基礎

-本日のアジェンダ-

1限目
学科 JavaScript基礎
JavaScriptについて

2限目
学科 JavaScript基礎
jQueryの使い方について

3限目
学科 JavaScript基礎
課題制作

4限目
学科 JavaScript基礎
課題制作

5限目
学科 JavaScript基礎
課題制作

本日のテーマ

JavaScript(jQuery)についてです

jQueryについて

jQueryを利用する時の基本事項を理解しましょう。

参考サイト

【資料】

Dropboxにある資料をダウンロードしましょう。
作品制作のポイントをまとめた資料です。

[保存場所]
Dropbox / DEAUアカデミー WEBデザイナー養成科 (短時間) / 資料 /
【STEP4】Webページの制作/「JavaScript(jQuery)の教科書.pdf」

動画】「JavaScript(jQuery)の教科書」

jQueryの利用方法

jQueryを利用する時は実装するための参考サイトを検索し利用方法を理解しましょう。
検索は、「jQuery (実装したいキーワード)」で検索します。
良く使うキーワードの例は、以下の通りです。

  • スライダー
  • カルーセル
  • ハンバーガーメニュー
  • ライトボックス
  • ドリルダウン
  • フェード
  • スクロール など

参考サイト

ワンポイントアドバイス

見本となるサイトがたくさんあるのがWebページの良いところです。
「こんな動きのページ作れますか?」のような依頼はよくあります。
その見本のサイトを解析できれば実装が可能です。

本日の課題

課題提出はありません。
就職活動に応じた作品制作、ポートフォリオのまとめやコーディングの続きを進めましょう。