Events  Deals  Jobs  NFT NYC 2024 
    Sign in  
 
 
Learn JavaScript so you can add interactivity, animated slideshows, lightboxes, validate forms & more.
Tue, Feb 23, 2016 @ 06:00 PM   $975   Noble Desktop, 594 Broadway, Ste 1202
 
     
 
 
              

      
 
Sign up for our awesome New York
Tech Events weekly email newsletter.
   
LOCATION
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
 
 
 
 
© 2024 GarysGuide      About    Feedback    Press    Terms