[Cours / Tuto] Apprendre Javascript de A à Z - Le DOM (2/6)

🚀 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/

[@studio8k977]

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 😊

[@Quind547]

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

[@Fromnothingtodev]

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...

[@user-yo8ej9io1o]

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 !! 🙏

[@antoinearthelemy]

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.

[@charleslanglois8983]

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 😊

[@Jarod75]

Merci c'est énorme la pédagogie de bien prendre le temp et de pas embrouiller les esprits.@

[@Awissa-zz5mh]

bah la suite est payante (une formation)

[@imanelmzk2064]

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 !

[@Tsoune]

vraiment mrc pour ton temps

[@camaracamara570]

Franchement bien les cours tu fais symfony?

[@presidenttrumpgaming2243]

Je suis à 3h26 ma tête va exploser mais c’est assez bien expliqué je remercie Julien.

[@guyjuslain3594]

Tes videos sont un pur plaisir. Sincerement on ne peut faire mieux en terme pédagogique. Merci infiniment.

Merci beaucoup

[@Impognion_flop]

Vraiment, j'adore tes cours, avec de l'humour et de la bonne humeur, on comprend beaucoup mieux. بارك الله فيك.

Merci à toi 😊

[@Grobil972]

Franchement ce cours vaut de l'or, c'est tellement altruiste de partager du savoir ! Bravo F-Scratch

Merci à toi 👍

[@manusanchez9386]

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 😊

[@general_bigdrip]

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 :)

[@Shadow-on9js]

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 :)

[@modesteakaffou946]

Merci beaucoup From Scratch. J'ai bien aimé ton cours 😇

Merci à toi 😊

[@robinsonmkn4728]

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 !

[@allahslove7829]

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 😊

[@user-mg3kz4tr1c]

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 :)

[@quentinwils3918]

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

[@Tontonfred7990]

Un grand merci pour cette video. j'ai beaucoup appris grâce à toi.

[@daviddray5944]

Merci 1000 fois pour ces vidéos! Tu as le don de captiver l'auditeur.

Merci du compliment 😅

[@Jarod75]

2.38.18 Le FromScratch du futur 😁😁👌👌

[@SullyvanYouTube]

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 !

[@Alveole47]

Franchement merci, un superbe travail, une bonne pédagogie et un type sympatoche, que demande le peuple ! vraiment une bonne approche :)

Merci ! 😊👌

[@beber311]

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 😅)

[@pirre8210]

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).

[@KATSUMAUTOASLAN]

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

[@maliciaabenaqui1196]

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 !

[@lilpitaham7318]

je suis débutant en JS, franchement vos vidéos et pédagogie me sauvent la mise... merci beaucoup @From Scratch

[@lecomtegaetan8120]

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 !

[@souleymanefall1490]

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 👌

[@jdims651]

Franchement super je vais étudier chez o'clock et la cest super pour anticiper ! Merci !

Enorme merci pour ton travail, ta patience, et ta pédagogie ! Tu m'as sauvé, j'étais perdu dans le javascript, à deux doigts de l'abandonner. MERCI

Ah top ! Faut pas abandonner ça finit toujours pas rentrer mais faut insister

[@RudyLVV]

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 😉👌

[@martinrouy2066]

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

[@nallyriaomagad5170]

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

[@lolokikto]

Incroyable merci pour les travaux

[@Lubix894]

Merci infiniment. Nous attendons impatiemment la partie 3

Elle est ici : fromscratch.podia.com/ 😊

[@jlnko]

Merci beaucoup pour ce cours je suis en formation avec open classroom et tu as ete un tres gros de complement

[@user-nv5cp2zf4i]

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 ! :)

[@ferdinandagnero9272]

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/

[@MrPiabalas]

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 !

[@lesanctuairedu7emeart446]

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 ! 😊

[@frankkamgang6708]

tu es le meilleur, j'aime beaucoup tes videos. tu m'apprends beaucoup de choses ... courage!!!

Merci à toi 😊

[@cecileberthon7801]

Il faut le dire, tu es vraiment un excellent professeur...

Merci ! 😊

[@Yannick-75]

Tu es un expert en apprentissage

[@mohamedbekheira]

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 !

[@chriszept5256]

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 !

[@asqrd6532]

Excellent cours.

[@AbdelhakimKheloufi]

Très bonne pédagogie merci beaucoup Julien ! sans doute un des meilleurs tuto

Merci à toi 😊

[@ousmanelo6796]

O

[@ousmanelo6796]

@o

[@nancycreations1016]

wouah, je comprend beaucoup mieux le javascript, très bien expliqué, merci, je vais continuer avec toi !!!

Merci à toi 😊

[@fifiradia1422]

Merci beaucoup, vraiment j'ai beaucoup appris de vous, très pédagogue.

Avec plaisir !😊

🍀 Si tu veux devenir Développeur Front-end, c’est ici => fromscratch.podia.com/

[@emotionstv6721]

mon premier prof de programmation ❤️🇨🇩

[@CleeveSpy]

J'ai beaucoup aimé...!

[@user-rt2sj2yf6m]

Je vous remercie cher prof

[@chitra___]

Merci pour tes astuces VSCode, graves utiles

Avec plaisir 😁

[@chernisana6207]

vraiment extraordinaire.merci beaucoup

Avec plaisir 😁

[@SeifAllahBoukahtem-jl8dp]

Merci pour vos efforts!

Avec plaisir 😊

[@rubydiamant5596]

Thank you perfect explanation

[@user-iz7vv8vg7x]

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 😁👌

[@robinlesacri]

Vraiment tres bien expliqué :) Merci

Avec plaisir 🙂

[@vanessafortin2934]

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".

[@simoncroquet8177]

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🤟👍👍

[@WpcreatJoel-jh7fy]

Nice

[@youriGuily]

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 !

[@mikesalomon2695]

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 😊

[@clem7403]

Merci, merci, merci !!!!

[@assanesow2523]

merci beaucoups pour votre aide

[@RichardKambale-dh6si]

Bonjour en réalité j'ai hâte d'apprendre dès que je trouve le montant demandé

[@chainehadhouda4130]

je vous remercie vous êtes top

[@Banby91]

Tjs extra..merci vraiment très bien

[@user-cd6ev7ht4k]

Je vous remercie

[@ErrorTrue]

Bref c genial Merci... question pedagogie c parfait

[@karamokoouattara7341]

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

[@emmanuelroux3845]

Super video! Merci!!!! PS: pour le mouvement de la souris, je n'ai pas de lag...mais je ne mets pas de transition.

[@juliovasconcelos3930]

Pour supprimer le cache, il suffit d'appuyer sur les touches CTRL (Control) + F5 😉

[@chainehadhouda4130]

merci

[@siryn1524]

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/ 😊

[@antoinegaudin6515]

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 😅

[@bilelb7657]

Je suis ton 1000 ème like superbe video merci

Et moi je suis ton premier like sur ce commentaire😅

[@genbonnea7706]

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

[@maliciaabenaqui1196]

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.

[@genbonnea7706]

@@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 !

[@cryptoakdmy5730]

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

[@cryptoakdmy5730]

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++

[@SullyvanYouTube]

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€!

[@dreamtim9962]

En vitesse fois 2 c'est parfait

[@Electrical-Mechanic]

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

[@DidierMABA]

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 😊

[@kaaliidofficiel9942]

Bonjour les autres parties svp 🙏🏽 merci infiniment

fromscratch.podia.com/

[@ahmedabdelmoumen977]

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

[@newte560]

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

[@senseiotaku755]

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.

[@user-qt6dt1wu2i]

viele danke

[@casablanka4194]

Salut, merci beaucoup pour ta video, j'ai une question , dans le css que signifie (content: " " ; ) ??? SVP

[@user-gn8vk8gl5m]

❤

[@dihcarkouane7020]

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() ;)

[@user-ie7yb7vu4n]

bonjour tout dabord merci, alors je suis en train de m'arracher les cheveux pour comprendre poruquoi il prend en compte le border radius, alors que dans l'id=box que tu definis pour click-event il n'y a aucun border radius, le borderradius se trouvant dans la classe "question-cliked" mais dont les attributs sont sensés s'annuler vu que tu as changer la .box en #box et donc les attributs se trouvant dans le #box ont priorité sur la classe

[@prescilliamn9329]

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

[@kn7866]

On attend la partie 3😊

Ca fait un moment qu'elle est sortie : fromscratch.podia.com/

[@angechristiankoffi]

wahooo

[@user-et5mm1oo6b]

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

[@cyrilov9523]

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

[@cyrilov9523]

@ 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

[@Giogio-armani]

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 ?? 😅

[@Giogio-armani]

@ Oui ^^ t’es cours sont parfait pour le titre DWWM 🔥👌🏽

[@platiniom484]

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

[@angechristiankoffi]

😄😄😄😄

[@roelschw854]

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