Plan (indicatif) des cours JavaScript

1. Introduction

   • historique
   • contexte d'execution : environnement hôte
   • mise en place des outils de ce cours
   • démos

2. Bases de programmation illustrées en javascript,

   • types de base
   • constantes, variables, expressions et instructions
   • opérations de base
   • (entrées) sorties basiques en javascript
     • contexte navigateur
     • contexte node
   • structures de contrôles de base: conditionnelles et boucles
   • ensemble de valeurs, les tableaux
   • les fonctions

3. Programmation événementielle et modèle d’exécution

4. Les objets en javascript (partie 1 : le minimum vital ).

5. Javascript dans le navigateur, manipulation du DOM, Verification de formulaire, etc.

6. Un peu de programmation coté serveur en javascript

7. Discussions client serveur, ajax, fetch ...

8. Les objets en javascript (partie 2 : programmation par prototype vs classe).

9. Programmation asynchrone avancée avec JavaScript

Intro (définition)

• Javascript :

  • Un langage de programmation !

  • Né dans un contexte particulier:
    Dans le Navigateur Web

  • Échappé de ce "carcan":
    "langage "généraliste"
    Programmation coté serveur

Description du langage

Javascript est un langage de programmation:

• Dynamique (tout est fait à l'exécution)
• En particulier dynamiquement typé (comme Python)
• Impératif (effets de bords, boucles for, notion d'instruction, ...)
• Fonctionnel (les fonctions sont des objets de première classe que l'on va manipuler à haute dose)
• Objet (mais à prototype donc sans notion de classe au départ)
• Interprété, avec une compilation à la volée (JIT).
• Événementiel (on execute du code en réponse a des événements)

La suite des cours introduira toutes ces notions

Intro (historique 1: contexte)

• Web d'origine : statique

⟹ Ajouter du dynamisme :

• coté serveur: générer dynamiquement le contenu d'une page sur le serveur avant de l'envoyer au client

• coté client: télécharger des programmes executables sur le client qui peuvent interagir avec la page html et le css.

Intro (historique 1: contexte)

Dynamisme coté serveur (1)

• exemple reservation de Train.
• principe:
  • formulaire HTML
  • -> envoi au serveur
  • -> calcul de la réponse (interrogation de BD...)
  • -> retour au client
  • -> rechargement de page etc.

Intro (historique 1: contexte)

Dynamisme coté serveur (2)

• 1993 : Les scripts CGI:
  • permet au serveur de récupérer les paramètres d'une requête HTTP et de générer du HTML en réponse.
  • permet de programmer coté serveur dans n'importe quel langage.
• 1994 : le langage PHP qui domine (encore) ce coté
• 2009 : nodeJS

Cela manque d'interactivité:
si une saisie manque on refait tout
=> latence et surcharge réseau, coup du rendu graphique etc.

Intro (historique 1: contexte)

Dynamique côté client (1)

• les programme sont téléchargés sur le client qui les exécute
• rendre les sites interactifs
• restrictions de sécurité

Intro (historique 1: contexte)

Dynamique côté client (1)

1995:

• Java, notion d'applet
• javascript

Attention: précisons que Java et Javascript sont deux langages DIFFÉRENTS

1996

• Première standardisation de javascript (ECMAScript) par l'ECMA puis l'ISO
• Plugin Adobe Flash Player

1999

• ES3 ECMAScript 3

Intro (historique 1: contexte)

Évolutions de javascript

2009 :

• Standardisation ISO de ECMAScript 5
• sortie hors du navigateur : nodeJS

2015 :

• Standardisation ISO de ECMAScript 6

2016 :

• Standardisation ISO de ECMAScript 7

...

2021 :

• Standardisation ISO de ECMAScript 12

www.ecma-international.org/publications-and-standards/standards/ecma-262/

2022 :

• https://tc39.es/ecma262/

Contexte d'execution : environnement hôte

But: fournit ses propres objets et fonctions en plus du noyau du langage.

• Le Navigateur : accès aux document HTML/CSS (via le DOM)
• Node : entrèes sortie basé basé sur des événements non-bloquant
  ...

Intros (Nos outils)

• Les indispensables

  • Un navigateur web
  • Un éditeur de texte
    
  • On utilisera la console de débogage Javascript du navigateur (Ctrl-Shift-I ou F12).
  • Nodejs

• Les alternatives pédagogiques

  • replit
  • jsbin et compagnie.

Demos

1. Dans le Navigateur
2. Dans Node
3. Jsbin
4. Replit

Comment charger et exécuter du Javascript dans le Navigateur?

• Plusieurs manières de mettre du code Javascript dans une page HTML.

1. Via un(des) fichier(s) externes)

  <!DOCTYPE html>
  <html lang="fr">
    <head>
      ...
     <script src="monCodeJS.js"></script>
      ...
    </head>
    <body>
.   .. 
    </body>
</html>

2. Entre 2 balises script, généralement dans le head mais pas que ...

  <!DOCTYPE html>
  <html lang="fr">
    <head>
      ...
     <script>
         //mon code JS

     </script>
      ...
    </head>
    <body>
.   .. 
    </body>
</html>

3. Sur un gestionnaire d'événement (mal vu mais pratique au début ;-))

  <!DOCTYPE html>
  <html lang="fr">
    <head>
      ...
     
    </head>
    <body>
    ... 
    <button onclick="duCodeJS">clickez moi <button>
    </body>
</html>

4. on peut les mélanger, on privilégiera le 1.

on peut sortir tout js du html (séparation des contenu).
remplacer les onclick du html par des addEventListener dans dans le js.