Introduction à Javascript

Jean-Marc Lecarpentier
Université de Caen

Technologies Web en Licence

  • S1 - Technologies Web 1 - HTML/CSS la base des pages web
  • S2 - TW2 - Javascript : interactions dans les pages web
  • S4 - TW3 - Programmation côté serveur (PHP) : des programmes fabriquent les pages web
  • S5 - TW4 web - Programmation d'applications web avancées : interactions serveur/bdd, architecture MVCR
  • S5 - TW4 apps - Programmation d'applications client : applications Javascript, développement mobile

Sites statiques

  • Les pages web sont en HTML/CSS
  • Un navigateur web est (par définition) un logiciel qui :
    • sait afficher du HTML/CSS
    • sait communiquer en HTTP pour récupérer les pages auprès d'un serveur
  • HTML n'est pas un langage de programmation : pas d'instructions, pas de conditions, pas de boucles…
  • Langage statique
  • Typiquement : le site DM fait en TW1

Sites dynamiques

  • Pour créer du contenu dynamique (qui dépend d'une BD, des requêtes de l'utilisateur, etc.), on utilise un vrai langage de programmation qui va fabriquer les pages et générer du HTML
  • Modules Technologies Internet de L2/L3 : utilisation de PHP
  • C'est le serveur qui exécute le PHP, ce qui génère une page HTML qui est ensuite renvoyée au client
  • Ça ne change rien pour le client : il récupère une page HTML statique dans tous les cas
  • Pour que la page soit modifiée, il faut faire une nouvelle requête HTTP

Limites du modèle

  • Impossible de rendre la page interactive
  • On voudrait pouvoir afficher/cacher du contenu, zoomer sur des images, vérifier un formulaire en temps réel, etc.
  • Besoin de gérer ces interactions du côté client (navigateur web en général)
  • Utilisation d'un langage de programmation interprété par le navigateur : Javascript
  • On parle souvent de programmation backend pour ce qui est exécuté côté serveur et de programmation frontend pour ce qui est exécuté côté client
  • Module TW2 : introduction à Javascript et aux interactions Utilisateur/Page web
  • Module TW4 app : utilisation de framework Javascript pour développer des applications web ou mobiles

Javascript

  • Le navigateur doit pouvoir exécuter des programmes présents dans les pages web
  • Ces programmes doivent pouvoir modifier le contenu de la page (ajouter des éléments HTML, changer le CSS…)
  • Ces programmes doivent être lancés lors de certaines actions de l'utilisateur (clics, scroll, survol…)

Le langage utilisé pour écrire ces programmes est JavaScript.

Javascript

  • Conçu par Brendan Eich chez Netscape en une dizaine de jours en 1995
  • Appelé d'abord « LiveScript » puis « JavaScript » pour des raisons marketing
  • Sorti avec Netscape 2.0 en mars 1996 ; grand succès, donc Microsoft se dépêche d'implémenter sa version (JScript) pour IE 3.0 sorti en août
  • Netscape propose très rapidement (fin 1996) à l'organisme Ecma de standardiser le langage

ECMAScript

  • Standardisé par l'Ecma en 1997 sous le nom d'ECMAScript (compromis pour éviter les problèmes de copyright)
  • ECMAScript est une norme, JavaScript et JScript en sont des implémentations (c'est aussi le cas de l'ActionScript de Flash)
  • Dernière version de la norme : version 14 ECMAScript 2023, en Juin 2023
  • Seul le langage est standardisé par l'Ecma, pas son interaction avec le navigateur et le HTML, qui est standardisé par le W3C.

Caractéristiques de Javascript

  • Syntaxe proche du C mais concepts proches de Python
  • Langage interprété, typage dynamique, orienté objet, fonctionnel
  • Dépend fortement de l'environnement d'exécution : par exemple le langage n'a pas d'entrées/sorties standard ou de mécanisme d'importation
  • L'environnement d'exécution typique est le navigateur web

Utiliser un script dans une page HTML

  • On peut placer le script directement dans la page, dans un élément <script> :
    <script>
        console.log("Salut !");
    </script>
    
  • On peut aussi exécuter un script contenu dans un fichier (« script externe ») :
    <script src="URL du script externe"></script>
    Utile dans les cas suivants :
    • Script long
    • Utilisation de scripts écrits par d'autres (librairies, frameworks)
    • Partage de fonctions entre plusieurs pages HTML

Où placer l'élément <script> ?

  • L'élément <script> peut se placer :
    • dans l'en-tête (élément <head>)
    • dans le corps (élément <body>)
    • Attention à ne pas le mettre en-dehors d'un de ces 2 éléments
  • Sa place « logique » est dans l'en-tête puisqu'il ne fait pas partie du contenu
  • Il y a cependant deux problèmes :
    • lorsque le parseur HTML rencontre un élément <script>, il le télécharge (si nécessaire) puis l'exécute, et attend qu'il soit terminé avant de reprendre le rendu du HTML
    • si le script met longtemps à être téléchargé ou exécuté, l'internaute ne voit rien pendant ce temps
    • on a souvent besoin de manipuler des éléments HTML de la page dans les scripts ; il faut qu'ils aient déjà été créés par le parseur HTML
  • Solutions (mises en places dans les TPs suivants) :
    • mettre l'élément <script> à la fin de la page, juste avant de fermer le <body>.
    • utiliser un évènement qui permet de déclencher le script uniquement une fois le HTML complètement chargé.
    • utiliser l'attribut defer :
      <script src="lecode.js" defer ></script>
      le navigateur n'exécute le script que après avoir parsé le contenu DOM du document

Démo

Afficher des messages : console.log

  • console.log("Hello"); : affiche dans la console du navigateur
  • alert("Hello"); : ouvre une boite de dialogue, mais bloque le script en le mettant en pause
  • Utiliser console.log dans les TPs (sauf instruction spécifique)
  • Possibilité de substitutions :
    console.log("Bonjour %s. Tu m'as téléphoné %d fois.", "Bobby", 9);
    // affichera Bonjour Bobby. Tu m'as téléphoné 9 fois.
    
    Documentation de la console

Raccourci Firefox pour ouvrir la console : Ctrl+Maj+K (Cmd+Opt+K pour Apple)

OBSOLÈTE Vous trouverez aussi des tutos avec document.write("Hello");, ne PAS utiliser.

Démo 1 : les 3 exemples

Démo 2 : console.log ne bloque pas l'exécution du code

Strict mode

  • Pas mal de pièges en JS peuvent être évités en utilisant le « mode strict » introduit dans ECMAScript 5
  • Syntaxe: "use strict"; au début d'un script (ou d'une fonction) — les guillemets font partie de la syntaxe (la ligne est simplement ignorée par les moteurs JS plus anciens)
  • Empêche l'utilisation des aspects les plus dangereux (par exemple rend obligatoire la déclaration des variables avec let)
  • Envoie des exceptions plus souvent
  • "use strict"; est obligatoire pour les TPs

Séparation des instructions

  • Les instructions sont séparées par des points-virgules
  • Ça peut marcher sans… mais pas toujours
  • Mettre le ; fait partie des bonnes pratiques de codage Javascript

Variables

  • On déclare une variable avec let :
    let toto = 4;
    console.log(toto);
    toto = "bonjour";
    console.log(toto);

    En mode strict une variable non déclarée génère une erreur
  • On peut déclarer une constante avec const
    const toto = 4;
    console.log(toto);
    toto = 7; // => erreur
  • Variables non typées
  • Variables dynamiques (comme en Python)
  • Les noms de variables peuvent contenir des caractères alphanumériques et les caractères underscore et dollar
  • Noms sensibles à la casse. On utilise la notation camelCase par convention
  • Attention au vieux code : vous trouverez de nombreux tutoriels et exemples obsolètes avec l'utilisation de var pour déclarer des variables. La gestion de la portée des variables est alors différente. Ne pas utiliser var pour les TPs

Démo

Types de base

  • Nombres (pas de distinction entre entier et flottant)
  • Booléens true et false
  • Chaînes de caractères : "Toto" ou 'Toto' (équivalent)
  • Concaténation avec +, conversion implicite : "Toto a " + 45 + " ans" (il suffit qu'un seul opérande soit une chaîne pour que tous les + soient des concaténations)
  • Attention à la conversion implicite des chaînes :
    "123" + 4  // "1234"
    "123" - 4  // 119
    "a" + 2 + 1  // "a21", pas "a3" !
    
  • Type undefined pour les variables n'ayant pas eu de valeur assignée
  • typeof maVariable permet d'obtenir le type du contenu de maVariable

Démo types et opérateurs

Objets

  • Les objets en JavaScript ressemblent aux dictionnaires de Python
  • Un objet est un ensemble de couples clé-valeur
    let toto = { "nom": "Durand", "prenom": "Toto", "age": 45 }
    
  • Accéder aux valeurs :
    console.log("Je m'appelle " + toto["prenom"] + " et j'ai " + toto["age"] + " ans");
    
    // ou bien
    
    console.log("Je m'appelle " + toto.prenom + " et j'ai " + toto.age + " ans");
    
  • Les objets Javascript peuvent aussi avoir des fonctions internes (méthodes).
    Nous aborderons plus tard les notions de programmation orientée objet avec Javascript.
  • Nota : le type Map peut avantageusement être utilisé si la programmation objet n'est pas utilisée. Voir la documentation MDN sur les Maps

Démo

Tableaux

  • Les tableaux sont des objets particuliers, qui ont un attribut length
    (correspond aux listes en Python)
    let personnes = ['Nicolas', 'Sarah', 'Alexandra'];
    console.log(personnes[0]);
    console.log(personnes.length);
    personnes[100] = 'Coralie';
    console.log(personnes.length);
    
  • Ajouter un élément en fin de tableau : personnes.push('Mika')
  • Documentation sur les tableaux (MDN)
  • Syntaxe de décomposition (Spread syntax) permet de combiner facilement des tableaux
    (sert aussi avec les fonctions cf. plus loin)
    let personnes = ['Nicolas', 'Sarah', 'Alexandra'];
    let autres = ['Mike', ...personnes, 'Cindy'];
    console.log(autres);
    
  • Documentation MDN sur la syntaxe de décomposition

Démo

Structures de contrôle

  • Pareil que le C, voir la démo pour les exemples
  • if…else, switch
  • for, while, do…while
  • opérateur ternaire cond? exprSiVrai: exprSiFaux

Démo

Fonctions

Plusieurs syntaxes possibles :
  • Avec le mot-clé function :
    function addition(entier1, entier2) {
      let somme = entier1 + entier2;
      return somme;
    }
    
  • Avec l'opérateur function :
    const additionBis = function (entier1, entier2) {
      let somme = entier1 + entier2;
      return somme;
    }
    
    Nota : on utilisera alors const plutôt que let
  • Avec les fonctions fléchées :
    const additionTer = (a, b) => a + b;
    
    ou si fonction plus "longue" :
    const additionTer = (a, b) => {
        let somme = a + b;
        return somme;
    }
    
    Nota : pas mal de différences subtiles pour les fonctions fléchées (prudence donc)
    Documentation MDN sur les fonctions fléchées

Fonctions (suite)

  • Valeur de retour avec return (pas d'indication du type de retour)
  • Si l'appel d'une fonction n'a pas le bon nombre d'arguments alors les arguments non définis sont "undefined" (voir demo)
  • Attention avec la syntaxe const maFonction = ... on peut pas appeler celle-ci avant sa création dans le code
  • Avec la syntaxe function toto() ... cela est possible
  • Ne PAS imbriquer les fonctions (pour l'instant...)

Démo

Portée des variables

En mode strict avec let et const, la portée des variables et liée au bloc dans lequel la déclaration se trouve

Conséquence : les variables déclarées en dehors de tout bloc sont alors globales

Démo

Conclusion

  • Un nouveau langage pour les L1
  • "Mélange" de C et Python
  • Langage de plus en plus performant
  • Utilisé pour les applications Web
  • Mais aussi pour les applications mobiles
  • De nombreuses possibilités