JavaScript

Data Types

1. Numbers:
The number data type represents both integers and floating-point numbers (decimals). For example:

let age = 30;        // Integer
let price = 19.99;   // Floating-point number

JavaScript does not distinguish between integers and floating-point numbers, so you can perform arithmetic operations on them without issue.

2. Strings:
Strings represent sequences of characters and are enclosed in single (' '), double (" "), or backticks (`) quotes. For example:

let firstName = "John";
let lastName = 'Doe';
let fullName = `John Doe`;  // Template literals can also be used for string interpolation

Strings are versatile and can contain letters, numbers, symbols, and even escape sequences.

3. Booleans:
Booleans represent two values: true and false. They are used for logical operations and conditional statements. For example:

let isTodaySunny = true;
let isRaining = false;

Booleans are essential for decision-making in JavaScript programs.

4. null and undefined:
• null: It represents the intentional absence of any object or value. It is often used to indicate that a variable should have no value or that an object property has no value yet.

let emptyValue = null;

• undefined: It is a primitive value that represents the absence of a defined value. It is usually the default value of uninitialized variables and function parameters without arguments.

let notDefined;

It's important to note that null and undefined are not the same. null is a value that can be assigned to a variable, while undefined typically indicates that the variable hasn't been assigned any value.

let name = "Alice";
let age = 25;
let isStudent = true;
let noValue = null;
let notDefined;

console.log(name);       // "Alice"
console.log(age);        // 25
console.log(isStudent);  // true
console.log(noValue);    // null
console.log(notDefined); // undefined

Loops

for (let i = 0; i < 5; i++) {
    console.log(i);
}

• The let i = 0 initializes a variable i to 0.

• The i < 5 is the condition. As long as this condition is true, the loop will continue.

• The i++ increments i by 1 in each iteration.

let i = 0;
while (i < 5) {
    console.log(i);
    i++;
}

• Here, we initialize i to 0 before the loop.

• The loop will continue as long as i is less than 5.

• We manually increment i with i++ inside the loop.

let i = 0;
do {
    console.log(i);
    i++;
} while (i < 5);

• In this example, the code block is executed first, and then the condition is checked.

• As long as i is less than 5, the loop continues.

• break: Used to exit a loop prematurely.

• continue: Skips the current iteration and proceeds to the next one.

for (let i = 0; i < 5; i++) {
    if (i === 2) {
        break; // Exits the loop when i is 2
    }
    console.log(i);
}

for (let i = 0; i < 5; i++) {
    if (i === 2) {
        continue; // Skips iteration when i is 2
    }
    console.log(i);
}

Arrays

let fruits = ["apple", "banana", "cherry"];
let numbers = [1, 2, 3, 4, 5];
let mixedArray = ["apple", 3, { name: "John" }];

let fruits = ["apple", "banana", "cherry"];
console.log(fruits[0]); // "apple"
console.log(fruits[1]); // "banana"

• push(): Adds elements to the end of the array.

• pop(): Removes and returns the last element from the array.

• unshift(): Adds elements to the beginning of the array.

• shift(): Removes and returns the first element from the array.

• splice(): Adds or removes elements at a specific position in the array.

let fruits = ["apple", "banana", "cherry"];
fruits.push("orange"); // ["apple", "banana", "cherry", "orange"]
fruits.pop(); // Removes and returns "orange"; fruits = ["apple", "banana", "cherry"]
fruits.unshift("grape"); // ["grape", "apple", "banana", "cherry"]
fruits.shift(); // Removes and returns "grape"; fruits = ["apple", "banana", "cherry"]
fruits.splice(1, 1, "kiwi"); // Adds "kiwi" at index 1, replacing "banana"; fruits = ["apple", "kiwi", "cherry"]

let fruits = ["apple", "banana", "cherry"];
for (let i = 0; i < fruits.length; i++) {
    console.log(fruits[i]);
}

let fruits = ["apple", "banana", "cherry"];
fruits.forEach(function (fruit) {
    console.log(fruit);
});

• map(): Creates a new array by applying a function to each element in the array.

• filter(): Creates a new array with all elements that pass a test.

• reduce(): Reduces an array to a single value by applying a function to each element.

• find(): Returns the first element that satisfies a specified condition.

• sort(): Sorts the elements in an array.

• concat(): Combines two or more arrays.

• slice(): Extracts a portion of an array into a new array.

• And many more.

let numbers = [1, 2, 3, 4, 5];
let doubled = numbers.map(function (num) {
    return num * 2;
});
console.log(doubled); // [2, 4, 6, 8, 10]

DOM Manipulation

// Select by ID
let elementById = document.getElementById("myId");

// Select by class name
let elementsByClass = document.getElementsByClassName("myClass");

// Select by tag name
let elementsByTag = document.getElementsByTagName("div");

// Select by CSS selector
let elementBySelector = document.querySelector(".mySelector");
let elementsBySelectors = document.querySelectorAll(".multipleSelectors");

let newDiv = document.createElement("div"); // Create a new <div> element
newDiv.textContent = "Newly created div"; // Set its content
document.body.appendChild(newDiv); // Append it to the <body>

elementById.addEventListener("click", function() {
    console.log("Element clicked!");
});

elementById.classList.add("new-class"); // Add a class
elementById.classList.remove("old-class"); // Remove a class
elementById.classList.toggle("active"); // Toggle a class

let elementToRemove = document.getElementById("toRemove");
elementToRemove.parentNode.removeChild(elementToRemove); // Remove the element

let parentElement = elementById.parentNode; // Get the parent element
let firstChild = elementById.firstChild; // Get the first child element
let nextSibling = elementById.nextSibling; // Get the next sibling element

Events

// Select an HTML element
let button = document.getElementById("myButton");

// Attach an event listener to the element
button.addEventListener("click", function() {
    // Code to execute when the button is clicked
    console.log("Button clicked!");
});

document.getElementById("myInput").addEventListener("input", function(event) {
    console.log("Input value: " + event.target.value);
});

• click: Occurs when an element is clicked.

• mouseover and mouseout: Occur when the mouse enters and exits an element.

• keydown, keyup, and keypress: Occur when a key is pressed and released.

• submit: Occurs when a form is submitted.

• change: Occurs when the value of a form element changes, e.g., an input field or a select box.

element.addEventListener("click", function(event) {
    // Event handling code
}, true); // The third parameter specifies the capturing phase (true or false)

document.getElementById("myList").addEventListener("click", function(event) {
    if (event.target.tagName === "LI") {
        // Code to handle the click on an LI element
        console.log("Item clicked: " + event.target.textContent);
    }
});

document.getElementById("myForm").addEventListener("submit", function(event) {
    event.preventDefault(); // Prevent the form from submitting
    // Additional code to process form data
});