How to Add JavaScript to a Web Page

To add JavaScript to a web page, you use the <script> tag, either with code written inside it or with a link to an external .js file. You will also learn to use the browser console.

Inline JavaScript with the script tag

The simplest way to add JavaScript to an HTML page is to write it directly inside a <script> tag. This is called inline JavaScript (or an "internal script").

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Welcome Page</title>
</head>
<body>
  <h1 id="title">Welcome!</h1>

  <script>
    const title = document.querySelector('#title');
    title.textContent = 'Welcome to my website!';
    console.log('The script has run.');
  </script>
</body>
</html>

When you open this page, the heading shows "Welcome to my website!" instead of "Welcome!". That happens because the script runs as the page loads. Line by line:

• document.querySelector('#title') finds the element with the id title.
• title.textContent = ... replaces its text.
• console.log(...) writes a message in the browser console. You won't see it on the page itself.

Inline scripts are handy for quick tests. For real projects, an external file is better.

How to link an external JavaScript file

An external script is JavaScript saved in its own file, usually with the .js extension. You connect it to the HTML page with the src attribute, just like you link a CSS file with <link>.

Create two files in the same folder.

index.html:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Welcome Page</title>
  <script src="script.js" defer></script>
</head>
<body>
  <h1 id="title">Welcome!</h1>
  <p id="message"></p>
</body>
</html>

script.js:

const message = document.querySelector('#message');
message.textContent = 'This text was added by script.js';
console.log('script.js is connected!');
// Output: script.js is connected!

Open index.html in the browser. Under the heading you will see "This text was added by script.js". Notice that the .js file contains only JavaScript, with no <script> tags inside it.

External files have big advantages:

• Your HTML stays clean and easy to read.
• Many pages can share the same script.js file.
• The browser can save (cache) the file, so pages load faster next time.

Common mistake: Writing <script src="script.js" /> or putting code inside a <script> that also has src. A script tag always needs a closing </script> tag, and if it has src, any code written between the tags is ignored.

Where to put the script tag: head, body and defer

The browser reads an HTML page from top to bottom. A normal script runs the moment the browser reaches it. If your script tries to find an element that the browser has not read yet, it can't find it, and you get an error.

There are two good ways to avoid this problem:

1. Put the script at the end of the body, just before </body>. By then, all the HTML above it has been read. This is what the inline example above does.
2. Put the script in the head with defer. The defer attribute tells the browser: "Download this file now, but run it only after the whole page has been read." This is the modern recommended way for external scripts.

Placement	When the code runs	Good for
<script> in the head (no defer)	Immediately, before the body exists	Rarely needed
<script> at the end of the body	After the HTML above it is read	Inline scripts
<script src="..." defer> in the head	After the whole page is read	External files (recommended)

Note: defer only works on external scripts that use src. It has no effect on inline scripts. You may also see type="module" on script tags; module scripts are deferred automatically. You'll learn about modules later in the course.

How to open the browser console (DevTools)

Every modern browser has Developer Tools (DevTools for short): a built-in toolbox for web developers. One of its panels is the console. The console shows messages from your code, shows errors, and lets you type JavaScript and run it right away.

To open the console:

• Chrome, Edge: press F12 or Ctrl + Shift + J (Windows/Linux), or Cmd + Option + J (Mac).
• Firefox: press F12 or Ctrl + Shift + K (Windows/Linux), or Cmd + Option + K (Mac).
• Safari: first turn on "Show features for web developers" in Settings, then press Cmd + Option + C.
• Any browser: right-click the page, choose Inspect, then click the Console tab.

Running JavaScript code in the console

The console is like a calculator for JavaScript. Click inside it, type a line of code, and press Enter. The console runs it and shows the result on the next line. Try these, one at a time:

2 + 3
// Output: 5

'Hello' + ' ' + 'world'
// Output: 'Hello world'

document.title
// Output: the title of the page you have open, for example 'Welcome Page'

You don't even need your own page: you can open the console on any website and experiment. Nothing you type there is saved, so you can't break anything. Reload the page and everything is back to normal.

Tip: To write several lines in the console without running them, press Shift + Enter for a new line. Press Enter alone when you are ready to run the code. The up arrow key brings back the last thing you typed.

Practice exercise

Create a folder with index.html and script.js. Link the script in the <head> with defer. In the HTML, add an empty paragraph with the id today. In script.js, write code that puts the text "I am learning JavaScript!" inside that paragraph and logs "Done" to the console. Open the page and check both the page and the console.

Hint: copy the external script example and change the id and the text. If nothing happens, check the console for a red error message and make sure the file name in src matches exactly.

Key takeaways

• JavaScript goes inside a <script> tag, either inline or as an external file with src.
• External .js files keep your code organized and can be shared between pages.
• Put external scripts in the <head> with defer, or put scripts at the end of the <body>.
• Open the console with F12 or by right-clicking and choosing Inspect.
• You can type and run JavaScript directly in the console to test ideas.