Closures 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-  Navigating Between DOM Nodes DOM node provides several properties and methods that allow you to navigate or traverse through the tree structure of the DOM and make changes very easily. Dr. AISSAOUA HABIB University Setif -1-  Navigating Between DOM Nodes Here’s a picture of links that allow for travel between DOM nodes: Dr. AISSAOUA HABIB University Setif -1-  Navigating Between DOM Nodes firstChild and lastChild give fast access to the first and last children. If the node doesn't have any child element, it returns null. The nodeName of the first-child node of the main DIV element returns #text instead of h1. Because, whitespace such as spaces, tabs, newlines, etc. form #text nodes and become a part of the DOM tree Dr. AISSAOUA HABIB University Setif -1-  Navigating Between DOM Nodes To avoid returning #text or #comment nodes, you could use the firstElementChild and lastElementChild properties to return only the first and last element node, respectively. Dr. AISSAOUA HABIB University Setif -1-  Navigating Between DOM Nodes Similarly, you can use the childNodes property to access all child nodes of a given element, where the first child node is assigned index 0. Dr. AISSAOUA HABIB University Setif -1-  Navigating Between DOM Nodes The childNodes returns all child nodes, including non- element nodes like text and comment nodes. To get a collection of only elements, use children property instead. Dr. AISSAOUA HABIB University Setif -1-  Navigating Between DOM Nodes parentNode property returns the parent of the specified node in the DOM tree. The parentNode will always return null for document node, since it doesn't have a parent Dr. AISSAOUA HABIB University Setif -1-  Navigating Between DOM Nodes The elements with a common parent are called siblings. the previousSibling and the nextSibling properties return the previous and next node in the DOM. We can use the previousElementSibling and nextElementSibling to get the sibling element skipping any text nodes. Dr. AISSAOUA HABIB University Setif -1-  Changing HTML Content The easiest way to modify the content of an HTML element is by using the innerHTML property. It is used to add HTML content into an HTML element as well as to get the HTML content present in an element: element.innerHTML = 'new content'; element.innerHTML; Dr. AISSAOUA HABIB University Setif -1- Changing HTML Content Dr. AISSAOUA HABIB University Setif -1-  Changing HTML Content The textContent provides access to the text inside the element: only text, minus all. For instance: Headline! Martians attack people! // Headline! Martians attack people! console.log(news.textContent); Dr. AISSAOUA HABIB University Setif -1-  Créer et insérer des éléments Avec le DOM, l'ajout d'un élément HTML se fait en trois étapes: 1. On crée l'élément ; 2. On lui affecte des attributs ; 3. On l'insère dans le document, et ce n'est qu'à ce moment-là qu'il sera « ajouté ». La création d'un élément se fait avec la méthode createElement(), un sous-objet de l'objet racine, c'est-à-dire document dans la majorité des cas. let newLink = document.createElement('a'); Cet élément est créé, mais n'est pas inséré dans le document, il n'est donc pas visible. Dr. AISSAOUA HABIB University Setif -1-  Créer et insérer des éléments On définit les attributs, soit avec setAttribute(), soit directement avec les propriétés adéquates. newLink.id= 'MyID'; newLink.setAttribute('href', 'http://www.w3schools.com/ '); On utilise la méthode appendChild() pour insérer l'élément Donc, pour ajouter notre élément dans l'élément portant l'ID myP, il suffit de récupérer cet élément, et d'ajouter notre élément via appendChild(): document.getElementById('myP').appendChild(newLink); Dr. AISSAOUA HABIB University Setif -1-  Créer et insérer des éléments appendChild() insére toujours l'élément en tant que dernier enfant. L'élément a été inséré, seulement il manque quelque chose : le contenu textuel ! La méthode createTextNode() sert à créer un nœud textuel let newLinkText = document.createTextNode("Mon site"); newLink.appendChild(newLinkText); Dr. AISSAOUA HABIB University Setif -1- Naviguer entre les nœuds Dr. AISSAOUA HABIB University Setif -1-  EVÉNEMENTS Les évènements correspondent à des actions effectuées soit par un utilisateur, soit par le navigateur lui-même. Pour réagir aux événements, nous pouvons assigner un gestionnaire (associer une fonction qui s'exécute lorsque l’événement se déclenche Dr. AISSAOUA HABIB University Setif -1-  EVÉNEMENTS La méthode consiste à utiliser DOM HTML. Nous avons deux manières de réagir aux évènements:  DOM-0: On utilise des propriétés qui vont assigner un gestionnaire d’événement à un élément spécifique en HTML,  DOM-2: utiliser la méthode addEventListener(). Dr. AISSAOUA HABIB University Setif -1-  EVÉNEMENTS 1. DOM-0: Nous pouvons assigner un gestionnaire en utilisant une propriété DOM avec: on Nous pouvons aussi assigner directement une fonction en tant que gestionnaire: Attention: - La fonction doit être assignée comme : sayThanks n’est pas sayThanks() - Utiliser elem.onclick n’est pas elem.ONCLICK Dr. AISSAOUA HABIB University Setif -1- Le DOM-0 ne permet pas d’assigner plusieurs fois le même gestionnaire d’événement à un élément HTML. Seul l'action du dernier évènement sera déclenchée, comme dans l'exemple ci-dessous 1. DOM-2: Le modèle d'événement DOM niveau 2 définit deux méthodes de l’objet Element, addEventListener et removeEventListener, qui permettent d'attacher ou de détacher un gestionnaire d'événement. Syntaxe: Dr. AISSAOUA HABIB University Setif -1- Les deux méthodes peuvent contenir trois paramètres :  event: une chaine de caractères désignant le type d’événement sans le "on" → "click", "load", "change", "mouseover", "keypress" etc.  handler: la fonction qui sera appelée lorsque l’événement se produit  phase: un booléen pour gérer la propagation, false par défaut. Exemple: Ou: Dr. AISSAOUA HABIB University Setif -1- Pour détacher un gestionnaire d'événement, il faut passer à la méthode removeEventListener les mêmes paramètres passés à addEventListener. Par exemple Dans l'exemple ci-dessous, le gestionnaire sera supprimé ou non? Ici, le gestionnaire ne sera pas supprimé, car removeEventListener est lié a une autre fonction (même code, mais cela n'a pas d'importance.) Dr. AISSAOUA HABIB University Setif -1- L’un des grands avantages de la méthode addEventListener() est de pouvoir lier plusieurs gestionnaires d’évènements de même type sur un élément HTML. Dr. AISSAOUA HABIB University Setif -1- Le troisième argument (phase) permet de gérer le sens de propagation de l'évènement. Ce paramètre s'avère utile lorsque les éléments HTML sont imbriqués comme dans l'exemple suivant: La question est de savoir le premier qui vas exécuter l'action si on applique à chacun d'eux un évènement (un 'click', par exemple).  Si l'élément enfant s'exécute avant l'élément parent, on parle de bouillonnement (Event BUBBLING) , c'est le comportement par défaut, la valeur du troisième argument est false  Si l'élément parent s'exécute avant l'élément enfant, on parle de capture (Event CAPTURING), la valeur du troisième argument est true Dr. AISSAOUA HABIB University Setif -1- Le code ci dessous exploite la capture Si vous cliquez d'abord sur 'enfant' (le paragraphe toto), c'est l'évènement du parent qui sera exécuté avant : c'est la phase de capture définie par la valeur true du troisième argument. Si vous mettez false (ou si vous ne mettez pas de troisième argument), vous êtes dans la phase de propagation par défaut, qui est celle du bouillonnement. Dr. AISSAOUA HABIB University Setif -1-  JSON (JavaScript Object Notation) 1. JSON (JavaScript Object Notation) is a lightweight data-interchange format that is easy for humans to read and write and easy for machines to parse and generate. 2. Uses: Widely used in web development, APIs, data storage 3. Supported by numerous programming languages (JavaScript, PHP, Python, Ruby, Java, etc.). 4. Stability: JSON is stable and has remained unchanged since its creation, avoiding version issues. Dr. AISSAOUA HABIB University Setif -1-  JSON Syntax Basics 1. JSON data is structured in key-value pairs. 2. Use curly braces {} for objects or square brackets [] for arrays. 3. Data types: Strings, numbers, booleans, arrays, objects, null 4. File Extension:.json is the standard extension for JSON files Dr. AISSAOUA HABIB University Setif -1- JSON Syntax Basics Dr. AISSAOUA HABIB University Setif -1-  JSON Syntax Rules 1. Double Quotes: Keys and strings must use double quotes 2. Numbers do not require quotes. 3. Trailing Commas: Not allowed 4. Common Errors: Missing commas, using single quotes 5. Use descriptive keys for better readability. Dr. AISSAOUA HABIB University Setif -1-  Converting JSON in JavaScript JSON.stringify(): Converts JavaScript objects to JSON strings JSON.parse(): Converts JSON strings to JavaScript objects Dr. AISSAOUA HABIB University Setif -1- Converting JSON in JavaScript Dr. AISSAOUA HABIB University Setif -1-