The Window Object

The window object is supported by all browsers. It represents the browser's window.

All global JavaScript objects, functions, and variables automatically become members of the window object.

Global variables are properties of the window object.

Global functions are methods of the window object.

Even the document object (of the HTML DOM) is a property of the window object:

window.document.getElementById("header"); is the same as:

document.getElementById("header");

Other Window Methods Some other methods:

• window.open() - open a new window
• window.close() - close the current window
• window.moveTo() - move the current window
• window.resizeTo() - resize the current window

Window Screen

The window.screen object can be written without the window prefix.

Properties:

• screen.width
• screen.height
• screen.availWidth
• screen.availHeight
• screen.colorDepth
• screen.pixelDepth

Window Location

• window.location.href returns the href (URL) of the current page
• window.location.hostname returns the domain name of the web host
• window.location.pathname returns the path and filename of the current page
• window.location.protocol returns the web protocol used (http: or https:)
• screen.colorDepth
• window.location.assign() loads a new document

A JavaScript function is a block of code designed to perform a particular task.

function myFunction(num1, num2) { return num1 * num2; }

Function Return

// Function is called, the return value will end up in x let x = myFunction(4, 3);

function myFunction(a, b) { // Function returns the product of a and b return a * b; }

An array is a special variable, which can hold more than one value:

const colors = ["blue", "green", "yellow"]; let color = colors[0]; console.log(color);

Changing an Array Element This statement changes the value of the first element in colors:

colors[0] = "orange";

The length Property The length property of an array returns the length of an array (the number of array elements).

const fruits = ["Banana", "Orange", "Apple", "Mango"]; let length = fruits.length;

Accessing the First Array Element

const fruits = ["Banana", "Orange", "Apple", "Mango"]; let fruit = fruits[0];

Accessing the Last Array Element

const fruits = ["Banana", "Orange", "Apple", "Mango"]; let fruit = fruits[fruits.length - 1];

Adding Array Elements The easiest way to add a new element to an array is using the push() method:

const fruits = ["Banana", "Orange", "Apple"]; fruits.push("Lemon"); // Adds a new element (Lemon) to fruits

JavaScript Array toString() The JavaScript method toString() converts an array to a string of (comma separated) array values.

const fruits = ["Banana", "Orange", "Apple", "Mango"]; document.getElementById("demo").innerHTML = fruits.toString();

JavaScript Array pop() The pop() method removes the last element from an array:

const fruits = ["Banana", "Orange", "Apple", "Mango"]; fruits.pop();

JavaScript Array shift() The shift() method removes the first array element and "shifts" all other elements to a lower index.

const fruits = ["Banana", "Orange", "Apple", "Mango"]; fruits.shift();

JavaScript Array unshift() The unshift() method adds a new element to an array (at the beginning), and "unshifts" older elements:

const fruits = ["Banana", "Orange", "Apple", "Mango"]; fruits.unshift("Lemon");

Flattening an Array Flattening an array is the process of reducing the dimensionality of an array. The flat() method creates a new array with sub-array elements concatenated to a specified depth.

const myArr = [[1,2],[3,4],[5,6]]; const newArr = myArr.flat();

JavaScript For Loop

Loops can execute a block of code a number of times.

Different Kinds of Loops

JavaScript supports different kinds of loops:

• for - loops through a block of code a number of times
• for/in - loops through the properties of an object
• for/of - loops through the values of an iterable object
• while - loops through a block of code while a specified condition is true
• do/while - also loops through a block of code while a specified condition is true

The For Loop

for (expression 1; expression 2; expression 3) { // code block to be executed }

Expression 1 is executed (one time) before the execution of the code block.

Expression 2 defines the condition for executing the code block.

Expression 3 is executed (every time) after the code block has been executed.

for (let i = 0; i < 10; i++) { if (i === 3) { break; } console.log("The number is " + i); }

for (let i = 0; i < 10; i++) { if (i === 5) { continue; } console.log("The number is " + i); }

The For In Loop

const person = {fname:"laily", lname:"akter", age:21};

for (let x in person) { console.log(person[x]); }

The For Of Loop

const mixed = ["Mango", "Orange", "Yellow"];

for (let x of mixed) { console.log(x); }

The While Loop

var i = 3; while (i < 10) { console.log("The number is " + i); i++; }