Loading lesson path
JavaScript
Learn how JavaScript talks to the page, the browser, forms, and user interaction.
The HTML DOM
Application Programming Interface The DOM API (Application Programming Interface) is a set of Methods and Properties that allow JavaScript to change the content, structure, and style of any HTML elem…
Finding HTML Elements Often, with JavaScript, you want to manipulate HTML elements. To do so, you have to find the elements first. There are several ways to do this: Finding HTML elements by id Findi…
Changing HTML Content The HTML DOM allows JavaScript to change both the text and the content of HTML elements. The easiest way to modify the content is by using the innerHTML property: document.getEl…
HTML DOM - Changing CSS
JavaScript Form Validation HTML form validation can be done by JavaScript. If a form field (fname) is empty, this function alerts a message, and returns false, to prevent the form from being submitte…
HTML DOM Animation
Document Properties and Methods Revised January 2026 Name Description activeElement Returns the currently focused element in the document addEventListener() Attaches an event handler to the document…
Element Properties and Methods Revised January 2026 Name Description accessKey Sets or returns the accesskey attribute of an element addEventListener() Attaches an event handler to an element after()…
HTML Events HTML events are things that happen to HTML elements. Examples of events: An HTML button is clicked A web page has finished loading The mouse moves over an element A keyboard key is presse…
JavaScript Mouse Events
Keyboard Events happen when the user presses a key on the keyboard: keydown (key is pressed down) keyup (key is released) keypress (deprecated) keypress only fires for character keys (a or 5), not fo…
Load Events happen when the browser has finished loading an element. The two most important load events: DOMContentLoaded (when HTML is ready) load (waits for pages, images, CSS, etc.) DOMContentLoad…
Timing Events let you run code: After a Delay Or Repeatedly Timing is driven by Timing Events generated by the system clock. Timer Fuctions Function Description setTimeout() Sets a clock timeout (run…
Event Management is about adding, removing, and controlling events. Adding Events Example <button id="btn">Click</button> <p id="demo"></p> <script> const btn = document.getElementById("btn"); // Let…
Reacting to Events A JavaScript can be executed when an event occurs, like when a user clicks on an HTML element. To execute code when a user clicks on an element, add JavaScript code to an HTML even…
The addEventListener() method Example Add an event listener that fires when a user clicks a button: document.getElementById("myBtn").addEventListener("click", displayDate); The addEventListener() met…