Introduction à JavaScript

Ce cours est largement inspiré de la page du MDN de Firefox d’introduction à JavaScript

Exécuter du JavaScript

JavaScript est un langage de programmation vaguement inspiré de Java qui est exécuté par le navigateur Web (mais pas par le serveur).

Comme Python et Java il s’agit d’un langage interprété, il est exécuté par une machine virtuelle.

Contrairement à Python, qui est un langage de glue et de scripte, JavaScript est un langage pour gérer des interfaces:

Une page web est une interface vers du contenu, et JavaScript permet de rendre ça dynamique.

La syntaxe de JavaScript diffère de Python:

Les tabulations sont remplacée par des accolades. Les espaces sont non codants.
Le ; termine une instruction (mais est facultatif).

Pour exécuter du JavaScript on peut utiliser:

le navigateur web
un interpréteur node.

Pour installer node sous Debian/Ubuntu, vous pouvez installer le paquet nodejs. Sinon consulter le site internet.

Le fichier ici contient simplement les lignes suivantes:

console.log("hello world")

Ici, console.log permet d’afficher dans la console “Hello World”. Cette page web récupère le contenu de la console et l’affiche en HTML.

Pour exécuter le script dans une page web, il suffit d’utiliser la balise suivante dans un document HTML:

<script src="/chemin/vers/le/fichier.js"></script>

Il est également possible d’introduire directement du JavaScript dans la page HTML en contenu de la balise:

<script>
  console.log("Ça marche aussi!");
</script>

C’est plutôt une mauvaise idée de mélanger les langages de programmation et mieux vaut séparer les fichiers contenant du HTML, des fichiers contenants du CSS de ceux qui contiennent du JavaScript.

Typographie de JavaScript

JavaScript est un langage:

Orienté objet
Asynchrone
Faiblement typé (comme Python)
Fonctionnel (comme Python)

Les objets en JavaScript

En JavaScript, tout est un objet: c’est à dire un élément qui peut subir des méthodes. Il ne faut pas confondre fonction et méthode: une méthode est une fonction appliquée à un objet.

La syntaxe d’une méthode: un_objet.une_methode(argument).

Ce n’est pas propre à JavaScript, on retrouve la même chose en Python. Les objets sont simplement nommée class.

Par exemple, console est un objet prédéfinit, et log est une méthode qui affiche une chaîne de caractère.

Cet objet dispose de plusieurs méthodes en plus de log. Elles sont rarement utiles quand on début, mais par exemple la méthode assert.

console.assert(1 == 0); // déclanche une erreur si la condition est Fausse.

Certains objet sont prédéfinis. L’objet window contient pas mal d’information qu’on utilisera plus tard. Le plus important est l’objet document.

Les objets peuvent avoir aussi des attributs en lecture/écriture ou en lecture seule. Ces attributs permettent de modifier le comportement ou le contenu de l’objet ou de récupérer une information particulière.

Par exemple:

window.fullScreen; // retourne si la fenêtre est en pleine écran.

Les objets `HTMLDocument`

Les objets de type HTMLDocument représente du contenu HTML stylisé. Il est possible de les utiliser pour naviguer dans l’arbre du document et le modifier dynamiquement.

Il est possible de faire énormément de chose avec ces objets: changer leur contenu dynamiquement, changer leur style dynamiquement, leur ajouter ou enlever des sous-éléments. Ils sont à la base de beaucoup d’aspect dynamique du web.

L’objet document est toujours présent et représente la racine du document HTML. C’est souvent un point d’entrée pour manipuler la page web, créer de nouveaux éléments, ect ..

On verra en TD comment les manipuler plus en détails.

Les fonctions

Il existe plusieurs syntaxe pour définir des fonctions. Une syntaxe classique:

function MaSuperFonction(x){
  let y = x + x; // le mot clef let indique que "y" est sous la portée de la fonction.
  return y;
}
console.log(MaSuperFonction(42);

En plus de cette façon classique de définir des fonction, il est possible de définir des fonction dites anonymes:

MaSuperFonction2 = function(x){
  let y = x + x;
  return y;
};
console.log(MaSuperFonction2(42));

Enfin, il existe une dernière syntaxe dites de arrow function très similaire aux constructeur lambda en python:

MaSuperFonction3 = (x) => x+x;
console.log(MaSuperFonction3(42));

L’intérêt de ces différentes syntaxes vient qu’on utilise souvent des fonctions de fonctions. Nous verrons ça un peu plus tard.

Programmation asynchrone et évènements

Pour programmer des interfaces efficaces, on parle souvent d’évènements. Il peut s’agir:

de cliques de l’utilisateur sur des boutons, des éléments de la page qui déclenche d’autre actions
d’évènement réseau: envoie/réception d’information du serveur
d’évènement extérieur programmer (un délai avant l’exécution d’une tache.

Par exemple:

<button id="bouton1"> Je suis un bouton, cliquez-moi! </button>
<script>
  let bouton1 = document.getElementById("button1"); // on récupère l'élément JavaScript qui représente le bouton.
  bouton1.onclick = function(){
    this.innerHTML = "Merci :)"; // On change le contenu
    this.active = False; // Et on deséactive le bouton.
  }
</script>

Le mot clef this réfère à l’objet qui appel la méthode, nous reviendrons sur ça plus tard! ### Un exemple

L’élément suivant, est un élément HTML, dont l’id est boite. Vous pouvez vérifier dans le code source de la page!

<div id="boite"> Je suis un div sauvage! </div>

Je suis un div sauvage!

let B = document.querySelector("#boite"); // récupère l'élèment HTML qui représente la boite.
B.innerHTML = "Mon contenu à changer";
B.style.backgroundColor = "light-blue"; // et mon style aussi

Un exemple vu en TD