Complete Web Designing Course for Beginners

Lesson 6.1 – Introduction to JavaScript

🌐 Making Websites Interactive and Dynamic

🎯 Learning Objectives

After completing this lesson, students will be able to:

✅ Understand What JavaScript Is

✅ Understand Why JavaScript Is Important

✅ Differentiate HTML, CSS, and JavaScript

✅ Learn How JavaScript Works

✅ Add JavaScript to a Webpage

✅ Write Their First JavaScript Program

✅ Build Interactive Websites

📖 Introduction

So far we have learned:

HTML

Used for:

Website Structure

Example:

<h1>Welcome</h1>

CSS

Used for:

Website Design

Example:

h1{
color:blue;
}

But websites also need:

✅ User Interaction

✅ Button Click Actions

✅ Form Validation

✅ Calculators

✅ Games

✅ Dynamic Content

This is done using:

⚡ JavaScript

🤔 What is JavaScript?

JavaScript is a programming language used to make websites interactive.

Simple Definition

JavaScript adds behavior and functionality
to websites.

Without JavaScript:

Website is static.

With JavaScript:

Website becomes dynamic.

🌟 Real Life Example

Imagine a button:

[ Click Me ]

Without JavaScript:

Nothing happens.

With JavaScript:

When clicked:

Welcome Student!

appears on the screen.

🎯 Why JavaScript is Important?

JavaScript helps create:

✅ Interactive Websites

✅ Calculators

✅ Games

✅ Login Systems

✅ Forms

✅ Shopping Carts

✅ Mobile Apps

✅ Web Applications

🌍 Websites Using JavaScript

JavaScript is used by:

✅ Google

✅ YouTube

✅ Facebook

✅ Instagram

✅ Amazon

✅ Netflix

✅ Flipkart

🌟 HTML + CSS + JavaScript

Think of a website like a human body.

HTML

Skeleton

Provides structure.

CSS

Clothes

Provides appearance.

JavaScript

Brain

Provides intelligence and actions.

Visual Representation

HTML  → Structure

CSS   → Design

JavaScript → Functionality

Example

Website Button:

<button>

Click Me

</button>

HTML creates button.

CSS styles button.

JavaScript makes button perform an action.

🎯 What Can JavaScript Do?

JavaScript can:

Change Text

Before:

Hello

After Click:

Welcome Student

Change Colors

Before:

Blue Background

After Click:

Green Background

Show Messages

Example:

Welcome to NextGen Dev Hub

Create Calculators

Example:

5 + 5 = 10

Validate Forms

Checks:

Name

Email

Phone Number

before submission.

Create Games

Examples:

🎮 Tic Tac Toe

🎮 Quiz Games

🎮 Memory Games

🌟 How JavaScript Works

JavaScript works inside a browser.

Examples:

🌐 Chrome

🌐 Edge

🌐 Firefox

🌐 Safari

Browser reads:

HTML

Then:

CSS

Then:

JavaScript

And displays the final webpage.

🎯 Ways to Add JavaScript

There are 3 methods.

Method 1 – Inline JavaScript

Written directly inside HTML element.

Example:

<button onclick="alert('Hello')">

Click Me

</button>

When clicked:

Hello

appears.

Method 2 – Internal JavaScript

Written inside:

<script>

</script>

tags.

Example

<script>

alert("Welcome");

</script>

Method 3 – External JavaScript

Written in a separate file.

Example:

script.js

Connected using:

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

This is the professional method.

🌟 First JavaScript Program

HTML

<!DOCTYPE html>

<html>

<head>

<title>My First JavaScript</title>

</head>

<body>

<script>

alert("Welcome to JavaScript");

</script>

</body>

</html>

Output

A popup appears:

Welcome to JavaScript

🤔 What is alert()?

alert() displays a popup message.

Example:

alert("Hello Student");

Output:

Hello Student

🌟 Another Example

alert("Welcome to NextGen Dev Hub");

Output:

Welcome to NextGen Dev Hub

🎯 Using JavaScript with a Button

HTML

<button onclick="alert('Button Clicked')">

Click Me

</button>

Output

Click button →

Button Clicked

popup appears.

🌟 Creating Your First Interactive Website

HTML

<!DOCTYPE html>

<html>

<head>

<title>JavaScript Demo</title>

</head>

<body>

<h1>

Learning JavaScript

</h1>

<button onclick="alert('Welcome Student')">

Click Here

</button>

</body>

</html>

Output

Button click displays:

Welcome Student

🎯 Internal JavaScript Example

<!DOCTYPE html>

<html>

<body>

<script>

alert("JavaScript Loaded");

</script>

</body>

</html>

Output

Popup appears automatically when page loads.

🌟 External JavaScript Example

index.html

<!DOCTYPE html>

<html>

<head>

<title>External JS</title>

</head>

<body>

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

</body>

</html>

script.js

alert("External JavaScript Connected");

Output

External JavaScript Connected

🎯 Why Use External JavaScript?

Advantages:

✅ Cleaner Code

✅ Easy Maintenance

✅ Reusable Code

✅ Professional Development

🌟 JavaScript in Modern Websites

JavaScript is used for:

Login Systems

Username

Password

Registration Forms

Name

Email

Phone

Shopping Cart

Add to Cart

Online Exams

Quiz Systems

Dashboards

Student Portals

LMS Platforms

Course Management

💻 Complete Practical Program

index.html

<!DOCTYPE html>

<html>

<head>

<title>Introduction to JavaScript</title>

</head>

<body>

<h1>

Welcome to JavaScript

</h1>

<button onclick="alert('Hello Student')">

Click Me

</button>

</body>

</html>

🎯 Expected Output

Page displays:

Welcome to JavaScript

Button:

Click Me

After clicking:

Hello Student

popup appears.

🏫 Real World Applications

JavaScript is used in:

✅ Google Search

✅ YouTube Videos

✅ Facebook Posts

✅ Instagram Reels

✅ Amazon Shopping Cart

✅ College Management Systems

✅ Online Learning Platforms

⚠️ Common Beginner Mistakes

Mistake 1

Forgetting Quotes

Wrong:

alert(Hello);

Correct:

alert("Hello");

Mistake 2

Misspelling alert

Wrong:

alertt("Hello");

Correct:

alert("Hello");

Mistake 3

Forgetting Script Tags

Wrong:

alert("Hello");

inside HTML without:

<script>

</script>

🌟 Best Practices

✅ Use External JavaScript Files.

✅ Write Clean Code.

✅ Use Meaningful Names.

✅ Test Code Frequently.

✅ Learn by Building Projects.

🏆 Mini Project – Welcome Button

Create:

Welcome to My Website

Heading.

Add Button:

Click Me

When clicked:

Show popup:

Welcome Student

📝 Practical Activity

Create:

Student Information Page

Include:

Student Name

Branch

College

Add button:

Show Message

Display:

Welcome to Polytechnic College

using JavaScript.

📋 Assignment

Assignment 6.1

What is JavaScript?
Why is JavaScript important?
What is the difference between HTML, CSS, and JavaScript?
Name three ways to add JavaScript.
What does alert() do?
Create a webpage with a button that displays a message.
Explain why JavaScript is called the brain of a website.

🧠 Quiz

Q1. JavaScript is used for?

A. Structure

B. Design

C. Functionality

D. Database

✅ Answer: C

Q2. Which tag is used for JavaScript?

A. <javascript>

B. <js>

C. <script>

D. <code>

✅ Answer: C

Q3. Which function displays a popup?

A. print()

B. display()

C. alert()

D. show()

✅ Answer: C

Q4. Which method is considered professional?

A. Inline

B. Internal

C. External

D. None

✅ Answer: C

Q5. JavaScript makes websites?

A. Static

B. Interactive

C. Invisible

D. Slow

✅ Answer: B

📌 Lesson Summary

✅ JavaScript is a programming language for creating interactive websites.

✅ HTML provides structure.

✅ CSS provides design.

✅ JavaScript provides functionality.

✅ JavaScript can display messages, validate forms, create games, and build web applications.

✅ Modern websites heavily depend on JavaScript.