JavaScript
Start with one visible browser result inside the HTML and CSS site you already built, then progress through values, control flow, functions, objects, modules, the DOM, events, asynchronous work, testing, security, performance, accessibility, Node.js, storage, delivery, operations, and one complete application.
Language foundations
Objective Link one script to the existing HTML page, produce a visible result, and distinguish source, statement, expression, value, binding, and host effect.
Core explanation
JavaScript is a programming language for describing values, decisions, repeated work, reusable operations, and effects. A JavaScript source file is plain text; create app.js beside index.html and add `<script src="app.js"></script>` immediately before the closing body tag so the earlier status element already exists when the script runs. The Web browser is the runtime that parses and evaluates the language, while the browser host supplies page objects and visible capabilities. A value is one piece of data such as the text "Ada" or the number 5. An expression produces a value; `2 + 3` is an expression whose value is 5. A statement is one executable source step, and a declaration such as `const learner = "Ada";` creates a binding that associates the name learner with a value. const means that this binding cannot later be assigned a different value. A function is a callable operation; `document.querySelector("#status")` calls the querySelector function supplied by the browser document and returns the matching page element. The Document Object Model, or DOM, is the browser’s in-memory object representation of the parsed HTML. Assigning the element’s textContent property replaces its visible text without interpreting it as HTML. Save index.html and app.js, open index.html directly, and change only the number expression to prove that the script—not a console or terminal—is producing the human-visible result. Later chapters deepen every term and introduce diagnostic tools only when needed.
Add one script to the page that already works
Copy the final HTML-and-CSS course folder so the earlier project remains an unchanged baseline. In index.html add `<p id="status">JavaScript has not run.</p>` near the end of main. Immediately before `</body>`, add `<script src="app.js"></script>`. Create app.js beside index.html as a plain UTF-8 text file. The src value is a relative URL from the HTML file to the JavaScript source file, just like the stylesheet and image relationships already taught.
Enter the complete chapter program, save both files, and open index.html directly in a browser. Predict that the waiting sentence becomes “Ada has 5 lessons ready.” No terminal, console, developer-tools panel, Node.js runtime, package, build process, or server is required. If the waiting sentence remains, verify exact filename and extension, the src spelling and capitalization, the saved copies, the status id, and that the script appears after the paragraph before changing the JavaScript logic.
Trace values, expressions, statements, and bindings in order
A value is one piece of data. "Ada" is a string value, while 2, 3, and 5 are number values. An expression is source that produces a value: `2 + 3` evaluates the two operands and produces 5. A statement is one complete executable step. Each const declaration and the final textContent assignment is a statement. A semicolon marks the intended end of these statements and prevents neighboring lines from being joined ambiguously.
A binding associates a name with a value. `const learner = "Ada";` declares the learner binding and initializes it with one string. const prevents later reassignment of that binding; it does not mean every value reachable through a future object can never change. The right side is evaluated before the binding receives the result. Read the program from top to bottom and maintain a small table with columns for statement, expression, produced value, new or changed binding, and visible effect.
Separate the JavaScript language from the browser host
JavaScript defines grammar, values, expressions, declarations, calls, and assignment. A runtime parses and evaluates that language. The Web browser also acts as a host: it supplies the document object, timers, network APIs, storage, and other capabilities related to a page. Node.js is a different host introduced later. Code that performs arithmetic is language work; code that reads document is using a browser-host capability.
The Document Object Model, or DOM, is the browser’s in-memory object representation of parsed HTML. `document.querySelector("#status")` is a function call: querySelector is a callable host operation, "#status" is an argument value, and the result is either the matching element object or null. Because the script follows the paragraph, the expected element already exists. Its textContent property represents text, and assigning the template-literal result changes the visible page without parsing the learner name as markup.
Change one expression and diagnose one boundary
Change only the second operand in `2 + 3` from 3 to 4. Predict that the same learner sentence will contain 6, save app.js, and reload. Seeing exactly that change proves the script source, evaluation, selected element, template literal, and text assignment formed one working chain. Restore 3 and the original output before the failure trial.
Now change the HTML id from status to status-message without changing the selector. querySelector returns null because no element matches. The later property assignment cannot use null as an element and the visible waiting sentence remains. Restore the id. Chapter 2 introduces the browser console as an optional place to see the corresponding error, but this chapter already distinguishes the cause from its visible scope: the script loaded and evaluated earlier declarations, yet selection failed before the only intended page effect.