EIEIOTECHNOVATION
← Training programmes

EIEIO / PROGRAMMING & DEVELOPMENT

Introduction to JavaScript-jQuery

Course outline

4 days
Discuss this programme →

Duration

4 days

Overview

This course is designed to accommodate website designers who have some experience in building web pages. JavaScript allows the designers/developers to build interactive websites. JavaScript has become an essential web technology along with HTML and CSS, as all browsers implement JavaScript. JavaScript is used for front-end development and recently it is also used for backend development. Furthermore, JavaScript usage has now extended to mobile app development, desktop app development, and game development. All in all, it has exploded in popularity and is now a very useful skill to learn.

This course also covers jQuery. The jQuery is

  • a JavaScript library
  • a set of tools, written in JavaScript
  • a way of writing JavaScript quicker
  • allows the designer/developer to do more, with less JavaScript

If the designer/developer wants to build an interactive gallery, a todo list, a fading out effects to the existing project jQuery is the right tool.

Now few question arises which one is better, can I learn just one. They’re just two different ways to solving problems. Think of jQuery is like “learning how to cook first using a microwave”. Sure, using microwave can reheat and prepare quite a few meals, but it’s not really “cooking”. Having an education in JavaScript allows the developer to understand the fundamentals, as well as when it’s best to use jQuery, and when it’s best to use JavaScript.

Objective

This course familiarize the participants with the ins and outs of basic JavaScript and then move on to advanced tools for adding really useful interactivity to a Web site as quickly and easily as possible with the help of pre-written jQuery libraries. Participants will learn how to use simple JavaScript code that will liberate them from all of the minute, time-consuming details of creating JavaScript programs that run well across different browser platforms.

  • A deep understanding of JavaScript
  • How to run JavaScript in browser as well as console
  • Basics about jQuery library
  • Creating and using variables
  • Using conditional constructs and loops
  • Using regular expressions with string methods
  • Passing arguments to a function
  • Using the Document Object Model (DOM) to access the HTML elements on the web page
  • jQuery basics and functions
  • Using selectors with jQuery
  • Manipulating page elements with jQuery
  • jQuery event model
  • jQuery and Ajax
  • jQuery animation and advanced effects
  • jQuery plugins

Prerequisites

Students should feel comfortable with HTML and CSS to get the most from this course. Class discussions are geared toward intermediate and advanced computer users.

Target Audience

This class is intended for developers responsible for designing the web front end GUI using jQuery.

Day 1

  • Getting Started with JavaScript
  • Writing First JavaScript Program
  • Introducing JavaScript Programming
  • How to Add JavaScript to a Page
  • Attaching an External JavaScript File
  • Tracking Down Errors
  • Running JavaScript on console
  • The Grammar of JavaScript
  • Statements
  • Commands
  • Types of Data
  • Variables
  • Expressions
  • Operators
  • Working with Data Types and Variables
  • Array, Array Properties and Methods
  • Associative Arrays
  • JavaScript Conditionals and Loops
  • The if
  • The else
  • The else if
  • ternary operator
  • Switch Case
  • While Loop
  • For Loop
  • For…in
  • Loop Control
  • Functions
  • Calling Function
  • Function Parameters
  • Return Statement
  • Nested Functions
  • Function() Constructor
  • Function Literals
  • Event
  • onclick Event
  • onsubmit Event
  • onblur Event
  • onchange Event
  • onkeydown Event
  • onkeyup Event
  • onkeypress Event
  • onmousedown, onmouseup, onmouseover and onmouseout Event

Day 2

  • Cookies
  • Storing Cookies
  • Reading Cookies
  • Setting Cookies
  • Deleting a Cookie
  • JavaScript Objects
  • Number
  • Boolean
  • Strings
  • Arrays
  • Date
  • Math
  • HTML DOM
  • Regular Expressions
  • Brackets
  • Quantifiers
  • Literal Characters
  • Meta characters
  • Modifiers
  • RegExp
  • Dynamically Modifying Web Pages
  • Modifying Web Pages: An Overview
  • Understanding the Document Object Model
  • Introducing JavaScript Libraries
  • Selecting Page Elements
  • Adding Content to a Page
  • Setting and Reading Tag Attributes
  • Reading, Setting, and Removing HTML Attributes
  • Creative Headlines
  • Acting on Each Element in a Selection
  • Enhancing Web Forms
  • Understanding Forms
  • Adding Smarts to Your Forms
  • Form Validation
  • Validation Tutorial

Day 3

  • jQuery Overview
  • What is jQuery?
  • Benefits of Using a JavaScript Library
  • jQuery Example
  • CSS Selectors
  • How to Use jQuery
  • Background – DOM and DOM Ready Events
  • Background - JavaScript Functions
  • The jQuery Function Object
  • What Does the $() Function Take as Argument?
  • What Does the $() Function do?
  • The jQuery Wrapper
  • The jQuery Wrapper as an Array-Like Object
  • innerHTML() vs. .html()
  • jQuery Wrapper Chaining
  • API Function Notation
  • Handling DOM Ready Event
  • xhtml Note
  • Selectors
  • Background: The Sizzle Selector Engine
  • Selecting Elements by Attribute
  • Pseudo-Selectors
  • Form Pseudo-Selectors
  • Faster Selection
  • Selecting Elements Using Relationships
  • Selecting Elements Using Filters
  • More on Chaining: .end()
  • Testing Elements
  • Is the Selection Empty?
  • Saving Selections
  • Iterating Through Selected Elements Using .each()
  • JavaScript Methods
  • JavaScript "this"
  • Function Context
  • The Function call() Method
  • .each()
  • Style Class Manipulation
  • Two Options
  • Specifying Style Properties
  • Setting Style Properties
  • .addClass() / .removeClass()
  • Defining a Stylesheet
  • Setting & Getting Dimensions
  • Attributes
  • DOM Manipulation
  • The $ Function Revisited
  • Getters and Setters
  • The text() Element Method
  • Appending DOM Elements
  • Removing DOM Elements
  • Performance
  • Events
  • Event Overview
  • Old School: Event Handling Using HTML Element Attributes
  • Unobtrusive JavaScript
  • Multiple Handlers
  • Using jQuery Wrapper Event Registration Methods
  • The .bind() Method
  • Event Propagation
  • The Event Object
  • Triggering Events
  • Utility Functions
  • The jQuery Object Revisited
  • Functions May Have Methods
  • A jQuery Utility Function: $.trim()
  • $.each()
  • Example jQuery Utility Functions

Day 4

  • Ajax
  • Ajax Overview
  • The Browser & the Server
  • The Ajax Request
  • The Ajax Response
  • Sending an Ajax Request With jQuery - The General Case
  • When this code is executed…
  • Sending an Ajax Request With jQuery - Simpler, Typical Case
  • Data Types
  • The .data() method
  • Advanced Ajax
  • A Form Example
  • An Ajax Form Example
  • Serialize()
  • Get vs. Post
  • More on Query Strings
  • ajaxStart() and ajaxError()
  • Animations and Effects with jQuery and jQuery UI
  • What is jQuery UI?
  • Using .hide() and .show() in jQuery
  • Alternating an Element's Visibility in jQuery
  • Adjusting the Speed in jQuery
  • Providing a Handler in jQuery
  • Using .slideUp() / .slideDown() methods in jQuery
  • jQuery UI Categories
  • jQuery UI Interactions: Droppable and Draggable
  • jQuery UI Widgets: Datepicker, Autocomplete
  • Parsing JSON
  • JSON
  • Reading JSON from the Server Using Ajax
  • Example file contents
  • Using the Results
  • Optimized Version
  • Getting More From the Response
  • jqXHR Methods
  • POST vs. GET
  • Invalid JSON
  • Using $.ajaxSetup()

Programme scope, delivery arrangements and suitability are confirmed during enquiry.