JavaScript - Tricks and Workarounds

Learn JavaScript arithmetic operators, including plus, minus, asterisk, and slash, and see how operands produce results in simple variable examples.

Explore JavaScript arithmetic by mastering the four operators: addition, subtraction, multiplication (asterisk), and division (slash). See practical demonstrations of 12 times 12 equals 144 and division results.

Learn how the plus operator concatenates strings in JavaScript, using plus and plus-equals to join text. See how numbers become strings when combined with text.

Compare the type of operator and the instance of operator to identify data types in JavaScript, including strings, numbers, booleans, objects, arrays, and functions with practical examples.

Explore JavaScript string handling by measuring length with the length property and safely using special characters with escape sequences, quotes, and concatenation.

Learn to keep code lines within a single line by breaking long statements at operators, and use backslashes only to break strings.

Explore how indexOf and lastIndexOf locate the first and last occurrences in strings, and how substring extracts parts using start and end indices.

Explore the replace method to swap text using a regular expression and update the page content, then use uppercase and lowercase methods to transform strings.

demonstrate using the concat method to join two strings in JavaScript, as an alternative to the plus operator, by combining text one and text two with a space.

Explore how to use the Math object in JavaScript to find the min and max of a list of numbers and to generate a random number between 0 and 1.

Discover rounding in JavaScript with Math.ceil to round up and Math.floor to round down, plus using Math.random multiplied by 11 and then floored to produce whole numbers.

Explore the window object, opening and closing windows, checking status, and displaying the screen width with the screen width property, plus notes on height, color depth, and pixel depth.

Learn to use the Screen object to obtain your screen height and the available width. Update a page element with these values and account for interface elements like the taskbar.

Explore how to determine available screen height and color depth using the color property, showing a monitor with 720-pixel height and a 24-bit color depth that yields 16 million colors.

Explore pixel depth, or color depth, and how it limits monitor colors. Learn that the browser reports a 24-bit depth and its relation to the window object.

Learn to use regular expressions to search strings for patterns, locate matches, and apply data formatting with regex, including case-insensitive and global modifiers.

Demonstrates using regular expressions to split text with multiple patterns and to extract a subdomain from a url, showcasing split and substring techniques in JavaScript.

Learn how to use event listeners and event handlers in JavaScript to respond to actions, like clicks, by attaching functions to elements and exploring bubbling, capturing, and multiple event handlers.

Learn how to attach multiple event handlers to a single element using separate event listeners for click, mouseover, and mouseout, and update a paragraph's content accordingly.

Attach a resize event to the window to update a paragraph with a random number; remove the listener with removeEventListener and remove the mouse move handler on a div.

Use on click and on load event listeners to update the document object model, such as changing a paragraph text on click and signaling when an image loads.

See how onchange fires when an element's value changes, triggering a function that converts input to uppercase, and how keyup fires when a key is released to uppercase the input.

Explore onblur and onfocus events in JavaScript, wiring input elements to trigger focus and blur handlers, show alerts, and control event capture versus bubbling.

Learn to locate elements with JavaScript using getElementById and getElementsByTagName, access node lists, run a for loop, and change color and background color in a div.

Learn to locate elements by class name using the document object model in JavaScript, access them as a node list, and change the second paragraph’s background color on click.

Learn to insert items into an ordered list with the before method. Create a list node, a text node, and a new item, then insert before the first child.

Explore how to use the setAttribute method to modify element attributes such as src, width, height, and value, and update innerHTML and style with JavaScript.

Demonstrate how to manipulate element styles with JavaScript by selecting elements by id and changing properties like color and visibility using onclick events and inline scripts.

Explore how the textContent property reads and sets the textual content of a specified DOM node and all its descendants, demonstrated with a button and a paragraph in JavaScript.

Create new elements and text nodes with the DOM, then append them and remove them using appendChild and removeChild. Manipulate paragraphs and lists by id and respond to clicks.

Explore adding, removing, and replacing list items in the DOM with JavaScript, using appendChild, replaceChild, createElement, and createTextNode via on click handlers.

Learn how to create and read cookies with JavaScript by using document.cookie, setting name-value pairs, and retrieving cookies.

Learn how to create and modify cookies in JavaScript, including setting expiration with max-age. Delete cookies by setting max-age to zero and read document.cookie.

Explore ajax with javascript by creating an XMLHttpRequest to perform get and post requests, update page content asynchronously, and handle readyState and status 200 responses.

Master posting data with XMLHttpRequest by implementing POST requests, configuring content-type, and sending name/value pairs, while handling async behavior and responseText to display server responses.

learn how to use the on ready state change event with an XMLHttpRequest, implement a callback function, and build reusable ajax requests that update the page with server responses.