jQuery for Application

Section 1: Lab: jQuery 4 in Real Projects

• jQuery in today's systems, and what changed in jQuery 4
• Use jQuery from a CDN or npm and import it in ES modules
• Audit existing code with jQuery Migrate and read its console warnings
• Prepare the sample project and a local API with Node.js
• Lab: open an existing system page and find what must change before upgrading

Section 2: Lab: Utility Functions in jQuery 4

• $.each, $.map, $.grep, $.merge and deep copies with $.extend
• Check data types with Array.isArray and typeof instead of removed functions
• Replace $.parseJSON, $.trim and $.proxy with JSON.parse, trim and bind
• $.getScript, and $.when($.ready, ...) instead of $.holdReady
• Lab: a set of functions that transform product data from JSON

Section 3: Lab: Deferred, Promises and Ajax

• $.Deferred, $.when and waiting for several tasks at once
• $.ajax, $.getJSON and $.post with JSON data
• Use jqXHR with async/await and try/catch
• $.ajaxSetup, Ajax events and showing loading states
• Lab: a report page that loads data from three sources at once

Section 4: Lab: Customising jQuery

• Define custom speeds in $.fx.speeds
• Create custom selectors with jQuery.expr.pseudos
• Add your team's own utility functions with $.extend
• Extend or wrap built-in functions safely instead of overwriting them
• Lab: a selector that filters unsaved rows in a table

Section 5: Lab: Writing Your Own jQuery Plugin

• Plugin structure with $.fn.extend, returning this for chaining
• Default options, reading data-* attributes and event namespaces
• Store state with .data() and provide a destroy method
• Package the plugin as a module file and document how to use it
• Lab: a plugin that counts characters and warns in text fields

Section 6: Lab: Performance of jQuery Code

• Find slow spots with the Performance panel and console in Chrome DevTools
• Fast selectors, and caching selections in variables
• Reduce DOM changes by building HTML first and inserting it once
• Event delegation, debounce and throttle
• Lab: make a 5,000-row table filter and sort smoothly

Section 7: Lab: Building HTML from Data instead of jQuery Templates

• Why jQuery Templates was abandoned, and today's alternatives
• Template literals and functions that render lists from data
• The HTML template element and cloning it
• Prevent XSS with .text() and escaping data
• Lab: nested product category cards from JSON data

Section 8: Lab: Validating Forms

• Built-in HTML validation such as required, pattern and type="email"
• jQuery Validation Plugin: rules, messages and where errors appear
• Write your own rules, such as ID numbers or digits only
• Check for duplicates on the server with Ajax, and always validate again on the server
• Lab: a sign-up form that validates every field

Section 9: Lab: Uploading Files with Ajax

• FormData and sending files with $.ajax
• Single and multiple file uploads with a progress bar
• Drag-and-drop files and preview images before sending
• Check file type and size in the browser and on the server
• Lab: a multi-file attachment page with a status for each file

Section 10: Lab: Dynamic Add-Row Forms

• Add and remove rows from a template and renumber field names
• Recalculate totals as soon as a row changes
• Validate every row before saving
• Send multiple rows as JSON and receive them on the server
• Lab: a quotation form that takes any number of product lines

Section 11: Lab: Image Sliders and Lightboxes

• Image sliders with CSS scroll snap and jQuery controls
• A lightbox with the dialog element and keyboard support
• Lazy-loaded images and sizes that suit each screen
• How to choose third-party plugins that are still maintained
• Lab: a product gallery with enlarged images

Section 12: Lab: jQuery UI 1.14 in Application Pages

• Autocomplete that loads data from an API
• Sortable for reordering lists and saving the order
• Dialogs for confirmations and edit forms
• Datepicker and customising the theme to match the system
• Lab: a task ordering page with drag and drop that saves

Section 13: Lab: Connecting to REST APIs and Web Services

• CRUD over a REST API with GET, POST, PUT and DELETE
• Send headers and tokens with requests
• Paging, searching and filtering data from an API
• Handle errors, timeouts and basic CORS issues
• Lab: a customer list page that can add, edit and delete

Section 14: Security and Maintaining Existing jQuery Code

• XSS from .html() and inserting user input
• Load jQuery from a CDN with Subresource Integrity
• Check the versions and vulnerabilities of plugins in use
• Upgrade to jQuery 4 step by step with jQuery Migrate
• How to gradually replace parts with standard JavaScript

Section 15: Workshop: An Internal Data Management System

• Design the list, search and data entry pages
• Use your own plugin, add-row forms and validation
• Attach files and show upload status
• Connect to the REST API and check performance before handing in
• Present your work and how to apply it in your organisation