DS

Integrez cette vidéo dans votre site ! Comment la faire demarrer automatiquement ?

DOM

🥷🏿Parcours l'arbre du DOM

<body>

Para 1

second Para 2

dernier Para

</body>

https://dupontdenis.github.io/parcoursArbreGenerator/

Interface

Le code de l'interface

Fonctionnalité

Cas de la calculette !

Clonez le code de l'interface

🖋️DOM

Travail personel sur le DOM

Property / Method	Description
element.appendChild()	Adds a new child node, to an element, as the last child node
element.attributes	Returns a NamedNodeMap of an element's attributes
element.childElementCount	Returns the number of child elements an element has
element.childNodes	Returns a collection of an element's child nodes (including text and comment nodes)
element.children	Returns a collection of an element's child element (excluding text and comment nodes)
element.classList	Returns the class name(s) of an element
element.className	Sets or returns the value of the class attribute of an element
element.cloneNode()	Clones an element
element.contains()	Returns true if a node is a descendant of a node, otherwise false
element.contentEditable	Sets or returns whether the content of an element is editable or not
element.firstChild	Returns the first child node of an element
element.firstElementChild	Returns the first child element of an element
element.getAttribute()	Returns the specified attribute value of an element node
element.getAttributeNode()	Returns the specified attribute node
element.getElementsByClassName()	Returns a collection of all child elements with the specified class name
element.getElementsByTagName()	Returns a collection of all child elements with the specified tag name
element.hasChildNodes()	Returns true if an element has any child nodes, otherwise false
element.id	Sets or returns the value of the id attribute of an element
element.innerHTML	Sets or returns the content of an element
element.insertBefore()	Inserts a new child node before a specified, existing, child node
element.lastChild	Returns the last child node of an element
element.lastElementChild	Returns the last child element of an element
element.nextSibling	Returns the next node at the same node tree level
element.nextElementSibling	Returns the next element at the same node tree level
element.nodeName	Returns the name of a node
element.nodeType	Returns the node type of a node
element.nodeValue	Sets or returns the value of a node
element.parentNode	Returns the parent node of an element
element.parentElement	Returns the parent element node of an element
element.previousSibling	Returns the previous node at the same node tree level
element.previousElementSibling	Returns the previous element at the same node tree level
element.querySelector()	Returns the first child element that matches a specified CSS selector(s) of an element
element.querySelectorAll()	Returns all child elements that matches a specified CSS selector(s) of an element
element.removeAttribute()	Removes a specified attribute from an element
element.removeChild()	Removes a child node from an element
element.replaceChild()	Replaces a child node in an element
element.setAttribute()	Sets or changes the specified attribute, to the specified value
element.setAttributeNode()	Sets or changes the specified attribute node
element.style	Sets or returns the value of the style attribute of an element
element.tagName	Returns the tag name of an element
element.textContent	Sets or returns the textual content of a node and its descendants
nodelist.item()	Returns the node at the specified index in a NodeList
nodelist.length	Returns the number of nodes in a NodeList

Rendre la monnaie !

Il est facile de trouver comment rendre 33€ en utilisant des pièces de 5,3 et 1.

En effet, il suffit de décomposer 33 sous la forme [ 33 = 5x + 2y + 1z ].

Improve your skill

Passons maintenant aux questions suivantes :

🦜Quels codes donnent les nombres :

pairs,
impairs,
positifs,
négatifs
multiples de 2
et patati et patata !

DM : Recherche le code !

Donnez le code d'une fonction qui recherche une sequence dans une autre !

recherche("AATC", "AATAAATCAAA");

> AATA****AAA

Vidéo

Integrez cette vidéo dans votre site ! Comment la faire demarrer automatiquement ?

Improve your skill

code :

Création d'une bibliothèque de fonctions.

→ voir code

VStudio code / snippet

dans visual tapez : for et recherchez

Magie !

const pizzas = [ { name:"queen", price: 12, ingredients: ["🐷","🍄","🍅","🧀"] }, { name:"cheese", price: 8, ingredients: ["🧀","🍅"] }, { name:"oriental", price: 14, ingredients: ["🍅","🐑","🍄","🌶"] }, { name:"royal", price: 9, ingredients: ["🍅","🌵"] }, ];

Trouvez les pizzas avec du 🧀 Trouvez les pizzas avec du 🍅

Commencez par vous poser les questions

const ingredients = ["🍅", "🐷", "🍄", "🧀"]; ingredients a "🍅"; // true ingredients a "🌶"; // false

DS

Recherche dans un tableau !

Recherche min

Recherche min/max

Quoi ?

⚠️ { id: 1, name: "Alice" } === { id: 1, name: "Alice" } // false

Vous comprenez ???

🛟🪡Les références : lien

Retirer les doublons d'un tableau d'objets : https://dupontdenis.github.io/uniqueInPlace-Object/

Unique : supprimer les doublons !

Un algorithme qui supprime les doublons d’un tableau est simplement une procédure qui parcourt les éléments et ne conserve qu’une seule occurrence de chaque valeur afin d’obtenir un tableau composée uniquement d’éléments uniques.

🪛En action

L’algorithme crée un nouveau tableau et laisse l’original intact.

https://dupontdenis.github.io/uniqueNewPlace/

Un algorithme qui supprime les doublons in‑place modifie le tableau existant et réorganise ses éléments pour éliminer les répétitions, sans allouer un second tableau.

🥇https://dupontdenis.github.io/uniqueInPlace-end/

https://dupontdenis.github.io/uniqueInPlace/

Explications

🛟 help

Lecture :

🪡Les références : lien

📦Les tableaux : lien

➿Les boucles : lien

🪛Les fonction sur le tableaux : lien

5 fruits, 5 légumes : lien

How to work !

https://github.com/dupontdenis/Code-NSI/blob/master/Sujet-01/ex01-1.md

🛠 How-to : lien

Algorithmique

🪛Trouvez une idée (un algorithme) permettant de mettre les dupond à gauche et les dupont à droite !

NSI : Back to Bac

🛠 Exercices JS

Cours JS

Les futurs projet

Projet Grid

Programmation des DS

Solution : DM trier les étudiants

Solution du challenge :Triez en CSS

cliquez

🛟Solution à inspecter !

Projet CV

💀Deadline

The project must be delivered on time !

👏🏼 Bravo à tous ceux qui ont pu mettre leur projet sur GitHub.

🔙Vous n'aurez pas de ma part un retour individuel !

Cependant, évitez de faire comme certains : j’ai reçu toutes les deux minutes une nouvelle version.

Certes, il existe une fonction de suppression des doublons, mais évitez cela à tout prix (vous pouvez à tout moment modifier le contenu de votre CV sans changer l’URL).

Je peux noter que certains étudiants n’ont pas suivi la formation Microsoft ni respecté le code du CV à cloner. Ainsi, nous retrouvons du code CSS non vu en cours. Voici par exemple un cas où la technologie flex est utilisée.

D’autres utilisent des technologies obsolètes, comme position: absolute, pour simuler des colonnes

Vous pourriez egalement donner des nom de classe plus explicite sur le contenu !

Attention : vous avez mis un numéro de téléphone. Soyez conscients que ce numéro est en ligne et visible de tous !

🥉Les bons points !

Certaines étudiantes et certains étudiants ont utilisé des media queries. Ce n’est pas une obligation, mais c’est un vrai plus.

Pour ceux qui ont mis des niveaux de compétences, voici une version avec des étoiles !

See the Pen like by SuperDupont (@SuperDupont) on CodePen.

Pages

Interface

Fonctionnalité

Cas de la calculette ! Clonez le code de l'interface

🖋️DOM

Travail personel sur le DOM

🪛En action

Explications

Installation de nodejs 🪛 Installation de nodejs

Cours 👍 Cours JS

JS 10%

TD 6 : Trombinoscope

🪛Trombinoscope

💀DeadlineThe project must be delivered on time !

👏🏼 Bravo à tous ceux qui ont pu mettre leur projet sur GitHub.

Cas de la calculette !

Clonez le code de l'interface

💀Deadline

The project must be delivered on time !