JavaScript côté navigateur : Pratiquons avec une TodoList

Dans ce chapitre je vous propose de pratiquer ce que l'on a vu depuis le début de cette formation au travers d'un exemple concret : la création d'une liste de tâche à faire.

Soutenez Grafikart:

Retrouvez Grafikart sur:

[clementmartin]

Hello,
Deux petits tricks :
- À 8min26 plutôt que de réécrire "createElement" pour que VSC propose l'import, on peut se mettre au bout du mot et utiliser la combinaison de touches "Ctrl + espace", pour arriver au même résultat.
- À 9min06 pour renommer une constante sans faire des copier/coller (et potentiellement rater des occurrences), le mieux est de placer son curseur sur le nom et d'appuyer sur "F2" (touche universelle pour renommer). Ça ouvre une petite fenêtre dans laquelle on peut mettre notre nouveau nom. Lorsque l'on valide le nom est changé partout. Ça fonctionne sur tout ce qui est nommé Et ça fonctionne au sein des import/export des modules avec une petite subtilité. Si on le fait depuis l'export, ca va changer le nom dans tous les fichiers qui en font l'import. Si on le fait du côté de l'import, ça modifiera juste le nom au sein de ce fichier et ça modifiera l'import sous la forme => import { [ancien nom] as [nouveau nom] } from 'lefichier.js';

Merci pour la formation

[keo]

Merci pour cette vidéo "pas à pas", à l'heure de la multiplication des librairies JS, revenir aux sources ne fait pas de mal :)

33:05 "Je rajoute un peu de ..." quand le naturel reviens au galop !😁😁

[tutoactiv]

Vraiment compliqué pour un débutant, j'ai tout suivi et là c'était impossible

[simontrichereau]

TP très complet et détaillé ... Même si je n'aurais jamais fait comme ça je dois avouer que c'est propre ...

En revanche petite remarque dans ta fonction createElement, plutôt que d'utiliser la méthode setAttribute pourquoi ne pas utiliser les clés du HTMLElement directement ?

C.a.d, plutôt que de faire : element.setAttribute(attribute, value), faire : element[attribute] = value

Ainsi tu n'as pas besoin de faire la condition if(value !== false) ... Il faudra juste ne pas utiliser la propriété class mais className ce qui au final est un bon apprentissage pour un jour passer sur React ;)

[nabuza]

Tuto Excellentissime! Bravo et merci pour le boulot.
A 17:31 tu évoques la possible injection de HTML depuis l'extérieur et donc qu'il est plus judicieux d'utiliser la méthode innerText.
En fait, je ne vois pas comment on pourrait dans ce cas injecter du code et en quoi cela serait un problème. Quelle méthode non "sécurisée" aurait-on pu utiliser ?
Peux-tu revenir sur ce point ? ou quelqu'un de la communauté pour m'expliquer ? :)

[aradradev_]

Salut le dernier la video precdent j'ai pas reussi a faire le json on me sort undefine.

[diafarasacko]

salut! j'ai du mal afficher le " SMS d'alerte " alors j'ai fait extactement comme dans la video qui peut m'aidé

[Greg-dnrt]

Merci pour cette vidéo. s'il te plaît les dossiers m'embrouillent entre app.js, todo.js, api.js, dom.js. pourrais-tu revenir éventuellement sur l'utilité de chaque dossier ? merci d'avance !

[nabilbekka]

Le problème avec cette méthode, c'est que ça gère seulement l'affichage. Je vois que c'est mieux de traiter ça sous forme de données. Par exemple avoir un tableau, dans lequel on a nos différentes tâches. A chaque fois qu'on ajoute une elle s'ajoute au tableau et quand on supprime une elle se fait supprimer du tableau.

[danielmpay]

grafikart comme avoir le code HTML ET CSS de ce exercice?? pour que ca aille plus vite

[nouhabc]

s'il vous plait a quoi sert les users emportes par fetch()

[_Greenflag_]

Du coup ton code à 4:08 de gestion de l'erreur ( throw new Error ( ... ) ) ne sera jamais appelé puisque l'erreur se produit à l'endroit de l'appel de la fonction (ici dans ton app.js) ?
Et concernant ta fonction createElement ( ) étonnant que ça ne plante pas, puisque c'est déjà une fonction build-in de Javascript... ca pourrait générer des bugs

[feu]

Bonsoir professeur je me demandais si il a une différence dans le fait d'utiliser dans la boucle for les mots clés "of" ou "in"

[danielmpay]

grafikart pourqoui cest tjr ecrit comme ceci :
if (r.ok) {
return r.json();
}

throw new Error("Impossible de contacter le serveur");

ou lieu de ceci?

if (r.ok) {
return r.json();
} else {
throw new Error("Impossible de contacter le serveur");
}

[tcgvsocg]

j aurais aimé que quand tu fais ton "remove" tu montre comment ont fait pour afficher un ecran "etes vous sur de vouloir supprimer?"

[arnaldo.]

franchement dit j'ai pas pu faire quoi que ce soit moi même

[gm.]

Franchement dommage mais cela est beaucoup trop compliqué pour les débutants, les explications sont passées trop rapidement. Enfin perso j'ai décroché sur ce cours.

[oussamaharabazan]

Atari de vous
Agréable 2
Zc à jamais
Également

[tcgvsocg]

mais c'est super j ai meme aps besoin de mettre la video en x2 merci