What Is JS?

Course 1 · Ch 1
What JS Is, Where It Runs, and the Console
The one language every browser understands natively — and the tool you'll use constantly while learning it

JavaScript is the programming language that runs inside web browsers, making pages interactive — reacting to clicks, updating content without reloading, validating a form before it's submitted. Unlike PHP (covered in the previous series), which runs on the server before a page is sent to the visitor, JavaScript typically runs directly in the visitor's own browser, on their machine.

Where JavaScript Runs

Browser (client-side)
The original, most common use — runs on the visitor's device
Node.js (server-side)
JS running on a server instead — covered in Advanced Chapter 6
Browser DevTools console
Where you'll experiment constantly throughout this course

This course focuses entirely on browser JavaScript first — exactly where most beginners start, and where the immediate, visible feedback of seeing a page react makes learning genuinely engaging.

Embedding JavaScript in HTML — Three Ways

1. Inline (avoid this, shown for completeness)
<button onclick="alert('Hello!')">Click me</button>
2. Internal — inside a <script> tag
<script> console.log("Hello from internal JS!"); </script>
3. External — a separate .js file (the standard approach)
<!-- in your HTML file --> <script src="script.js"></script> // in script.js console.log("Hello from an external file!");

External files are the standard approach in real projects — they keep HTML and JavaScript separated (mirroring how CSS is usually kept in its own file too), and the same script file can be reused across multiple HTML pages.

Where the <script> tag goes matters
A script placed in the <head> runs before the page's HTML content has loaded — trying to interact with an element that doesn't exist yet (Chapter 8's DOM manipulation) will fail. Placing <script> tags just before the closing </body> tag, or using the defer attribute, ensures the page's content exists first.

console.log() — Your Most-Used Tool

console.log("Hello, world!"); console.log(42); console.log(2 + 3);

console.log() prints a value to the browser's developer console — opened with F12 or right-click → Inspect → Console tab. It's the JavaScript equivalent of PHP's echo/var_dump() from the previous course series, and you'll use it constantly while learning and debugging.

> console.log("Hello, world!");
Hello, world!

> 2 + 3
5

> typeof "hello"
'string'

The console can also be typed into directly, like a small interactive scratchpad — typing an expression and pressing Enter immediately shows its result, without needing a full HTML page or script file at all.

Other useful console methods
console.error("message") highlights output in red, useful for genuine errors. console.warn("message") shows a yellow warning. console.table(someArray) displays array/object data in a readable table — genuinely handy once Chapter 6's arrays are introduced.

Statements and Semicolons

console.log("First statement"); console.log("Second statement");

Each instruction is a "statement," conventionally ended with a semicolon — similar to PHP. JavaScript can technically infer missing semicolons in many cases ("automatic semicolon insertion"), but this has subtle edge cases that can cause confusing bugs; this course writes semicolons explicitly throughout, which is the safer, more common professional habit.

Comments

// a single-line comment /* a multi-line comment block */ console.log("This runs"); // comments can follow code too

Coding Challenges

Challenge 1

Create an HTML file with an external script.js file linked just before the closing </body> tag. Inside script.js, use console.log() to print your name, then a simple calculation like 7 * 6, on two separate lines. Open the page and check the result in the browser console.

📄 View solution
Challenge 2

In the browser console directly (no file needed), try console.log(), console.warn(), and console.error() each with a different short message, and note in a comment what visually distinguishes each one in the console's output.

📄 View solution
Challenge 3

Write a script.js file with three console.log() statements, each preceded by a comment explaining what the line below it does (practice writing both single-line comment styles). Include at least one multi-line /* */ comment describing the whole file's purpose at the top.

📄 View solution

Chapter 1 Quick Reference

  • JavaScript runs in the browser by default (client-side) — different from PHP, which runs on the server
  • <script src="file.js"></script> — the standard way to include JS; place near the end of <body>, or use defer
  • console.log() — prints a value to the browser's DevTools console; your most-used debugging tool
  • console.error() / console.warn() — visually distinct variants for errors/warnings
  • Statements end with a semicolon — write them explicitly, despite automatic insertion existing
  • // and /* */ — single-line and multi-line comments
  • Next chapter: variables and data types — var, let, const