Aller au contenu

Le JavaScript

Créé en 1995, JavaScript est un langage inspiré de Java (mais de façon simplifiée) qui permet d'accéder aux objets dans les applications web notamment. Il est utilisé pour vérifier les champs de saisies dans les formulaires, pour faire des animations ou des effets de transitions.

JavaScript s'utilise principalement dans un navigateur (qui intègre un moteur JavaScript).

Le programme

bo_JS

Intégration

Comme pour le CSS, on peut très facilement intégrer du code JS dans du code HTML :

  • À l'aide d'une balise script
  • À l'aide d'une balise script en indiquant qu'on va employer le javascript
  • Ou bien dans un fichier à part (il faut donc le lier à votre fichier HTML dans ce cas):
<script> tapez votre code ici...</script>

<script language = "javascript"> tapez votre code JS ici...</script>

<script type ="text/javascript" src = "chemindufichier.js"> </script>

Comme vu avec le CSS, il ne faut pas mettre ces balises n'importe où :

<html>
  <head>
    <title> Ma page web </title>
<script language="JavaScript"> code </script> </head>
<body>
    <script language = "javascript">
      alert("Hello World 1.\nCliquez sur OK ")
</script>
  </body>
</html>

Ici, j'ai placé deux fois du code JavaScript dans ma page HTML.

  • D'abord entre les balises < title > et < /title >

Ici, le code va se charger avant la page web, ce qui peut occasionner des pages blanches si votre code est très long à charger.

  • Ensuite, dans le < body > de la page HTML

Dans ce cas, le script chargera lorsqu'il apparaîtra. Il s'exécutera alors immédiatement.

Si vous placez votre code dans un fichier, celui-ci sera chargé lorsqu'il apparaîtra dans le code mais s'il contient des fonctions, celles-ci ne s'exécuteront que lorsqu'elles seront appelées.

Résumé :

schema

Utilisation

Le JavaScript est un langage interprété tout comme le HTML & le CSS : dès lors que votre navigateur web va rencontrer une balise "script" il n'essaiera plus de lire mais laissera le moteur JS faire le travail. Une fois la balise fermante atteinte, le navigateur web reprendra la main.

Il est donc possible d'exécuter du code au moment voulu dans une page web : lancer un calcul, demander une action à l'utilisateur...

À votre avis, à quoi sert le code suivant ?

<script>
  a = 5
  b= 6
  document.write(a+b)
</script>

Comme dans de nombreux autres langages de programmation, la fin d'une instruction lance l'instruction suivante.

1ère Activité

Premier programme

  • Créons une page HTML5 nommée index.html. Vous pouvez utiliser une copie de votre précédent site. Ajoutons ensuite une ligne de code qui va demander l'exécution du code JavaScript :
<!doctype html>
<html lang="fr">
<head>

<meta charset = "utf-8"> <title> Programmation JavaScript </title> <script src = "monprogramme.js"></script>

</head>
<body>
</body>
</html>

Nous avons donc ajouté la balise "script", cette balise accepte un attribut "src" qui correspond au chemin du fichier JavaScript (extension .js) qui doit être exécuté. Dans notre exemple, notre fichier "JavaScript" sera dans le même dossier que notre fichier "HTML" et se nommera "monprogramme.js".

Nous allons maintenant créer et enregistrer un fichier "monprogramme.js" dans notepad++ :

document.write("Hello World !");

Enregistrez le fichier et ouvrez le fichier HTML (index.html) avec le navigateur Firefox.

À ce stade, vous devez juste avoir compris que le code document.write vous permet d'afficher la chaîne de caractères contenue entre les guillemets (dans notre exemple : Hello World !). Il est aussi important de noter qu'en JavaScript, une ligne de code doit se terminer par un point virgule.

Pour votre information, il est aussi possible d'inclure le code JavaScript directement dans le code HTML

Les variables en JavaScript

En JavaScript moderne, on utilise deux mots-clés pour déclarer des variables :

Mot-clé Utilisation
const Pour les valeurs qui ne changent pas (constantes)
let Pour les valeurs qui peuvent changer

Note historique : Avant 2015, on utilisait var pour déclarer les variables. Vous le verrez encore dans d'anciens codes, mais préférez toujours let et const.

Déclarer une variable

// Avec const (valeur fixe)
const PI = 3.14159;
const NOM_DU_JEU = "Space Invaders";

// Avec let (valeur modifiable)
let point_de_vie = 15;
let score = 0;

Modifier une variable

let compteur = 0;
compteur = 1;      // OK : let permet la réassignation
compteur = 2;      // OK

const MAX = 100;
MAX = 200;         // ERREUR : const ne permet pas la réassignation

Quelle règle suivre ?

Utilisez const par défaut, et let uniquement si vous savez que la valeur va changer.

const age = 17;              // L'âge ne change pas pendant l'exécution
let nombreDeVies = 3;        // Le nombre de vies va diminuer
  • Voici un premier exemple : modifiez et enregistrez le fichier "monprogramme.js" :
const point_de_vie = 15;
document.write(point_de_vie);
  • Ouvrez le fichier HTML à l'aide du navigateur Firefox et observez le résultat. On peut aussi améliorer le message avec le code suivant :
const point_de_vie = 15;
document.write("point_de_vie a pour valeur ", point_de_vie);

À votre avis, à quoi sert la virgule entre valeur et point_de_vie ?

JavaScript est un langage faiblement typé, il n'est donc pas nécessaire de préciser le type de la variable. Attention, cela ne veut pas dire que votre variable n'a pas de type, juste que le programmeur n'a pas besoin de le préciser.

En JavaScript les types possibles sont : string (chaîne de caractères), boolean, les nombres (number) qui regroupent les entiers (type integer) et les nombres à virgule (type float). Attention pour le type float vous devez utiliser le point à la place de la virgule, par exemple le nombre pi ne s'écrit pas 3,14 mais 3.14.

  • La fonction typeof() renvoie le type de la variable qui a été passé en argument (dans les parenthèses) :
const a = 4;
document.write("a a pour valeur ", a, ". Elle est de type ", typeof(a), "<br>");

const b = "Hello";
document.write("b a pour valeur ", b, ". Elle est de type ", typeof(b), "<br>");

const c = true;
document.write("c a pour valeur ", c, ". Elle est de type ", typeof(c), "<br>");

let d;
document.write("d a pour valeur ", d, ". Elle est de type ", typeof(d), "<br>");

Note : On utilise let d; car une variable déclarée sans valeur initiale ne peut pas être const.

Vous avez dû noter que pour une variable de type string, la valeur est entre guillemets.

  • Ouvrez le fichier HTML à l'aide du navigateur Firefox et observez le résultat.

Deux choses à bien noter dans cet exemple :

  • ➢ Vous avez sans doute reconnu la balise
    ("retour à ligne") du HTML.

  • document.write vous permet d'écrire du code HTML, il est donc logique d'utiliser la balise
    pour effectuer un retour à la ligne (toute autre balise est aussi utilisable, essayez avec une balise par exemple).

  • Enlevez les
    du code pour vous convaincre de leur utilité. Enfin, attention, tout comme le texte, les balises HTML doivent être entre guillemets. La variable et la fonction typeof ne sont pas entre guillemets.

  • ➢ Une variable quand elle a été déclarée, mais qu'aucune valeur ne lui a été attribué, a pour valeur undefined et est de type undefined.

  • Que se passe-t-il quand on utilise une variable qui n'a même pas été déclarée ?

const a = 4;
document.write("a a pour valeur ", a);
document.write("b a pour valeur ", b);
const c = "Hello";
document.write("c a pour valeur ", c);
  • 1ère ligne : nous déclarons la constante a avec la valeur numérique 4.
  • 2ème ligne : nous utilisons la variable a
  • 3ème ligne : nous utilisons une variable b qui n'a pas été déclarée !
  • 4ème ligne : nous déclarons la constante c avec la valeur chaîne "Hello".

  • 5ème ligne : nous utilisons c.

  • Ouvrez le fichier HTML à l'aide du navigateur Firefox et observez le résultat. Le programme s'est arrêté à la 3ème ligne. Utiliser une variable non déclarée est une erreur qui provoque l'arrêt du programme. Problème, rien ne nous signale cette erreur dans le navigateur (c'est assez logique, à la base un navigateur n'est pas un outil de développement !).

Les boites de dialogue

  • Pour debugger des programmes il suffit souvent de placer des alertes à différents endroits du code.
alert("Une alerte simple");

const myText = "Une alerte avec le message dans une variable";
alert(myText);

const myNumber = 13;
alert("La variable contient la valeur " + myNumber);
  • Ouvrez le fichier HTML à l'aide du navigateur Firefox et observez le résultat. Notez qu'ici pour la dernière ligne de code l'opérateur + est un opérateur de concaténation. En effet ajouter

deux chaînes de caractères revient à les coller à la suite l'une de l'autre : c'est une concaténation. Nous allons maintenant étudier la méthode qui permet à l'utilisateur de rentrer des valeurs au clavier : la

méthode prompt(). Nous allons utiliser une structure de la forme : const maVariable = prompt(message);

L'utilisateur va alors saisir (au clavier) du texte dans la zone de saisie. La validation avec le bouton OK permettra d'attribuer le texte entré par l'utilisateur à la variable maVariable. Au cas où l'utilisateur ne rentrerait rien ou qu'il appuierait sur Annuler on aura alors maVariable = null (pas de valeur).

  • Voici un exemple :
const prenom = prompt("Quel est votre prénom ?");
document.write("Bonjour ", prenom, ", vous allez bien ?");

Ouvrez le fichier HTML à l'aide du navigateur Firefox et observez le résultat.

Testez ce qui se passe si l'utilisateur n'entre rien (ou appuie sur le bouton Annuler).

Pour éviter ce genre de chose, nous verrons un peu plus loin l'utilisation du couple if/else (les conditions)

  • Un autre exemple : une machine à additionner
document.write("Nous allons additionner 2 nombres, a et b <br>");
const a = prompt("Entrer a ");
const b = prompt("Entrer b ");
const resultat = a + b;
document.write("Résultat ", a, " + ", b, " = ", resultat);

  • Ouvrez le fichier HTML à l'aide du navigateur Firefox et observez le résultat.

  • Pour essayer de comprendre ce qui se passe, faites un typeof() sur les variables a et b.

Les variables a et b sont toutes deux de type string. Or, nous avons vu que si nous avons affaire à des chaînes de caractères le signe + est le signe de concaténation (mise bout à bout de 2 chaînes de caractère). Si nous mettons bout à bout 5 et 15, nous obtenons bien 515.

Pour que notre programme fonctionne, il faut "transformer" notre chaîne (variable de type string) en nombre (variable de type integer). Nous allons faire du transtypage (convertir un type en un autre).

  • Pour ce faire, utilisons la méthode parseInt() :
document.write("Nous allons additionner 2 nombres, a et b <br>");
const as = prompt("Entrer a ");
const bs = prompt("Entrer b ");
const a = parseInt(as);
const b = parseInt(bs);
const resultat = a + b;
document.write("Résultat ", a, " + ", b, " = ", resultat);
  • Ouvrez le fichier HTML à l'aide du navigateur Firefox et observez le résultat.

as et bs sont de type string, a et b sont maintenant des nombres, le résultat est maintenant correct.

Les opérateurs

Opérateurs arithmétiques

Opérateur Description Exemple
+ Addition 5 + 3 donne 8
- Soustraction 5 - 3 donne 2
* Multiplication 5 * 3 donne 15
/ Division 10 / 3 donne 3.333...
% Modulo (reste) 10 % 3 donne 1
** Puissance 2 ** 3 donne 8

Opérateurs de comparaison

Opérateur Description Exemple
== Égalité (valeur) 5 == "5" donne true
=== Égalité stricte (valeur ET type) 5 === "5" donne false
!= Différent (valeur) 5 != 3 donne true
!== Différent strict 5 !== "5" donne true
< Inférieur 3 < 5 donne true
> Supérieur 3 > 5 donne false
<= Inférieur ou égal 5 <= 5 donne true
>= Supérieur ou égal 3 >= 5 donne false

Important : Préférez === à == pour éviter les conversions de type implicites.

Opérateurs logiques

Opérateur Description Exemple
&& ET logique true && false donne false
\|\| OU logique true \|\| false donne true
! NON logique !true donne false

Les conditions

Les conditions permettent d'exécuter du code uniquement si une certaine condition est vraie.

Structure if / else

const age = 18;

if (age >= 18) {
    document.write("Vous êtes majeur");
} else {
    document.write("Vous êtes mineur");
}

Structure if / else if / else

const note = 15;

if (note >= 16) {
    document.write("Très bien !");
} else if (note >= 14) {
    document.write("Bien !");
} else if (note >= 10) {
    document.write("Passable");
} else {
    document.write("Insuffisant");
}

Exemple avec prompt

Reprenons l'exemple du prompt pour gérer le cas où l'utilisateur annule :

const prenom = prompt("Quel est votre prénom ?");

if (prenom === null || prenom === "") {
    document.write("Vous n'avez pas entré de prénom !");
} else {
    document.write("Bonjour ", prenom, " !");
}

Conditions imbriquées

const age = parseInt(prompt("Quel est votre âge ?"));
const permis = prompt("Avez-vous le permis ? (oui/non)");

if (age >= 18) {
    if (permis === "oui") {
        document.write("Vous pouvez conduire");
    } else {
        document.write("Passez d'abord le permis !");
    }
} else {
    document.write("Vous êtes trop jeune pour conduire");
}

L'opérateur ternaire

Pour des conditions simples, on peut utiliser l'opérateur ternaire :

const age = 20;
const statut = (age >= 18) ? "majeur" : "mineur";
document.write("Vous êtes ", statut);

Syntaxe : condition ? valeurSiVrai : valeurSiFaux

Les boucles

Les boucles permettent de répéter des instructions plusieurs fois.

La boucle while

La boucle while répète tant que la condition est vraie :

let compteur = 1;

while (compteur <= 5) {
    document.write("Tour numéro ", compteur, "<br>");
    compteur = compteur + 1;
}

Note : On utilise let car compteur est modifié à chaque tour de boucle.

Résultat : 

Tour numéro 1
Tour numéro 2
Tour numéro 3
Tour numéro 4
Tour numéro 5

Attention : N'oubliez pas d'incrémenter le compteur, sinon la boucle sera infinie !

La boucle for

La boucle for est plus compacte quand on connaît le nombre d'itérations :

for (let i = 1; i <= 5; i++) {
    document.write("Tour numéro ", i, "<br>");
}

Structure : for (initialisation; condition; incrémentation)

  • Initialisation : let i = 1 (exécutée une seule fois au début)
  • Condition : i <= 5 (vérifiée avant chaque tour)
  • Incrémentation : i++ (exécutée après chaque tour)

Note : i++ est équivalent à i = i + 1

Exemple : table de multiplication

const nombre = parseInt(prompt("Quelle table voulez-vous ?"));

document.write("<h2>Table de ", nombre, "</h2>");

for (let i = 1; i <= 10; i++) {
    const resultat = nombre * i;
    document.write(nombre, " x ", i, " = ", resultat, "<br>");
}

Exemple : somme des nombres

const n = parseInt(prompt("Jusqu'à quel nombre ?"));
let somme = 0;

for (let i = 1; i <= n; i++) {
    somme = somme + i;
}

document.write("La somme des nombres de 1 à ", n, " est ", somme);

Les mots-clés break et continue

// break : sort de la boucle
for (let i = 1; i <= 10; i++) {
    if (i === 5) {
        break;  // Arrête la boucle quand i vaut 5
    }
    document.write(i, "<br>");
}
// Affiche : 1, 2, 3, 4

// continue : passe au tour suivant
for (let i = 1; i <= 5; i++) {
    if (i === 3) {
        continue;  // Saute le tour quand i vaut 3
    }
    document.write(i, "<br>");
}
// Affiche : 1, 2, 4, 5

Les fonctions

Une fonction est un bloc de code réutilisable qui effectue une tâche spécifique.

Déclarer une fonction

function direBonjour() {
    document.write("Bonjour !<br>");
}

Appeler une fonction

direBonjour();  // Affiche : Bonjour !
direBonjour();  // Affiche : Bonjour !

Fonction avec paramètres

function direBonjour(prenom) {
    document.write("Bonjour ", prenom, " !<br>");
}

direBonjour("Alice");   // Affiche : Bonjour Alice !
direBonjour("Bob");     // Affiche : Bonjour Bob !

Fonction avec plusieurs paramètres

function addition(a, b) {
    const resultat = a + b;
    document.write(a, " + ", b, " = ", resultat, "<br>");
}

addition(5, 3);     // Affiche : 5 + 3 = 8
addition(10, 20);   // Affiche : 10 + 20 = 30

Fonction avec retour (return)

Une fonction peut retourner une valeur :

function carre(nombre) {
    return nombre * nombre;
}

const resultat = carre(5);
document.write("Le carré de 5 est ", resultat);  // Affiche : 25

Exemple : fonction estMajeur

function estMajeur(age) {
    if (age >= 18) {
        return true;
    } else {
        return false;
    }
}

const monAge = 20;
if (estMajeur(monAge)) {
    document.write("Vous êtes majeur");
}

Exemple : fonction maximum

function maximum(a, b) {
    if (a > b) {
        return a;
    } else {
        return b;
    }
}

document.write("Le max de 5 et 8 est ", maximum(5, 8));  // Affiche : 8

Portée des variables

Les variables déclarées dans une fonction sont locales :

function test() {
    const variableLocale = "Je suis locale";
    document.write(variableLocale);
}

test();  // Affiche : Je suis locale
// document.write(variableLocale);  // ERREUR : variable non définie

Avantage de let/const : Contrairement à var, les variables déclarées avec let et const ont une portée de bloc (entre {}), ce qui évite beaucoup de bugs.

Les tableaux (Arrays)

Un tableau permet de stocker plusieurs valeurs dans une seule variable.

Créer un tableau

const fruits = ["Pomme", "Banane", "Orange"];
const nombres = [1, 2, 3, 4, 5];
const vide = [];

Note : On utilise const car la référence au tableau ne change pas, même si on modifie son contenu.

Accéder aux éléments

Les indices commencent à 0 :

const fruits = ["Pomme", "Banane", "Orange"];

document.write(fruits[0]);  // Affiche : Pomme
document.write(fruits[1]);  // Affiche : Banane
document.write(fruits[2]);  // Affiche : Orange

Modifier un élément

const fruits = ["Pomme", "Banane", "Orange"];
fruits[1] = "Fraise";  // OK même avec const !
// fruits vaut maintenant ["Pomme", "Fraise", "Orange"]

Important : Avec const, on ne peut pas réassigner le tableau (fruits = autreTableau), mais on peut modifier son contenu.

Longueur d'un tableau

const fruits = ["Pomme", "Banane", "Orange"];
document.write(fruits.length);  // Affiche : 3

Parcourir un tableau

const fruits = ["Pomme", "Banane", "Orange"];

for (let i = 0; i < fruits.length; i++) {
    document.write(fruits[i], "<br>");
}

Méthodes utiles

const fruits = ["Pomme", "Banane"];

// Ajouter à la fin
fruits.push("Orange");
// fruits = ["Pomme", "Banane", "Orange"]

// Retirer le dernier
const dernier = fruits.pop();
// dernier = "Orange", fruits = ["Pomme", "Banane"]

// Ajouter au début
fruits.unshift("Fraise");
// fruits = ["Fraise", "Pomme", "Banane"]

// Retirer le premier
const premier = fruits.shift();
// premier = "Fraise", fruits = ["Pomme", "Banane"]

// Trouver l'index d'un élément
const index = fruits.indexOf("Banane");  // index = 1

Exemple : calculer la moyenne

const notes = [12, 15, 8, 14, 16];
let somme = 0;

for (let i = 0; i < notes.length; i++) {
    somme = somme + notes[i];
}

const moyenne = somme / notes.length;
document.write("Moyenne : ", moyenne);  // Affiche : 13

Exercices

Exercice 1 : Pair ou impair

Demandez un nombre à l'utilisateur et affichez si ce nombre est pair ou impair.

Indice : Un nombre est pair si le reste de sa division par 2 est égal à 0.

Exercice 2 : Calculatrice simple

Créez une calculatrice qui : 1. Demande deux nombres à l'utilisateur 2. Demande l'opération souhaitée (+, -, *, /) 3. Affiche le résultat

Exercice 3 : FizzBuzz

Affichez les nombres de 1 à 100, mais : - Pour les multiples de 3, affichez "Fizz" - Pour les multiples de 5, affichez "Buzz" - Pour les multiples de 3 ET 5, affichez "FizzBuzz"

Voir la correction

Ressources

Auteur : Florian Mathieu

Licence CC BY NC

Licence Creative Commons
Ce cours est mis à disposition selon les termes de la Licence Creative Commons Attribution - Pas d'Utilisation Commerciale - Partage dans les Mêmes Conditions 4.0 International.