JavaScript Introduction

What is JavaScript?

JavaScript (JS) is a high-level, interpreted programming language primarily used for making web pages interactive and dynamic. It allows developers to control webpage behavior, update content dynamically, handle events, and interact with users.

JavaScript as a Web Technology

JavaScript is a core technology of the web, along with:

HTML (HyperText Markup Language) → Defines the structure of a webpage.
CSS (Cascading Style Sheets) → Controls the styling and layout of a webpage.
JavaScript (JS) → Adds interactivity, logic, and dynamic content to web pages.

Why Use JavaScript?

✔ Interactivity – Enables animations, pop-ups, dropdowns, and user interactions.
✔ DOM Manipulation – Dynamically updates HTML & CSS (e.g., show/hide elements, change styles).
✔ Form Validation – Ensures correct user input before submission.
✔ Event Handling – Responds to user actions (clicks, key presses, etc.).
✔ Server Communication – Fetches and sends data via APIs (e.g., AJAX, Fetch API).
✔ Cross-Browser Compatibility – Runs on almost all web browsers.
✔ Client-Side Execution – Runs directly in the browser without requiring server interaction.

How to Add JavaScript to HTML?

1️⃣ Inline JavaScript

JavaScript can be added directly within an HTML element using the onclick attribute:

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

✔ Effect: Shows an alert box when the button is clicked.

2️⃣ Internal JavaScript

JavaScript code can be placed inside a <script> tag in an HTML file:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>JavaScript Example</title>
</head>
<body>

<script>
    document.write("Welcome to JavaScript!");
</script>

</body>
</html>

✔ Effect: Displays "Welcome to JavaScript!" on the webpage.

3️⃣ External JavaScript

JavaScript code can be written in a separate .js file and linked using <script src="filename.js"></script>:

HTML file (index.html)

<!DOCTYPE html>
<html lang="en">
<head>
    <title>JavaScript External Example</title>
    <script src="script.js"></script>
</head>
<body>
</body>
</html>

JavaScript file (script.js)

alert("This is an external JavaScript file!");

✔ Effect: Displays an alert box when the page loads.

Basic JavaScript Concepts

1️⃣ Variables

Variables store data values in JavaScript:

let name = "John"; // Modern way (preferred)
var age = 25;      // Older way
const PI = 3.14;   // Constant value (unchangeable)

2️⃣ Data Types

JavaScript has different data types:

String → "Hello"
Number → 42
Boolean → true / false
Array → ["Apple", "Banana"]
Object → {name: "John", age: 25}

3️⃣ Functions

Functions allow reusability of code:

function greet() {
    alert("Hello, Welcome!");
}

✔ Can be called using greet();

JavaScript Features

✔ Lightweight & Fast – Executes quickly within a browser.
✔ Event-Driven – Listens for user actions (e.g., clicks, typing).
✔ Supports Object-Oriented Programming – Uses objects to organize code.
✔ Works on Multiple Platforms – Runs on different browsers & operating systems.
✔ Server-Side Capability – With Node.js, JavaScript can be used on servers.

Conclusion

JavaScript is a powerful scripting language that enhances web pages by adding interactivity, handling user input, and communicating with servers. It is an essential skill for modern web development.

JAVASCRIPT