Introduction to JSON

A closure in JavaScript occurs when a function is defined inside another function, enabling the inner function to access and remember variables from its parent function's scope even after the outer function has finished executing.

In JavaScript, closures are used to create private members within constructor functions. This ensures data encapsulation, shielding sensitive information and preventing direct access.

The lexical scope in JavaScript establishes the accessibility of variables and functions based on their physical position in the code. Closures maintain a connection to this lexical environment, preserving the outer function's state when they were created.

Objects can be created in JavaScript using constructor functions. This pattern involves defining a constructor function, using the 'new' keyword to create a new object, and using the 'this' keyword within the function to bind properties/methods to the object.

The Document Object Model (DOM) is a programming interface used to manipulate HTML code dynamically. It represents a web page as a hierarchical tree structure, where elements like 'div', 'span', 'p', etc., are nodes in the tree.

When a web page is loaded, the browser constructs a Document Object Model (DOM) to represent the page. Different components within this tree are referred to as nodes.

The Document Object Model (DOM) enables developers to access and manipulate HTML code, enabling them to dynamically change the web page’s structure and style, effectively creating interactive web experiences.

The Document Object Model (DOM) allows developers to interact with the user interface, responding to user actions like clicks or form submissions, making web pages more responsive and dynamic.

Selects the first element in the document that matches the specified CSS selector.

Selects all elements in the document that match the specified CSS selector, returning them as a NodeList (array-like object).

Selects an element based on its ID (the value of its 'id' attribute).

Selects elements based on their CSS class name. Use a '.' before the class name in the selector.

Selects elements based on their attributes and values.

Returns the first child of the node. It returns null if there's no child element.

Returns the last child of the node. It returns null if there's no child element.

The childNodes property of an element returns all its children, including text nodes and comments. Use it to access all child nodes.

The 'children' property of an element returns only its child elements, excluding text or comment nodes. Use it to access only elements.

The 'parentNode' property of an element returns the element's parent node in the DOM tree. It finds where the element belongs in the structure.

Siblings are elements that share the same parent. 'previousSibling' and 'nextSibling' find the previous and next node in the DOM tree, including text nodes.

The 'innerHTML' property allows you to modify the HTML content within an element, adding or getting HTML content.

The 'textContent' property provides access to the text content of an element, excluding HTML tags.

To create a new HTML element in the DOM, first use the createElement() method, then assign any attributes, and finally append it to the document.

The createElement() method, a sub-object of the root object (usually the document), is used to create a new HTML element in the DOM.

A built-in method that allows you to insert an element as the last child of another element.

Creates a text node that can be added as content within an HTML element.

A method that assigns a listener to an HTML element to respond to events.

Assigning an event handler directly in HTML using properties like 'onclick' to trigger functions when events occur.

A more modern approach to event handling using the addEventListener() method, offering better control and flexibility.

Creating a new element using the 'createElement' method, which initially exists in memory but isn't visible on the webpage.

Adding attributes to an HTML element using the 'setAttribute' method or directly assigning properties like 'id' or 'href'.

The process of inserting a created element into the HTML document using methods like 'appendChild' to make it visible on the webpage.

DOM-2 introduced addEventListener and removeEventListener methods for attaching and detaching event handlers to HTML elements.

The addEventListener method allows multiple event handlers of the same type to be attached to an HTML element.

The removeEventListener method detaches an event handler by using the same parameters passed to addEventListener.

The phase parameter in addEventListener controls the propagation of events, allowing for event bubbling (child to parent) or event capturing (parent to child).

Event bubbling is the default behavior, where events flow from the innermost element to the outermost parent element.

Event capturing is a propagation phase where events flow from the outermost parent element to the innermost element.

The event parameter of addEventListener and removeEventListener specifies the type of event, like "click", "load", "change", or "mouseover", without the "on" prefix.

The handler parameter in addEventListener and removeEventListener is a function that will be executed when the specified event occurs.

A lightweight and human-readable data exchange format used for transferring data between applications. It uses key-value pairs and supports various data types.

JSON is a popular choice for storing and sharing data on the web. It simplifies communication between applications by enabling them to send and receive data in a standardized format.

JSON data is organized either as a collection of key-value pairs (objects) or as a list of values (arrays). Objects use curly braces {} and arrays use square brackets [] .

Strings are text values enclosed in double quotes. Numbers can be integers or decimals. Booleans are true/false values. Arrays are ordered lists of values. Objects are collections of key-value pairs. Null represents the absence of a value.

Keys (names) in JSON objects must be enclosed in double quotes. Strings must also be enclosed in double quotes. Numbers do not need quotes.

JSON.stringify() converts JavaScript objects into JSON strings for transmission. JSON.parse() does the opposite, converting JSON strings back into JavaScript objects.

JSON data is typically stored in files with the '.json' extension. This makes it easy to identify and process JSON data.

The curly braces {} define an object in JSON, which represents a collection of key-value pairs. These pairs are separated by commas and use double quotes for the keys. Objects are used to structure and organize complex data.