JavaScript Pour Débutants

JavaScript

Pour débutants

Cours, exemples pratiques et projets pour s’entrainer

Alex Coder

Copyright © Droits d'auteur 2024

Aucune reproduction, stockage dans un système de récupération ou transmission, sous quelque forme que ce soit, ne peut être effectuée sans l'autorisation écrite préalable de l'éditeur, sauf pour de brèves citations intégrées dans des articles critiques ou des critiques.

Tous les efforts ont été déployés pour garantir l'exactitude des informations présentées dans ce livre. Cependant, les exemples contenus dans cet ouvrage sont fournies fonctionnels à l’heure de la rédaction de cet ouvrage dans le contexte de version précise de navigateur et de versions de JavaScript actuelles.

Auteur : Alex Coder

Éditeur : Alex Coder

Première publication : 2024

Remerciements

Cher lecteur, je tiens à vous exprimer ma profonde gratitude pour avoir choisi mon livre. Votre soutien et votre confiance sont une source d'inspiration inestimable.

Merci infiniment d'avoir fait l'acquisition de mon livre. Votre intérêt pour le sujet me motive à continuer à fournir du contenu de qualité.

Je vous invite à télécharger le code source des projets présentés dans ce livre. Vous trouverez le lien de téléchargement dans la page « Liens de téléchargement » à la fin de ce livre.

À propos de l’auteur

Alex Coder est un enseignant universitaire, développeur (PHP, JavaScript, Python, Java, C++ etc.) et Data scientist expérimenté dans le domaine des technologies numériques. Fort d'une expertise reconnue, il a dirigé de multiples formations et séminaires internationaux au sein d'institutions de renommée mondiale. Son approche pédagogique exceptionnelle lui a valu une réputation d'excellence parmi ses étudiants, grâce à sa capacité à simplifier des concepts complexes et à les rendre accessibles à tous.

Enseignant universitaire depuis plus de 20 ans, Alex Coder partage sa passion pour l'apprentissage et la transmission des connaissances en informatique, Data science et le Machine Learning. Sa longue expérience dans le domaine éducatif lui permet d'inspirer plusieurs générations d'apprenants à travers le monde, en leur transmettant non seulement des compétences techniques, mais aussi une vision globale du secteur du développement et d’analyse de données.

Passionné par le partage des connaissances, Alex Coder excelle dans la transmission de compétences en informatique, inspirant ainsi plusieurs générations d'apprenants à travers le monde. En plus de ses activités pédagogiques, il offre des formations spécialisées aux professionnels, les aidant à perfectionner leurs compétences et à rester à la pointe de leur domaine respectif.

Son dévouement à l'excellence, sa passion pour l'enseignement et son expertise technique font de Alex Coder une référence incontournable dans le domaine du développement web et de la formation numérique.

Table des matières

Remerciements

À propos de l’auteur

Préface

Introduction et environnement de développement

Chapitre 1: Votre premier programme JavaScript

Chapitre 2: Les variables, constantes et types de données

Chapitre 3: Les opérateurs:

Chapitre 4: Les structures conditionnelles

Chapitre 5: Les boucles en JavaScript

Chapitre 6: Les fonctions en JavaScript

Chapitre 7: Les tableaux en JavaScript

Chapitre 8: Les objets en JavaScript

Chapitre 9: Classes et objets

Chapitre 10: Principe d'encapsulation en JavaScript

Chapitre 11: L'héritage en JavaScript

Chapitre 12: Les Prototypes en JavaScript

Chapitre 13: Le DOM (Document Object Model)

Chapitre 14: Sélection d'éléments dans le DOM

Chapitre 15: Modification, ajout et suppression d'éléments du DOM

Chapitre 16: Événements dans le DOM

Chapitre 17: Projet de développement d'une calculatrice

Chapitre 18: La programmation asynchrone en JavaScript

Chapitre 19: Requêtes HTTP avec AJAX et Fetch API

Chapitre 20: Les API Web

Chapitre 21: Projet d’application météo géolocalisée

Chapitre 22: Stockage de session en JavaScript

Conclusion générale

À propos de l’auteur

Lien de téléchargement

Préface

Bienvenue dans l’univers de JavaScript ! Dans ce livre, j’ai souhaité créer un parcours d’apprentissage complet et progressif qui accompagne le lecteur, pas à pas, vers la maîtrise de ce langage essentiel au développement web. JavaScript est bien plus qu’un simple langage de script pour navigateurs. Aujourd'hui, il est partout : sur le front-end, le back-end, et même au-delà des navigateurs. Ce livre a pour ambition de vous offrir une compréhension approfondie de JavaScript, des bases aux concepts avancés.

Nous commençons par une introduction et un aperçu de l’environnement de développement, pour installer les bases nécessaires. Puis, nous plongeons dans les premiers concepts avec le Chapitre 1 où vous découvrirez votre premier programme JavaScript. Ce chapitre est une première prise de contact, un encouragement à plonger dans le code sans crainte.

Ensuite, dans les chapitres suivants, nous explorons les fondamentaux : les variables, constantes, types de données, et les opérateurs. Ces notions sont essentielles pour bâtir la structure de vos programmes, gérer les informations et manipuler les valeurs.

Nous poursuivons avec les structures conditionnelles et les boucles, qui ajoutent de la logique et du dynamisme à vos programmes, vous permettant d’exécuter du code de manière conditionnelle ou répétitive. À travers ces chapitres, vous commencerez à écrire des scripts plus complexes et plus pertinents.

Les fonctions et les tableaux introduits par la suite enrichissent encore vos connaissances, vous offrant des outils puissants pour organiser et manipuler les données. Ces notions constituent le socle de tout programme JavaScript.

Dans la partie suivante, nous abordons la Programmation Orientée Objet (POO). Avec des notions comme les classes, les objets, l’encapsulation, et l’héritage, vous verrez comment structurer votre code de façon modulaire et réutilisable. L'approche orientée objet est souvent redoutée par les débutants, mais vous découvrirez ici une méthode pédagogique pour en faciliter l'assimilation.

Une partie conséquente est dédiée au DOM (Document Object Model). Interagir avec le DOM vous permet de modifier l’interface de vos pages web en temps réel, d’ajouter ou de supprimer des éléments, et de gérer les événements pour enrichir l'expérience utilisateur.

JavaScript ne se limite pas à la manipulation du DOM ; c’est également un outil puissant pour la programmation asynchrone. Dans les chapitres consacrés à cette thématique, nous abordons des concepts tels que les promesses et l’async/await. Ce sont des notions cruciales pour développer des applications modernes, en particulier celles qui nécessitent des échanges de données en temps réel avec des serveurs.

Les requêtes HTTP, abordées avec AJAX et la Fetch API, vous permettront d’intégrer des données externes dans vos applications. Ce livre ne serait pas complet sans parler des API Web et de la manière de consommer des données depuis des services externes.

Enfin, pour vous aider à mettre en pratique tout ce que vous aurez appris, j’ai inclus deux projets complets : une calculatrice et une application météo géolocalisée. Ces projets sont conçus pour vous offrir une expérience de développement concrète, où vous appliquerez les compétences acquises et gagnerez en confiance.

JavaScript est un langage vivant, dynamique, et en constante évolution. Ce livre est une invitation à explorer ses richesses, à expérimenter, et à développer des projets qui vous passionnent. Que vous soyez débutant ou en phase de consolidation de vos connaissances, j’espère que cet ouvrage sera pour vous une ressource précieuse et inspirante.

Bonne lecture et bon code !

Vous pouvez compter sur mon soutien !

Si vous avez des questions sur un aspect quelconque de ce livre ou si vous avez besoin d’aide, envoyez-moi un e-mail à contact@skilldeve.com et mentionnez le titre du livre dans l'objet de votre message.

Partagez votre avis

Je suis impatient de connaître votre opinion sur ce livre et je vous en remercie beaucoup.

Introduction et environnement de développement

Le JavaScript est un langage de script côté client dynamique qui permet d'ajouter de l'interactivité et des fonctionnalités avancées aux pages web. À l'origine développé par Netscape Communications Corporation en 1995, il est aujourd'hui omniprésent sur le Web et constitue l'un des piliers du développement front-end.

Exécuté dans le navigateur de l'utilisateur, JavaScript permet de créer une expérience utilisateur engageante et fluide. Avec ce langage, vous pouvez ajouter des effets visuels, manipuler le DOM pour modifier le contenu d'une page de manière dynamique, gérer des formulaires interactifs, afficher des notifications ou encore concevoir des jeux et animations.

Au fil des années, JavaScript a évolué pour devenir plus puissant et polyvalent, notamment grâce à l'introduction d'ECMAScript 6 (ES6), la norme actuelle. ES6 a apporté de nombreuses nouveautés qui simplifient le développement, comme les classes, les modules, les flèches de fonction et les modèles de chaînes de caractères, facilitant ainsi l'écriture de code plus lisible et maintenable.

L'apprentissage du JavaScript se fait progressivement, en commençant par la maîtrise des concepts fondamentaux : variables, types de données, opérateurs, conditions et boucles. Une fois ces bases acquises, vous serez capable de créer des scripts complexes et de les intégrer efficacement dans vos projets web.

Dans les prochains chapitres, nous explorerons en détail ces notions de base, avec des exemples concrets et des exercices qui vous permettront de mieux comprendre comment le JavaScript peut transformer une simple page web en une application dynamique et interactive.

Les Possibilités de JavaScript

Lorsqu'il est utilisé du côté client et exécuté par le navigateur, JavaScript offre une vaste gamme de tâches qui enrichissent l'expérience de l'utilisateur :

Aide à la saisie des formulaires

Validation des entrées en douceur

Affichage de messages contextuels clairs

Édition de texte améliorée

Stockage local sécurisé

Utilisation des Cookies

Sauvegarde en local grâce à des technologies telles que localStorage

Gestion des nombres, dates et heures

Calculs mathématiques puissants

Affichage des dates adapté à chaque utilisateur

Animations et graphiques dynamiques

Menus interactifs et navigation fluide

Défilements animés, diaporamas et zooms intuitifs

Conception des Graphiques interactifs et cartes personnalisables

Développement de Jeux web

Ces capacités ne sont qu'un aperçu du potentiel de JavaScript. Avec quelques bases solides et de la pratique régulière, vous pourrez exploiter toutes les ressources de ce langage pour créer des expériences web engageantes.

Choix et installation d'un environnement de développement intégré

Un environnement de développement intégré, souvent abrégé IDE, est bien plus qu'un simple éditeur de code. Un IDE offre en effet tout un ensemble d'outils pour faciliter le développement d'un projet du début à la fin.

Grâce à l’IDE, un projet complet avec de nombreux fichiers et dossiers peut être chargé, permettant la navigation entre ces éléments. De plus, l'auto-complétion propose des éléments non seulement à partir du fichier courant, mais en tenant compte de l'ensemble du projet. Souvent interconnecté à des systèmes de version tels que Git, l'IDE permet aussi la configuration d'environnements de test et d'autres fonctionnalités essentielles.

Les IDE recommandés

Si vous n'avez pas encore fait votre choix, voici quelques IDE que vous pouvez envisager pour le développement en JavaScript :

Visual Studio Code¹ : Multiplateforme, gratuit, et extrêmement populaire. Il offre une vaste gamme d’extensions pour enrichir les fonctionnalités de base, notamment pour JavaScript et ses frameworks.

WebStorm² : Un IDE de la société JetBrains, spécialement conçu pour le développement frontend. Bien qu'il soit payant, il est très complet et supporte de nombreux langages supplémentaires.

Visual Studio Community³ (à ne pas confondre avec Visual Studio Code) : Un IDE puissant et payant, spécialement conçu pour les développeurs travaillant sous Windows. Principalement utilisé pour les projets .NET, il n’en demeure pas moins performant pour JavaScript. Une version gratuite, Visual Studio Community, est également disponible pour des projets de plus petite envergure.

Un investissement judicieux

Bien que la plupart des logiciels de développement nécessitent un abonnement payant, de nombreuses options proposent une période d'essai gratuite. Le coût d'une licence est souvent négligeable comparé aux gains de productivité permis, en particulier pour un développeur expérimenté. Cependant, il convient de noter que certains éditeurs totalement libres, comme Visual Studio Code, conviennent parfaitement à la majorité des projets web, y compris ceux en JavaScript. Ces solutions proposent des fonctionnalités avancées, grâce à de nombreux plugins qui étendent leurs capacités sans frais. Dans cet ouvrage, tous les exemples sont créés avec Visual Studio Code, un éditeur gratuit et polyvalent adapté aux besoins de développeurs de tous niveaux. Prenez le temps de choisir l'outil correspondant le mieux à vos besoins et à votre méthode de travail.

Les éditeurs de texte légers

Bien qu'un IDE  puisse être très complet, il n'est pas toujours nécessaire de recourir à un tel outil pour chaque tâche mineure. Pour de simples modifications ou l'ouverture rapide d'un fichier, un éditeur de texte léger convient souvent amplement.

Contrairement à un IDE qui fonctionne à l'échelle d'un projet entier (chargement de nombreux fichiers, analyse de la structure, etc.), un éditeur léger se concentre principalement sur la modification d'un ou deux fichiers à la fois, ce qui le rend plus réactif au démarrage et plus facile à utiliser lorsqu'un environnement complet n'est pas exigé.

Cependant, il est important de noter que les éditeurs légers peuvent aussi être améliorés par le biais de divers plugins. Ces extensions permettent d'ajouter des fonctionnalités telles que l'auto-complétion, la gestion de la syntaxe et bien plus, comblant ainsi en partie l'écart avec un EDI traditionnel.

Quelques éditeurs légers à explorer :

Atom⁴ : Multiplateforme et gratuit, avec une grande communauté qui propose de nombreux plugins.

Sublime Text ⁵: Également multiplateforme, mais payant. Il est très apprécié pour sa rapidité et son élégance.

Notepad++ ⁶: Disponible uniquement sur Windows et gratuit, c’est un choix populaire pour l’édition rapide de fichiers.

Vim⁷ et Emacs⁸ : Des éditeurs très puissants mais demandant un certain apprentissage. Ils sont souvent utilisés par les développeurs expérimentés à la recherche d’un contrôle total sur leur environnement.

Ne discutons pas trop !

Bien que les éditeurs mentionnés précédemment soient excellents, il existe de nombreuses autres options qui méritent d'être considérées. Le choix dépendra de ce que vous cherchez à accomplir, de vos préférences personnelles et des types de projets sur lesquels vous travaillez habituellement. Quelle que soit votre sélection finale, l'essentiel est de vous équiper d'un outil qui augmente votre productivité et s'harmonise naturellement avec votre façon d'écrire du code. Pour d'autres développeurs, un éditeur plus léger ou open source pourrait convenir davantage. Quoi qu'il en soit, l'important est de vous sentir à l'aise pour vous concentrer sur ce qui compte vraiment.

La console de développement

Le code contient inévitablement des erreurs. Et oui, vous allez faire des erreurs, c'est inéluctable, car après tout, vous êtes humain et non une machine ! Mais en tant que développeur, ne vous inquiétez pas, c'est une composante essentielle du processus d'apprentissage.

Les erreurs surviennent malheureusement, mais les navigateurs ne les affichent habituellement pas par défaut. Si une erreur advient, nous ne la verrons pas directement et donc ne saurons où elle se trouve ou comment la corriger. Heureusement, les navigateurs modernes intègrent des outils puissants pour résoudre ce problème : les outils de développement.

Ces outils sont particulièrement utilisés avec Chrome et Firefox, car ils offrent les fonctionnalités les plus robustes et complètes pour le développement. Bien que d'autres navigateurs possèdent aussi leurs propres outils de développement (souvent avec des particularités intéressantes), Chrome et Firefox demeurent les choix privilégiés des développeurs en raison de leur convivialité et de leur efficacité. Les développeurs choisissent souvent un navigateur favori pour le développement, tout en basculant occasionnellement vers d'autres navigateurs pour des tests spécifiques.

Les outils de développement sont extrêmement puissants et offrent une multitude de fonctionnalités. Pour débuter, nous allons apprendre à les ouvrir, à identifier les erreurs dans vos scripts, et à exécuter des commandes JavaScript directement depuis ces outils.

Utilisation des outils de développement avec Google Chrome

Rendez-vous sur la page suivante : bug.html⁹.

Cette page contient volontairement une erreur dans le code JavaScript, qui ne sera pas visible pour un visiteur classique. Pour révéler cette erreur, nous allons ouvrir la console de développement.

Pour ouvrir les outils de développement :

Sur Windows : Appuyez sur Ctrl + Maj + J

Sur Mac : Utilisez la combinaison Cmd + Option + C

Une fois la console ouverte, allez dans l’onglet Console.

Cela vous permettra de visualiser l’erreur et de commencer à la diagnostiquer, comme illustré dans l’image suivante :

Bien que les outils de développement puissent évoluer au fil du temps, leurs fonctionnalités de base demeurent. Selon la version de google chrome que vous utilisez, l’apparence des outils de développement peut varier.

D'une part, nous repérons un message d'alerte souligné en rouge, révélant un souci dans le code. Ici, la commande lalala appelée n'est déclarée nulle part.

D'autre part, en suivant le lien associé, il est possible d'être redirigé directement à la source du problème, en l'occurrence la ligne 12 du fichier bug.html. Ainsi, le problème peut être ciblé avec célérité.

Ces outils, aussi basiques soient-ils, s'avèrent précieux pour débusquer et corriger rapidement les bugs. Qu'ils évoluent en fonction des versions ou non, leur utilité première reste de faciliter la phase de débogage.

Dans la fenêtre de la console Chrome, juste en dessous du message d'erreur, vous pouvez voir un symbole bleu ( > )pointant vers le bas. Ce signe indique l'endroit pour entrer des commandes JavaScript directement. Il vous suffit d'appuyer sur la touche Entrée de votre clavier pour exécuter ces commandes immédiatement.

Nous pouvons maintenant visualiser les erreurs, ce qui constitue une première approche convenable. Nous approfondirons l'utilisation des outils de développement et explorerons le débogage en détails dans le chapitre suivant consacré au débogage dans le navigateur.

Saisie multi-lignes

Habituellement, lorsque vous saisissez une ligne de code dans la console et appuyez sur Entrée, cette ligne est exécutée instantanément. Cependant, si vous souhaitez écrire plusieurs lignes avant l'exécution, vous pouvez utiliser le raccourci Shift + Entrée pour ajouter des lignes sans déclencher immédiatement le code. Cela permet d'insérer de grands blocs de code JavaScript et de ne les lancer qu'une seule fois une fois terminé.

Firefox, Edge et autres navigateurs

La majorité des navigateurs, comme Mozilla Firefox et Microsoft Edge, permettent d'ouvrir les outils de développement en utilisant la touche F12. Bien que globalement similaires dans leur fonctionnement et leur apparence, les subtilités de chaque navigateur signifient qu'il est préférable de maîtriser ces outils individuellement. Je vous suggère de commencer votre apprentissage avec Google Chrome, très répandu parmi les développeurs grâce à des outils à la fois perfectionnés et intuitifs. Ce navigateur vous guidera efficacement dans la compréhension des rouages du code. En maîtrisant d'abord Chrome, vous pourrez ensuite facilement explorer les autres alternatives et adapter rapidement vos réflexes de débogage à Firefox, Edge et consort.

Safari

Safari, le navigateur exclusivement disponible sur Mac, comporte quelques spécificités remarquables. Avant de pouvoir accéder aux outils de développement web, il vous faudra d'abord activer le menu Développement au sein des paramètres.

Pour ce faire, ouvrez les Préférences de Safari puis rendez-vous dans l'onglet "Avancé" situé tout en bas. Là, cochez simplement la case permettant d'afficher le menu Développement directement dans la barre de menus supérieure. Désormais, vous pourrez profiter pleinement des fonctionnalités dédiées aux développeurs web même sur la version desktop du navigateur.

Désormais, plusieurs raccourcis clavier permettent d'activer facilement les outils de développement intégrés aux navigateurs. La combinaison Cmd + Opt + C ouvre directement la console de commande sur Safari, ouvrant de nombreuses possibilités pour optimiser et déboguer efficacement les sites et applications Web.

Les développeurs disposent également d'un menu dédié regroupant l'ensemble des fonctionnalités avancées : inspection des éléments, exécution de code JavaScript, surveillance des performances et bien d'autres sont accessibles en un clic. Quel que soit l'environnement ou le navigateur, les outils de développement offrent une visibilité totale permettant de corriger les bugs et améliorer l'ergonomie des interfaces.

En résumé :

Sur Windows, appuyer sur F12 ouvrira généralement l'inspecteur dans la plupart des navigateurs.

Sous MacOS, la touche Cmd + Opt + J permet d'activer les outils de développement dans Chrome de manière immédiate.

Pour Safari, il suffit de saisir Cmd + Opt + C après avoir activé le menu Développement dans les paramètres.

Conclusion

Au cours de ce premier chapitre introductif, nous avons exploré les bases de JavaScript, un langage de programmation essentiel pour ajouter de l'interactivité aux pages web. Nous avons brièvement discuté de son histoire, de sa popularité et de ses principales utilisations dans le développement web moderne.

Ensuite, nous avons découvert l'importance de l'environnement de développement. Nous avons expliqué ce qu'est un IDE (environnement de développement intégré) et présenté les différents outils que vous pouvez utiliser pour écrire et déboguer votre code JavaScript, notamment Visual Studio Code, que nous utiliserons tout au long de ce livre.

Les outils de développement des navigateurs, tels que ceux disponibles dans Google Chrome, Firefox et Safari, ont également été introduits. Ils vous permettent de visualiser les erreurs, de tester votre code, d'inspecter des variables et bien plus encore.

Enfin, nous vous avons montré comment configurer ces outils dans les navigateurs et comment les utiliser efficacement pour déboguer des scripts JavaScript. Vous disposez désormais de tout ce dont vous avez besoin pour commencer à coder.

Dans les prochains chapitres, nous allons aborder le cœur du sujet en examinant les concepts fondamentaux de JavaScript et en mettant en pratique ce que nous avons appris.

Chapitre 1

Votre premier programme JavaScript

Bienvenue pour votre premier pas avec JavaScript! Ce chapitre amorce votre exploration de ce langage primordial pour le développement web interactif. JavaScript anime vos pages internet, leur conférant dynamisme et interactivité.

Au cours de ce chapitre, nous vous guiderons étape par étape pour écrire votre tout premier programme JavaScript. Vous apprendrez à intégrer du code JavaScript dans une page HTML, que ce soit directement dans le document html ou via des fichiers externes. Nous aborderons également quelques bonnes pratiques pour organiser votre code de manière efficace.

À l'issue de ce chapitre, vous saurez créer et exécuter de simples scripts JavaScript et comprendrez comment les intégrer à un projet web. Préparez-vous à écrire vos premières lignes de code et à découvrir la puissance de JavaScript

Intégrer JavaScript à une page web

Tout comme les feuilles de style CSS, il existe deux approches principales pour intégrer du JavaScript à vos pages web. La première consiste à directement inscrire le script au sein même du document, tandis que la seconde repose sur le rattachement d'un fichier externe au moyen de liaisons. Dans les deux cas, l'élément script sert de support.

Méthode 1 : Script intégré dans le document

Premièrement, il est possible d'insérer directement le code entre les balises script, à l'intérieur même de la structure HTML, PHP ou autre. Ainsi en va-t-il de ce script élémentaire :

// Votre code JavaScript ici

console.log('Bonjour, monde !');

Cette solution ressort pratique pour de courts scripts ou des besoins ponctuels.

Méthode 2 : Scripts externes

Pour des projets plus élaborés cependant, il est recommandé d'externaliser le JavaScript au sein de documents dédiés, auxquels