Learn JavaScript - For Beginners

Learn JavaScript as a client-side language that adds interactivity to web pages, with examples like character counters, form validation, and a tic-tac-toe game, noting its limitations.

Learn how to place JavaScript functions in the head, call them from the body, and use a click event to convert a person's age to dog years (age times 7).

Create an external JavaScript file, save it as a .js file, and call it in head with a script tag using src, gaining easier maintenance, caching, and faster loads.

Explore JavaScript output methods, including document.write and window.alert, as you display a simple calculation's result in the page content or a pop-up alert.

Explore how innerHTML outputs results to an HTML element using getElementById. A script computes 6 plus 3 and displays 9 in the browser, with easy updates for new results.

Learn to document JavaScript code with single-line comments using the double slash and multi-line comments with slash-asterisk to explain functions and prevent execution.

Discover how JavaScript constants hold fixed values, using 5 and 6 to show result. See how constants can be numbers or strings in quotes and how type changes affect output.

Explore javascript variables by declaring X, Y, and Z, where Z equals X plus Y; learn identifiers, numbers, strings, and simple output in the browser.

Explore how the equals sign functions as the assignment operator in JavaScript, assigning values across data types, demonstrated by attaching a number to a string.

Explore arithmetic operators in JavaScript and how they operate on numbers, constants, and variables. See examples of add, multiply, and subtract to compute outputs like 150 in the browser.

Practice division and other arithmetic operators in JavaScript by computing 100 divided by 50, then use x++ and h-- to increment and decrement values and display results in the browser.

Understand how operator precedence controls the order of computations in JavaScript arithmetic expressions, following brackets, exponents, division, multiplication, addition, and subtraction.

Discover how JavaScript variables hold data types such as numbers, strings, arrays, and objects. See examples of age (number), last name (string), cars (array), and person (object with properties).

Explore JavaScript objects by modeling a car with properties like type, model, and color, and learn to output these values using getElementById.

Learn how to output multiple properties of a JavaScript object in a single sentence, combining first name, last name, and eye color with string literals and the plus operator.

Learn how JavaScript strings store characters and use single or double quotes, including nesting quotes and handling apostrophes in sample variables like John Smith and Roy Martin.

Determine a string’s length using the built-in length property, output the length of the 26-letter alphabet by setting the innerHTML property, and preview the result in the browser.

Learn how to handle quotes inside strings in JavaScript by using the backslash escape character when a variable contains quotes, to display them correctly.

Learn how to generate random numbers in JavaScript using Math.random, output results with getElementById, and preview values between 0 and 1 in the browser.

Discover how to use Math.min and Math.max to find the lowest and highest values in a list, with practical browser-based testing that demonstrates the results.

Learn how to round numbers in JavaScript using Math.round, Math.floor, and Math.ceil with practical examples like 15.4 to 15 and 15.6 to 16.

Learn how JavaScript arrays store multiple values in a single variable using a fruits array of six items, accessed with zero-based indexing and length property to display the item count.

Output array values using the toString method and customize separators with join, demonstrating asterisk as the chosen separator and how spacing affects the result.

Watch how to modify arrays with pop, shift, push, and unshift, removing the last or first elements and adding new items to the end or beginning.

Change array elements by index to replace Apple with Kiwi and grape with Kiwi, then delete pear by index to leave an empty space, with changes visible in the browser.

Learn how to use the splice method to insert multiple items into an array at a chosen index, without removing existing elements, as shown with lemon and banana after orange.

Learn how to sort an array alphabetically using the sort method in JavaScript, then reverse the order with reverse, demonstrated with a cars array.

Join two arrays using the concat method to create a combined array from girls and boys, then display the results in the browser.

Discover how JavaScript conditional statements use if else and else if to convert a numeric score into a letter grade, with range checks and an upper bound error.

Explore how JavaScript comparison operators determine equality or difference between values, using a test script where a variable equals six and outputs true or false in the browser.

Explore how the boolean function tests values for truth, showing that numbers (including decimals and negatives) and strings evaluate to true, while zero evaluates to false, with browser output.

Learn how a for loop executes a block of code repeatedly, outputting values 0 to 10 on separate lines and incrementing by 1, with adjustable start and end values.

Iterate an object's properties with the JavaScript for-in loop and output each item, like first name, last name, and age, in a web browser.

Explore how the while loop runs code while a condition holds, outputting a 0 starting value and incrementing by 1 up to a chosen maximum, such as 20.

The do while loop, a variation of the while loop, executes the block once before testing the condition and repeats while true, as shown by a button click counter.

Explore JavaScript break and continue statements to exit or skip iterations in a for loop, demonstrating break stopping at i = 3 and continue skipping that iteration.

Learn how JavaScript functions create blocks of code that perform tasks when called, using a function myFunction with parameters A and B that returns A multiplied by B.

Explore how JavaScript events in HTML trigger code, including click, mouse over, and mouse out. See a sample button display the date and time on click.

Explore a beginner JavaScript project that randomly changes the page background color on refresh using an array of hex colors, document body style, and Math.random with Math.floor.

Build a JavaScript photo gallery with top thumbnails and a main preview image; hover a thumbnail updates the main image and activates a hover border and color style via CSS.

Create a centered page layout with a header and a preview image, then build a thumbnail gallery that changes the main image on mouseover.