Web: Client 2

1.1- Introduction à JavaScript

Objectifs du cours

Utilisation du langage JavaScript
Manipulation dynamique du DOM
Événements/programmation asynchrone
Formulaires dynamiques et validations
Introduction aux concepts d'expérience utilisateur(UX) et librairie CSS
Outils de développeur des navigateurs web

JavaScript

Interprété
Dynamique et faiblement typé
Fonctionnel et Orienté-objet

Il occupe un place dominante depuis quelques années car il permets de transférer les connaissances du développeur d'un environnement à l'autre

Web
- Interactions: menu, formulaires
  - Librairies: jQuery, Alpine
- Applications: Gmail, Office365
  - Frameworks
    - Front-End: Vue, React
    - Back-End Express, Fastify
    - Full-Stack Adonis, Remix
Mobile ReactNative: Meta, Amazon, Microsoft
Jeux Phaser: Vampire Survivor, Athena Crisis
Apps de bureau Electron: Discord, VS Code
Extensions/Plugins
- Extension des navigateurs
- Discord Activities
Script/Programmation Node, Deno
- Serveur/Services: Uber, Netflix
- Utilitaires: Browsersync, TLDR Pages
Et plus... TypeScript

Exemple de syntaxe

copier

// Comment executer ce programme JavaScript?

// - Console des DevTools
// - Node

const name = "James";

console.log(`Hey ${name}`);

function roll(sides = 6) {
    return Math.floor(Math.random() * sides + 1)
}

console.log();
console.log('Rolling a D6');

const d6 = roll();
console.log(d6);

console.log();
console.log('Many dice');

const dice = [6, 10, 20];

let message = '';
for(let i = 0; i < dice.length; i++) {
    const sides = dice[i];

    message += `D${sides}\n`;
    message += roll(sides);
    message += `\n`;
}
console.log(message);

// Syntaxe fonctionnelle

console.log();
console.log('Many dice, again!');

dice.forEach(sides => {
    console.log(`D${sides}`);
    console.log(roll(sides));
});

Ressources

Environnement de développement

Pour s'initier au langage JavaScript, nous utiliserons un interpréteur en ligne de commande, avant de passer à l'exécution dans un contexte web d'un navigateur.

VS Code
Interpréteur JS Node.js v22 LTS

Installation de Node

Télécharger la version 22 LTS, du type prebuilt

Suivre les étapes d'installation en conservant les valeurs par défaut
Redémarrer l'installation

Utilitaire Run and Debug de VS Code

Démarche Run and Debug

Créer un nouveau fichier JavaScript
Enregistrer le fichier avec l'extension .js
En affichant le fichier JavaScript dans l'éditeur
- Sélectionner le menu Run and Debug
- Puis l'option Node.js
Le résultat de l'exécution du fichier est visible dans l'onglet Debug Console
Il est également possible d'ouvrir un fichier JavaScript existant ou un dossier contenant plusieurs fichiers, l'interpréteur utilisera le fichier actuellement ouvert dans l'éditeur

Go!

Sur le poste du laboratoire - Exécuter un programme JS avec Node via VS Code: - Créer le fichier mission.js dans VS Code - Saisir le code suivant console.log('Coucou JS!'); - Exécuter le programme et constater l'affichage

À la maison - Installer VS Code - Installer Node - Exécuter un programme JS avec Node via VS Code