Web Development by Doing: Javascript

Learn how conditional statements drive JavaScript logic with if statements that compare booleans and numbers, and apply this to checkboxes and simple alerts like subscribe.

Explore conditional statements in JavaScript by using less than, greater than, and equals operators; compare single, double, and triple equals, and implement if, else, and else if with practical examples.

Learn how switch case statements provide a clean alternative to if statements for handling specific values like man, woman, dog, or cat, including a default case.

Explore how the onload event runs a function after the body loads, enabling access to elements with document.getElementById and producing a real-time time display with new Date and getTime.

Manipulate the document object model to greet visitors and show date by selecting a paragraph by id, using innerHTML, and converting the zero-based month to a name with a switch.

Learn to display open or closed status for a brick‑and‑mortar store using JavaScript by checking the day (0–6) and hour (0–23), then update a #today element and style it.

learn how to style text with javascript by reading a color from user input and applying it to a paragraph, and by adjusting font size using style properties in camelCase.

Explore how arrays hold multiple values, create arrays with new Array(), and access elements by zero-based index, plus selecting multiple inputs with getElementsByTagName in the DOM.

Add two buttons to increase or decrease font size, toggling visibility and updating the body font size. Learn selecting elements by tag name and applying simple CSS selectors.

Explore responsive absolute positioning by building a wrapper with relative positioning, an absolutely positioned image outside the wrapper, and JavaScript that adjusts the layout on window load and resize.

Learn advanced form handling with JavaScript, validating email, password length, and password match on focus and blur, and toggle input visibility using DOM methods.

Build a centered lightbox for newsletter signup, positioned with absolute centering, toggled by display block/none, auto-opening after a five-second delay using setTimeout, and optionally integrates a mailchimp form.

Create a semitransparent mask overlay with an empty div, sized to the window to cover the page, using z-index and absolute positioning to reveal a centered popup box.

Learn to retrieve any element attribute in the document using getAttribute, manage multiple attributes with arrays, and display results via alerts, focusing on the image's source and title attributes.

Learn how to use the substring method to trim text and dynamically set attributes, such as alt text, by manipulating element content and string length in JavaScript.

Learn to toggle a thumbnail with its full-size image using JavaScript by swapping the image source with getElementById and setAttribute, and build toward dynamic image naming conventions.

Learn to swap images using substring and length calculations, manage source variables, and distinguish local versus global scope for reliable thumbnail and full-size image toggles.

Explore JavaScript loops, including while, do-while, and for loops, to iterate arrays and values, evaluate conditions, and increment or decrement counters with document.write outputs.

Build a working image gallery by clicking thumbnails to swap the main featured image using class names, get elements by class name, and a for loop in JavaScript.

Learn to display image captions by reading each image's alt text and updating a caption paragraph when images are swapped, using a caption element with an id and document.getElementById.

Learn how to create an external javascript file with a .js extension, link it to an HTML document using a script tag with a src path, and manage relative paths.

Learn to optimize site speed with Page Speed Insights by eliminating render-blocking javascript and CSS for above-the-fold content, and place nonessential scripts after load.