Blog
Partie 1 - Genèse du projet - Découverte du langage JavaScript
Lorsque j’ai commencé à réfléchir à la possibilité de créer une simulation de vol de fusée, je savais qu’il me faudrait un langage capable d’afficher des résultats visuels dans un navigateur. C’est ce qui m’a conduit à découvrir JavaScript. Je n’en avais jamais écrit une ligne auparavant, mais je savais qu’il était largement utilisé pour le développement web. Je me suis donc lancé en partant de zéro, sans savoir exactement où cela allait me mener.
Au début, j’ai suivi des tutoriels très simples, notamment sur la déclaration de variables, les fonctions, ou encore les tableaux. Les bases ne sont pas très difficiles à apprendre, mais JavaScript a ses particularités, notamment dans la gestion du temps et des événements, qui m’ont demandé un peu d’adaptation. Ce qui m’a tout de suite intéressé, c’est la possibilité de faire des choses interactives rapidement, avec du code qui s’exécute directement dans le navigateur.
Je suis ensuite tombé sur le concept de Promise, et plus largement de programmation asynchrone, qui repose sur la capacité d’un programme à continuer de fonctionner pendant que certaines opérations se déroulent en arrière-plan. Pour une simulation dynamique, c’est indispensable : il faut pouvoir faire des mises à jour régulières de l’affichage sans bloquer le reste du programme. Comprendre les mécanismes de setTimeout, async/await, ou des appels API avec fetch m’a demandé un effort supplémentaire, mais c’est là que j’ai commencé à entrevoir le potentiel de JavaScript pour un projet sérieux.
Un autre tournant important a été la découverte de la programmation orientée objet dans JavaScript. J’ai appris à créer des classes avec leurs méthodes et attributs, ce qui m’a permis de structurer mon code de façon plus claire. C’est à ce moment-là que j’ai commencé à imaginer une architecture dans laquelle chaque modèle de fusée aurait sa propre classe de calcul de trajectoire. C’est ainsi qu’est née l’idée des MotionXXXClass : des objets JavaScript capables de calculer et stocker une trajectoire complète en fonction des paramètres physiques.
J’ai aussi découvert que JavaScript permettait de travailler directement avec le DOM pour modifier les éléments d’une page web en temps réel. Pour l’affichage graphique, j’ai utilisé Canvas, qui permet de dessiner dynamiquement des courbes, des formes et des animations à partir de coordonnées calculées.
Ce que j’ai apprécié avec JavaScript, c’est la rapidité du cycle d’apprentissage : on modifie une ligne, on recharge la page, et on voit immédiatement le résultat. Cela rend l’apprentissage très vivant. Progressivement, mes fichiers JS sont devenus plus complexes, mieux organisés, avec des modules, des imports/exports, et une logique plus proche d’une petite application que d’un simple script.
Enfin, j’ai appris à gérer les interactions avec une API via des appels HTTP, ce qui s’est révélé essentiel lorsque j’ai développé la partie serveur du projet. JavaScript est devenu le lien entre l’utilisateur et les données, capable de s’authentifier, d’afficher dynamiquement des résultats, et d’interagir avec la base de données via l’API.
Concepts clés en JavaScript
Concept | Description | Lien |
---|---|---|
Variables | Permettent de stocker des données. Ex : `let vitesse = 50;` | w3school.com |
Fonctions | Blocs de code réutilisables, appelés par leur nom. | w3school.com |
Tableaux | Structures de données permettant de stocker plusieurs valeurs. | w3school.com |
setTimeout | Permet d’exécuter une fonction après un délai défini. | w3school.com |
Promises | Objet représentant une opération asynchrone en cours ou terminée. | w3school.com |
async / await | Syntaxe simplifiée pour gérer le code asynchrone à base de Promises. | mozilla.org |
fetch | API native permettant de faire des requêtes HTTP et de traiter des réponses. | w3school.com |
Programmation orientée objet (OOP) | Paradigme basé sur des objets contenant des propriétés et des méthodes. | w3school.com |
Classes | Syntaxe moderne pour définir des objets (constructeurs, méthodes, héritage). | w3school.com |
DOM (Document Object Model) | Représentation structurée d’une page HTML manipulable par JavaScript. | w3school.com |
Canvas | Élément HTML permettant de dessiner dynamiquement dans une zone graphique. | w3school.com |
API côté client | Ensemble d’outils pour interagir avec des services distants via JavaScript. | mozilla.org |
Synthèse
Apprendre JavaScript a été une étape décisive dans mon projet. Ce langage m’a permis de passer d’une idée abstraite à une application interactive. J’ai appris à structurer du code, à utiliser l’asynchronisme, à créer des objets réutilisables, et à faire le lien entre l’utilisateur et les données. C’est ce qui a donné vie à ma simulation.