Advance Search

You can make multiple selections by clicking on multiple entries in any selection list. Click again any of them to remove it from your selection.

Manufacturers

  • ADOBE
  • Android
  • APPLE
  • Autodesk
  • Avid
  • BLACKMAGIC DESIGN
  • Exceed Media
  • MAXON

Training Categories

  • 3D MODELING AND ANIMATION
  • APPLE MacOS and iOS
  • ARTIFICIAL INTELLIGENCE COURSES
  • CINEMA
  • ENGINEERING AND ARCHITECTURE
  • GRAPHIC DESIGN
  • MOBILE APP DEVELOPMENT
  • MOTION GRAPHICS
  • PRODUCTION
  • SOUND DESIGN
  • VIDEO EDITING AND COLOR GRADING
  • WEB DESIGN AND DEVELOPMENT

Courses

  • Adobe Acrobat
  • Adobe After Effects
  • Adobe Animate CC
  • Adobe Audition CC
  • Adobe Captivate
  • Adobe ColdFusion
  • Adobe Dreamweaver
  • Adobe Illustrator
  • Adobe InCopy
  • Adobe InDesign
  • Adobe Photoshop
  • Adobe Premiere Pro
  • AI In Media
  • Android App Development
  • Apple FCP X
  • Apple iOS
  • Apple Logic Pro
  • Apple mac OS
  • Apple Motion
  • Apple Technician
  • Arabic Ornaments and Calligraphy
  • Autodesk 3ds Max
  • Autodesk AutoCAD
  • Autodesk Fusion 360
  • Autodesk Inventor
  • Autodesk Maya
  • Autodesk Revit Architecture
  • Avid Media Composer
  • Avid Pro Tools
  • Cinema 4D
  • Cinematography
  • Color Managed Workflows
  • Color Practical and Theory
  • Davinci Resolve
  • DaVinci Resolve Fusion
  • Digital Vision Grading
  • Directing
  • Dolby Vision
  • General AI Courses
  • Graphic Designer
  • HTML CSS and JavaScript
  • InfoGraphics and Data Visualization
  • IPhone and iPad App Dev
  • Photography
  • Script Writing
  • Social Media Marketing
  • Social Media Video Production
  • Video Production Workshop
  • Videography
  • WordPress
  • XML

Training Locations

  • Iraq
  • UAE
  • Virtual

Advanced Web Development JavaScript & jQuery

567 Views Duration: 2 days

Course Description

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.

You will 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. You’ll 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 and CSS knowledge equivalent to our Web Development Level 2 class is expected.

Who Needs to Attend

Anyone who wants to add greater dynamic interaction to their existing websites. This course can be taken with either a Mac or Window-based machine. You will need to test your projects in a variety of browsers. You will also need a text editor such as Notepad on Windows or TextEdit on Mac.

Prerequisites

Fundamentals of Web Development and Intermediate Web Developement courses or an equivalent knowledge. Some knowledge of programming concepts is helpful.

Course Outlines

 

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 and passing arguments

Simple Accordion with JavaScript

  • Targeting elements by ID
  • Hiding and showing elements with JavaScript

If Statements: Clearing Form Fields

  • Testing code in the JavaScript Console
  • Getting and setting properties
  • Using if statements
  • Reshowing text hints in empty form fields

Section 3

Exploring JavaScript Selectors

  • Intro to JavaScript selectors
  • Selecting multiple elements and 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
  • Separating the inclusive and 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 2

Introduction to JavaScript Objects and the DOM

  • Intro to objects
  • The global object
  • Breaking open and 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 and 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 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 and exploring options
  • Reversing the animation

jQuery Cycle: Adding Slideshow Controls

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

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 and 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 and next buttons
  • Adding custom prev and next buttons
  • Setting how many items are shown

 

Related Courses

Fundamentals of Web Development

$ 997 $ 1,495
Duration: 3 days
Views: 744

Intermediate Web Development

$ 997 $ 1,495
Duration: 3 days
Views: 716

Web Design Track

$ 1,660 $ 2,490
Duration: 5 days
Views: 668

Virtual Classroom Training

$ 699 per seat

$ 997

Duration: 2 days
- +


Note: Buy has the option to pay by Credit/Debit cards or by purchase order.

Need More information of this course or Want to talk to the experts?

Request Quote

Live Chat

Share

Locations

&

Time

Interested ?

Fill the Form

Request a Quote Now

By continuing to use this site you agree to our Privacy Policy & Cookie Policy