JavaScript - TechWithNavi : TechWithNavi

JavaScript Intro

2 April 2025 | Category: JavaScript

What is JavaScript?

JavaScript (JS) is a high-level, interpreted programming language primarily used to create dynamic and interactive content on websites. It allows developers to add functionality like animations, form validations, real-time updates, and much more.

JavaScript works alongside HTML and CSS, where:

HTML defines the structure of a webpage.
CSS styles the webpage.
JavaScript makes the webpage interactive.

Initially, JavaScript was a client-side scripting language, meaning it only ran in web browsers. However, with the introduction of Node.js, JavaScript can now run on servers, making it a full-stack programming language.

Why Learn JavaScript?

JavaScript is one of the most widely used and most in-demand programming languages. Here’s why you should learn it:

✅ Essential for Web Development

JavaScript is the foundation of modern web applications. Almost every website today uses JavaScript to enhance the user experience.

✅ Works on Both Frontend & Backend

With Node.js, JavaScript can be used for backend development, allowing developers to work on full-stack projects.

✅ High Demand & Career Opportunities

JavaScript developers are in high demand across industries. Companies like Google, Facebook, Amazon, and Microsoft use JavaScript for their applications.

✅ Used Beyond Web Development

JavaScript is also used in:

Mobile App Development (React Native, Ionic)
Game Development (Phaser.js, Babylon.js)
Machine Learning & AI (TensorFlow.js)

How JavaScript Works in a Webpage?

When you write JavaScript, the browser interprets the code and executes it. JavaScript can be written in three ways:

1️⃣ Inline JavaScript

You can write JavaScript inside an HTML tag using the onclick attribute:

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

When you click the button, an alert box appears.

2️⃣ Internal JavaScript

You can write JavaScript inside a <script> tag in an HTML file:

<!DOCTYPE html>
<html>
<head>
    <title>JavaScript Example</title>
</head>
<body>
    <h1>Welcome to JavaScript</h1>
    <script>
        alert("Hello, JavaScript!");
    </script>
</body>
</html>

3️⃣ External JavaScript

For better organization, JavaScript is often written in an external file and linked to an HTML file:

HTML File:

<!DOCTYPE html>
<html>
<head>
    <title>JavaScript Example</title>
    <script src="script.js"></script>  <!-- External JS File -->
</head>
<body>
    <h1>JavaScript External File</h1>
</body>
</html>

JavaScript File (script.js):

alert("Hello from an external JavaScript file!");

This approach keeps JavaScript separate from HTML, making code more manageable.

JavaScript Basics

🔹 1. Variables in JavaScript

Variables are used to store data. JavaScript provides three ways to declare variables:

var name = "John"; // Old way (not recommended)
let age = 25;      // Modern way
const PI = 3.14;   // Constant variable

let is used for variables that may change.
const is used for values that should not change.

🔹 2. Data Types in JavaScript

JavaScript has different data types:

let name = "Alice";   // String
let age = 30;         // Number
let isStudent = true; // Boolean
let colors = ["red", "blue", "green"]; // Array
let person = { name: "John", age: 25 }; // Object

🔹 3. Operators in JavaScript

JavaScript supports different types of operators:

let a = 10;
let b = 5;
console.log(a + b);  // Addition (15)
console.log(a - b);  // Subtraction (5)
console.log(a * b);  // Multiplication (50)
console.log(a / b);  // Division (2)
console.log(a % b);  // Modulus (0)

🔹 4. Functions in JavaScript

Functions allow code reuse and better structure:

function greet(name) {
    return "Hello, " + name + "!";
}

console.log(greet("Alice")); // Output: Hello, Alice!

🔹 5. Conditional Statements

Conditions help make decisions in code:

let age = 18;
if (age >= 18) {
    console.log("You are an adult.");
} else {
    console.log("You are a minor.");
}

🔹 6. Loops in JavaScript

Loops repeat a block of code multiple times:

For Loop:

for (let i = 1; i <= 5; i++) {
    console.log("Number: " + i);
}

While Loop:

let i = 1;
while (i <= 5) {
    console.log("Count: " + i);
    i++;
}

JavaScript and the DOM (Document Object Model)

The DOM allows JavaScript to interact with HTML elements.

Selecting Elements in JavaScript

JavaScript can find and modify HTML elements:

let heading = document.getElementById("myHeading");
heading.innerText = "New Heading Text";

Other selection methods:

document.querySelector("h1"); // Selects first <h1>
document.querySelectorAll("p"); // Selects all <p> elements

Changing HTML Content

document.getElementById("demo").innerHTML = "Hello, JavaScript!";

Event Handling

JavaScript can respond to user actions like clicks:

document.getElementById("btn").addEventListener("click", function() {
    alert("Button Clicked!");
});

Advanced JavaScript Concepts

🔹 ES6 Features

Modern JavaScript introduced ES6+ with features like:

Arrow Functions:

const sum = (a, b) => a + b;
console.log(sum(5, 3)); // Output: 8

Template Literals:

let name = "John";
console.log(`Hello, ${name}!`);

Destructuring:

let person = { name: "Alice", age: 25 };
let { name, age } = person;
console.log(name, age); // Output: Alice 25

🔹 Asynchronous JavaScript

JavaScript can handle asynchronous tasks like fetching data from a server:

fetch("https://jsonplaceholder.typicode.com/posts")
    .then(response => response.json())
    .then(data => console.log(data))
    .catch(error => console.error("Error:", error));

Conclusion

JavaScript is an essential language for web development. It enables developers to build dynamic, interactive websites and powerful applications. With its wide range of features, JavaScript remains one of the most popular and in-demand programming languages in the world.