JavaScript Definition & Linking to HTML

What is JavaScript?

JavaScript is a programming language used to make web pages interactive.

It runs directly inside the web browser (Chrome, Firefox, etc.) without needing any installation.

It was created in 1995 to make websites more dynamic, and today it has become one of the most widely used languages in the world.

With JavaScript, you can:

Respond to user actions (clicks, typing, scrolling)
Change the content of a page without reloading
Create animations, menus, sliders, popups
Communicate with servers to load data
Build full web apps (like Gmail, Instagram, or Spotify Web)

JavaScript is now used everywhere: front-end, back-end (Node.js), mobile apps, desktop apps, and even games.

In simple terms:

➡️ HTML builds the page
➡️ CSS styles it
➡️ JavaScript brings it to life

📌 How to Add JavaScript to HTML

Before we start writing JavaScript, we need to connect our .js file to our .html file.

Here are the main methods:

Method 1: Script tag at the bottom of `<body>` (Recommended)

This is the most common method. Place the <script> tag just before the closing </body> tag.

<!DOCTYPE html>
<html>
<head>
  <title>My Page</title>
</head>
<body>
  <h1>Hello World</h1>
  <button id="myButton">Click me</button>

  <!-- Link to external JS file -->
  <script src="script.js"></script>
</body>
</html>

Why at the bottom? Because the browser reads HTML from top to bottom. If we put the script at the top, JavaScript will try to access HTML elements that haven't been loaded yet.

Method 2: Script tag in `<head>` with defer attribute

The defer attribute tells the browser to load the JavaScript file but wait until the HTML is fully loaded before executing it.

<!DOCTYPE html>
<html>
<head>
  <title>My Page</title>
  <script src="script.js" defer></script>
</head>
<body>
  <h1>Hello World</h1>
  <button id="myButton">Click me</button>
</body>
</html>

Advantage: Keeps your <head> section organized and the script loads in parallel with the HTML.

Method 3: Inline script (Not recommended for large code)

You can write JavaScript directly inside HTML using <script> tags without a src attribute.

<!DOCTYPE html>
<html>
<head>
  <title>My Page</title>
</head>
<body>
  <h1>Hello World</h1>
  <button id="myButton">Click me</button>

  <script>
    // JavaScript code directly here
    const button = document.querySelector("#myButton");
    button.addEventListener("click", () => {
      alert("Button clicked!");
    });
  </script>
</body>
</html>

Note: This method is fine for small scripts or testing, but for real projects, always use external .js files to keep your code organized.

Keyword	Can be changed?	Best for
`const`	❌ No	Values that won't change
`let`	✅ Yes	Values that will change
`var`	✅ Yes	Old way (avoid using)

Examples

// Using const - value cannot be reassigned
const appName = "My App";
const maxUsers = 100;

// Using let - value can be reassigned
let userCount = 0;
userCount = 5;  // ✅ This works
userCount = 10; // ✅ This also works

// Trying to reassign const
const siteName = "My Site";
// siteName = "New Site"; // ❌ ERROR! Cannot reassign const

Data Types in Variables

// Numbers
let age = 25;
let price = 19.99;

// Strings (text)
const firstName = "Sarah";
const message = 'Hello, world!';

// Booleans (true/false)
let isLoggedIn = false;
let hasAccess = true;

// Undefined (no value assigned yet)
let futureValue;
console.log(futureValue); // undefined

Naming Rules

✅ Good names:

const userName = "Alex";
let itemCount = 5;
const MAX_ATTEMPTS = 3;

❌ Bad names:

const x = "Alex";           // Not descriptive
let 1stItem = "Apple";     // Cannot start with number
const user-name = "Sam";   // Cannot use hyphens

Best practices:

Use camelCase: firstName, maxValue, isActive
Be descriptive: userAge instead of a
Constants in UPPERCASE: MAX_SIZE, API_KEY

What's Next?

In Part 2, we'll dive into functions and learn how to create reusable blocks of code! 🚀