javascript course London, Manchester, Glasgow, Leeds

This Hands-On course provides an intensive introduction to the features provided by JavaScript and Dynamic HTML. The course is also a hand’s on session that is designed to help designers and developers enhance their existing projects with the help of jQuery. The course looks at how to use jQuery to transform static HTML web pages into dynamic web pages that react to user input, easily build custom animation components and enable more complex event handling. The course covers the initial setup of jQuery for a website, to the implementation and management of 3rd party open source plugins.

WHO IS THIS COURSE FOR?

Web and IT professionals who are completely new to JavaScript and who need to gain hands-on experience of developing commercial JavaScript systems.

ASSUMED KNOWLEDGE

Knowledge of a mark-up language such as HTML would be advantageous.

WHAT YOU WILL LEARN

• Understand the JavaScript language
• Understand the Document Object Model and how it is used in JavaScript
• How to detect and respond to user actions
• Alter, show, hide and move objects on a web page
• Check information inputted into a form
• How to use CSS (Cascading Stylesheets)
• How to make JavaScript cross-browser compatible
• Transform HTML web pages into interactive
• Cross-browser web pages with cool cross-browser animations and user intuitive functionality

Variables and Operators

• Variables and Data Types
• Using Variables and Literals
• Operators

Control Statements

• Controlling the Flow using Control Statements

Functions and Objects

• Functions
• Objects

The Window Object

• The Window Object
• Dialog Boxes
• Status Bar Messages
• Window Manipulations

The Document Object

• The Document Object
• Writing to Documents
• Dynamic Documents

Forms and Forms-based Data

• The Form Object
• Working With Form Elements and Their Properties

The String and RegExp Objects

• The String Object
• Using String Object Methods to Correct Data Entry Errors
• Creating Dynamic Effects With Substring Methods
• The RegExp Object

Dates and Math

• The Date Object
• Using and Manipulating Dates
• The Maths Object
• Doing Maths With JavaScript

Debugging Javascript

• Logging Messages to the Console
• Examining Objects in the Console
• Introducing Breakpoints
• Watching Variables

Advanced Browser Capabilities

• Exploring Geolocation
• Introducing Webworkers
• Discussing Advanced Features eg Websockets, Webworkers, NodeJS

Introduction to jQuery

• About jQuery
• Cross-browser Compatibility
• CSS3 Selectors
• jQuery UI
• Plugins
• Downloading and Including jQuery

Selecting, Styling and Enhancing

• Making Sure the Page Is Ready
• Selecting
• Filters
• CSS with jQuery
• Reading & Setting CSS Properties
• Classes
• Enhancing: Adding Effects
• Progressive Enhancement
• Modifying Content
• Callback Functions

Animating, Scrolling and Resizing

• Animating
• Animating CSS Properties
• The Animation Queue
• Chaining Actions
• Pausing the Chain
• Scrolling
• The scroll Event
• Floating Navigation
• Scrolling the Document
  Images and Slideshows
• Lightboxes
• Custom Lightbox
• ColorBox: A Lightbox Plugin
• Slideshows

Menus, Tabs, Tooltips and Panels

• Menus
• Expandable/Collapsible Menus
• Drop-down Menus
• A Simple Accordion
• UI Accordion
• UI Tabs
• Tooltips

Forms, Controls, and Dialogs

• Forms
• Form Validation with the Validation Plugin
• Autocomplete
• Date Picker
• Sliders
• Drag and Drop
• UI Dialog

Lists, Trees, and Tables

• Lists
• jQuery UI Selectables
• Sorting Lists
•  Manipulating Select Box Lists
• Trees
•  Expandable Tree
• Event Delegation
• Tables
• Fixed Table Headers
• Repeating Header
• Data Grids
• Selecting Rows with Checkboxes

Ajax

• Storing Data on the Client
• Ajax Crash Course
• What Is Ajax?
• Ajax Settings
• Loading Remote HTML
• Fetching Data with $.ajax
• GET and POST Requests
• jQuery Ajax Events
• Displaying JSON data in the HTML Structure
• Sending Data to the Server

Storing Data on the Client

• LocalStorage vs SQLite
• Storing Complex Data locally Using LocalStorage

Data Visualisation

• Introduction to Charting Libraries
• Introduction ChartsJS
• Understanding Chart Types
• Building a Data Model
• Displaying Data in Various Chart Forms

NodeJS

• Introduction to Serverside Javascript
• Introducing NodeJS
• Installing NodeJS
• Understanding anatomy of HTTP Request
• Creating a Basic Server
• Introduction to NPM
• Understanding package.json

ExpressJS

• Introducing ExpressJS
• Building a Server With ExpressJS
• Intro to Templating (Jade/Pug)

Client Server Communication

• Defining an API Server
• Understanding Routes
• Understanding RESTful Calls to API
• Creating a Round Trip Call to Server API

MongoDB

• Intro to MongoDB
• Understanding JSON Documents
• Intro to RoboMongo
• Reading and Writing Data to MongoDB
• Integrating Dynamic Data into Clientside Template (Jade/Pug)

WebSockets

• Understanding the WebSocket Protocol
• Introducing Socket.IO
• Creating a basic Live Chat Application
• Extending Application to pass Complex Data

Concluding Exercise

Completing the final course application which implements all topics covered throughout the course. The application will display data in chart components displayed in a dashboard interface. The charts will react instantaneously to multiple users changing data. All changes will be stored persistently in MongoDB.