# Introduction to JavaScript – Making Websites Interactive

The first 30 days of my **#100DaysOfCode** journey were all about building a strong frontend foundation.

I learned **HTML** to structure webpages and **CSS** to style them and create responsive layouts.

Today, I begin the next chapter—**JavaScript**.

If HTML is the skeleton of a webpage and CSS is its appearance, then JavaScript is what brings it to life by adding logic and interactivity.

Let's begin.

* * *

# What is JavaScript?

**JavaScript** is a high-level, lightweight, interpreted programming language used to make websites interactive and dynamic.

It allows developers to:

*   Respond to user actions
    
*   Manipulate webpage content
    
*   Validate forms
    
*   Create animations
    
*   Fetch data from servers
    
*   Build complete web applications
    

Today, JavaScript is one of the most widely used programming languages in the world.

* * *

# Why Do We Need JavaScript?

Imagine a webpage built only with HTML and CSS.

It looks beautiful, but nothing changes when a user interacts with it.

JavaScript makes websites interactive by enabling features like:

*   Login forms
    
*   Dark mode toggles
    
*   Image sliders
    
*   Dropdown menus
    
*   Live search
    
*   Shopping carts
    
*   Real-time notifications
    

Without JavaScript, websites would remain static.

* * *

# The Three Pillars of Frontend Development

Modern frontend development is built on three core technologies:

### 🧱 HTML

Provides the structure and content.

### 🎨 CSS

Controls the appearance and layout.

### ⚡ JavaScript

Adds logic, behavior, and interactivity.

Together, these technologies power nearly every website on the internet.

* * *

# A Brief History of JavaScript

JavaScript was created by **Brendan Eich** in **1995** while working at Netscape.

Interestingly, it was developed in just **10 days**.

Over the years, JavaScript has evolved significantly and is now standardized under **ECMAScript (ES)**.

Today, modern JavaScript includes powerful features introduced in versions like **ES6**, making development cleaner and more efficient.

* * *

# Where Can JavaScript Run?

Originally, JavaScript only ran inside web browsers.

Today, it can also run outside the browser using **Node.js**, enabling developers to build servers, APIs, desktop applications, and command-line tools.

This means JavaScript is now used for both **frontend** and **backend** development.

* * *

# Ways to Add JavaScript

Similar to CSS, JavaScript can be included in three ways.

### 1\. Inline JavaScript

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

Useful for simple examples but not recommended for large projects.

* * *

### 2\. Internal JavaScript

```html
<script>

console.log("Hello JavaScript");

</script>
```

Written inside the HTML file.

* * *

### 3\. External JavaScript

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

This is the preferred approach for real-world projects because it keeps HTML and JavaScript separate.

* * *

# Your First JavaScript Program

The most commonly used statement while learning JavaScript is:

```javascript
console.log("Hello, World!");
```

`console.log()` prints output to the browser's developer console.

It's one of the most useful tools for debugging and understanding how your code works.

* * *

# Browser Developer Tools

To see JavaScript in action:

1.  Open your webpage.
    
2.  Press **F12** or **Ctrl + Shift + I**.
    
3.  Go to the **Console** tab.
    
4.  Write:
    

```javascript
console.log("Learning JavaScript 🚀");
```

The message will appear in the console.

* * *

# Best Practices

✔ Keep HTML, CSS, and JavaScript in separate files.

✔ Use meaningful variable names.

✔ Practice writing small programs every day.

✔ Use the browser console for debugging.

✔ Focus on understanding concepts rather than memorizing syntax.

* * *

# My Biggest Takeaway

For the past month, I've been building websites that looked good.

Today, I took the first step toward building websites that can think, respond, and interact with users.

JavaScript opens the door to dynamic web development, and I'm excited to learn how logic and programming come together to create real-world applications.

This feels like the beginning of an entirely new chapter in my journey.