Javascript débarque dans notre Navigateur
What you'll learn
- Maîtriser les interactions entre Javascript et le Navigateur
- Maîtriser les événements en Javascript
- Comprendre les requêtes HTTP
- Créer un projet de A à Z : World Bucket List
- Utiliser Google Maps API
Requirements
- Vous devez connaître les bases de Javascript
- N'importe quel ordinateur - Windows, Mac, etc...
- Aucun logiciel particulier n'est requis
Description
Ca y est , comme son nom l’indique, dans ce cours Javascript debarque dans notre navigateur.
Depuis le départ, je vous ai dit que nos page web sont composées de 3 langages: HTML pour la structure, CSS pour le style et la mise en page, et Javascript pour l’interactivité de nos pages Web
Et bien justement c’est maintenant que vous allez tout comprendre sur cette interactivité ! On va commencer par parler de l’objet global: window, puis de location et surtout on va décortiquer bien comme il faut ce qu’on appelle le DOM.
DOM
C’est quoi le DOM ?
C’est la représentation de notre code HTML et c’est lui que Javascript pourra manipuler pour modifier le HTML et le CSS de nos pages Web.
Tous nos éléments HTML sont bien organisés dans le DOM et on pourra modifier leurs attributs, leur style CSS, leur ajouter ou leur enlever des classes CSS.
Je vous montrerai les différentes facons de sélectionner les éléments éxistants du DOM et aussi comment on va pouvoir en créer de nouveaux très facilement.
Événements
Et biensur la base de l’interactivité: ce sont les événements: vous pouvez exécuter du code en réaction à un événement.
Par exemple: Quand l’utilisateur clique sur un bouton, appuie sur une touche du clavier ou encore quand il soumet un formulaire.
Alors je vais vous montrer les différentes façons de réagir aux événements: les event handler et les event listener.
Mais pour bien comprendre tout ça, on va examiner l’objet Event qui posséde des propriétés particulières en fonction de la nature de l’événement .
On va voir comment les événements se propagent: on parlera de phase de bouillonement et de phase de capture. Et aussi comment stopper ou modifier leur propagation avec les méthodes stopPropagation et preventDefault.
Requêtes HTTP
Une autre chose dont on va parler: ce sont les requêtes HTTP, c’est ce qu’on appelle Ajax.
Ca va par exemple nous permettre d’échanger avec un serveur, on pourra recevoir, envoyer, modifier et supprimer des données de ce serveur.
Un des gros avantages c’est qu’on pourra traiter les données qu’on récupére directement en Javascript et mettre à jour uniquement certains éléments de notre page Web sans avoir à recharger toute la page.
Une des façons pour un serveur d’être capable d’intéragir avec ces requêtes c’est d’utiliser ce qu’on appele une API REST.
D’ailleurs on va en utiliser une et je vous montrerai comment récupérer des infos avec les requêtes GET et comment en envoyer avec les requêtes POST.
Objet et Fonctions utiles
Alors ce cours c’est aussi pour moi l’occasion de parler tout ce dont on n’a pas parlé jusqu’à présent et qui fait partie intégrante de Javascript.
Je vais vous parler de l’objet Math, de l’objet Date, des expressions regulières.
On va revenir sur les méthodes setTimeout et setInterval. Je vais vous présenter aussi l’opérateur ternaire et on passera en revue les fonctions qu’on peut appliquer sur les strings mais surtout sur les arrays: comme map, filter, etc…
Bien evidemment pour chacune de ces parties, vous pourrez tester vos connaissances avec des quiz.
World Bucket List
Et alors une fois qu’on aura fini tout ça: ce sera l’heure du dessert, de la cerise sur le gâteau de ce cours. On va réaliser ensemble un projet génial de A à Z. Vous allez mettre en pratique tout ce que vous avez appris directement dans ce projet.
C’est parti pour le rêve ! Créons ensemble l’appli World Bucket List. Pour ceux qui ne le savent Bucket List c’est une liste de choses qu’on souhaite faire.
Et bien vous allez créer la votre et vous allez situer vos rêves sur la carte du Monde ! On va utiliser l’API de Google Map pour pouvoir faire des choses fantastiques. Vous allez localiser vos rêves: Maison sur Pilotis aux Maldives, Safari au Kenya, Monter sur la Tour Eiffel.
Grâce aux événements, vous pourrez automatiquement zoomer sur un de vos rêves en cliquant sur les marqueurs de la carte.
Vous pourrez aussi intéragir avec vos rêves en indiquant ceux que vous avez déja réalisé et ceux que vous souhaitez encore réaliser: Qui a dit qu’on pouvait réaliser ses rêves qu’une seule fois ?
Et pour une meilleure immersion, vous allez aussi coder la visite interactive de vos rêves grâce à Google Street View. C’est-à-dire qu’on pourra se balader à l’intérieur de vos rêves quasiment comme s’y on était.
Bref, je peux vous en parler encore longtemps: ce projet est tout simplement magique ! Et vous allez voir que même si ça parait impressionnant, vous allez y arriver très facilement, étape par étape je vais tout vous expliquer…
Bon vous êtes prêts, allez c’est parti !
Who this course is for:
- Toute personne qui souhaite comprendre comment Javascript intéragit avec notre Navigateur
Instructors
- 4.5 Instructor Rating
- 37,874 Reviews
- 131,162 Students
- 17 Courses
Un Grand Merci aux 100 000+ etudiants qui suivent mes cours.
Hello, moi c’est John Taieb, 36 ans, marié et papa d’un petit garçon et d'une petite fille :)
Je ressens le besoin de démocratiser le monde du code. De l’extérieur ça fait peur et ça parait compliqué. Mais je sais que c’est accessible à tout le monde. Pas besoin de faire de longues études pour y arriver.
Mais surtout, coder c’est une révolution en marche.
Ce métier qui n’existait presque pas il y a 50 ans va devenir à terme quasiment le métier unique. Le monde a besoin de plus en plus de codeurs. Même les enfants apprennent désormais à coder à l’école.
Et si on réfléchit bien, coder :
- c’est intéressant
- ça permet de donner vie à ses idées et pourquoi pas conquérir le monde...
- ça rapporte beaucoup d’argent, c’est pas négligeable ca, hein?
- c’est de plus en plus demandé sur le marché du travail
- c’est relativement rapide à apprendre (si on compare avec des études de médecine…)
Bref, je pense sincèrement que c’est la meilleure chose à faire et c’est pourquoi j’ai créé le site "apprendre-a-coder".
Mon but est de te guider et d’optimiser ton apprentissage du code, comme j’ai pu le faire avec ma femme.
Et qu’à ton tour tu puisses accéder à cet univers qui changera à jamais ta vie. La révolution du code a déjà commencé. Alors rejoins-moi!
John Taieb.
----------------------------------
J'aimerais te raconter un peu mon parcours et t'expliquer pourquoi je suis la personne qu'il te faut.
---------- Entrepreneur ----------
Quand j’ai obtenu mon diplôme d’ingénieur informatique, le marché du travail était au plus bas, il était quasiment impossible de trouver un job sans expérience.
Bref, c’était la crise...
Habituellement, la plupart des ingénieurs en informatique trouvent un poste de programmeur débutant et se forment en entreprise. Pour moi c’était pas de chance, je venais de me taper des études longues et compliquées et juste au moment où ça devait enfin payer, tout tombe à l’eau.
Je vous rassure, je ne me suis pas laissé abattre. Si personne ne voulait m’embaucher alors j’allais devenir mon propre patron.
J’étais jeune et j’avais des rêves plein la tête. Cette situation m’a donné un énorme coup de boost pour développer ma propre idée, mon propre produit.
J’allais lancer ma startup...
Le petit souci, c’est que les études universitaires ne m’avaient pas du tout préparé à la réalité. J’avais acquis surtout des connaissances théoriques : beaucoup de Maths, beaucoup de Physique, beaucoup de théorie sur le monde informatique.
Mais rien de tout ça n’allait m’aider à construire mon produit et c’est pourquoi j’ai commencé à me former online.
A l’époque, ce n’était pas comme aujourd’hui. Se former de manière structurée avec un programme de qualité n’existait pas, c’était plutôt du bidouillage: lire un article par ci, voir une réponse dans un forum par là…
Je n’avais qu’un seul objectif : arriver à créer mon produit... Peu importe la qualité de mon code, l’important c’était de le faire marcher.
Après avoir pas mal sué, j’ai donné naissance à mon petit bébé de l’époque, le Magic Window, un produit qui permettait aux magasins de rendre leur vitrine interactive.
J’y croyais et j’espérais conquérir le monde. Ce n’est pas vraiment ce qu’il s’est passé par la suite, mais cette aventure reste une expérience extraordinaire et surtout, ça m’a appris à coder.
Je pouvais désormais donner vie à mes idées.
---------- Employé----------
Suite à cette aventure et vu que le marché du travail était remonté, je me suis laissé séduire par l’agréable vie d’employé dans plusieurs boites High-Tech.
J’avais assez galéré avec ma startup pour gagner des clopinettes et je sentais qu’il était temps de passer à autre chose.
Le monde de l’entreprise était beaucoup plus cool au niveau du rythme : avant, je bossais jour et nuit et maintenant, je faisais mes 9 heures quotidiennes et basta!
Au final, je bossais moins et je gagnais plus. Que demande le peuple?
Ca m’a surtout permis de progresser techniquement. Bosser en équipe sur un projet amène une structure, de la discipline, des règles.
Je commençais à mieux comprendre l’architecture et l’optimisation du code. Toutes ces choses auxquelles je ne m’étais jamais intéressé, moi le sauvage du code qui voulait juste faire marcher son produit.
Mais je me lassais vite de cette routine, alors j’ai changé plusieurs fois de boulot parce que j’avais besoin d’un peu plus de piment.
J’ai gagné en expérience en travaillant sur toutes sortes de projets : des simulateurs pour chirurgiens, des applications pour apprendre la géométrie, etc.
---------- Freelancer ----------
Mais au final, ce « metro-boulot-dodo » ne me convenait plus. J’avais besoin de nouveau et surtout j’avais besoin de plus de liberté. J’ai donc décidé de me lancer en freelance et j’ai créé mon agence de développement Codrocks.
Au même moment, je suis devenu papa et ma femme voulait absolument travailler de la maison. Elle voulait être libre de pouvoir se lever quand elle veut, travailler quand elle veut, ne pas avoir un boss au-dessus de sa tête.
Du coup, je me suis dit, pourquoi pas la faire bosser avec moi?
En fait, ma femme avait plus ou moins le même style de parcours que moi, diplôme universitaire (meilleur que le mien d’ailleurs) mais au final, elle ne savait pas coder.
Et là, le côté coach qui est en moi a automatiquement pris le dessus et j’ai décidé de la coacher dans son apprentissage du code.
J’ai kiffé cette période dans laquelle je pouvais ressentir qu’elle passait exactement par les mêmes étapes que moi, les mêmes questions, les mêmes erreurs.
L’avantage c’est qu’avec mon expérience j’optimisais sa façon d’apprendre. Je savais ce qui était important, ce sur quoi insister pour la faire progresser plus vite.
J'ai tellement adoré enseigner le code que me voilà aujourd'hui devant vous.
---------- Digital Nomad ----------
En 2017, la famille s’est agrandie et je suis devenu papa pour la 2ème fois. Avec ma femme, on trouve déjà génial de pouvoir faire un boulot qu’on adore et d’organiser notre travail comme on veut.
Je sais aujourd’hui qu’en devenant freelance, j’ai fait le meilleur choix pour m’éclater côté pro, mais aussi pour profiter à fond de ma petite famille.
On en veut toujours plus dans la vie et c’est pourquoi fin 2017 on a décidé de se lancer dans un tour du monde avec nos 2 enfants de 1 et 4 ans : Panama, Mexique, Belize, Etats-Unis, Bali, Philippines et encore pleins d’autres destinations sont à venir.
J’ai aussi ouvert un compte Instagram @familykif dans lequel je raconte tous nos voyages en vidéos et en photos.
Je suis devenu ce qu’on appelle un Digital Nomad.
La seule obligation : avoir toujours une connexion internet pour que je puisse continuer à travailler.
- 4.5 Instructor Rating
- 37,816 Reviews
- 130,204 Students
- 15 Courses
Je ressens le besoin de démocratiser le monde du code. De l’extérieur ça fait peur et ça parait compliqué.
Mais je sais que c’est accessible à tout le monde. Pas besoin de faire de longues études pour y arriver.
Mais surtout, coder c’est une révolution en marche!
Le monde a besoin de plus en plus de codeurs. Même les enfants apprennent désormais à coder à l’école.
Et si on réfléchit bien, coder :
- C’est intéressant
- Ça permet de donner vie à ses idées et pourquoi pas conquérir le monde avec
- Ça rapporte beaucoup d’argent, c’est pas négligeable ca, hein?
- C’est de plus en plus demandé sur le marché du travail
- C’est relativement rapide à apprendre (si on compare avec des études de médecine…)
- Ça donne une liberté que peu de métiers peuvent offrir
Bref, je pense sincèrement que c’est la meilleure chose à faire et c’est pourquoi, j’ai créé ce site.
Mon but est de vous guider et d’optimiser votre apprentissage du code pour qu’à votre tour vous puissiez accéder à cet univers qui changera à jamais votre vie.
La révolution du code a déjà commencé... Alors rejoignez-moi!