Front End Web Development with open source Dojo Toolkit.

Set up a basic HTML page with UTF-8, load the dojo base via CDN or local download, and explore dojo’s DOM traversal and manipulation in the browser.

Explore how to query the dom with dojo by id or css selector, retrieve and modify nodes, and ensure the page is loaded using legacy dojo.ready or modern define/require.

Discover how to use css selectors in the dojo toolkit to retrieve nodes by id or class, returning arrays or single elements, and modify them.

Master advanced CSS selectors by locating elements by name, attributes, and type, using pattern matching and traversal. Then explore the dojo toolkit in AMD style with require, define, and data-dojo-config.

Explore how the dojo config object loads the dojo library, balancing legacy synchronous mode with async to use required and defined modules, dom ready, the exclamation mark plugin, and callbacks.

Explore dojo's query module and CSS selectors to select and retrieve DOM nodes, access the first matched node, and prepare to modify attributes and remove or add nodes in lessons.

Explore event handling with the dojo/on module, learning to listen for and dispatch events, including custom events, while achieving cross-browser consistency and managing event objects.

Explore dojo event handling with the on module by demonstrating mouseover that turns the background yellow, text updates, and click-driven hiding using display none and display block.

Explore the Dojo mouse module and dojo signals to capture and handle left and right mouse clicks, mouse enter and leave events, and mouse down, with examples showing event-specific responses.

Explore the Domstyle module for managing style properties in web pages. Learn to use get, set, and getComputedStyle to read and modify node attributes and compute current styles.

Learn to manipulate dom classes using the dojo dom and on modules, with red and green text examples. Learn to add, remove, and check classes on nodes.

Demonstrate removing a dojo event handler so subsequent mouse events no longer trigger changes, and using a once option to handle an event only one time.

This lecture demonstrates emitting standard and custom events with the Dojo on module, including bubbles and cancelable properties, and creating a grow custom event to increase font size.

Learn how to use event delegation to attach a single click handler to multiple buttons by selecting them with class or name patterns, and respond to any button click.

Pause and resume event handling with the pausable events feature, controlling a click me listener via enable and disable buttons during background work such as an ajax call.

Learn how to use Dojo DOM placement to position list items, moving elements to the top or bottom with first or last, and binding events to trigger the moves.

Move dom nodes using before, after, and replace with a reference node and zero-based positions to place them on demand at the top, bottom, or inside a list.

Learn how to create and insert new DOM nodes with dojo create, specifying type, attributes, and position relative to a reference node, and update the DOM on the fly.

Explore how to remove content and elements in the DOM using the Dojo Toolkit, contrasting empty vs destroy operations, and applying single-node and node-array destruction with class and id selectors.

Explore dojo base effects and the dojo effects module, learning base methods like show and hide and advanced options like wiping and chaining, with practical examples.

Discover the wipe and wipe out animation methods in the Dojo effects module, including auto height handling and use cases like hiding and revealing content.

Apply the Dojo slide two effect to move nodes within the DOM by specifying top and left pixel coordinates, with optional duration and easing, to create smooth slide motions.

Learn how to use the dojo animate property in a hands-on example. Shrink and grow a test element, changing width, height, and background color from green to red.

Explore using combine and chain to run multiple animation objects from the dojo affix module: combine plays animations simultaneously, while chain runs them sequentially, with full parameter support.

The lecture demonstrates dojo combine and chain effects to animate slide out and slide in with fade, compare parallel versus sequential execution, and control animation timing using duration and coordinates.

Learn Dojo animation events that run before, during, and after animation playback. Define events with the animation or separate handlers to manage begin, play, and end moments.

Explore how the Dojo toolkit enables front-end to back-end communication using ajax, rest methods (get, post, put, delete), and json data exchange with practical syntax and examples.

Explore JSON syntax, including key-value pairs, strings in double quotes, commas, and arrays, to learn accessing, modifying, and converting data with JSON.stringify and JSON.parse.

Explore how to perform an ajax get request with dojo's request module to read a local file and render its contents on a web page.

Fetch data with Ajax and dojo's request module, then parse json responses as objects. Traverse the json, including an employees array, and render details in a table.

Explore how the Dojo toolkit powers web apps with Dijit widgets, using declarative and programmatic syntax, data dojo props, and parser-driven theming for consistent, customizable user interface.

Explore dijit button widgets—from form and toggle to dropdown and split buttons—and learn their declarative and programmatic syntax, including icon class, show label, and label properties.

Learn to define digital form button widgets with declarative syntax using data dojo type and data dojo props, including a click log, and compare with a programmatic dojo toolkit approach.

Explore four digit button widgets, including toggle, dropdown, combo, and dropdown with a tooltip, and learn how toggle maintains a checked state with a checkbox icon and how tooltip appears.

Explore Dijit text box widgets in the Dojo toolkit, including basic text, text area, auto-resizing text area, validation textbox, numeric and currency inputs, spinner, and date picker, with practical examples.

Explore Dijit text box and text area widgets using declarative syntax, with onload parsing, placeholders, labels, data props, and practical examples of focus, blur, and height changes with content.

Explore the Dijit number text box and spinner widgets with min, max, decimals, and increments. Validate input with a regex-based validation box for emails and phone numbers.

Learn Dijit select widgets for single, multi, combo, and filtering selects, featuring max height controls, name/value pairs, and both declarative and programmatic syntax.

Explore building a Dijit select widget with declarative syntax and the dojo parser, configure data-dojo-type and options, and access the widget's value and display value.

Explore Dijit select widgets—multi select, combo box, and filtering select—and learn how they capture single or multiple values (comma separated) with display and hidden values.

Explore the Dijit layout widgets in the Dojo toolkit, detailing containers and bins for page layouts. Discover water container, accordion, tab, and stack containers and their collapsible pane behavior.

Explore building and styling Dojo layout widgets, including region-based panes and accordion containers, with hands-on examples of top, left, center, right, and bottom regions.

Learn how containment using the digital container organizes content bins into accordions and tabs, and how to dynamically create title panes and collapsible widgets with programmatic syntax.

Explore building a Dijit dialog with declarative syntax using the Dojo Toolkit, including data-dojo-type, title, inputs, show and hide methods, and styling to create a blocking pop-up.

Learn to use the dijit confirm dialog to present prompts with ok and cancel buttons, customizable labels, and built-in show and hide methods in both declarative and programmatic syntaxes.

Explore Dijit confirm dialog in Dojo Toolkit using declarative syntax, customize ok and cancel labels, and handle execute and cancel events with event callbacks.

Explore creating a dijit confirm dialog programmatically in dojo by declaring markup, instantiating the dialog, configuring OK and cancel buttons, and wiring submit and cancel events.

Explore how to implement dijit tooltips in the Dojo Toolkit, using declarative and programmatic syntax to display rich HTML overlays, control position, connectivity, and show/hide timing.

Learn to create and configure Dijit tooltips for buttons using declarative and programmatic syntax, covering positioning, delays, and tooltip content with the Dojo toolkit.

Demonstrate how to create ad hoc tooltips with dijit in the dojo toolkit, showing and hiding tooltips on demand for a terms and conditions checkbox when continuing.