JavaScript is the programming language of the web: every browser runs it, and it makes pages interactive. With Node.js it also runs on servers and your computer (see the TypeScript track for that side).
The fastest way to start is the browser console: open any page, press F12 (or Ctrl+Shift+J / Cmd+Option+J) and type 2 + 3. console.log() prints values there.
For real projects, put your code in a .js file and load it from an HTML page with <script src="app.js" defer></script>. defer runs the script after the page's HTML has loaded. Use a code editor such as VS Code, and open the page through a small local server (the Live Server extension, or npx serve).
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Hello JavaScript</title>
<script src="app.js" defer></script>
</head>
<body>
<h1 id="greeting">Hello!</h1>
</body>
</html>const name = "Dolese";
const year = new Date().getFullYear();
console.log("Script loaded");
document.querySelector("#greeting").textContent = `Hello, ${name}! Welcome to JavaScript in ${year}.`;npx serve . # open the printed address, e.g. http://localhost:3000
node hello.js # or run a plain .js file with Node.jsKey points
- The browser console (F12) is your playground and your first debugging tool.
- Load scripts with
<script src="..." defer>so the HTML exists before your code runs. - Serve pages from a local server rather than double-clicking the HTML file.
Exercise
Create index.html and app.js as above. Change the script so it also adds today's date in a second heading, and log the page title (document.title) to the console.
Show solution
Try the exercise yourself first — then compare your approach with this one.
Add an empty <h2> with an id to the page, then fill it from the script. toLocaleDateString formats today's date in a readable way, and document.title reads the text of the page's <title>.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Hello JavaScript</title>
<script src="app.js" defer></script>
</head>
<body>
<h1 id="greeting">Hello!</h1>
<h2 id="today"></h2>
</body>
</html>const name = "Dolese";
const today = new Date();
document.querySelector("#greeting").textContent = `Hello, ${name}!`;
document.querySelector("#today").textContent = `Today is ${today.toLocaleDateString("en-GB", {
weekday: "long",
day: "numeric",
month: "long",
year: "numeric",
})}`;
console.log("Page title:", document.title); // Page title: Hello JavaScript