Le langage utilisé pour écrire ces programmes est JavaScript.
alert("Texte") pour afficher du texte dans une fenêtre pop-upconsole.log("Texte") pour afficher du texte dans la console (dans Firefox, « Web developer ⇒ Web Console », ou Ctrl+Shift+K)prompt("Question") ouvre un pop-up demandant à l'internaute de remplir un champ
de texte, et renvoie le résultat (sous forme de chaîne)confirm("Question") ouvre un pop-up demandant à l'internaute de
confirmer ou d'annuler, et renvoie true ou false en fonction de son choix<script> :
<script>
alert("Salut !");
</script>
<script src="URL du script externe"></script>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
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 HTMLLa solution classique : mettre l'élément script à la fin de la page, juste avant de fermer le body.
defer.
<script defer src="monscript.js"></script>monscript.js ; le fichier est téléchargé en parallèle du parsage et exécuté à la fin.
Plus de détails sur defer (et sur son petit frère async) dans cet article
let :
let toto = 4;
alert(toto);
toto = "bonjour";
alert(toto);let est un ajout relativement récent, vous trouverez de nombreux tutoriels et exemples les variables sont
déclarées avec var. La gestion de la portée des variables est alors différente.var, sauf si vous avez une bonne raison (compatibilité avec de vieux navigateurs).
Interdit dans le cadre de ce cours.
"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)let toto = 5
let titi = 3
alert(toto)
alert(titi)a = b + c
(d + e).print()a = b + c(d + e).print()return
true;
// est interprété comme
return;
true;[ ou (, ou un des opérateurs arithmétiques (+, -, *, /).
true et false"Toto" ou 'Toto' (équivalent)null : destiné à être utilisé pour dire « aucune valeur » (doc MDN)undefined : c'est ce que contiennent les variables n'ayant pas eu de valeur assignéetypeof maVariable permet d'obtenir le type du contenu de maVariable (doc MDN, attention typeof null renvoie "object" pour des raisons historiques…)"Toto a " + 45 + " ans"
(il suffit qu'une seule opérande soit une chaîne pour que tous les + soient
des concaténations)"123" + 4 // "1234" "123" - 4 // 119 "a" + 2 + 1 // "a21", pas "a3" !
== et != sont des opérateurs d'(in)égalité faible !
console.log("1" == 1); // true
console.log("0" == false); // true
console.log("" == false); // true
console.log("" == "0"); // false
=== et !== cond? exprSiVrai: exprSiFaux
for (let i = 0; i < 20; i++) {
console.log("itération numéro " + i);
}
function, pas d'indication du type de retour
function toto(arg1, arg2) {
alert(arg1 + ' ' + arg2);
return arg1;
}
undefined)let sont locales à leur bloc (comme en Java ou en C) :
pas de problème particuliervar :
var toto = "youpi";
console.log(toto); // affiche youpi
if (true) {
var toto = "youpa";
console.log(toto); // affiche youpa
}
console.log(toto); // affiche youpa
Résultat avec var et let
var !
let toto = { nom: "Durand", prenom: "Toto", age: 45 }
alert("Je m'appelle " + toto.prenom +
" et j'ai " + toto["age"] + " ans");
length
let fruits = ['pomme', 'poire', 'abricot']; console.log(fruits[0]); console.log(fruits.length); fruits[100] = 'ananas'; console.log(fruits.length);
fruits.push('banane')
démo
function appelerNFois(n, f) {
for (let i = 0; i < n; i++) {
f();
}
}
setTimeout, qui prend en argument une fonction
et une durée, et exécute la fonction quand la durée est écoulée
function afficherSurprise() {
console.log("Surprise !!!");
}
setTimeout(afficherSurprise, 5000);
Résultat
function comme un opérateur :
toto = function coucou() {
alert("coucou");
};
coucou();
toto(); // même effet que coucou()
titi = function () {
alert("coucou anonyme");
};
titi();
Le deuxième exemple montre que le nom d'une fonction est optionnel dans ce cas.
On parle de fonction anonyme.
setTimeout(function () {
console.log("Surprise !!!");
}, 5000);
Une fonction peut retourner une fonction :
function creerAfficheur(intro) {
return function (texte) {
console.log(intro + " : " + texte);
};
}
let presenter = creerAfficheur("Je vous présente");
presenter("Toto");
presenter("Titi");
let accuser = creerAfficheur("J'Accuse");
accuser("Martine Durand");Ça devient très intéressant si la fonction renvoyée utilise des variables locales à la fonction englobante :
function creerCompteur() {
let i = 0;
return function () {
console.log(i);
i++;
};
}
compteur = creerCompteur();
compteur(); // affiche 0
compteur(); // affiche 1
compteur2 = creerCompteur();
compteur2(); // affiche 0
compteur(); // affiche 2La fonction renvoyée garde une référence vers les variables locales à la fonction englobante. On parle de clôture (closure). Ça peut paraître étrange, mais c'est plus intuitif qu'il n'y paraît.
varLe fait qu'une clôture garde une référence vers les variables peut être piégeant
si on utilise var
var mes_fonctions = [];
for (var i = 0; i < 10; i++) {
mes_fonctions[i] = function () {
console.log("Je suis la fonction numéro " + i + " !");
};
}
var toto = mes_fonctions[8];
toto();toto() ?
TODO: mettre dans une démo
let : s'il est utilisé pour déclarer l'indice dans un for, lui donne un nouveau binding à chaque itération, précisément pour éviter le problème en questionvarlet, les solutions classiques sont :
forEach des tableaux (si ce sont les éléments d'un tableau que l'on parcourt)console.logconsole.log ne se contente pas d'afficher du texte : si on lui passe un objet, il en affichera une représentation interactive dans la console
console.log a été exécuté !
console.log manipule des références vers les objets, pas des copies
JSON.stringify(toto) : tout ne sera pas converti, mais pour débugger ça peut suffire
JSON.parse(JSON.stringify(toto)).
JSON.stringify)
Démo
this, qu'on ne détaillera pas dans ce coursclass).
Pas encore utilisable partout. Un tuto (avec aussi des explications détaillées
sur le fonctionnement des prototypes