front end web development
Brett Haymaker, JavaScript Consultant & Educator
ATTENDANCE!
Warm-up
15 MINUTES
Review the site below:
http://www.promoflex.com/en
- Inspect the page and identify 1-2 things you suspect are using JavaScript / jQuery
- Discuss with your partner
- Investigate how those things are being achieved.
- Share one thing that you uncovered.
Learning Objectives:
-
Differentiate between jQuery and JavaScript, describe benefits of using them.
-
Recognize jQuery syntax
-
Use selectors and jQuery functions to effectively manipulate the DOM.
What is JQuery?
- A JavaScript library
- Made of ordinary JS
- Gives us "syntactic sugar" / helper methods that allow us to do a lot with a few lines of code
Where can I find jQuery?
- Content Delivery Network (CDN)
- Download / copy library locally
- Host our own copy of the library
Let's add it to a project together and run through some examples. (selectors...smooth scrolling ...*cough* ... event listeners... *cough**cough*)
jquery docs
15 MINUTES
Go to jquery.com and look up the following methods:
.slideUp() .slideDown() .children() .attr()
.click .slideToggle() .hide() .show()
jquery dOM SELECTOR Practice
15 Minutes
- Download the start files from Slack.
- Work your way through the prompts in the exercise.js file, answering questions as you go.
- Confirm in the browser that your code is working.
Code along - Building an FAQ section
What does an FAQ section typically look like?
Let's gather some ideas and build out the HTML together.
Then, we'll build the JS script to make our FAQ page come to life and respond to user interactions.
Navigation with dropdown menus
Remainder of class
- Using what we learned from our FAQ example...
-
Build a navigation bar with three items
- About, Services, News
- When a user hovers over each button, a dropdown menu with sub-nav items should slide down. Use jQuery to achieve this. (HINT: a combination of mouse events such as mouseenter and mouseleave and .slideup() and .slideDown() could be useful)
- We'll review a possible solution at the end of class
Final Project
Week 5 Milestone:
Project proposal / Wireframe of Final Project
Final Project Requirements:
:::SEE NOTES:::
Assignment
Starter code with instructions are in the class Slack channel.
You'll be taking Relaxr blog page and adding interactivity using JavaScript / jQuery.
EXIT TICKET
Class name: FEWD 14
Week-4-jQuery-Basics
By Brett Haymaker
Week-4-jQuery-Basics
- 42