Scribd
Upload
283 views

Javascript and Jquery Syllabus

This document provides a course syllabus for a JavaScript & jQuery training course. The course is divided into 6 sections and will teach students to add interactivity and functionality to websites using JavaScript and jQuery, including hiding and showing elements, validating forms, and animations. The training is available as group classes in NYC or onsite training, and more information can be found by emailing or visiting the provided contact details.

Uploaded by

Nhek Vibol
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
283 views

Javascript and Jquery Syllabus

This document provides a course syllabus for a JavaScript & jQuery training course. The course is divided into 6 sections and will teach students to add interactivity and functionality to websites using JavaScript and jQuery, including hiding and showing elements, validating forms, and animations. The training is available as group classes in NYC or onsite training, and more information can be found by emailing or visiting the provided contact details.

Uploaded by

Nhek Vibol
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 4

JavaScript & jQuery

Give your websites a jolt of functionality and interactivity with JavaScript & jQuery. Learn
COURSE SYLLABUS

to hide and show elements, customize animations, validate forms, and much more.

Group classes in NYC and onsite training is available for this course.
For more information, email [email protected] or visit:
training-nyc.com/courses/javascript-jquery

[email protected] • 212-658-1918

Course Outline

Section 1
Fundamentals of JavaScript Code
JavaScript methods (such as alerts)
Variables
The importance of quotes
Numbers vs. strings
Concatenation

Reusing Code with Functions


Defining functions
Calling functions
Defining parameters & passing arguments

Simple Accordion with JavaScript


Targeting elements by ID
Hiding & showing elements with JavaScript

If Statements: Clearing Form Fields


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
Intro to objects
The global object

Course Syllabus | JavaScript & jQuery 1


Breaking open & manipulating objects

Dynamically Changing Content with Custom Objects


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


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


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
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


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


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


Adding a checkbox to toggle exclusive filtering on/off

Course Syllabus | JavaScript & jQuery 2


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
Getting started with jQuery
Running code when the document is ready
Click events
Using jQuery’s slideToggle() method
Supporting JavaScript disabled users

Sharing JavaScript Across Pages


Externalizing JavaScript
Linking to the JavaScript file

jQuery Hover Animation


Adding an outline with CSS
Using jQuery’s hover() method
Using jQuery’s animate() method

More Advanced jQuery Showing/Hiding


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
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


Initial setup
Defining what content gets cycled
Adding more cycles & exploring options
Reversing the animation

jQuery Cycle: Adding Slideshow Controls


Preventing a possible “flash of unstyled content”
Enabling the slideshow
Adding & customizing the controls

Course Syllabus | JavaScript & jQuery 3


Section 6
jQuery Cycle: Adding a Pause Button
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


Initializing the plugin & setting options
Customizing the error messages
Changing the location of the error messages
Styling the error messages

jQuery Image Carousel


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

Course Syllabus | JavaScript & jQuery 4

You might also like