Introduction to JavaScript

Previous Lesson

Lesson 5: Embedding JavaScript in Web Pages

Introduction to JavaScript Lesson 5: Embedding JavaScript in Web Pages

Learning Objectives

By the end of this lesson, learners will:

  • Know how to add JavaScript code to a webpage using HTML
  • Understand the three main ways to embed JavaScript:
    1. Inline
    2. Internal
    3. External
  • Learn which method is best and why
  • Be able to write small interactive elements using each method

Why Embed JavaScript in HTML?

Web browsers don’t magically know what JavaScript code to run. You need to embed your JavaScript into your HTML pages so that the browser knows:

  • There is JavaScript
  • When to run it
  • Where to find it

This is done using the <script> tag.

Method 1: Inline JavaScript

Description:

You place JavaScript directly inside an HTML tag’s attribute, such as onclick, onmouseover, etc.

Example:

<button onclick="alert('Button clicked!')">Click me</button>

✅ Pros:

  • Simple for tiny, quick actions

❌ Cons:

  • Bad for complex logic
  • Hard to maintain
  • Mixes HTML and JavaScript (not clean)

Method 2: Internal JavaScript

Description:

JavaScript is written inside a <script> tag within the HTML file — usually placed in the <head> or before the closing </body>.

Example:

<!DOCTYPE html>
<html>
<head>
  <title>Internal JS</title>
</head>
<body>
  <h1>Welcome to Codevisionz</h1>

  <script>
    console.log("Hello from internal JavaScript!");
    alert("Page loaded successfully!");
  </script>
</body>
</html>

✅ Pros:

  • Great for small projects or quick testing
  • Everything is in one file

❌ Cons:

  • Can clutter HTML as your code grows
  • Harder to reuse code across pages

Method 3: External JavaScript

Description:

JavaScript code is stored in a separate .js file, and the HTML file links to it using the src attribute of the <script> tag.

Example:

HTML File (index.html):

<!DOCTYPE html>
<html>
<head>
  <title>External JS</title>
</head>
<body>
  <h1>External JavaScript Demo</h1>

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

JavaScript File (script.js):

console.log("Hello from script.js!");
alert("External JavaScript is working!");

✅ Pros:

  • Keeps HTML clean
  • Easier to maintain large codebases
  • Reuse code across multiple pages
  • Encourages best practices

❌ Cons:

  • Requires extra files
  • Slightly more setup (but worth it!)

Placement Tips for <script>

  • At the bottom of <body> (recommended):
    Ensures the page’s content loads before the JavaScript runs.
<body>
  <!-- content here -->
  <script src="script.js"></script>
</body>
  • In the <head> with defer:
    Loads the script while parsing HTML, then runs it after the page is loaded.
<head>
  <script src="script.js" defer></script>
</head>

Summary Table

MethodWhereUse CaseRecommended?
InlineInside HTML tagTiny snippets❌ No
InternalInside <script> tagSmall apps, testing⚠️ Sometimes
ExternalIn .js file linked via srcReal apps✅ Yes

Practice Activity

Create two files in the same folder:

index.html

<!DOCTYPE html>
<html>
<head>
  <title>Practice Script</title>
</head>
<body>
  <h1>Welcome!</h1>
  <script src="main.js"></script>
</body>
</html>

main.js

alert("Hello from your external file!");

✅ Open the HTML file in your browser — you should see the alert!

Previous Lesson
Back to Tutorial