Introduction et bases de JavaScript

Technologie web 2

Johan Girod

Avant-propos

A propos de moi

Quelques vues d'insiders

Beaucoup de développeurs utilisent les LLMs pour générer du code en grande quantité
Peu de personnes capable d'auditer, de comprendre et de critiquer ce code
Pourtant c'est 50% du taf de développeur : relire du code, écrit par les autres, écrit par les LLMs, etc.
Les LLMs proposent souvent 3 ou 4 solutions. Des fois ils en implémentent une mauvaise. La moitié du temps je dois préciser ou corriger.
C'est la différence entre un bon dev et un proxy LLM
Comment savoir si une solution est bonne / mauvaise ?

En apprenant les bases. Et c'est ce pourquoi vous êtes ici.
Le but de ce cours n'est pas de savoir créer un site en 3 semaines (il y a des bootcamp pour cela).
C'est de repartir des fondamentaux du web : le navigateur, et les standards
Ça pourra sembler long, ardu, complexe, par rapport à une solution LLM qui utilise des framework prêt à l'emploi (ex. react)
Mais trois bonnes nouvelles
Les bases, c'est durable. Ce que je vous verrez ici était valable il y a 10 ans et sera valable encore dans 10 ans.
Les bases c'est standard, tout les développeurs webs les partagent
Les bases c'est ce qui vous permettra de corriger les LLMs. Et c'est ce qui fera la différence aux entretiens d'embauche
A garder en tête lorsque vous galererez sur des problèmes, des erreurs de syntaxe, etc.

Le marché du travail des développeurs est en mutation
Très peu de postes ouverts aux juniors
Vous allez devoir vous former vite, car les entreprises ne veulent plus le faire
Il faut que vous développiez un maximum de savoir maintenant. Vous avez accès à des professeurs. Vous avez du temps pour vous former. Profitez-en ! Posez des questions / Codez chez vous / Développez votre curiosité
Réussir les TPs, c'est pas le sujet, le plus important c'est de comprendre et d'être curieux
Et sur l'utilisation des LLMs, je déconseille **très fortement** de les utiliser en mode écriture pendant votre apprentissage (« write »).
Ok pour les utiliser en classe mais avec ces règles :
1. Écrivez d'abord du code
2. Utilisez le mode apprentissage
J'experimente cette année ! Si je vois qu'il y a des abus je reviendrai en arrière

Définition(s) du web

Le World Wide Web — communément appelé WWW, W3, ou le web — est un système de pages web publiques interconnectées à travers l'Internet.

MDN doc

Définition(s) du web

Le web est une application internet constitué d'un réseau de serveurs et de clients échangeant des ressources

Schéma d'un échange entre client et serveur

Définition(s) du web

Le web est un ensemble de standards et protocoles

Lesquels ?

Le web est un ensemble de standards et protocoles

HTTP– protocole de communication client-serveur
HTML– structure et contenu
CSS– mise en forme
JavaScript– interactivité
... et bien d'autres (WAI-ARIA, Browser API, WebAssembly, JSON...)

L'organisation W3C définit les standards du web

HTTP

HyperText Transfer Protocol

Protocole de communication client-serveur
Utilise le protocole réseau TCP/IP
Un serveur HTTP utilise le port 80
Le client effectue une requête HTTP pour une ressource sur une URL
Le serveur répond avec un code de statut et un contenu

HTML

HyperText Markup Language

Permet de structurer et de décrire le contenu d'une page web grâce à des balises

CSS

Cascading Style Sheets

Permet de mettre en forme une page web grâce à des règles de style


body { background-color: #f0f0f0; }

JavaScript

Permet d'ajouter de l'interactivité à une page web


const button = document.querySelector('button');
button.addEventListener('click', () => alert('Hello world!'));

Quelles sont les étapes pour afficher une page web ?

Le navigateur fait une requête sur une URL du serveur avec le protocole HTTP
Le serveur envoie une réponse qui contient code HTML de la page (et éventuellement du CSS et du JavaScript)
Le navigateur interprète le code HTML, CSS et JavaScript pour afficher la page à l'écran

Contenu du semestre

Programmation en Javascript = 11 x 2h

Bases du langage
Manipulation du DOM
Gestion des événements
Utilisation des APIs du navigateur

Evaluations

Deux évaluations sur machine
Durée : 1h30 (+ 30 min tiers temps)
Coeff 1

Introduction à JavaScript

JavaScript (JS) est un langage de programmation interprété
Ubiquitaire dans le développement web (et au dela)
En constante évolution (standardisé par l'ECMA)

Interprété vs compilé
Crée en 1995 par Brendan Eich
En seulement 10 jours
Inspiré de la syntaxe de Java (c'est le seul point commun)

A la base, seulement pour ajouter de l'interactivité aux pages web
Succès du web = succès de JS
JS est devenu un langage de programmation à part entière
LE langage le plus utilisé au monde
Avec l'écosystème le plus riche (> 1 million de paquet NPM)
Dans les navigateur, mais aussi
Sur les serveurs (Node.js)
Dans les applications mobiles (React Native)
Dans les applications de bureau (Electron)
Dans les jeux vidéos (Unity)
Dans l'internet des objets (Johnny-Five)
Apprendre JS vous permet de toucher à tous ces domaines

En constante évolution. Depuis 2015, une révision majeure tous les ans, avec ajout de fonctionalité
Standardisé par l'ECMA (European Computer Manufacturers Association)
Le JS d'aujourd'hui n'a plus rien à voir avec le JS de 1995
Dans ce cours, nous apprendrons les dernières fonctionalités du langage

Ressources

MDN doc – la documentation officielle de JavaScript
The Modern JavaScript Tutorial – un tutoriel complet sur JavaScript
Can I use – permet de savoir quelles fonctionalités sont supportées par quels navigateurs

Bases du langage

Déclaration de variables


// Déclaration d'une variable
let maVariable = 12;

Déclaration de variables


// Déclaration d'une variable
let maVariable = 12;

// Réaffectation d'une variable
maVariable = 42;

Déclaration de constantes


// Déclaration d'une constante
const maConstante = 12;

Déclaration de constantes


// Déclaration d'une constante
const maConstante = 12;

maConstante = 42; // Erreur
/*
    À noter : si une variable n'est pas réaffectée,
    il est préférable de la déclarer en constante
*/

Types de données

Opérateurs

Structures de contrôle : if/else

Structures de contrôle : boucles

Structures de contrôle : switch

Bloc logique et portée des variables

Fonctions

Déclaration de fonctions

Scope des variables

Variables locales

Scope des variables

Variables externes

Valeur par défaut

Fonctions fléchés

Tableaux

Déclaration et accès

Modifications de tableau

Portion de tableau

Itération sur un tableau

Objets

Objets: Déclaration et accès

Objet: modification de propriété

Objet: destructuration

À vous de jouer !

johangirod.com/cours

Exercices / TP

Pour effectuer les exercices, nous utiliserons un REPL (Read-Eval-Print-Loop) qui permet d’écrire du code et de l’exécuter directement.

Pour cela, vous installerez l’extension JavaScript REPL de VSCode pour directement évaluer le JavaScript dans votre éditeur de code.

Exercice 1

Écrire une fonction qui prend en argument la hauteur d’un véhicule et qui retourne la catégorie de tarification pour le péage de l’autoroute :

hauteur inférieure à 2m : “véhicule léger”
hauteur supérieure ou égale à 2m et inférieure à 3m : “véhicule intermédiaire”
hauteur supérieure ou égale à 3m : “poids lourd”

Tester cette fonction avec plusieurs hauteurs de véhicules.

Corrigé

Exercice 2

Écrire un programme capable de calculer la factorielle d’un nombre donné par l’utilisateur.

Corrigé

Exercice 3

Écrire une fonction qui prend en paramètre un tableau de nombres et qui retourne la moyenne de ces nombres.

Corrigé

Exercice 4

5.1

Écrire une fonction getBalance qui prend en paramètre une liste d’opération (credit ou debit) et qui retourne la valeur du compte (les crédit sont ajoutés, les débits sont soustraits).

const operations = [
	{ credit: 550, date: new Date('2023-01-01') },
	{ debit: 50, date: new Date('2023-01-02') },
	{ debit: 200, date: new Date('2023-01-03') },
	{ credit: 400, date: new Date('2023-01-08') }
];
getBalance(operations); //= 700

Corrigé

5.2

Modifier la fonction pour qu’elle prenne un second argument facultatif qui soit la valeur initiale du compte (par défaut 0).

getBalance(operations); // 700
getBalance(operations, 1000); // 1700

Corrigé

5.3

Modifier la fonction pour qu’elle prenne en argument un objet avec les propriétés suivantes :

operations: une liste d’opération (credit ou debit)
initialValue: la valeur initiale du compte (par défaut 0)
until: une date jusqu’à laquelle les opérations doivent être prises en compte (par défaut aujourd’hui)

const operations = [
  { credit: 550, date: new Date('2023-01-01') },
  { debit: 50, date: new Date('2023-01-02') },
  { debit: 200, date: new Date('2023-01-03') }
  { credit: 400, date: new Date('2023-01-08') }
];

getBalance({ operations: operations }); // 700
getBalance({ operations: operations, initialValue: 100 }); // 800
getBalance({ operations: operations, until: new Date('2023-01-05') }); // 300

Corrigé

Exercice 5

Nous allons pour cet exercice utiliser le REPL du navigateur. Pour y accéder, il suffit d’ouvrir le débugueur de votre navigateur (F12) et de cliquer sur l’onglet “Console”.

Coller du code dans la console du navigateur

Pour pouvoir coller du code dans la console du navigateur, vous devrez au préalabable écrire manuellement la phrase « autoriser le collage » et appuyer sur la touche « Entrée ».

Écrire un algorithme qui demande à l’utilisateur un nombre compris entre 1 et 10 jusqu’à ce que la réponse convienne.

Vous pourrez utiliser la fonction prompt pour demander à l’utilisateur de saisir un nombre et la fonction alert pour afficher un message à l’utilisateur.

let guess = prompt('Entrez un nombre entre 1 et 10');
// ...
alert('Bravo !');

Le nombre pourra être determiné aléatoirement à l’aide de la fonction Math.random et de la fonction Math.ceil.

Vous aurez à utiliser la fonction parseInt pour convertir la chaîne de caractères saisie par l’utilisateur en nombre.

Corrigé

Exercice 6

Pour commencer, nous allons changer la police d’écriture pour une police monospace. Pour cela, nous allons utiliser la propriété fontFamily de l’objet document.body.style :

Saisissez le code suivant dans la console du navigateur :

document.body.style.fontFamily = 'monospace';

Nous allons maintenant utiliser la méthode write de l’objet document pour écrire directement dans la fenêtre du navigateur. Par exemple pour écrire 4 fois le symbole + :

// testez ce code dans votre navigateur
const str = '+'.repeat(4);
document.write(str);

Maintenant :

Écrire une fonction qui dessine une ligne d’étoiles * (le nb d’étoiles sera un paramètre).
Écrire une fonction qui dessine un triangle composé d’étoiles, c’est-à-dire une succession de lignes d’étoiles de longueur 1 puis 2 puis 3 et ainsi jusqu’à n. Le passage à la ligne se fera à l’aide de la balise HTML adéquate (<br/>).
Écrire une fonction qui dessine un carré de côté n, le bord de ce carré est composé d’étoiles, l’intérieur de « - ».
Écrire une fonction qui dessine un losange creux, dont le bord est signifié par des étoiles. Chaque coté de ce losange sera donc dessiné avec n étoiles. Chaque « blanc » sera représenté par un espace non sécable encodé  . Par exemple, pour créer une ligne de 4 espace puis une étoile, on écrira : document.write(" ".repeat(4) + "*"); Voici le rendu pour n=4 :

Corrigé