Closure and DOM in JavaScript PDF

Closure  A closure in JavaScript is created when a function is defined within another function.  It has access to variables in its parent scope, even after the outer function has finished executing.  A closure allows a function to remember the environment in which it was created, including the...

Closure  A closure in JavaScript is created when a function is defined within another function.  It has access to variables in its parent scope, even after the outer function has finished executing.  A closure allows a function to remember the environment in which it was created, including the variables that were in scope at that time.  Lexical Scope: defines the accessibility of variables and functions depending on their location in the source code. A closure maintains a reference to its lexical environment, capturing the state of the outer function at the time of its creation. Dr. AISSAOUA HABIB University Setif -1-  Closure Dr. AISSAOUA HABIB University Setif -1-  Closure In JavaScript, we can create objects using functions, commonly referred to as constructor functions. How it works:  You define a constructor function.  You use the new keyword to create a new object from that function.  Inside the function, you use this to attach properties and methods to the new object. Dr. AISSAOUA HABIB University Setif -1- Dr. AISSAOUA HABIB University Setif -1-  Closure  Closures can be used to create private members within constructor functions, ensuring data encapsulation and preventing direct access to sensitive information. Dr. AISSAOUA HABIB University Setif -1- Exercice Use closures and IIFEs to write a uniqueId function that returns a unique identifier each time it is called. Dr. AISSAOUA HABIB University Setif -1- Solution: Dr. AISSAOUA HABIB University Setif -1- Document Object Model DOM Dr. AISSAOUA HABIB University Setif -1-  Document Object Model DOM An HTML document is a tree structure, where elements like , , , , and so on, are leaves of the tree: Dr. AISSAOUA HABIB University Setif -1-  Document Object Model DOM To dynamically manipulate HTML code, we will need an interface that allows us to access this HTML code. The programming interface that we will use is the DOM. With the DOM, a web page is represented as a hierarchical tree. The different components of such a tree are referred to as nodes. Dr. AISSAOUA HABIB University Setif -1-  Types of DOM Nodes When a web page is loaded, the browser creates a Document Object Model of the page. The DOM tree is consists of different types of nodes, such as elements, text, comments.. Every node has a nodeType property that you can use to find out the type of node. The following table lists the most important node types: Dr. AISSAOUA HABIB University Setif -1-  Accessing the DOM Finding a node on a page is the most fundamental task when working with the DOM from JavaScript. 1. The most useful function is document.getElementById('elementId'). This function takes a string and returns the DOM element with that ID. Example: A paragraph const p = document.getElementById('myid'); console.log(p); Dr. AISSAOUA HABIB University Setif -1-  Accessing the DOM 2. The getElementsByTagName() is a method of the document object or a specific DOM element. This method accepts a tag name and returns a HTMLCollection of elements with the matching tag name in the order which they appear in the document. Note that the HTMLCollection is an array-like object To convert the HTMLCollection to an array, you use the Array.from() Example: Get all elements with the tag name "li": const collection = document.getElementsByTagName("li"); Change the inner HTML of the first element in the document: document.getElementsByTagName("p").innerHTML = "Hello World!"; Dr. AISSAOUA HABIB University Setif -1-  Accessing the DOM 3. The querySelector(CSS) method allows you to select the first element that matches one or more CSS selectors. Basic selectors: o * matches all elements of any type: let element = document.querySelector('*'); // selects the first element in the document o Type selector: select elements by node name: let firstHeading = document.querySelector('h1'); // finds the first h1 element in the document let listItems = document.querySelector ('div > p'); // Select the first element with the parent is a element. Dr. AISSAOUA HABIB University Setif -1-  Accessing the DOM o Class selector: Find the element with a given CSS class: let note = document.querySelector('.myClass'); // finds the first element with the myClass class. let listItems = document.querySelector('ul.nav > li) //select the first li element that is directly inside a element with the class nav o ID Selector: To select an element based on the value of its id: let logo = document.querySelector('#logo'); // finds the first element with the id #logo o Attribute selector: You can select elements based on associated attributes document.querySelector("[href]"); //theHABIB Dr. AISSAOUA firstUniversity element Setif -1- with an href attribute  Accessing the DOM 3. querySelectorAll(CSS) similar to querySelector but it returns all the elements that matches the specified CSS selector in the document. In other words, the result of elem.querySelector(css) is the same as elem.querySelectorAll(css) Dr. AISSAOUA HABIB University Setif -1-