This session is targeted for those who are new to JavaScript or have basic knowledge of JS and want to learn more on JavaScript. It will also include jQuery core library where we shall look into the powerful selectors of jQuery and other topics like AJAX, animations etc in jQuery

Topics Covered

JavaScript - Basics -------------------------------- jQuery 1 Introducing jQuery 1.1 Why jQuery? 1.2 Unobtrusive JavaScript 1.3 jQuery fundamentals The jQuery wrapper Utility functions The document ready handler Making DOM elements Extending jQuery Using jQuery with other libraries 1.4 Summary 2 Creating the wrapped element set 2.1 Selecting elements for manipulation Using basic CSS selectors Using child, container, and attribute selectors Selecting by position Using custom jQuery selectors 2.2 Generating new HTML 2.3 Managing the wrapped element set Determining the size of the wrapped set Obtaining elements from the wrapped set Slicing and dicing the wrapped element set Getting wrapped sets using relationships Even more ways to use a wrapped set Managing jQuery chains 2.4 Summary 3 Bringing pages to life with jQuery 3.1 Manipulating element properties and attributes Manipulating element properties Fetching attribute values Setting attribute values Removing attributes Fun with attributes 3.2 Changing element styling Adding and removing class names Getting and setting styles More useful style-related commands 3.3 Setting element content Replacing HTML or text content Moving and copying elements Wrapping elements Removing elements Cloning elements 3.4 Dealing with form element values 4 Events are where it happens! 4.1 Understanding the browser event models The DOM Level 0 Event Model The DOM Level 2 Event Model The Internet Explorer Event Model 4.2 The jQuery Event Model Binding event handlers using jQuery Removing event handlers Inspecting the Event instance Affecting the event propagation Triggering event handlers Other event-related commands 4.3 Putting events (and more) to work 5 Sprucing up with animations and effects 5.1 Showing and hiding elements Implementing a collapsible list Toggling the display state of elements 5.2 Animating the display state of elements Showing and hiding elements gradually Fading elements into and out of existence Sliding elements up and down Stopping animations 5.3 Creating custom animations A custom scale animation A custom drop animation A custom puff animation 6 jQuery utility functions 6.1 Using the jQuery flags Detecting the user agent Determining the box model Detecting the correct float style to use 6.2 Using other libraries with jQuery 6.3 Manipulating JavaScript objects and collections Trimming strings Iterating through properties and collections Filtering arrays Translating arrays More fun with JavaScript arrays Extending objects 6.4 Dynamically loading scripts 7 Extending jQuery with custom plugins 7.1 Why extend? 7.2 The jQuery plugin authoring guidelines Naming files and functions Beware the $ Taming complex parameter lists 7.3 Writing custom utility functions Creating a data manipulation utility function Writing a date formatter 7.4 Adding new wrapper methods Applying multiple operations in a wrapper method Retaining state within a wrapper method 8 Talk to the server with Ajax 8.1 Brushing up on Ajax Creating an XHR instance Initiating the request Keeping track of progress Getting the response 8.2 Loading content into elements Loading content with jQuery Loading dynamic inventory data 8.3 Making GET and POST requests Getting data with jQuery Getting JSON data Making POST requests 8.4 Taking full control of an Ajax request Making Ajax requests with all the trimmings Setting request defaults Global functions 8.5 Putting it all together Implementing the flyout behavior Using The Termifier Room for improvement

Who should attend

Anyone who want to get into web development with/without knowledge of JavaScript

Pre-requisites

Basics of web development, like HTML, browser etc.

What you need to bring

Pen and paper

Key Takeaways

Web development using JavaScript and how jQuery makes it easy in comparison with JavaScript