JavaScript Series — Phase 1 day 2 — JavaScript Fundamentals

📅 Day 2 — How to Run JavaScript

1. 🖥️ Running JavaScript in the Browser Console

The easiest way to experiment with JavaScript is through the browser's Developer Tools Console.

How to open it

In Chrome or Edge:

Right Click → Inspect → Console

Then write:

console.log("Hello JavaScript!");

You can also perform calculations:

10 + 20

Or create a variable:

let name = "Tuhin";
console.log(name);

Why use the Console?

• Quick testing

• Debugging

• Experimenting with JavaScript

• Checking values and errors

The console is excellent for learning and debugging, but you generally won't write an entire application there

2. 🏷️ Using the <script> Tag

JavaScript can be added to an HTML document using the <script> element.

<script>
    console.log("Hello JavaScript!");
</script>

The browser sees the <script> element and executes the JavaScript inside it.

A basic example:

<!DOCTYPE html>
<html>
<head>
    <title>JavaScript</title>
</head>
<body>

    <h1>My Website</h1>

    <script>
        console.log("JavaScript is running!");
    </script>

</body>
</html>

3. ⚡ Inline JavaScript

Inline JavaScript means writing JavaScript directly inside an HTML element's event attribute.

Example:

<button onclick="alert('Hello JavaScript!')">
    Click Me
</button>

When the user clicks the button, JavaScript executes.

Advantages

• Very simple for tiny demonstrations

• Easy for beginners to understand

Disadvantages

• Mixes HTML and JavaScript

• Becomes difficult to maintain

• Not suitable for larger applications

• Makes HTML harder to read

So you can introduce the rule:

Inline JavaScript is useful for understanding the concept, but avoid it in larger projects.

4. 📄 Internal JavaScript

Internal JavaScript means writing JavaScript inside a <script> element in the same HTML file.

<!DOCTYPE html>
<html>
<head>
    <title>Internal JavaScript</title>
</head>
<body>

    <button onclick="sayHello()">Click Me</button>

    <script>
        function sayHello() {
            alert("Hello!");
        }
    </script>

</body>
</html>

Here, the HTML and JavaScript are contained in the same file.

When can it be useful?

• Small projects

• Simple demonstrations

• Single-page experiments

• Learning JavaScript

However, as projects become larger, separating JavaScript into its own file is generally better.

5. 📁 External JavaScript

This is the approach you should emphasize for real-world development.

Create two files:

project/
│
├── index.html
└── script.js

index.html

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

    <h1>Hello JavaScript</h1>

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

</body>
</html>

script.js

console.log("JavaScript is running!");

The HTML file connects to the JavaScript file using:

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

Why external JavaScript is preferred

• Keeps HTML and JavaScript separate

• Easier to maintain

• Easier to debug

• Can reuse the same JavaScript file

• Makes larger projects more organized

6. ✅ Best Practices for Linking JavaScript

This should be the final and most practical section of Day 2.

Use external JavaScript

Prefer:

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

instead of putting large amounts of JavaScript directly into HTML.

---

Use defer when loading scripts

A common modern approach is:

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

defer tells the browser to download the JavaScript while parsing the HTML and execute it after the document has been parsed.

This is especially useful when your script needs to work with elements in the HTML.

---

Avoid unnecessary inline JavaScript

Instead of:

<button onclick="sayHello()">Click</button>

you can use JavaScript to attach the event:

const button = document.querySelector("button");

button.addEventListener("click", sayHello);

This keeps your HTML and JavaScript more cleanly separated.

---

Keep JavaScript organized

For a small project:

project/
│
├── index.html
├── style.css
└── script.js

For larger projects, JavaScript can eventually be divided into multiple files/modules.