[Cours / Tuto] Apprendre Javascript de A à Z - Le DOM (2/6)
Вставка
- Опубліковано 27 тра 2024
- 🚀 La suite de ce cours (et bien plus) se trouve ici : fromscratch.podia.com/
0:00 - Intro
2:14 - Qu'est-ce que le DOM
11:30 - Query selector
33:20 - Click event
1:01:24 - Mouse events
1:29:49 - Keypress event
1:49:34 - Scroll event
1:58:54 - Form events
2:27:30 - Load event
2:30:30 - Les forEach
2:39:52 - addEventListener vs onclick
2:52:08 - stopPropagation, removeEventListener
2:55:53 - Le BOM
3:26:44 - setProperty
3:34:23 - Conclusion et suite des cours
- Support pour démarrer → github.com/JustFS/mastering-f...
- Code source du cours complet → github.com/JustFS/mastering-f...
🚀 La suite de ce cours (et bien plus) se trouve ici : fromscratch.podia.com/ - Наука та технологія
![[Cours / Tuto] Apprendre React de Zéro (débutant)](http://i.ytimg.com/vi/f0X1Tl8aHtA/mqdefault.jpg)
![[Cours / Tuto] Apprendre React de Zéro (débutant)](/img/tr.png)
![[Cours / Tuto débutant] Apprendre Javascript de A à Z - Les bases (1/6)](http://i.ytimg.com/vi/Ew7KG2j8eII/mqdefault.jpg)
![[Cours HTML] Apprendre HTML de zéro (tuto débutant 2024)](http://i.ytimg.com/vi/68oSyuKVjeU/mqdefault.jpg)
![[Tuto Redux] Apprendre Redux de zéro (feat React)](/img/n.gif)
Pédagogie incroyable, franchement super les vidéos!!! Je ne comprenais pas du tout le principe de JS mais après tes vidéos mon esprit est tout ouvert. 👍🏼🙏🏼👏🏼
Merci à toi 😊
2.38.18 Le FromScratch du futur 😁😁👌👌
Je reviens te mettre un commentaire! Je confirme, j'ai passé 30h sur ma formation sans rien comprendre pour comprendre du premier coup tes vidéos. Un grand merci! Tu sauve ma carrière! LOL
Haha ravi d'avoir pu t'aider !
Tu es le meilleur prof que j'ai jamais eu. Tes explications sont simples, claires donc facile à comprendre. Merci beaucoup pour tes cours.
Merci du compliment
Merci de nous faire partager ton savoir sur youtube!! C'est beau internet, j'ai suivi les deux cours en Javascript et je veux et j'ai le désir de progresser en front. J'aime bien ta personnalité, ta façon d'expliquer est claire et avec de la volonté on progresse. Je vais passer commande sur ton site, d'abord pour que mon niveau en code soit au niveau de ma créativité car pour le moment, je ne peux pas me lever le matin me dire je veux faire sa et le faire comme je veux. Et en plus de sa c'est une manière pour moi de te remercier de ce que tu apporte à internet et au jeune comme moi qui veulent évoluer en programmation.
Pédagogie parfaite pour les débutants, c'est la première fois que j'amuse avec javaScript. J'ai hâte de voir la suite, merci !
Merci à toi 😊
Merci c'est énorme la pédagogie de bien prendre le temp et de pas embrouiller les esprits.@
bah la suite est payante (une formation)
je vous remercie infiniment le faite que t'as pu de consacré votre temps et votre énergie afin que nous puissions comprendre Js, une bonne technique et une trés bonne explication, merci beaucoup Prof
Avec plaisir !
vraiment mrc pour ton temps
Franchement bien les cours tu fais symfony?
Je suis à 3h26 ma tête va exploser mais c’est assez bien expliqué je remercie Julien.
Le " merde j'ai écris connard ? " UNE MASTERCLASSE !
J'ai essayer de suivre les Tutos de Grafikart pour le JS c'est je pense inaccessible pour un vrai débutant on est larguer en 30 seconde alors que avec toi ... c'est beaucoup plus simple et facile a assimiler et juste pour ca je t'en remercie !
maintenant plus qu'a a acheter ta formation ! et passer a react !
CIAO !
MERCI beaucoup ! (j'ai appris à écrire canard depuis 😅)
Effectivement Grafikart est très mauvais pédagogue, de 1 il va trop vite et de 2 est trop complexe dans ses exemples et explications. Ces contenus sont juste bien si tu as déjà des bonnes connaissances dans le langage, pour compléter d'éventuelles lacunes (ou si tu as un QI de 140 comme lui).
Je suis d'accord
Je debute
J'ai des bases html et css
Grafi est bon attention faut avoir des bases et encore il va trop vite.
Par contre from scratch il explique bien sans stress
J'hesite a prendre sa form js
Franchement, je te remercie énormément pour tes vidéos et ta pédagogie. J'avais peur du Java script, mais maintenant je me sens plus a l'aise avec tes vidéos...
Franchement ce cours vaut de l'or, c'est tellement altruiste de partager du savoir ! Bravo F-Scratch
Merci à toi 👍
Salut, je suis tes cours et franchement, tu es le meilleur, rien à dire, on a envie de t'écouter et 3h40 de cours ne paraissent pas si long.
Merci pour ce cours!!!
Merci infiniment :)
Vraiment, j'adore tes cours, avec de l'humour et de la bonne humeur, on comprend beaucoup mieux. بارك الله فيك.
Merci à toi 😊
Merci Julien. J'ai commencé à étudier depuis Mai dernier avec tes videos de HTML/CSS et JavavaScript et c'est un plaisir de t'avoir comme enseignant. Tes videos sont trés motivantes et quelque fois lorsque j'écoute tes vannes, je rigole tout seul 😅. Merci encore!
Haha merci beaucoup :)
Tes vidéos sont incroyables, tu es tellement pédagogue. Grosse force à toi. Chacune de tes explications sont claires et limpides même mes profs ils expliquent pas comme ça🥲 . Un GRAND merci !! 🙏
Tes videos sont un pur plaisir. Sincerement on ne peut faire mieux en terme pédagogique. Merci infiniment.
Merci beaucoup
Franchement tes vidéos donnent envie de continuer et c'est très bien expliqué sincèrement étape par étape vraiment chapeau à vous 🎓
Merci à toi 😊
Merci 1000 fois pour ces vidéos! Tu as le don de captiver l'auditeur.
Merci du compliment 😅
Franchement merci, ça fait plusieurs semaines que je galère sur le JS par manque de longue vidéo "pratique" sur le sujet. En quelques heures de travail avec tes vidéos je suis OP donc merci ! Je vais sans doute jeter un oeil sur ton site pour continuer mon apprentissage
Merci pour ta confiance et bon courage à toi :D
Je ne commente jamais les vidéos mais là je dois avouer que tu es un très bon prof, je suis en formation dev en ce moment et avoir une vidéo pédagogique aussi fourni et bien expliqué m’aide énormément à ne pas être à la ramasse. Alors juste … MERCI
Avec plaisir 😉👌
Pareil, je commente rarement les vidéos, mais alors là je me sentirais vraiment ingrat de ne pas te remercier pour ce super contenu. MERCI
Je suis vraiment fan de la façon que tu expliques. Tout est super clair. Vraiment du bon boulot bravo !
Je pense continuer la suite des cours 😁
Merci à toi 😊
Un grand merci pour cette video. j'ai beaucoup appris grâce à toi.
Merci beaucoup From Scratch. J'ai bien aimé ton cours 😇
Merci à toi 😊
Merci pour ce cours, je vois enfin la lumière. Je sens que mon cerveau se débloque, du coup j'ai pris la formation complète même si je suis à l'aise avec html et css je pense que cela va me faire du bien quelques révisions :)
J'ai regardé seulement 45min de ce cours c'est beaucoup plus complet et clair que le cours que j'ai acheter... Hate d'avoir la suite de ce cours !
super cours premier pas avec js fait sans soucis particulier, juste deg d'avoir passé 2 heures a comprendre qu'il fallait que je clean le cache pour appliquer mes styles x)) ! Bonne continuation et merci !
je suis vraiment fan de la façon dont vous expliquez le sujet
j'attends avec impatience les parties restantes
fromscratch.podia.com/ La suite c'est ici 👌
Coucou,
Tes cours sont super !!!! Vraiment merci pour tout ce que tu as fait.
Continu comme ça, je te recommande sans problème à tous ceux qui souhaite apprendre le dev web.
Merciii, franchement, tu me sauves ! 🙇🏾♀🙇🏾♀
Oh merci beaucoup !
Incroyable merci pour les travaux
Je viens de découvrir tes cours et franchement, c'est vraiment top !!!
J'ai suivi une formation, mais la partie JS n'était pas terrible et là, j'ai appris nettement plus.
Je vais d'ailleurs poursuivre vu que les prix ne sont pas délirants effectivement.
Encore un grand merci à toi !!!
Merci à toi pour ta confiance et bon courage ! 😊
Franchement merci, un superbe travail, une bonne pédagogie et un type sympatoche, que demande le peuple ! vraiment une bonne approche :)
Merci ! 😊👌
Franchement super je vais étudier chez o'clock et la cest super pour anticiper ! Merci !
Super vidéo. Ta façon d'expliquer est parfaite.
Je suis actuellement dans une formation pour devenir dev web.
Ton cour est une pépite et un super support pour mon apprentissage. Merci.
Merci et toi et bon courage !
Merci pour ce tuto. Il est vraiment Top ! Grâce à toi je peux vraiment comprendre le JS. Au passage j'ai remarqué que quand tu es dans la section "Keypress event" l'argument "keydown" dans le document.addEventListener donne de meilleurs résultats. On peut avoir la touche ESC et les flêches en plus que si on met l'argument "Keypress".
Franchement, je te remercie énormément pour tes vidéos et ta pédagogie. Je me sens plus a l'aise avec tes vidéos car vous avez demystifié javascript pour moi. je suis en attente de la suite 3/6, 4/6, 5/6 et 6/6. Merci !
Merci à toi, la suite existe déjà mais elle est sur mon site de formation : fromscratch.podia.com/
Merci infiniment. Nous attendons impatiemment la partie 3
Elle est ici : fromscratch.podia.com/ 😊
Merci beaucoup pour cette vidéo, j'attend la partie 3 avec impatience !
Si t'avais été au bout tu aurais vu que la suite est sur mon site de formation 😅 fromscratch.podia.com/javascript-de-a-a-z
Bonjour
a 1h:05
j'ai programmé le meme code pour mousemove.
mais l'évènement n'est déclenché dans la console que sur click de la souris et non pas sur déplacement de la souris dans la window.
je n'arrive pas à comprendre la cause
et Merci d'avance
je viens de finir tous le contenu free, j passe sur le payant sans hésiter, en vrai 50€ pour tous ça c'est littéralement donné, Merci !
tu es le meilleur, j'aime beaucoup tes videos. tu m'apprends beaucoup de choses ... courage!!!
Merci à toi 😊
je suis débutant en JS, franchement vos vidéos et pédagogie me sauvent la mise... merci beaucoup @From Scratch
Merci beaucoup pour ce cours je suis en formation avec open classroom et tu as ete un tres gros de complement
Bonjour en réalité j'ai hâte d'apprendre dès que je trouve le montant demandé
Il faut le dire, tu es vraiment un excellent professeur...
Merci ! 😊
Tu es un expert en apprentissage
Très bonne pédagogie merci beaucoup Julien ! sans doute un des meilleurs tuto
Merci à toi 😊
O
@o
merci c'est en parti grâce à toi que j'ai appris le html/css et là mes débuts sur javascript, je viens de finir la vidéo ducoup je vais acheter ta formation javascript sur le site
Merci beaucoup et bon courage !
Bonsoir, Svp est ce que vous pouvez faire la suite de ce cours svp svp svp svp
c'est bien fait et bien expliqué
Tout expliqué à la fin de la vidéo
Vraiment très instructif, dense et clair à la fois! merci! je vais acheter la suite...
ça fait 6 mois que je cherche une formation digne de ce nom avec la possibilité d'aller à mon rythme!
je bloquais carrément sur javascript, mon cerveau refusait ce langage (faut dire que je suis graphiste, je suis plutôt une créa...) Ton cours l'a rendu beaucoup moins obscur, et surtout, je mesure le potentiel que javascript va apporter à ma créativité.
Merci encore!
Génial ravi de pouvoir t'aider 😁👌
A 37:27 pour ceux qui ont un problème dans leur code javascript, qui fait que leur code n'est pas initialisé, il faut que vous fassiez un événement pour initialiser le click au moment ou votre navigateur se charge cela donne un truc comme ça:
document.addEventListener("DOMContentLoaded", function () {
const questionContainer = document.querySelector(".click-Event");
questionContainer.addEventListener("click", () => {
console.log("Click !")
})
})
Pour ma part ça à réglé mon problème.
Je vous remercie cher prof
Merci beaucoup, vraiment j'ai beaucoup appris de vous, très pédagogue.
Avec plaisir !😊
Thank you perfect explanation
Merci pour la vidéo!!!!
Pour info de façon simplifié :
getElementsByClassName() retourne une HTMLCollection et doit être itéré avec :
la boucle for()
ou le convertir en array via Array.from
ou […elements].forEach(…)
querySelectorAll() retourne une nodeList qui peut être itéré sa propre method forEach() ;)
Excellent cours.
salut, je suis la car dans le cadre scolaire je fait du codage , jai regarder la première vidéo hier ( j'ai découvert ton compte) et j'ai été drôlement surpris car la deuxième partie est sortie au moment même ou je cherchais la deuxième partie , qu'elle coincidence avec un an d'écart j'ai eu beaucoup de chance dans mon timing , sinon le cours est génial et super bien expliquer , je pense même acheter une formation que tu propose car tu explique super bien , merci !!
Merci à toi bon courage dans tes cours !
Bonjour, allez je me lance je prends ton cours. Je n'ai pas regardé les cours de java car je préfère tout faire depuis ta plateforme, mais j'ai regardé la fin de cette vidéo ou tu présente tous le projets et ça donne envie, en plus tu es très pédagogue par rapport à d'autres, en tout cas un pédagogie qui me convient.
Merci à toi Mike 😊
Merci pour tes astuces VSCode, graves utiles
Avec plaisir 😁
vraiment extraordinaire.merci beaucoup
Avec plaisir 😁
Super video! Merci!!!! PS: pour le mouvement de la souris, je n'ai pas de lag...mais je ne mets pas de transition.
J'ai beaucoup aimé...!
Excellente pédagogie pour réapprendre le JS facilement, j'avais déjà appris via tes 6 vidéos à l'époque (2 ans je crois) mais je sens que je vais acheter quand même ta formation et me la garder de côté au besoin !
Je noterais juste le petit rire que tu m'as fournie à 2: 21:33 avec ton "Merde j'ai écris connard"
Je recommande fortement si on souhaite comprendre de manière simple le JAVASCRIPT
Merci beaucoup Antoine t'es un ancien toi 😅
Vraiment tres bien expliqué :) Merci
Avec plaisir 🙂
Salut, merci beaucoup pour ta video, j'ai une question , dans le css que signifie (content: " " ; ) ??? SVP
Merci pour vos efforts!
Avec plaisir 😊
Bref c genial Merci... question pedagogie c parfait
Vous êtes très cool dans vos explications. Et la suite svp ?
Les P3, P4, P5 et P6
Tout est indiqué dans la description ou à la fin de la vidéo
J'ai compris.
Vous êtes bon.
Je prends les 3 formation en fin du mois.
Je recherche également une bonne formation pro comme la vôtre en C++
Bonjour monsieur, dans la partie "Keypress" quand j'essai d'appelé une src audio dans le js il ne réagit pas. Je reçois par ailleurs un message d'erreur disant qu'aucune source n'a été trouvé et effectivement quand je le tape sur VScode je n'obtiens pas d'aide pour retourné à la racine de mon projet afin de sélection ma source mp3. Ps J'espère avoir été clair sur le sujet, merci à vous pour ce cours
En vitesse fois 2 c'est parfait
Tjs extra..merci vraiment très bien
merci beaucoups pour votre aide
Hello a 2:26:11 je bloque sur le .innerHTML j’ai un message d’erreur qui me dit « type error : cannot set properties of null (setting « innerHTML » alors que je t’ai recopier a la perfection
Bonjour à partir de 2h25 les étape JS ne fonctionne pas est-ce que cela ne concerne que moi
?
Merci, merci, merci !!!!
Bonjour je n'arrive pas à voir le lien git hub du cours pour entamer... merci de me l'envoyer spt
Bonjour, j'ai déjà acheté tes cours HTML CSS et JavaScript et aujourd'hui je voulais acheter le React pour compléter, ça passe pas, c'est écrit inscription terminé.
bonjour, j'adore ta façon d'expliquer les choses et tes videos m'aident beaucoup. C'est pour quand la 3ème partie ?
Tout est dispo sur mon site de formation : fromscratch.podia.com/ 😊
je vous remercie vous êtes top
Salut from scratch,
merci pour tes vidéos, je serais bientôt en formation openclassroom je pense que j'irais faire un tour sur ton site.
Force
Salut, si tu comptes faire la formation dev web, en suivant les cours de JS avec lui, tu vas cartonner, tu prends une grande avance. Je suis actuellement en formation avec OpenClassRooms et franchement, je suis contente d'être tombé sur lui.
@@maliciaabenaqui1196 j'ai aucun doutes, chaque cours que j'ai suivi de scratch sont très bien expliqués. J'intégrerai la formation des qu'il y aura des places, on se retrouvera peut-être sur la plate-forme !
Je vous remercie
Plus le temps passe et plus le code se simplifie, et plein de tâches sont déjà effectuées automatiquement et par défaut, jusqu'au jour où il suffira juste de demander et il exécutera.
Bonjour,
Merci pour ce cours qui est très bien fait.
J'ai vu qu'il existait Outils Microsoft Edge pour VS Code qu'en pensez-vous ?
Avez-vous déjà utilisé cet outil ?
Merci
Salut, non je n'utilise pas cet outil, je n'utilise pas Edge non plus
Bonjour je suis sur ta formation vraiment super.
Je ne parvient pas à afficher en vert ou rouge je t'ai écrit en commentaire sur ta vidéo dans les cours et je n'ai toujours pas de nouvelles je suis donc bloqué.
Peux tu m'aider s'il te plait ou si quelqu'un passe par là et à eu le même problème que moi?
Bonjour @FromScratchDeveloppementWeb j'ai pris ta formation mais je n'avais pas remarqué que tu avais un pack avec la totalité de tes formation frontend, est-il possible changer en payent la différence ?
Biensur que c'est possible, envois moi on message sur la plateforme je m'en occuperai
a cause de toi j'ai vécu 4heure d'info horrible a juste t'écoute wlh j'en peut plus mais ton tuto est vla bien bg🤟👍👍
Nice
Merci beaucoup , mais pouvez-vous me montrer la data structure , cela me permettra de mieux structuré mon code merci
merci pour cette vidéo, pour info les éléments input peuvent aussi être récupéré via leur id directement comme les button et les checkbox
Exact, tous les ID sont récupérables en fait
merci
Bonjour,
Mon navigateur Microsoft Edge ne reconnaît pas les instructions index.js.
Comment faire ?
Merci de votre aide 😀
Le message est le suivant :
Live reload enabled.
Merci de votre aide 😀
Par contre si je mets le code dans onglet console du navigateur
Par Exemple :
const questionContainer = document.querySelector(".click-event");
//console.log(questionContainer);
// questionContainer.style.borderRadius = "150px";
questionContainer.addEventListener('click', () => {
console.log("Click !");
questionContainer.style.background = "red";
});
undefined
2VM85:6 Click !
Cela fonctionne correctement. J'ai sur le click un changement de la couleur en rouge
Merci😀 de votre aide
Pourquoi utiliser Edge ?
Bonjour, merci pour ses tutos de grande utilité.
J'ai une petite question, je ne sais pas pourquoi quand je fais dans la console un document.queryselector("p"); (pour l'exemple), celui me renvoie bien la bonne réponse est Berne .
Cependant, lorsque je fais un console.log(document.querySelector("p"); celui-ci me renvoie juste p avec un menu déroulant est toutes les caractéristiques de la balise p.
Quelqu'un sait d'où vient ce problème svp ?
Il y a aucun problème, dans le second cas il te renvoie juste la balise P comme un objet javascript avec toutes ses caractéristiques 😉
Bonjour les autres parties svp 🙏🏽 merci infiniment
fromscratch.podia.com/
Bonjour monsieur, est-ce que vous avez un code de réduction en ce moment pour le parcourt Mastering Front-End ? merci d'avance!
Salut, non je n'en fait pas car ça ne serait pas très juste par rapport à ceux qui ont payé le prix normal
@ d’accord merci bien !
Bonjour, Merc i pour vos explications. La troisième partie (3/6), il faut obligatoirement payer sur le site ?
Bonjour, oui tout n'est pas gratuit dans la vie 😅
C'est vraiment super ces vidéos, j'apprend beaucoup c'est super clair. Cependant j'ai un problème quand je fais le window.addEventListener("mousemove", (e) => { console.log(e); je n'ai pas les logs de la souris qui se déplace, je pense que ça doit venir de la console car mon code est bon j'ai vérifier plein de fois . Est ce que tu aurais une idée ? Merci d'avance et félicitation pour toutes ces super vidéos
Salut, tu es sur Mac ? J'ai déjà eu des élèves qui ont eu des soucis
@ Non je suis sur pc et j'ai essayé ton spcrit finale tout fonction correctement , mais je n'ai pas réussi à avoir ces données
🍀 Si tu veux devenir Développeur Front-end, c’est ici => fromscratch.podia.com/
Salut, super video mais j'ai un ptit probleme a 42:55 quand je lance le program apres avoir mis le "questionContainer.classlist.add", ca me met l'erreur
"Cannot read properties of undefined (reading 'add')".
Si quelqu'un peut m'aider svp
Ca veut dire qu'il ne connait pas "questionContainer", essaye de le loguer ou de controler la syntaxe
Je suis ton 1000 ème like superbe video merci
Et moi je suis ton premier like sur ce commentaire😅
mais si non toutes tes video sont tres tres pedagogique je te remerci beaucoup
Merci à toi 😊
Bonjour, et merci énormément pour cette vidéo.
J'avais juste une question si quelqu'un peut me répondre :
c'est sur le forEach, comment peut t-on faire pour que le scale revienne à 1 en cliquant une deuxième fois sur les box? (1er clic pour les rétrécir, et une 2 ième fois pour qu'ils reviennent à leur états d'origine).
merci
boxes.forEach((box) => {
box.addEventListener("click", (e) => {
if ((e.target.style.transform == 0)) {
e.target.style.transform = "scale(0.7)";
} else {
e.target.style.transform = "scale(1)";
}
});
});
J'ai fait ça mais ça ne marche qu'une fois!!
bonjour
merci pour ce cour mais pourquoi const quest = document.querySelector(".click-event ");
quest.style.borderRadius = "150px";
quest.addEventListener("click", () => {
console.log("Click !");
});
ne marche pas
Que dit la console ?
Julien, j'attends vos nouvelles vidéos du style projet à réaliser,
Je vous suis depuis 2 ans déjà, des projets avec FLUTTER ou VUE JS seront vraiment très sympathiques