Introduction à Javascript

Jean-Marc Lecarpentier
GREYC — Université de Caen
En partie adapté des cours de Alexandre Niveau

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

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
  • Module Technologies Internet de 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, c'est à dire navigateur web en général
  • 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

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 : ECMAScript 7.0, en 2016…
  • … mais la version 6 est encore en cours d'adoption (tout ne marche pas partout !) voir les nouveautés de la version 6
  • 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>
        alert("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 n'importe où dans le document

Sa place « logique » est dans l'en-tête (élément <head>), 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 TDs 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écjencher le script uniquement une fois le HTML complètement chargé.

Démo

Afficher des messages

  • alert("Hello"); : ouvre une boite de dialogue et met le script en pause
  • document.write("Hello"); : écrit dans le document, déconseillé
  • console.log("Hello"); : affiche dans la console du navigateur, utile pour débugger

Démo 1 : les 3 exemples

Démo 2 : console.log ne bloque pas l'xé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 déclarer des variables sans let)
  • Envoie des exceptions plus souvent
  • 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

Variables

  • On déclare une variable avec let :
    let toto = 4;
    alert(toto);
    toto = "bonjour";
    alert(toto);
  • 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 : l'utilisation de let est récente, vous trouverez de nombreux tutoriels et exemples avec l'utilisation de var pour déclarer des variables. La gestion de la portées 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'une seule 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 :
    alert("Je m'appelle " + toto["prenom"] +
        " et j'ai " + toto["age"] + " ans");
    

Démo

Structures de contrôle

  • Pareil que le C
  • if…else, switch
  • for, while, do…while
  • opérateur ternaire cond? exprSiVrai: exprSiFaux

Démo

Fonctions

  • Mot-clé function, pas d'indication du type de retour
    function toto(arg1, arg2) {
      alert(arg1 + ' ' + arg2);
      return arg1;
    }
    
  • Si l'appel d'une fonction n'a pas le bon nombre d'arguments alors les arguments non définis sont "undefined" (voir demo)

Démo

Portée des variables

En mode strict avec l'utilisation de let la portée des variables et liée au bloc dans lequel la déclarataion se trouve

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

Démo

Tableaux

  • Les tableaux sont des objets particuliers, qui ont un attribut length
      let personnes = ['Nicolas', 'Sarah', 'Alexandra'];
      console.log(personnes[0]);
      console.log(personnes.length);
      personnes[100] = 'Coralie';
      console.log(personnes.length);
      
  • Ajouter un élément au tableau : personnes.push('Mika')

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