Javascript

Introduction:

"From static designs to dynamic web applications, JavaScript bridges the gap." 

JavaScript is a versatile and powerful programming language that brings life to web pages. My journey with JavaScript opened the doors to interactivity, DOM manipulation, and logic-driven web development. It’s where my passion for coding truly flourished.

Key Topics Learned:

1. Basics and Syntax:

   • Understanding variables (var, let, const).

   • Writing functions and understanding scope.

// Variables

let name = "John";

const age = 30;

var isActive = true;

// Functions

function greet() {

  console.log("Hello, " + name);

}

greet();

// Scope

{

  let localVariable = "I'm local";

  console.log(localVariable);

}

2. DOM Manipulation:

   • Selecting and modifying HTML elements dynamically using methods like getElementById() and querySelector().

   • Creating interactive elements like modals and dropdowns.

// Selecting Elements

const title = document.getElementById("title");

const button = document.querySelector(".btn");

// Modifying Elements

title.textContent = "Updated Title";

button.style.backgroundColor = "blue";

// Creating Interactive Elements

const modal = document.createElement("div");

modal.className = "modal";

modal.textContent = "This is a modal";

document.body.appendChild(modal);

3. Event Handling:

   • Adding interactivity with addEventListener().

   • Handling user input with events like click, keyup, and submit.

// Adding Event Listeners

button.addEventListener("click", () => {

  console.log("Button clicked!");

});

// Handling User Input

const input = document.querySelector("#inputBox");

input.addEventListener("keyup", (event) => {

  console.log("Input value: ", event.target.value);

});

// Form Submission

document.querySelector("form").addEventListener("submit", (e) => {

  e.preventDefault();

  console.log("Form submitted!");

});

4. Control Structures and Logic:

   • Using if-else, switch, and loops to control program flow.

// If-Else

if (age > 18) {

  console.log("Adult");

} else {

  console.log("Minor");

}

// Switch

const day = "Monday";

switch (day) {

  case "Monday":

    console.log("Start of the week");

    break;

  case "Friday":

    console.log("End of the week");

    break;

  default:

    console.log("Midweek");

}

// Loops

for (let i = 0; i < 5; i++) {

  console.log(i);

}

5. Working with Arrays and Objects:

   • Manipulating data with array methods (map, filter, reduce).

   • Creating and iterating over objects.

// Array Methods

const numbers = [1, 2, 3, 4, 5];

const doubled = numbers.map((num) => num * 2);

console.log(doubled);

// Objects

const person = { name: "John", age: 30 };

console.log(person.name);

// Iterating over Objects

for (const key in person) {

  console.log(`${key}: ${person[key]}`);

}

6. Asynchronous JavaScript:

   • Understanding setTimeout() and setInterval().

   • Fetching data with APIs using fetch() and promises.

// setTimeout and setInterval

setTimeout(() => console.log("This runs after 2 seconds"), 2000);

setInterval(() => console.log("This runs every second"), 1000);

// Fetching Data

fetch("https://api.example.com/data")

  .then((response) => response.json())

  .then((data) => console.log(data))

  .catch((error) => console.error(error));

7. Local Storage:

   • Storing and retrieving data from localStorage and sessionStorage.

// Storing Data

localStorage.setItem("name", "John");

sessionStorage.setItem("age", 30);

// Retrieving Data

const storedName = localStorage.getItem("name");

console.log(storedName);

// Removing Data

localStorage.removeItem("name");