T73 Biz - Blog

JavaScript is one of the core technologies of the web, alongside HTML and CSS. It is a versatile, lightweight programming language used to create dynamic and interactive web pages. This guide covers the fundamentals of JavaScript to help you get started.

1. Introduction to JavaScript

JavaScript is a high-level, interpreted scripting language that runs in web browsers. It enables developers to create interactive user interfaces, manipulate the Document Object Model (DOM), handle events, and communicate with servers asynchronously.

Key Features of JavaScript:

Client-side execution: Runs directly in the browser without requiring a server.
Dynamic typing: Variables are not bound to a specific type.
Event-driven programming: Reacts to user interactions such as clicks and key presses.
Asynchronous processing: Handles multiple tasks efficiently with callbacks, promises, and async/await.
Cross-platform compatibility: Works on all major browsers and operating systems.

2. Setting Up JavaScript

JavaScript can be written directly within an HTML file using the <script> tag or in an external file with a .js extension.

Inline JavaScript:

<!DOCTYPE html>
<html>
<head>
    <title>JavaScript Example</title>
</head>
<body>
    <button onclick="alert('Hello, JavaScript!')">Click Me</button>
</body>
</html>

External JavaScript:

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

3. JavaScript Variables and Data Types

Declaring Variables

JavaScript provides three ways to declare variables: var, let, and const.

var name = "Alice"; // Function-scoped
let age = 25; // Block-scoped
const pi = 3.14; // Cannot be reassigned

Data Types in JavaScript

String: let text = "Hello";
Number: let num = 42;
Boolean: let isTrue = true;
Object: let person = {name: "John", age: 30};
Array: let fruits = ["Apple", "Banana", "Cherry"];
Undefined: let unknown;
Null: let empty = null;

4. JavaScript Operators

Arithmetic Operators

let x = 10;
let y = 5;
console.log(x + y); // 15

Comparison Operators

console.log(10 === "10"); // false (strict equality)
console.log(10 == "10"); // true (loose equality)

Logical Operators

let a = true;
let b = false;
console.log(a && b); // false

5. Control Structures

If-Else Statements

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

Switch Statement

let day = "Monday";
switch (day) {
    case "Monday":
        console.log("Start of the week!");
        break;
    case "Friday":
        console.log("Weekend is near!");
        break;
    default:
        console.log("Just another day.");
}

Loops

While Loop

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

For Loop

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

6. Functions in JavaScript

Defining and Calling Functions

function greet(name) {
    return "Hello, " + name + "!";
}
console.log(greet("Alice"));

Arrow Functions

const greet = (name) => `Hello, ${name}!`;
console.log(greet("Bob"));

7. JavaScript Arrays

Indexed Arrays

let colors = ["Red", "Green", "Blue"];
console.log(colors[0]); // Red

Associative Arrays (Objects)

let person = {name: "John", age: 30};
console.log(person.name); // John

8. JavaScript and the DOM

Selecting Elements

let heading = document.getElementById("title");
let buttons = document.querySelectorAll("button");

Modifying Elements

document.getElementById("title").innerText = "New Title";

Event Handling

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

9. JavaScript and Asynchronous Programming

Callbacks

function fetchData(callback) {
    setTimeout(() => {
        callback("Data received");
    }, 2000);
}
fetchData(console.log);

Promises

let myPromise = new Promise((resolve, reject) => {
    setTimeout(() => resolve("Success"), 2000);
});
myPromise.then(console.log);

Async/Await

async function fetchData() {
    let data = await new Promise(resolve => setTimeout(() => resolve("Fetched Data"), 2000));
    console.log(data);
}
fetchData();

10. JavaScript and APIs

Fetch API

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

Conclusion

JavaScript is an essential language for modern web development. Understanding its fundamentals—variables, loops, functions, DOM manipulation, and asynchronous programming—will enable you to build interactive web applications. With frameworks like React, Vue, and Node.js, JavaScript continues to be a powerful tool for both front-end and back-end development.

The Fundamentals of JavaScript: A Beginner's Guide