[Cours / Tuto] Apprendre Javascript de A à Z - Le DOM (2/6)
HTML-код
- Опубликовано: 19 июн 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)
![Frontend ou Backend ? Quelle spécialité choisir en Dev Web ? - [Devenir Développeur #6]](/img/1.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 😊
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 !! 🙏
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...
salut!!!
je pense que c'est l'UNE des MEILLEURS FORMATIONS JS très CLAIRE que j'aie vu en FRANÇAIS !!!
vraiment BRAVO !!!
la pédagogie est AU DESSUS de MOYENNE franchement car même un novice pourrait suivre le cours !!
BRAVO !!
Merci beaucoup ! :)
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.
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 :)
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
Vraiment, j'adore tes cours, avec de l'humour et de la bonne humeur, on comprend beaucoup mieux. بارك الله فيك.
Merci à toi 😊
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)
Tes videos sont un pur plaisir. Sincerement on ne peut faire mieux en terme pédagogique. Merci infiniment.
Merci beaucoup
Un grand merci pour cette video. j'ai beaucoup appris grâce à toi.
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 !
2.38.18 Le FromScratch du futur 😁😁👌👌
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 😊
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.
Franchement ce cours vaut de l'or, c'est tellement altruiste de partager du savoir ! Bravo F-Scratch
Merci à toi 👍
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 😊
Merci beaucoup From Scratch. J'ai bien aimé ton cours 😇
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 :)
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 :)
Incroyable merci pour les travaux
Franchement super je vais étudier chez o'clock et la cest super pour anticiper ! Merci !
Franchement merci, un superbe travail, une bonne pédagogie et un type sympatoche, que demande le peuple ! vraiment une bonne approche :)
Merci ! 😊👌
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 suis débutant en JS, franchement vos vidéos et pédagogie me sauvent la mise... merci beaucoup @From Scratch
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 !
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 !
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 !
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
Merci 1000 fois pour ces vidéos! Tu as le don de captiver l'auditeur.
Merci du compliment 😅
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 👌
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
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 !
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/
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 ! 😊
Excellent cours.
Merci infiniment. Nous attendons impatiemment la partie 3
Elle est ici : fromscratch.podia.com/ 😊
Merci beaucoup pour ce cours je suis en formation avec open classroom et tu as ete un tres gros de complement
tu es le meilleur, j'aime beaucoup tes videos. tu m'apprends beaucoup de choses ... courage!!!
Merci à toi 😊
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
Tu es un expert en apprentissage
Je vous remercie cher prof
J'ai beaucoup aimé...!
Bonjour en réalité j'ai hâte d'apprendre dès que je trouve le montant demandé
Merci beaucoup, vraiment j'ai beaucoup appris de vous, très pédagogue.
Avec plaisir !😊
Thank you perfect explanation
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 !
wouah, je comprend beaucoup mieux le javascript, très bien expliqué, merci, je vais continuer avec toi !!!
Merci à toi 😊
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".
Il faut le dire, tu es vraiment un excellent professeur...
Merci ! 😊
Vraiment tres bien expliqué :) Merci
Avec plaisir 🙂
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 !
vraiment extraordinaire.merci beaucoup
Avec plaisir 😁
Très bonne pédagogie merci beaucoup Julien ! sans doute un des meilleurs tuto
Merci à toi 😊
O
@o
Merci pour vos efforts!
Avec plaisir 😊
Merci pour tes astuces VSCode, graves utiles
Avec plaisir 😁
Merci, merci, merci !!!!
je vous remercie vous êtes top
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 😁👌
merci beaucoups pour votre aide
Tjs extra..merci vraiment très bien
Merci! 38 minutes de vidéos et je comprends déjà mieux qu'en trois semaines de formation par des "pros" que je paie 1000€!
Je vous remercie
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
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 !
Bref c genial Merci... question pedagogie c parfait
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 😊
Super video! Merci!!!! PS: pour le mouvement de la souris, je n'ai pas de lag...mais je ne mets pas de transition.
merci
Salut, merci beaucoup pour ta video, j'ai une question , dans le css que signifie (content: " " ; ) ??? SVP
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 😅
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
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/ 😊
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
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
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
Bonjour je n'arrive pas à voir le lien git hub du cours pour entamer... merci de me l'envoyer spt
Bonjour à partir de 2h25 les étape JS ne fonctionne pas est-ce que cela ne concerne que moi
?
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
Je suis ton 1000 ème like superbe video merci
Et moi je suis ton premier like sur ce commentaire😅
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 !
En vitesse fois 2 c'est parfait
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() ;)
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
Bonjour les autres parties svp 🙏🏽 merci infiniment
fromscratch.podia.com/
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
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é.
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
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, 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 😅
Après votre cours , j'ai l'impression d'etre deja devenu sénior. vous avez une pédagogie de malade !!! MERCI !!!
Haha merci ! Recopier c'est bien mais pour etre fluide il va falloir que tu pratiques 😊
Meilleur formateur EVER !! Ta formation à 50€ en vaut clairement plus ! j'ai appris 30 fois plus rapidement que dans des formations financé par l'état ! certain formateur l'utilise même en modele ! Merci Beaucoup !
Ah bon on utilise mes cours en modèle ?? 😅
@ Oui ^^ t’es cours sont parfait pour le titre DWWM 🔥👌🏽
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
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.
En tout cas, votre cours est high level... les explications sont claire et parfaite. est ce que dans votre la partie 3/4/5/6 est disponible???☺☺☺
C'est disponible sur mon site je confirme
❤
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, 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 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, dites moi svp, est ce que vous avez modifié vos vidéos? En fait j'ai commencé à faire le projet de la calculatrice mais là je le retrouve plus. Je l'ai retrouvé dans la leçon N°1 mais c'est pas comme ce que j'avais trouvé avant. Il n'y a plus le code html et css!!! Je suis un peu perdue là! Merci☺
Hello, oui ce projet a été supprimé car je le trouvais pas très pertinent