タグ: コーディング

-本日のアジェンダ-

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

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

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

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

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

本日のテーマ

JavaScript(jQuery)についてです

jQueryについて

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

参考サイト

• jQuery入門 – サンプルを元にセレクタやイベントを理解しよう！ | パソナテック
• JavaScript初心者のためのjQuery入門
• とほほのjQuery入門 – とほほのWWW入門

【資料】

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

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

【動画】「JavaScript(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が全く分からない人のため」の超初級者向け入門講座

ワンポイントアドバイス

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

本日の課題

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