[go: up one dir, main page]
Scribd
Upload
8 views6 pages

JS REST (1)

This document provides an overview of JavaScript arrays, objects, and DOM manipulation. It covers array declaration, accessing and modifying elements, various array methods, object creation, and event handling in the DOM. Additionally, it explains how to create and append elements dynamically, as well as using the window, location, and history objects.

Uploaded by

fokaki3895
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
8 views6 pages

JS REST (1)

This document provides an overview of JavaScript arrays, objects, and DOM manipulation. It covers array declaration, accessing and modifying elements, various array methods, object creation, and event handling in the DOM. Additionally, it explains how to create and append elements dynamically, as well as using the window, location, and history objects.

Uploaded by

fokaki3895
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 6

Lesson 2: JavaScript Array and Array Methods

JavaScript Arrays

JavaScript arrays are used to store multiple values in a single variable. Arrays allow you
to perform operations such as adding, removing, and modifying elements.

Declaring an Array

An array can be declared using square brackets:

let fruits = ["Apple", "Banana", "Cherry"]; // Creates an array with three elements

Accessing Array Elements

Array elements are accessed using their index (starting from 0):

console.log(fruits[0]); // Output: Apple (first element of the array)


console.log(fruits[1]); // Output: Banana (second element of the array)

Modifying an Array
fruits[1] = "Mango"; // Replaces "Banana" with "Mango"
console.log(fruits); // Output: ["Apple", "Mango", "Cherry"]

Array Methods

JavaScript provides several built-in methods for working with arrays:

1.​ push() - Adds an element to the end of an array

fruits.push("Orange"); // Adds "Orange" to the end of the array


console.log(fruits); // Output: ["Apple", "Mango", "Cherry", "Orange"]

2.​ pop() - Removes the last element

fruits.pop(); // Removes "Orange" from the array


console.log(fruits); // Output: ["Apple", "Mango", "Cherry"]
3.​ shift() - Removes the first element

fruits.shift(); // Removes "Apple" from the array


console.log(fruits); // Output: ["Mango", "Cherry"]

4.​ unshift() - Adds an element at the beginning

fruits.unshift("Strawberry"); // Adds "Strawberry" at the start of the array


console.log(fruits); // Output: ["Strawberry", "Mango", "Cherry"]

5.​ map() - Creates a new array by applying a function to each element

let numbers = [1, 2, 3, 4];


let squared = numbers.map(num => num * num); // Squares each number in the array
console.log(squared); // Output: [1, 4, 9, 16]

JavaScript Objects

Objects in JavaScript store data as key-value pairs and allow methods to manipulate
this data.

Creating an Object

An object can be created using curly braces:

let person = {
firstName: "John", // Property: first name
lastName: "Doe", // Property: last name
age: 30, // Property: age
greet: function() {
return "Hello " + this.firstName; // Method to return a greeting
}
};

Accessing Properties
console.log(person.firstName); // Output: John (Accessing property using dot notation)
console.log(person["lastName"]); // Output: Doe (Accessing property using bracket
notation)
Object Methods

Methods in objects are functions that operate on object properties.

console.log(person.greet()); // Output: Hello John (Calls the greet method)

Object Constructor

Constructors create multiple objects with the same structure.

function Car(brand, model) {


this.brand = brand; // Assigns brand
this.model = model; // Assigns model
}
let myCar = new Car("Toyota", "Corolla"); // Creates a new Car object
console.log(myCar.brand); // Output: Toyota

Iterating Over an Object


for (let key in person) {
console.log(key + ": " + person[key]); // Loops through all properties of the object
}

JavaScript Maps

Maps store key-value pairs, where keys can be of any type.

let map = new Map();


map.set("name", "Alice"); // Adds key "name" with value "Alice"
map.set("age", 25); // Adds key "age" with value 25
console.log(map.get("name")); // Output: Alice (Retrieves value for key "name")

Lesson 1: Introduction to DOM

The Document Object Model (DOM) allows JavaScript to dynamically manipulate HTML
content.
Selecting Elements

Using querySelector() to select an element:

let element = document.querySelector("p"); // Selects the first paragraph element


console.log(element.innerText); // Outputs the text content of the selected paragraph

Selecting elements by class or ID:

let elements = document.getElementsByClassName("myClass"); // Selects all elements


with class "myClass"
let elementById = document.getElementById("myId"); // Selects the element with id
"myId"

JavaScript Events

JavaScript events allow interaction between the user and the webpage.

onClick Event

Executes a function when an element is clicked:

document.getElementById("btn").onclick = function() {
alert("Button Clicked"); // Displays an alert when the button is clicked
};

onMouseOver Event

Triggers when the mouse hovers over an element:

document.getElementById("hoverDiv").onmouseover = function() {
console.log("Mouse Over Detected"); // Logs a message when mouse hovers over
the element
};

onChange Event

Executes when the value of an input field changes:


document.getElementById("inputField").onchange = function() {
console.log("Value Changed"); // Logs a message when input field value changes
};

onKeyUp Event

Executes when a key is released:

document.getElementById("textField").onkeyup = function() {
console.log("Key Pressed"); // Logs a message when a key is pressed and released
};

Event Listener

Allows multiple event handlers on an element:

let btn = document.getElementById("myButton");


btn.addEventListener("click", function() {
alert("Event Listener Clicked"); // Displays alert when button is clicked
});

JavaScript Window, Location, and History

Window Object

Provides information about the browser window:

console.log(window.innerWidth); // Outputs the width of the browser window

Location Object

Provides the current URL and navigation methods:

console.log(window.location.href); // Outputs the current URL

History Object

Allows navigation in browsing history:


window.history.back(); // Navigates to the previous page in history

JavaScript Node and NodeList

Creating and Appending Elements

Dynamically adding elements to the page:

let newElement = document.createElement("p"); // Creates a new paragraph element


newElement.innerText = "New Paragraph"; // Sets text inside the paragraph
document.body.appendChild(newElement); // Appends the paragraph to the body

QuerySelectorAll

Returns a NodeList of all matching elements:

let nodeList = document.querySelectorAll("p"); // Selects all paragraph elements


console.log(nodeList.length); // Outputs the count of selected elements

Creating Dynamic Input Element


let input = document.createElement("input"); // Creates an input field
document.body.appendChild(input); // Adds it to the page

You might also like