javascript

1.3 Where to Write JavaScript

Learn all the places you can write and run JavaScript — inside HTML files, in external files, in the browser console, in online editors, and in Node.js. A complete beginner's guide.

13 min read 9 sections Tutorial

Where to Write JavaScript

Before you can write JavaScript code, you need to know where to put it. JavaScript is a very flexible language — you can run it in many different places.

When you are a beginner, the most common places are:

Inside an HTML file (in a <script> tag)
In a separate .js file linked to your HTML
In your browser's built-in console
In an online code editor
On your computer using Node.js

This section covers all of them. You will learn which method to use, when to use it, and why.

JavaScript runs everywhere

JavaScript was originally only for web browsers. Today it runs on servers (Node.js), mobile apps (React Native), desktop apps (Electron), and even on tiny devices (IoT). But for learning, you will start in the browser — it is already installed on every computer and phone.

Inline in HTML

Write <script> inside your HTML file. Good for quick tests. Not for real projects.

External .js File

Keep JavaScript in a separate .js file and link it. This is the professional way.

Browser Console

Run JavaScript directly in your browser's DevTools. Perfect for experimenting.

Online Editors

Platforms like CodePen and JSFiddle let you write and share JavaScript in your browser.

Node.js

Run JavaScript on your computer without a browser. Used for servers and tools.

Inline JavaScript in HTML

Method 1 — Inline JavaScript in HTML

The simplest way to add JavaScript to a web page is to write it directly inside a <script> tag in your HTML file. The browser reads the HTML and runs any JavaScript it finds inside <script> tags.

You can put a <script> tag almost anywhere in your HTML, but the best practice is to put it just before the closing </body> tag. This way the browser loads all the HTML first, and then runs your JavaScript.

htmlJavaScript inside an HTML file

1<!DOCTYPE html>
2<html lang="en">
3<head>
4  <meta charset="UTF-8">
5  <title>My First JavaScript</title>
6</head>
7<body>
8
9  <h1>Hello World</h1>
10  <p id="output">This text will change.</p>
11
12  <!-- ✅ Put your script just before </body> -->
13  <script>
14    // This is JavaScript inside an HTML file
15    const message = 'JavaScript is running!';
16    console.log(message);
17
18    // Change the text on the page
19    document.getElementById('output').textContent = message;
20
21    // Show an alert
22    // alert('Hello from JavaScript!');
23  </script>
24
25</body>
26</html>

Do not put script in the <head> without defer

If you put a <script> in the <head>, the browser will try to run the JavaScript before the page elements exist. Your code will fail because the elements it is trying to find are not loaded yet.

Either:

Put your <script> just before </body> (simplest), or
Add defer to a script in <head>: <script defer src="app.js">

defer tells the browser: download the script now, but run it after the HTML is loaded.

Pro Tips

1Good for: quick tests, learning, small single-page projects.
2Bad for: real projects — mixing HTML and JavaScript in one file gets messy very quickly.
3Always put <script> just before </body> to make sure HTML is ready before JS runs.

External JavaScript Files

Method 2 — External JavaScript Files

The professional way to write JavaScript is to keep it in a separate .js file and link it to your HTML using a <script src="..."> tag.

This keeps your code organised. HTML stays in .html files. JavaScript stays in .js files. They are separate but work together. This is how every real website is built.

htmlHTML file — links to an external JS file

1<!DOCTYPE html>
2<html lang="en">
3<head>
4  <meta charset="UTF-8">
5  <title>External JS Example</title>
6
7  <!-- Link to external JS file with defer -->
8  <!-- defer = load in background, run after HTML is ready -->
9  <script defer src="app.js"></script>
10</head>
11<body>
12
13  <h1 id="title">Welcome</h1>
14  <button id="btn">Click Me</button>
15  <p id="result"></p>
16
17</body>
18</html>

javascriptapp.js — your JavaScript file

1// app.js — this is your separate JavaScript file
2
3// Get elements from the HTML page
4const title  = document.getElementById('title');
5const button = document.getElementById('btn');
6const result = document.getElementById('result');
7
8// Change the title text
9title.textContent = 'Hello from app.js!';
10
11// React to a button click
12let clickCount = 0;
13button.addEventListener('click', function() {
14  clickCount++;
15  result.textContent = 'Button clicked ' + clickCount + ' times.';
16});
17
18console.log('app.js loaded and running!');

Your project folder looks like this:

my-project/
├── index.html       ← your HTML file
├── app.js           ← your JavaScript file
└── style.css        ← your CSS file (optional)

This is the standard folder structure for a simple web project. As your project grows, you will add more .js files and organise them into folders.

Pro Tips

1Good for: all real projects — websites, web apps, anything beyond a single test.
2Use defer on the <script> tag in <head> so the HTML loads first.
3Name your file clearly: app.js, main.js, or something that describes what it does.
4One JavaScript file per responsibility — auth.js for login, cart.js for shopping cart, etc.

Browser Console

Method 3 — The Browser Console

Every modern browser has a built-in Developer Tools panel. Inside DevTools, there is a Console tab where you can type and run JavaScript immediately — no HTML file needed.

The console is like a playground. You type code, press Enter, and it runs instantly. The result appears right below your code. This is perfect for experimenting and testing small ideas quickly.

javascriptThings you can do in the browser console

1// Try these in your browser console (F12 → Console tab)
2
3// Basic math
4console.log(2 + 2);        // 4
5console.log(10 * 5);       // 50
6console.log(100 / 4);      // 25
7
8// String operations
9console.log('Hello' + ' ' + 'World');    // 'Hello World'
10console.log('JavaScript'.length);         // 10
11console.log('hello'.toUpperCase());       // 'HELLO'
12
13// Variables
14const name = 'Alice';
15const age  = 25;
16console.log(`${name} is ${age} years old.`);
17
18// Arrays
19const fruits = ['apple', 'banana', 'cherry'];
20console.log(fruits);
21console.log(fruits.length);  // 3
22console.log(fruits[0]);      // 'apple'
23
24// Objects
25const user = { name: 'Bob', role: 'admin' };
26console.log(user);
27console.log(user.name);  // 'Bob'
28
29// Quick calculations
30const price = 1500;
31const tax   = price * 0.18;
32console.log('Tax:', tax, '| Total:', price + tax);

Pro Tips

1Good for: testing ideas quickly, debugging, learning new features.
2Bad for: building actual projects — code typed here disappears when you refresh.
3Open the console on any website and run document.title to see the page title.
4The console remembers your last commands — press the Up arrow key to reuse them.

Online Code Editors

Method 4 — Online Code Editors

Online code editors are websites where you can write HTML, CSS, and JavaScript in your browser and see the result instantly — no setup needed. They are perfect when you are starting out because you do not need to install anything.

They are also great for sharing code with others — you just send a link.

Platform	Best For	URL
CodePen	HTML + CSS + JavaScript, sharing UI demos	codepen.io
JSFiddle	Quick JavaScript tests, sharing snippets	jsfiddle.net
StackBlitz	Full React/Vue/Node.js projects in browser	stackblitz.com
CodeSandbox	Full project environments with npm packages	codesandbox.io
Replit	Any language — great for Node.js and backend	replit.com
PlayCode	Fast live preview, easy for beginners	playcode.io
ChilluCoder Compiler	Practice JavaScript with instant output	chillucoder.com/compilers/javascript

Use the ChilluCoder compiler to practice

Every code example on this website has a Try It button. Click it to open the code in our built-in JavaScript compiler. You can edit the code and run it instantly without leaving the page.

This is the fastest way to practice as you learn each concept.

Pro Tips

1Good for: learning, experimenting, creating demos, sharing code with others.
2Bad for: large projects — they work offline and have limited file management.
3No account needed to start — just open the site and write code.
4Save your work by creating a free account on CodePen or StackBlitz.

Node.js

Method 5 — Node.js (JavaScript on Your Computer)

Node.js lets you run JavaScript files directly on your computer, without a browser. You write .js files, open your terminal, and run them with the node command.

Node.js is used to build web servers, command-line tools, APIs, and automation scripts. It is also used to run build tools like npm, Webpack, and Vite — tools that almost every modern web project depends on.

javascriptRunning JavaScript with Node.js

1// Save this as: hello.js
2// Then run: node hello.js
3
4console.log('Hello from Node.js!');
5console.log('Node version:', process.version);
6
7// Read command-line arguments
8const args = process.argv.slice(2);
9if (args.length > 0) {
10  console.log('You passed:', args);
11} else {
12  console.log('No arguments passed.');
13}
14
15// Node.js has built-in modules — like fs for file system
16const os = require('os');  // or: import os from 'os';
17console.log('Your OS:', os.platform());
18console.log('Total RAM:', Math.round(os.totalmem() / 1024 / 1024 / 1024) + ' GB');
19
20// Math and logic work the same as in the browser
21const numbers = [1, 2, 3, 4, 5];
22const sum = numbers.reduce((a, b) => a + b, 0);
23console.log('Sum:', sum);  // 15

javascriptHow to install and use Node.js

1// Step 1: Download Node.js from https://nodejs.org
2// Choose the LTS (Long Term Support) version — most stable
3
4// Step 2: Verify installation in your terminal:
5// node --version      → v20.x.x
6// npm --version       → 10.x.x
7
8// Step 3: Create a file called hello.js
9// Write your JavaScript code inside it
10
11// Step 4: Run it in the terminal:
12// node hello.js
13
14// Step 5: Use npm to install packages
15// npm install express
16// npm install lodash
17// npm install dotenv
18
19// Step 6: Use require() or import to use them
20// const express = require('express');
21// import express from 'express';
22
23// That's it! You are now running JavaScript on your computer.

Pro Tips

1Good for: building servers, APIs, command-line tools, running build tools (Webpack, Vite).
2Download Node.js from nodejs.org — choose the LTS version.
3After installing, test it: open your terminal and type node --version.
4Node.js does not have document or window — those are browser-only.
5npm comes with Node.js — use it to install packages like React, Express, and more.

Which Method Should You Use?

Each method has a purpose. Here is a simple guide for when to use each one.

Situation	Best Method
I am a complete beginner just starting out	Online editor (CodePen) or ChilluCoder compiler
I want to test one quick idea	Browser console (F12)
I am building a simple webpage	Inline script or external .js file
I am building a real website or web app	External .js file (or a framework like React)
I want to build a server or API	Node.js with Express
I want to run a script on my computer	Node.js
I want to share code with someone easily	CodePen, StackBlitz, or CodeSandbox
I am following this tutorial	ChilluCoder compiler — Try It button on each example

Start simple — grow as you learn

If you are a beginner, start with the browser console or an online editor. No setup needed — just start writing code.

Once you are comfortable with the basics, set up a proper project with HTML + external .js files. Then, when you are ready to go further, install Node.js and explore building servers and tools.

Do not try to learn everything at once. Focus on writing JavaScript first.

Test Your Knowledge

Quick Check

What is the professional way to add JavaScript to a website?

Quick Check

Why should you put your <script> tag just before </body> (or use defer)?

Quick Check

What is the browser console best used for?

Quick Check

What does Node.js allow you to do?

Quick Check

Which of these features exists in Node.js but NOT in the browser?

Quick Reference

Where to Write JavaScript — Quick Reference

Pro Tips

1Inline <script> — JavaScript inside your HTML file. Good for learning, bad for real projects.
2External .js file — the professional way. Link it with <script src="app.js"> and use defer.
3Browser console — open with F12. Perfect for quick tests and debugging. Code disappears on refresh.
4Online editors — CodePen, StackBlitz, CodeSandbox. No setup needed. Great for sharing.
5Node.js — runs JavaScript on your computer. Used for servers, APIs, and build tools.
6Always use defer when linking scripts in the <head> — it ensures HTML loads before your script runs.
7The JavaScript language is the same everywhere — only the built-in tools differ (browser vs Node.js).
8As a beginner: start with an online editor or the browser console. No setup needed.

Next — Dive Deeper

Inline JavaScript

Deep dive into writing JavaScript inside HTML files — script tags, placement, and inline events.

External JS Files

How to organise your project with separate JavaScript files and link them correctly.

Browser Console

Master the browser DevTools console — run code, debug errors, and inspect values.

Node.js Environment

Set up Node.js, run JavaScript files, and use npm to install packages.

You know where to write JavaScript!

You now know all five ways to write and run JavaScript — inline HTML, external files, browser console, online editors, and Node.js. For this tutorial, use the Try It button on every code example to practice right here on the page. When you are ready to build your first real project, use an external .js file linked to your HTML.

Try it in the Javascript Compiler

Run and experiment with Javascript code right in your browser — no setup needed.

Open Javascript Compiler

Continue Learning

Previous Next