| |
|
|
| |
EVENT DETAILS |
Go beyond HTML/CSS and learn JavaScript so you can add interactivity such as animated slideshows, lightboxes (image enlargers), show/hide content, validate forms, and more.
Youll start by learning the fundamentals of JavaScript code, and then get into jQuery. jQuery is an industry standard framework that lets you quickly and easily write powerful JavaScript. Youll learn how to use some popular jQuery plugins, and gain an understanding of how plugins work, so you can use any plugin!
This advanced level course is for people who have experience building webpages. It is a coding class, so HTML & CSS knowledge equivalent to our Web Development Level 2 class is expected.
What Youll Learn
Section 1
Fundamentals of JavaScript Code
Topics
JavaScript methods (such as alerts)
Variables
The importance of quotes
Numbers vs. strings
Concatenation
Reusing Code with Functions
Topics
Defining functions
Calling functions
Defining parameters & passing arguments
Simple Accordion with JavaScript
Topics
Targeting elements by ID
Hiding & showing elements with JavaScript
If Statements: Clearing Form Fields
Topics
Testing code in the JavaScript Console
Getting & setting properties
Using if statements
Reshowing text hints in empty form fields
Section 2
Introduction to JavaScript Objects & the DOM
Topics
Intro to objects
The global object
Breaking open & manipulating objects
Dynamically Changing Content with Custom Objects
Topics
Checking the functionality of the select menu
Getting the chosen value
Dynamically changing the state name value
Dynamically changing the rest of the values
Introduction to Arrays & the Math Object
Topics
Creating an array
Editing an array
Creating an array of welcome headings
The Math object
Using the Math object to pick random headlines
Introduction to For Loops
Topics
Creating a for loop
Using the for loop to set dropdown menus
Clearing the To menu
Optional bonus: refining the menu selection experience
Section 3
Exploring JavaScript Selectors
Topics
Intro to JavaScript selectors
Selecting multiple elements & elements without IDs
Getting a specific list item
Getting elements by class name
Getting multiple items using querySelectorAll()
Getting a single item using querySelector()
Chaining selectors together
Targeting elements by data attribute
Photo Filter Website: User Friendly Navigation
Topics
Setting up the selectors with data attributes
Getting the selectors on load
Toggling the filter buttons
Refining the filter buttons
Photo Filter Website: Getting the Photos to Filter
Topics
Creating an array to store the selectors
Getting the All button to select all filters
Getting the rest of the buttons to select the other filters
Initially hiding the photos
Getting the photos to filter
Photo Filter Website: Creating an Exclusive Filter
Topics
Adding a checkbox to toggle exclusive filtering on/off
Separating the inclusive & exclusive filters
Writing a conditional to select the appropriate filter
Programming the exclusive filter
Rerunning the filter when the checkbox is toggled
Improving the user experience
Section 4
Showing/Hiding Content with jQuery Animation
Topics
Getting started with jQuery
Running code when the document is ready
Click events
Using jQuerys slideToggle() method
Supporting JavaScript disabled users
Sharing JavaScript Across Pages
Topics
Externalizing JavaScript
Linking to the JavaScript file
jQuery Hover Animation
Topics
Adding an outline with CSS
Using jQuerys hover() method
Using jQuerys animate() method
More Advanced jQuery Showing/Hiding
Topics
Adding an animation to reveal hidden content
Targeting the proper div: traversing the document
Swapping the button image with jQuery
Section 5
jQuery Lightbox: A Pop-up Image Viewer
Topics
Linking to the plugin files
Initializing the pop-up
Grouping the photos into a gallery
Adding captions
Removing the counter
Customizing the appearance
jQuery Cycle: A Simple Slideshow
Topics
Initial setup
Defining what content gets cycled
Adding more cycles & exploring options
Reversing the animation
jQuery Cycle: Adding Slideshow Controls
Topics
Preventing a possible flash of unstyled content
Enabling the slideshow
Adding & customizing the controls
Section 6
jQuery Cycle: Adding a Pause Button
Topics
Adding a pause/play button
Styling the pause/play button
Checking to see if the cycle is paused
Making the pause/play button work
jQuery Form Validation
Topics
Initializing the plugin & setting options
Customizing the error messages
Changing the location of the error messages
Styling the error messages
jQuery Image Carousel
Topics
Linking to the plugin files
Creating the carousel
Styling the carousel
An easy way to add prev & next buttons
Adding custom prev & next buttons
Setting how many items are shown
|
|
|
|
|
|
