Web development reference

JavaScript and jQuery Tutorial

Learn JavaScript syntax and jQuery step by step with practical examples, clear explanations, and copy-ready code.

JavaScript basics

Use variables to store values, functions to reuse actions, and events to respond to user interaction.

Variables and functions

const learner = "Ada";
let lessonsCompleted = 2;

function greet(name) {
  return `Hello, ${name}!`;
}

console.log(greet(learner));

Prefer const when a binding will not be reassigned. Use let when its value needs to change. Avoid var in new code.

Conditions and loops

if (lessonsCompleted >= 2) {
  console.log("Keep going!");
} else {
  console.log("Start your first lesson.");
}

for (const topic of ["DOM", "Events"]) {
  console.log(topic);
}

Primitive values

Strings, numbers, booleans, null, and undefined represent individual values.

Collections

Arrays store ordered values, while objects group related values under named properties.

Working with the DOM

The DOM represents the page as objects. JavaScript can find an element, change its text, and listen for an interaction.

const heading = document.querySelector("h1");
heading.textContent = "Welcome to the lesson";

Syntax fundamentals

Statements commonly end with a semicolon, blocks use curly braces, and strings can use single quotes, double quotes, or backticks. Arrays hold ordered values; objects hold named properties.

const course = {
  title: "Web basics",
  topics: ["HTML", "CSS", "JavaScript"]
};

console.log(course.topics[2]); // JavaScript

Practice idea: Open your browser developer tools, select the Console tab, and run the examples one line at a time.

Basic jQuery

jQuery uses a CSS-like selector and methods to find and update elements. The CDN script in this page makes $ available after the document loads.

Document ready and events

$(function () {
  $("#saveButton").on("click", function () {
    $("#status").text("Saved!");
  });
});

Useful methods

$(selector) finds matching elements.
.text(value) safely changes text.
.addClass(name) and .removeClass(name) change styling hooks.
.on(event, handler) listens for user actions.

Chaining methods

Many jQuery methods return the selected collection, so actions can be written in a readable chain.

$(".notice")
  .addClass("visible")
  .text("Updated")
  .show();

jQuery quick reference

Most jQuery code follows a simple pattern: select one or more elements, then call a method. Selectors use the same conventions as CSS.

$("#profile").hide();
$(".card").addClass("selected");
$("button").on("click", handler);

Selectors

#menu selects an element by ID, .notice selects elements by class, and button selects every button element.

Events

Use .on() to respond to clicks, changes, key presses, and other browser events. Keep event handlers small and give them descriptive names.

Event delegation

Attach a handler to a stable parent when elements may be added later. The selector argument limits which descendants respond.

$("#list").on("click", ".remove", function () {
  $(this).closest("li").remove();
});

Tip: Test a selector in the browser console before adding it to an event handler. If it returns the expected elements, the rest of the code is easier to reason about.