Properties

window.document: Refers to the Document object, which represents the content of the window.
window.location: Provides information about the current URL and methods to manipulate it.
window.location.href: The entire URL.
window.location.hostname: The domain name of the web host.
window.location.pathname: The path and filename of the current page.
window.location.protocol: The web protocol used (http: or https:).
window.location.assign(url): Loads a new document.
window.history: Provides access to the browser's session history.
window.history.back(): Loads the previous URL in the history list.
window.history.forward(): Loads the next URL in the history list.
window.navigator: Provides information about the browser.
window.navigator.userAgent: The user agent string for the browser.
window.navigator.platform: The platform on which the browser is running.
window.screen: Contains information about the user's screen.
window.screen.width: The width of the screen.
window.screen.height: The height of the screen.
window.innerHeight: The height of the window's content area (viewport).
window.innerWidth: The width of the window's content area (viewport).

Methods

window.alert(message): Displays an alert box with a message.
window.confirm(message): Displays a dialog box with a message and OK and Cancel buttons.
window.prompt(message, defaultValue): Displays a dialog box that prompts the user for input.
window.open(url, name, specs): Opens a new browser window or tab.
window.close(): Closes the current window.
window.setTimeout(function, milliseconds): Calls a function or evaluates an expression after a specified number of milliseconds.
window.setInterval(function, milliseconds): Calls a function or evaluates an expression at specified intervals (in milliseconds).
window.clearTimeout(timeoutID): Clears a timeout set with window.setTimeout().
window.clearInterval(intervalID): Clears an interval set with window.setInterval().

Events

window.onload: Executes when the window has finished loading.
window.onunload: Executes when the document or a child resource is being unloaded.
window.onresize: Executes when the window is resized.
window.onscroll: Executes when the document view is scrolled.
window.onfocus: Executes when the window gains focus.
window.onblur: Executes when the window loses focus.

Properties

document.title: Gets or sets the title of the document.
document.body: Returns the element of the document.
document.head: Returns the element of the document.
document.URL: Returns the complete URL of the document.
document.domain: Returns the domain name of the server that loaded the document.
document.referrer: Returns the URI of the page that linked to this page.
document.readyState: Returns the loading state of the document (e.g., "loading", "interactive", "complete").

Methods

document.getElementById(id): Returns the element with the specified ID.
document.getElementsByClassName(className): Returns a collection of elements with the specified class name.
document.getElementsByTagName(tagName): Returns a collection of elements with the specified tag name.
document.querySelector(selector): Returns the first element that matches the specified CSS selector.
document.querySelectorAll(selector): Returns a collection of all elements that match the specified CSS selector.
document.createElement(tagName): Creates an element with the specified tag name.
document.createTextNode(text): Creates a new text node with the specified text.
document.write(string): Writes HTML expressions or JavaScript code to a document.
document.open(): Opens a document stream for writing.
document.close(): Closes a document stream opened with document.open().
document.appendChild(node): Adds a node to the end of the list of children of a specified parent node.
document.removeChild(node): Removes a child node from the document.

Events

document.onload: Executes when the document has finished loading.
document.onDOMContentLoaded: Executes when the initial HTML document has been completely loaded and parsed.
document.onvisibilitychange: Executes when the visibility state of the document changes.

// Distance from the top of the page to the top of the screen:
const distanceFromTop = window.scrollY || window.pageYOffset;

// Distance from the Bottom of the Page to the Bottom of the Screen
const documentHeight = document.documentElement.scrollHeight;   גובה כולל של המסמך כולל מה שלא נראה

const viewportHeight = window.innerHeight; 
const scrollPosition = window.scrollY || window.pageYOffset;

const distanceFromBottom = documentHeight - viewportHeight - scrollPosition;

// width and height of the screen
const  sceenWidth = window.screen.width
const  sceenHeight= window.screen.height 

// width and height of vew port
const  viewPortWidth = window.innerWidth
const   viewPortHeight= window.innerHeight

// Using offsetWidth and offsetHeight
offsetWidth and offsetHeight include padding, scroll bars, and borders.
const element = document.getElementById('yourElementId');
const elementWidth = element.offsetWidth;
const elementHeight = element.offsetHeight;

// using clientWidth and clientHeight
clientWidth and clientHeight include padding but exclude borders and scroll bars
const elementWidth = element.clientWidth;
const elementHeight = element.clientHeight;

// Using getBoundingClientRect
getBoundingClientRect provides the size relative to the viewport and can include borders, padding, and possibly margins (depending on the layout)
const rect = element.getBoundingClientRect();
const elementWidth = rect.width;
const elementHeight = rect.height;

const element = document.getElementById('yourElementId');
const rect = element.getBoundingClientRect();
// rect.top: The distance from the top of the element to the top of the viewport.
const distanceFromTop = rect.top;
// rect.bottom: The distance from the bottom of the element to the top of the viewport.
const distanceFromBottom = rect.bottom;
// rect.left: The distance from the left of the element to the left of the viewport.
const distanceFromLeft = rect.left;
rect.right: The distance from the right of the element to the left of the viewport.
const distanceFromRight = rect.right;

rect.width: The width of the element.
rect.height: The height of the element.

Mouse Events

click: Triggered when the user clicks on an element.
dblclick: Triggered when the user double-clicks on an element.
mousedown: Triggered when the mouse button is pressed down on an element.
mouseup: Triggered when the mouse button is released over an element.
mousemove: Triggered when the mouse pointer is moving while it is over an element.
mouseover: Triggered when the mouse pointer is moved onto an element.
mouseout: Triggered when the mouse pointer is moved out of an element.
mouseenter: Triggered when the mouse pointer is moved onto an element.
mouseleave: Triggered when the mouse pointer is moved out of an element.
contextmenu: Triggered when the right mouse button is clicked, often used to create custom context menus.

Keyboard Events

keydown: Triggered when a key is pressed down.
keypress: Triggered when a key is pressed down and held (deprecated).
keyup: Triggered when a key is released.

Form Events

submit: Triggered when a form is submitted.
change: Triggered when the value of an element has changed.
input: Triggered when the value of an , , or <select> element is changed.
focus: Triggered when an element receives focus.
blur: Triggered when an element loses focus.
reset: Triggered when a form is reset.
select: Triggered when some text in a <textarea> or <input> is selected.

Window Events

load: Triggered when the whole page has loaded, including all dependent resources such as stylesheets and images.
unload: Triggered when the page is unloaded (e.g., when navigating away from the page).
resize: Triggered when the browser window is resized.
scroll: Triggered when the user scrolls the element or the entire window.

Clipboard Events

copy: Triggered when the user copies content.
cut: Triggered when the user cuts content.
paste: Triggered when the user pastes content.

Drag and Drop Events

dragstart: Triggered when the user starts dragging an element.
drag: Triggered while the element is being dragged.
dragend: Triggered when the user has finished dragging the element.
dragenter: Triggered when the dragged element enters a drop target.
dragover: Triggered when the dragged element is over a drop target.
dragleave: Triggered when the dragged element leaves a drop target.
drop: Triggered when the dragged element is dropped on a drop target.

Touch Events (for touch screens)

touchstart: Triggered when the user touches the screen.
touchmove: Triggered when the user moves their finger across the screen.
touchend: Triggered when the user removes their finger from the screen.
touchcancel: Triggered when the touch event is interrupted.

Focus Events

focusin: Similar to focus, but bubbles.
focusout: Similar to blur, but bubbles.

Other Events

transitionend: Triggered when a CSS transition has completed.
animationend: Triggered when a CSS animation has completed.
error: Triggered when an error occurs (useful for images and scripts).
hashchange: Triggered when the URL hash changes.

1. const sum = (...nums) => {
           return nums.reduse((sum, num) => sum + num);};
    console.log(sum(4,3,8,5)); //20
2. const accumulator = (...nums) => {
           return nums.reduse((acc, num) => acc * num);};
    console.log(accumulator(2,3,4)); //24

1. const array = [-5,8,6,4,7];
2. const max = array.reduse((max, num) => (max > num ? max : num));
3. const min =  array.reduse((min, num) => (min < num ? min : num));
// max = 8;
// min=-5;