1.3 Module 1 · Operators, Methods & Keywords

Internal vs External Scripts

Understand the two ways to include JavaScript in a web page and learn when to use each approach for clean, scalable projects.

Definition

Internal JavaScript — code written directly inside the HTML file using <script> tags. Everything lives in one file.

External JavaScript — code written in a separate .js file and linked to the HTML using the src attribute. The logic lives outside the HTML, keeping each file focused on one responsibility.

Simple Way

Think of it like note-taking:

Internal → Writing notes inside your notebook — quick, but messy for large projects

External → Writing notes in a separate book and referring to it — cleaner and reusable

Code Examples

Example 1 — Internal JavaScript (Live Preview)

<!DOCTYPE html>
<html>
<head><title>Internal JS</title></head>
<body style="font-family:sans-serif;padding:16px">

  <h2 id="text"></h2>

  <script>
    document.getElementById("text").innerText = "Hello from Internal JS";
  </script>

</body>
</html>

Live Preview

Explanation

JavaScript sits inside the <script> tag within the HTML file
Runs directly — no extra files needed
Fine for small demos; becomes hard to manage in real projects

Example 2 — External JavaScript

Step 1 — script.js

// script.js
document.getElementById("text").innerText = "Hello from External JS";

Step 2 — index.html

<!DOCTYPE html>
<html>
<head><title>External JS</title></head>
<body>

  <h2 id="text"></h2>

  <script src="script.js"></script>

</body>
</html>

Explanation

JS logic lives in script.js — the HTML stays clean
The src attribute tells the browser where to find the file
The same script.js can be linked by multiple HTML pages

Example 3 — Script Placement (Important)

<body>

  <h2 id="text"></h2>

  <!-- Script at the BOTTOM of body -->
  <script>
    document.getElementById("text").innerText = "Works fine";
  </script>

</body>

Why place the script at the bottom?

The browser reads HTML top-to-bottom — elements must exist before JS can target them
Placing <script> at the bottom ensures the HTML loads first
Prevents null errors from targeting elements that don't exist yet

Real-Life Example

Imagine building a project:

📄

Small project → one file is fine (internal JS)

🗂️

Big project → separate files for HTML, CSS, JS

♻️

External JS can be shared across many HTML pages

👥

Teams work on separate files without conflicts

HTML + CSS + JS Example

In a real project these would be three separate files. Below they are shown individually, then combined into a live preview so you can see the result.

index.html

<!DOCTYPE html>
<html>
<head>
  <title>External JS Demo</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>

  <h1 id="heading">Welcome</h1>
  <button onclick="changeText()">Click Me</button>

  <script src="script.js"></script>

</body>
</html>

style.css

body {
  font-family: Arial, sans-serif;
  text-align: center;
  margin-top: 50px;
}

button {
  padding: 10px 20px;
  cursor: pointer;
  font-size: 1rem;
}

script.js

function changeText() {
  document.getElementById("heading").innerText = "Text Changed!";
}

Combined — Live in Browser

<!DOCTYPE html>
<html>
<head>
  <style>
    body { font-family: Arial, sans-serif; text-align: center; margin-top: 50px; }
    button { padding: 10px 20px; cursor: pointer; font-size: 1rem; }
  </style>
</head>
<body>

  <h1 id="heading">Welcome</h1>
  <button onclick="changeText()">Click Me</button>

  <script>
    function changeText() {
      document.getElementById("heading").innerText = "Text Changed!";
    }
  </script>

</body>
</html>

Live Preview

Tasks (Practice)

Easy Task 1 — Internal JS heading

Starter code

<h2 id="title"></h2>

<script>
  // your code here
</script>

Use document.getElementById("title") to select the heading
Set its innerText to "My First Page" using internal JS

Medium Task 2 — Background color button (External JS)

Files to create

<!-- index.html -->
<button onclick="changeBackground()">Change Color</button>
<script src="script.js"></script>

Create index.html with a button linked to script.js
In script.js, write a changeBackground() function
The function should set document.body.style.background to any color

MCQs

Where is internal JavaScript written?

A In a .js file
B Inside the HTML <script> tag
C In a CSS file
D In a database

💡 B is correct. Internal JS is written directly inside <script></script> tags within the HTML file.

How do you correctly link an external JS file?

A <script link="file.js">
B <script src="file.js"></script>
C <js file="file.js">
D <script href="file.js">

💡 B is correct. The src attribute points to the external file path. link and href are not valid for <script> tags.

Why is external JavaScript preferred in large projects?

A Faster execution speed
B Cleaner code and reusability across pages
C Required by the browser
D No particular reason

💡 B is correct. A single .js file can be linked to multiple HTML pages, and keeping logic separate makes maintenance and team collaboration much easier.

Pro Tips & Extra Knowledge

01

Always place <script> at the end of <body> — this ensures all HTML elements exist before JS tries to access them.
02
Use the defer attribute for even better performance — the script downloads in parallel but executes only after the HTML is fully parsed:
defer attribute
```
<script src="script.js" defer></script>
```

External JS enables three major benefits in professional projects:

Why external JS matters

// Reusability   — one script.js linked by 10 pages
// Maintenance   — fix a bug in one place, fixed everywhere
// Collaboration — designers touch HTML, devs touch JS

Avoid inline event handlers like onclick="..." in HTML — they mix behavior with structure. Prefer event listeners in your JS file (covered later):

Avoid inline JS

<!-- Avoid this -->
<button onclick="doSomething()">Click</button>

<!-- Prefer this (in your .js file) -->
<!-- button.addEventListener('click', doSomething); -->

Mini Challenge

Will this code work? Predict what happens before revealing the answer.

What happens here?

<head>
  <script>
    document.getElementById("demo").innerText = "Hello";
  </script>
</head>

<body>
  <h2 id="demo"></h2>
</body>

Why It Fails & How to Fix It

// It will NOT work.

// The script runs inside <head> — before the browser has
// created the <h2 id="demo"> element in <body>.
// Result: getElementById("demo") returns null → TypeError.

// Fix 1 — move the script to the bottom of <body>:
//
//   <body>
//     <h2 id="demo"></h2>
//     <script>
//       document.getElementById("demo").innerText = "Hello"; // works
//     </script>
//   </body>

// Fix 2 — keep it in <head> but use defer:
//
//   <script src="script.js" defer></script>
// defer waits for the full HTML to load before executing.

1.2 Best Practices 1.4 Next Topic