JavaScript v 1.

Ce document comporte de larges extraits de la documentation MDN (pour Mozilla Developer

Network), qui est-elle même disponible en licence Creative Commons Attribution-ShareAlike
2.5. C’est pourquoi ce document est disponible selon les mêmes termes de licence.

JavaScript a été créé en 1995 par un ingénieur de Netscape. Il était au départ censé s'appeler LiveScript,
mais a été renommé par une décision marketing néfaste dans le but de capitaliser sur la popularité du
langage Java de Sun Microsystems, malgré le fait qu'ils n'aient que très peu en commun. Cela n'a jamais
cessé d'être une source de confusion par la suite1.
JavaScript est un langage de script, multi-plateforme et orienté objet. Le type de données des variables
n'est pas déclaré (typage dynamique). En plus des fonctionnalités standards, propres à n’importe quel
langage, javascript permet de contrôler le Document Object Model (DOM) du navigateur.
JavaScript est standardisé par Ecma International – une association européenne de standardisation des
systèmes d'information et de communication (ECMA étant historiquement un acronyme pour European
Computer Manufacturers Association) qui délivre un langage de programmation standardisé, international
appelé ECMAScript2.

1. Démarrer avec JavaScript

Pour commencer à développer en JavaScript, il suffit d'avoir un navigateur web. Nous allons utiliser le
navigateur Firefox qui propose aux développeurs des fonctionnalités intéressantes (le navigateur est
d’ailleurs également disponible dans une version3 spéciale pour développeurs).
Nous allons revenir sur l’application CEDjs, c’est-à-dire notre calculette éco-déplacement, en repartant
d’une version déjà abordée dans notre progression Web. Le site de démonstration, toujours hébergé sur les
pages de Framagit, va nous permettre de comprendre les bases du langage JavaScript.

1.1. Observations
Travail à faire
1..1 Ouvrir le site de démonstration avec votre navigateur Web Firefox, puis lancer la
console Web à partir du menu et des « outils de développement » ou encore avec la
combinaison de touches du clavier : Ctrl + Maj + K
On vous informe que vous disposez d’un éditeur multi-lignes
(voir la figure ci-contre). Après avoir lu ce message
d’informations, vous sélectionnerez le lien « J’ai compris »
pour disposer de plus d’espace dans l’éditeur.
La page présente les coûts annuels pour un déplacement de 10 km en train. Nous allons afficher les
informations pour un déplacement de 10 km en voiture. Nous saisissons donc le code suivant dans
l’éditeur de la console de Firefox :
document.write("<p>Pour un déplacement en voiture sur la même distance</p>");
document.write("<p>Les coûts seront les suivants :</p>");

Pour nous exécutons ce code à l’aide de la combinaison de touches du clavier « Ctrl + Entrée ».

Note : comme document.write écrit dans le flux de documents, appeler document.write sur
un document fermé (chargé) appelle automatiquement document.open, ce qui efface le

1 Extraits de la réintroduction à JavaScript

2 Extrait de l’introduction au guide
3 Consulter en ligne, les différentes versions disponibles

BTS SIO – Cité Scolaire Albert Londres CC by nc-sa – MDN, moulinux Page 1 / 9
 JavaScript v 1.1

document4.

Nous rechargeons ensuite la page initiale à l’aide de la touche « F5 ».

1.2. Console
Nous reviendrons un peu plus tard sur l’objet Document, nous allons maintenant découvrir l’objet
Console, qui donne accès à la console de débogage du navigateur. La méthode log() de l'objet Console
affiche un message dans la console Web. Le message peut être une simple chaîne (avec des valeurs
optionnelles de substitution), ou peut être un ou plusieurs objets JavaScript.
Nous commençons par re-saisir un code équivalent à ce que nous venons de faire :
console.log("<p>Pour un déplacement en voiture sur la même distance</p>");
console.log("<p>Les coûts seront les suivants :</p>");

Comme notre page a déjà défini certaines variables, nous allons les réutiliser ici :
console.log(ENTETE_1);
console.log(ENTETE_2);
console.log(domicile);

En JavaScript, tout comme en Python, nous respecterons les mêmes standards de développement : les
étiquettes de nos constantes sont définies en majuscules.
Observons maintenant le code source
de notre page. La combinaison de
touches du clavier « Ctrl + U » permet
d’obtenir ce résultat dans Firefox. Nous
retrouvons bien sûr un code identique
sur la forge logicielle du projet (voir la
figure ci-contre).

Note : Nous pouvons introduire du code JavaScript dans une page HTML à l’aide de la balise
script et de son attribut type associé à la valeur "text/javascript".

La déclaration const permet de créer une constante nommée accessible uniquement en lecture 5.
L'instruction let permet de déclarer une variable dont la portée est celle du bloc courant, éventuellement
en initialisant sa valeur6. Elle est à privilégier sur l’instruction var, qui permet également de déclarer une
variable mais dont la portée est beaucoup plus vaste.
Les coûts pour les déplacements en voiture n’ont pas été définies dans notre page. Nous allons nous
appuyer sur les mêmes valeurs que celles que nous avons utilisé pour l’application CEDy, dans laquelle
nous avions défini le tuple suivant :
(129.62, 50.65)

Travail à faire
1..2 Écrivez dans la console du navigateur l’instruction permettant de déclarer une
constante VOITURE représentant un tableau de coût, puis affichez dans la console la
valeur de premier élément.

Note : Si vous ré-exécutez plusieurs fois un code déclarant une constante, il pourra vous être

4 Extrait de la documentation de la fonction write

5 Documentation de l’instruction const
6 Documentation de l’instruction let

BTS SIO – Cité Scolaire Albert Londres CC by nc-sa – MDN, moulinux Page 2 / 9
 JavaScript v 1.1

utile d’utiliser des commentaires.

Nous allons maintenant automatiser le traitement à l’aide d’une boucle afin d’afficher les coûts annuels
pour un déplacement en voiture de 10 km.
for (i in VOITURE) {
console.log(VOITURE[i]*km);
}

Note : Le code de la page utilise en fait la fonction Math.round afin de s’assurer d’une précision
à deux décimales.

Il n’existe pas d’option définie pour la méthode log permettant de paramétrer la fin de ligne. Une astuce
consiste à concaténer les valeurs dans une chaîne de caractères7 :
var array = ["1", "2", "3"];
var string = "";
array.forEach(function(element){
string += element;
});
console.log(string); //123

Travail à faire
1..3 Sachant que par ailleurs, vous pouvez afficher une tabulation à l’aide de la chaîne de
caractères "\t", affichez, sous forme tabulaire, en console les coûts de déplacement an-
nuels pour une distance domicile – travail de 10 km, précédés par les en-têtes.

Note : L’opérateur de concaténation en JavaScript est le +.

1.3. Les fonctions

Une fonction est une portion de code qui peut être appelée par d'autres codes ou par elle-même ou par
une variable qui se réfère à la fonction. Lorsqu'une fonction est appelée, des arguments lui sont
généralement donnés en entrée. La fonction peut également retourner une valeur de sortie. En JavaScript,
une fonction est aussi un objet8.
Nous allons définir une fonction arrToStr permettant de concaténer tous les éléments d’un tableau dans
une chaîne de caractères, chaque élément pouvant être précédé d’un séparateur :
function arrToStr(sep, lesCouts, op) {
let chaine = "";
for (i in lesCouts) {
if (op > 1) {
chaine += sep + lesCouts[i]*op;
} else {
chaine += sep + lesCouts[i];
}
}
return chaine
}

Voici, ci-dessous, deux exemples d’appel, en console, de cette même fonction :

console.log(arrToStr("\t", ENTETE_COUT, 1));
console.log(arrToStr("\t", VOITURE, km));

Nous constatons que le fonctionnement est analogue à ce que nous avions déjà observé en Python. Un
7 Extrait d’une réponse de Michael Lumley sur le forum StackOverflow
8 Extrait de la documentation sur les fonctions

BTS SIO – Cité Scolaire Albert Londres CC by nc-sa – MDN, moulinux Page 3 / 9
 JavaScript v 1.1

mot-clé (en JavaScript function) permet de nommer le nom de la fonction et de définir les différents
paramètres.
Le test conditionnel sur le paramètre op permet de déterminer si l’on doit exécuter une multiplication sur
chaque élément du tableau (sachant que l’opération de multiplication ne peut ici s’effectuer que sur des
nombres).

Travail à faire
1..4 Reproduisez l’affichage en console pour un déplacement de voiture de 10 km à l’aide de
la fonction arrToStr.

1.4. Entrées / Sorties

Nous poursuivons sur une nouvelle itération de l’application CEDjs, en étudiant maintenant une version
proposant notamment une saisie de la part de l’utilisateur. Le site de démonstration, toujours hébergé sur
les pages de Framagit, va nous permettre d’aller plus loin sur cette notion.
Nous avions déjà pu remarquer dans l’itération précédente qu’une fenêtre d’alerte permettait d’afficher
une boîte de dialogue contenant un texte spécifié :
alert("La distance définie est de 10 km");

La présente itération met en œuvre une fenêtre de saisie :

nbr = prompt(DISTANCE);
console.log("le nombre saisi est : ", nbr);

Cette itération de l’application CEDjs définit

également la fonction calculeCoutKm (voir la figure
ci-contre).
Voici ci-dessous deux exemples d’appel de cette
fonction :
lesCoutsTrain = calculeCoutKm(TRAIN, km);
lesCoutsVoiture = calculeCoutKm(VOITURE,
km);

1.5. Tester
Nous poursuivons encore sur une nouvelle itération de l’application CEDjs, en étudiant maintenant une
version proposant notamment une instruction conditionnelle. Le site de démonstration, toujours hébergé
sur les pages de Framagit, va nous permettre d’aller plus loin sur cette notion.
Dans cette itération les constantes sont
définies dans des tableaux associatifs
(voir la figure ci-contre).
Des accolades sont ici utilisées pour
définir les tableaux associatifs (les
crochets sont utilisés pour un tableau
simple).
Nous avons en fait implicitement créé
une variable de type Object.
Pour accéder aux valeurs associées aux
différentes clés du tableau, on utilise
également l’opérateur crochet :
console.log(DICO_FR['enTete1']);

BTS SIO – Cité Scolaire Albert Londres CC by nc-sa – MDN, moulinux Page 4 / 9
 JavaScript v 1.1

Une fois, le choix du mode de transport récupéré :

choix = prompt(DICO_FR['deplacement']);

Nous utilisions l’instruction conditionnelle switch pour calculer les coûts avec les données du bon
tableau :
switch (choix) {
case '1':
lesCoutsKm = calculeCoutKm(DICO_COUT['train'], km);
break;
case '2':
lesCoutsKm = calculeCoutKm(DICO_COUT['velo'], km);
break;
case '3':
lesCoutsKm = calculeCoutKm(DICO_COUT['voiture'], km);
break;
}

Il ne nous reste plus qu’à afficher en console, le tableau calculé :

console.log(lesCoutsKm);

1.6. Optimiser
Nous poursuivons encore sur une nouvelle itération de l’application CEDjs, en étudiant maintenant une
version intégrant une déclaration externalisée du code JavaScript. Le site de démonstration, toujours
hébergé sur les pages de Framagit, va nous permettre d’aller plus loin sur cette notion.
Le code JavaScript est désormais déclaré dans le fichier ced.js.
L’attribut src de la balise script permet d’insérer des scripts
autrement qu'en les insérant à même le document (voir la figure ci-dessus, extrait du fichier index.html).

1.7. Comparer
Nous poursuivons encore sur une nouvelle itération de l’application CEDjs, en étudiant maintenant une
version finalisant notre démarche de comparaison de coût liés à différentes modes de transport. Le site de
démonstration, toujours hébergé sur les pages de Framagit, va nous permettre d’aller plus loin sur cette
notion.
Cette itération intègre désormais une gestion de
validation des valeurs saisies par l’utilisateur. Le script
ced.js intègre maintenant la définition de la fonction
choixEntier qui va lever des exceptions si les valeurs
saisies ne correspondent pas à ce qui est attendu.
La fonction isNaN() permet de déterminer si une valeur
n’est pas un nombre (not a number).
La fonction choixDeplacement reproduit le
comportement que vous avions étudié dans la version
Python (application CEDy), à savoir qu’elle renvoie les
coûts calculés et gère les choix des utilisateurs via la
référence d’un tableau fourni en argument lors de
l’appel de la fonction.

BTS SIO – Cité Scolaire Albert Londres CC by nc-sa – MDN, moulinux Page 5 / 9
 JavaScript v 1.1

Un script contenu dans la page index.html

appelle également la fonction abs, qui
retourne la valeur absolue d'un nombre. En
effet, tout comme pour la version Python,
nous déterminons si la différence de coût
entre les deux modes de transports est positive
ou négative et nous adaptons les libellés
affichés en conséquence.

2. Manipuler le DOM
La version finale de l’application calculette éco-déplacements en JavaScript intègre les feuilles de styles
que nous avions déjà observé dans notre progression. Le site de démonstration, toujours hébergé sur les
pages de Framagit, va nous permettre d’aller plus loin sur la manipulation du DOM (Document Object
Model).

2.1. Observations

Nous avons déjà évoqué précédemment l'interface Document, qui représente n'importe quelle page Web
chargée dans le navigateur et qui sert ainsi de point d'entrée dans le contenu de la page Web, à savoir donc
l'arborescence DOM9.
La méthode getElementById() de Document renvoie un objet Element représentant l'élément dont la
propriété id correspond à la chaîne de caractères spécifiée. Étant donné que les ID d'élément doivent être
uniques, s'ils sont spécifiés, ils constituent un moyen utile d'accéder rapidement à un élément spécifique 10.
Nous ouvrons donc la console Web du navigateur et y saisissons le code suivant :
document.getElementById("distance").value = 25;
afficheCout();

Voilà ! Nous venons de modifier le contenu de notre page Web.

9 Extrait de la documentation de l’interface Document
10 Extrait de la documentation de la méthode getElementById()

BTS SIO – Cité Scolaire Albert Londres CC by nc-sa – MDN, moulinux Page 6 / 9
 JavaScript v 1.1

C’est exactement le comportement de notre page Web, dès que la valeur du contrôle de distance ou des
modes de déplacement change, on appelle la fonction afficheCout (voir les extrait ci-dessous).

afficheCout est définie

dans le fichier ced.js
(voir l’extrait ci-contre).
Elle met en œuvre
différents appels de
getElementById afin
de modifier le contenu
des différents éléments,
après avoir retrouvé les
différentes valeurs
saisies par l’utilisateur.
La propriété
innerHTML de Element
permet de récupérer ou
de définir la syntaxe
HTML de l'élément.

Travail à faire
2..5 Modifiez le premier mode de transport depuis la console Web.

2.2. Débogage
Parmi les outils de développement se trouve un outil de débogage
(accessible via l’onglet « Débogueur »). Dans le fil d’exécution principal,
nous sélectionnons le fichier ced.js (voir la figure ci-contre).
Nous naviguons dans le code du fichier. Dans la fonction afficheCout,
nous positionnons un point d’arrêt à la ligne 94 en cliquant sur le numéro
« 94 » (voir la figure ci-dessous).
Nous saisissons maintenant par exemple, une nouvelle
distance domicile-travail.
L’exécution du script est bloquée au point d’arrêt.
Un menu vous permet
d’interagir sur le débogage
(voir la figure ci-contre – à
droite).
En positionnant le curseur de la souris sur la variable km, vous pouvez accéder
à la valeur que vous venez de saisir. Cette donnée est également accessible dans
la zone des « Portées » (voir la figure ci-contre).
Nous allons exécuter la ligne suivante de notre code en appuyant sur la touche
« F11 » du clavier ou en utilisant le contrôle graphique dédié. Nous pouvons
alors accéder à la valeur du premier mode de transport sélectionné (variable
modeDep1) et ainsi de suite en enchaînant l’exécution des lignes.

BTS SIO – Cité Scolaire Albert Londres CC by nc-sa – MDN, moulinux Page 7 / 9
 JavaScript v 1.1

Une fois que nous avons analysé ce que nous cherchions, nous pouvons reprendre l’exécution normale du
programme en appuyant sur la touche « F8 » du clavier ou en utilisant le contrôle graphique dédié.

Remarque : Si vous rafraîchissez la page, le point d’arrêt est toujours présent. Vous pouvez
par contre l’enlever en sélectionnant de nouveau le numéro de la ligne 94…

2.3. Application
Nous allons appliquer nos nouvelles connaissances à cas de gestion assez classique qui est de valider un
formulaire de contact avant de la soumettre à un traitement sur un serveur.
Vous devrez dans un premier temps réaliser un formulaire en HTML :

Si ce formulaire est soumis alors que les trois champs n’ont pas été saisis, une fenêtre d’alerte apparaîtra :

Une fois la fenêtre d’alerte refermée, les

champs non saisis seront entourés en rouge
(voir la figure ci-contre).
Si tous les champs ont bien été saisis, une
requête sera envoyée au serveur dans un
nouvel onglet du navigateur (vous pourrez
utiliser pour cela l’attribut target de la balise
form).
Un message confirmant que le message a bien
été envoyé sera affiché en dessous du
formulaire dans l’onglet courant du navigateur
(voir la figure ci-dessous).

BTS SIO – Cité Scolaire Albert Londres CC by nc-sa – MDN, moulinux Page 8 / 9
 JavaScript v 1.1

Vous pourrez notamment vous appuyer sur

l’attribut d’évènement onclick, qui vous
permettra d’associer la sélection d’un
contrôle graphique à l’appel d’une fonction
JavaScript. Ainsi, le formulaire ne sera pas
soumis directement lorsque l’utilisateur
cliquera sur le bouton, mais uniquement
quand la fonction JavaScript appellera la
méthode submit, une fois la saisie validée.
Tous les libellés à afficher en français seront
définis dans un objet JavaScript et affichés
dans le code HTML à l’aide d’un script.

Travail à faire
2..6 Réalisez le formulaire présenté
ci-dessous et les contrôles de
validité dans un fichier externe
en JavaScript.
2..7 Réalisez le script CGI qui trai-
tera le formulaire. Vous vous
appuierez pour cela sur les connaissances acquises lors du TP CGI ; et notamment des
scripts traite_form dans les projets cgi et ced (authentification Framagit nécessaire).

BTS SIO – Cité Scolaire Albert Londres CC by nc-sa – MDN, moulinux Page 9 / 9