Introduction à Javascript — Jean-Marc Lecarpentier

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 : version 11 ECMAScript 2020, en Juin 2020
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);
```
En mode strict une variable non déclarée génère une 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 : 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

Sites statiques

Sites dynamiques

Limites du modèle

Javascript

JavaScript

ECMAScript

Caractéristiques de JavaScript

Utiliser un script dans une page HTML

Où placer l'élément script ?

Afficher des messages

Strict mode

Séparation des instructions

Variables

Types de base

Objets

Structures de contrôle

Fonctions

Portée des variables

Tableaux

Conclusion

Où placer l'élément `script` ?