1. Finding Things
Start by locating the thing you need before trying to use, change, or inspect it.
find → select → use
Primer / Resources / About
Learn browser programming before the project gets complicated.
JavaScript tells the browser what should happen next.
Primer
JavaScript Is The Behaviour Layer
HTML creates the structure of a page. CSS controls how the page looks. JavaScript controls what happens when people interact with the page.
If a button responds to a click, a menu opens, a form validates data, or information updates without reloading the page, JavaScript is usually involved.
JavaScript Runs Inside The Browser
Every major browser includes a JavaScript engine. When a page loads, the browser reads the JavaScript instructions and executes them.
This allows JavaScript to react immediately to user actions and modify the page while it is being viewed.
JavaScript Works With The DOM
The Document Object Model (DOM) is the browser's representation of the page. Every heading, paragraph, image, button, form, and link becomes part of the DOM.
JavaScript can locate these elements, inspect them, modify them, remove them, or create new ones.
Finding Elements Comes First
Before JavaScript can change a page, it must first find the correct element.
Most JavaScript programs begin by locating buttons, forms, menus, messages, tables, or content areas using ids, classes, and selectors.
JavaScript Responds To Events
An event is something that happens. A button click, a key press, a mouse movement, a page load, or a form submission are all examples of events.
JavaScript often waits for events and then executes code when those events occur.
JavaScript Changes Content
JavaScript can change text, update images, hide sections, show messages, update styles, create new content, and remove content.
This allows websites to feel interactive and responsive.
JavaScript Works With Data
JavaScript can store information in variables, arrays, and objects.
It can perform calculations, make decisions, repeat work, and organize information into useful structures.
JavaScript Talks To Servers
Modern websites often need information from databases and remote systems.
JavaScript can send requests, receive responses, update pages, and work with APIs without requiring a full page reload.
JavaScript Is Used Everywhere
JavaScript powers online stores, dashboards, booking systems, CRM tools, learning platforms, social media sites, business applications, and web APIs.
It is one of the most widely used programming languages in the world.
The Goal Of This Course
The goal is not to memorize commands.
The goal is to understand how real websites work, how JavaScript controls behaviour, and how developers use it to solve practical problems.
Resources
About
About JavaScript
JavaScript is one of the most important programming languages in the world. It is the language that allows web pages to react to users, update themselves, communicate with servers, validate forms, and create modern interactive experiences.
A web page normally begins with HTML. HTML provides the structure of the page. Headings, paragraphs, buttons, forms, images, menus, and links are all described using HTML. By itself, HTML is mostly static. It tells the browser what exists, but it does not explain how the page should react when something happens.
CSS is normally added next. CSS controls appearance. It changes colors, spacing, fonts, layouts, borders, animations, and visual presentation. CSS helps a page look professional and readable, but CSS alone still does not provide much behaviour.
JavaScript provides the behaviour layer. It allows a page to react when users click buttons, type into forms, move the mouse, scroll the page, submit information, open menus, search for content, or interact with applications.
Every modern browser contains a JavaScript engine. When a page loads, the browser reads the JavaScript instructions and executes them. JavaScript can then work with the current page, respond to events, and make changes while the user is viewing it.
One of the most important ideas in JavaScript is the Document Object Model, usually called the DOM. The DOM is the browser's internal representation of the page. Every heading, paragraph, image, button, form, and link becomes part of the DOM. JavaScript can locate these elements, inspect them, modify them, remove them, or create new ones.
Most JavaScript programs begin by finding elements. Before JavaScript can change a button, it must find the button. Before JavaScript can update a message, it must find the message. Before JavaScript can validate a form, it must find the form. Finding elements is the foundation upon which almost all browser-side JavaScript is built.
JavaScript is an interpreted language. Unlike some languages that are compiled into a separate executable file before running, JavaScript instructions are processed by the browser as they are loaded. This makes JavaScript fast to develop and easy to test because changes can often be seen immediately after refreshing the page.
JavaScript is also dynamically typed. A variable does not need a fixed type declaration before it is used. The language determines data types while the program is running. This flexibility helps beginners start quickly, although it also means programmers must pay attention to how values are used.
JavaScript normally executes one task at a time. This is called single-threaded execution. Even though JavaScript processes instructions sequentially, it can still handle timers, user actions, network requests, and background activities through asynchronous programming techniques.
Events play a central role in JavaScript. An event is something that happens. Examples include a button click, a key press, a page loading, a mouse movement, a form submission, or information arriving from a server. JavaScript programs often spend most of their time waiting for events and responding when those events occur.
JavaScript can also communicate with servers. Modern websites often request new information without reloading the page. Product information, search results, customer records, weather reports, maps, dashboards, and business data are often retrieved dynamically using JavaScript.
JavaScript is used far beyond simple web pages. It powers online stores, customer relationship management systems, booking systems, learning platforms, social media sites, project management tools, reporting dashboards, and business applications.
Technologies such as Node.js allow JavaScript to run outside the browser. This means JavaScript can also be used for servers, APIs, automation systems, command line tools, scheduled jobs, and cloud services. Many organizations use JavaScript for both the front end and the back end of their applications.
Throughout this course, the focus is on practical JavaScript. You will learn how to find page elements, respond to user actions, change content, organize code, work with data, communicate with systems, and build useful solutions. The goal is not simply to memorize commands. The goal is to understand how real websites and web applications actually work.
Lecture + worksheet
Job-ready navigation practice cards
Learn navigation in order: find one thing, find the correct thing, handle first and all matches, move through parents and children, travel up, down, and sideways, then understand full tree traversal.
✓ Lesson 1 Free • No Login Required
2. Finding The Correct Thing
Learn why vague searches can grab the wrong item and how better rules narrow the target.
vague → wrong
specific → correct
specific → correct
3. First Match
Understand searches that stop at the first match, even when more matches exist later.
first match only
4. All Matches
Use all matching items when the job needs every button, link, row, card, or result.
find all → loop
5. Closest Match
Find the nearest matching parent or surrounding container from the thing you already have.
closest() → nearest
6. Parent And Child
Understand how nested structures create parent, child, and contained relationships.
parent → child
7. Going Up
Move from a selected item upward to its parent, section, wrapper, or larger container.
child → parent
8. Going Down
Move from a container downward to headings, links, buttons, fields, or smaller parts.
parent → children
9. Going Sideways
Move between nearby sibling items that share the same parent.
previous ↔ next
10. Traversing Trees
Understand nested navigation as a tree: root, branches, parents, children, and leaves.
root → branch → leaf
11. Putting It All Together
Combine finding, filtering, closest matches, parents, children, siblings, and tree traversal.
find → move → act