JAVASCRIPT

VERSION « MODERNE »
Bases du langage

SOMMAIRE

Sommaire ..........................................................................................................................................1
JS - 1 : INTRODUCTION ET tour complet............................................................................................2
JS - 2 : Bases du code ...................................................................................................................... 19
Types et opérations de base.........................................................................................................................
Variable........................................................................................................................................................
Affichage - Saisie ..........................................................................................................................................
Tests.............................................................................................................................................................
Boucles.........................................................................................................................................................
Fonctions......................................................................................................................................................
JS - 3 : Tableaux et objets - JSON .....................................................................................................35
Installation des fichiers de tests ...................................................................................................................
Bases du code – 2 – tableaux et objets (ou structures).................................................................................

1
 INTRODUCTION ET TOUR COMPLET

JavaScript – Introduction

1 - Intro

Qu’est-ce que c’est ?

Le JavaScript (JS) est un langage de script (comme le HTML ou le PHP).
Le code JS qui s’ajoute à la page HTML dans une balise <script>.
Il est interprété par le navigateur. Il permet de rendre plus dynamique et interactive la page
HTML, sans passer par le serveur.
Il peut aussi communiquer avec le serveur en utilisant les technologies AJAX.
C’est un langage objet non typé, comme le python !
Rien à voir avec Java !

Historique
Wiki : [Link]
Inventé en 1995 par Brendan Eich pour Netscape premier navigateur Web populaire (l'ancêtre de
Firefox).
Aujourd’hui, tous les navigateurs comprennent le JavaScript aujourd’hui.
Standardisé par l'ECMA International sous le nom d'ECMAScript.
ECMAScript 5, version standardisée sortie en 2009.
ECMAScript 6 : dernière version standardisée, sortie en 2015.

Depuis 2016, les versions sont nommées par année (ECMAScript 2016, 2017, 2018, 2019, 2020)

Désactiver JavaScript
On peut sur chaque navigateur, désactiver JS. Le JavaScript ne se substitue donc pas aux vérifications qu’il
faut faire côté serveur.
Beaucoup de sites ne pourront pas fonctionner sans JS.

Bonnes pratiques
JS a évolué depuis sa création. Les premiers usages peuvent être aujourd’hui considéré comme
obsolètes et relevant de mauvaises pratiques.
Donc il faut faire attention à ne pas copier-coller n’importe quel exemple récupéré sur le web !

2
JS moderne : ES6/2015 - Standard ECMAScript
• ES6 = ES2015 = ES6/2015 : une révolution pour JavaScript.
• ES6/2015 : « sucre syntaxique » pour les Classes. JavaScript n’a pas de classes. La
fonctionnalité des classes est reprise par les prototypes d'objet et le « sucre syntaxique pour les
Classes » apparu avec ES6.
• Pour les prototypes, voir la fin de ce document.
• Les grands framework JS s’appuient sur ES6 (React, Angular, …)

Côté serveur : [Link]

Apparition en 2009 de la plate-forme [Link], qui permet d'écrire en JavaScript des applications Web
très rapides.
L’environnement [Link] exécute du JavaScript côté serveur pour générer du HTML dans lequel du
JavaScript pourra toujours être exécuté côté client.
[Link]
ca-sert

Développement front – Jquery – React – [Link]

Le JavaScript sert à améliorer le visuel de la page web. C’est un complément au CSS. Il participe à la
spécialisation du travail entre Frontend et Backend.

Des bibliothèques existent pour faciliter le travail et découpler les usages (la logique métier) de la
technique (le DOM).

Jquery : la plus bibliothèque la plus populaire jusque vers 2015. Lancée en 2006. Pour dynamiser les
pages web => devenue obsolète en 2019 !
Mais ça reste utilisé par Bootstrap
[Link]

React et [Link] sont des bibliothèques [Link] pour du développement front.

 React : facebook – 2013 : le plus utilisé

[Link]

 VueJS : 2014 : en progrès

React et/ou [Link] sont un bon choix, quoiqu'il arrive.

• Leur architecture et philosophie sont proches. Découvrir l'un permet de prendre la main
plus rapidement avec l'autre.
• La syntaxe de templating en quasi-HTML de VueJS est plus "naturelle" que le JSX de
React

3
Développement d’application : Framework JavaScript
Avec du HTML et du JavaScript on peut développer des applications côté client. Des bibliothèques
et/ou frameworks permettent de faciliter le travail.
• [Link] : google-chrome – 2009 : la base des framework avec le npm (node package
manager).
 Angular : google – 2010-2012 : beaucoup de gens pas intéressé
 Express : pour la réalisation d’API.
• Les méthodes d'écriture de code JavaScript "modernes" seront nécessaires pour les apprivoiser
(POO, structuré, MVC, EcmaScript, etc.)

➢ AngularJS
C’est une autre bibliothèque-framework JavaScript créé en 2009 chez Google. Pour développer des
applications côté client.
[Link]

➢ JointJS
C’est un site qui propose des bibliothèques payantes permettant de développer des applications
comme par exemple un modeleur UML :
[Link]
L’intérêt ici est d’avoir un outil en ligne. On peut tester le modeleur UML.
Il y a là un champ de développement commercial ou libre considérable !
[Link]

➢ [Link]
Application JS en ligne : modeleur UML et autres syntaxes. Gratuit !
[Link]

4
 2 - Environnement de travail

Editeur orienté front-end

➢ VS Code ou Sublime Text (ou Notepad ++ ou Bracket ou autre)

Navigateur

➢ Chrome ou Firefox

3 - Balise <script>
Le code JS se place entre les balises <script> et </script>

Où mettre la balise <script> ?

On peut placer des balises <script> dans le <head> ou dans le <body>.
De préférence on ne met qu’une balise <script> par fichier HTML.

Aujourd’hui, on préfère placer la balise <script> à la fin du <body>, juste avant le </body> : en
effet pour bien s’exécuter, le JS doit d’abord avoir chargé la page HTML (mais l’affichage se fait
après le chargement complet, donc après l’exécution du code JavaScript).

Ce qu’il faut faire : code JS avant le </body>

<body>
code de la page HTML

<script>
code JS
</script>
</body>

Bonne pratique ultime : inclusion d’un fichier externe, avant le </body>

<body>
code de la page HTML

<script src="[Link]"></script>
</body>
On peut inclure un fichier contenant du code JS avec l’attribut « src » dans la balise <script>.
On fera ça dans tous nos exemples.

Si on met la balise <script> dans le <head> :

On utilise le « [Link] » pour dire que le code JS sera exécuté après que la page ait été
chargée. On met le code dans la fonction, entre les accolades.
<script>
[Link]=fonction(){
code JS
}
</script>

5
01 - Hello world !

➢ HTML
<body>
Ce qu’on veut dans la page
A la fin, une balise script
<script>
alert('Hello world!');
</script>
</body>
La partie JavaScript est écrite dans la balise script.
On utilise la fonction alert.

02 - balise script seule

➢ HTML
<script>
alert('Hello world!');
</script>
Ca fonctionne aussi sans HTML, évidemment ! C’est du HTML !

03 - Hello world ! fichier JS

➢ HTML
<body>
<script src="[Link]"></script>
</body>

➢ JavaScript : [Link]
alert('Hello world!');
On peut aussi coder le JavaScript dans un fichier séparé.
C’est plus lisible.

6
Organisation du cours

Programmation impérative
Le JS permet de faire de la programmation impérative classique : variables, tests, boucles, fonctions,
etc.

DOM
Il permet ensuite d’interagir avec la page HTML : il utilise pour cela une API : le DOM.

Programmation évènementielle
Il permet aussi de gérer des événements : c’est de la programmation événementielle.

AJAX – XML - JSON

Enfin, il permet de communiquer avec le serveur : c’est la partie AJAX avec les formats de
communication XML et surtout JSON aujourd’hui.

7
Console Javascript

Taper du code directement

On peut taper du code directement, comme en python, ou dans une console SQL
> a=3
> a
> b=a+a
> b
> [Link]("b = "+b)
> alert("b = ", b)
> [Link]("<h1>bonjour</h1>")
> [Link]("<h2>resultat = "+b+"</h2>")
> [Link]("h1").[Link]="aqua";

etc.

➢ [Link]()
L’instruction « [Link]() » permet d’afficher des variables et du texte dans le mode console à
partir de code JavaScript.

➢ alert(b)
L’instruction « alert » permet d’ouvrir une fenêtre avec un message.

➢ [Link](« … »)
L’instruction « [Link] » permet d’afficher d’ajouter du code HTML dans la page.

➢ [Link](« … »)
Ici, on récupère une balise et on modifie son style.

8
➢ Mode console / Journal
Pour voir l’affichage des instructions [Link], on ouvre le mode console / Journal (les onglet
Réseau, CSS, etc. ne sont pas toujours affichés).

Fonctionnalités de l’environnement dans Firefox

• Inspecteur : pour parcourir le code HTML

• Console : pour avoir les erreurs et le « mode console »
• Débogueur : pour mettre des points d’arrêt dans le code
• Editeur de style : pour voir le CSS. On peut le changer pour voir les résultats

• : pour faire apparaître la console dans l’inspecteur, par exemple.

• : pour présenter les outils verticalement.

• : pour présenter les outils dans une fenêtre à part.

• : pour accéder aux configuration : par exemple le thème sombre.

9
04 - variable, addition, concaténation, prompt() – A tester

➢ HTML : [Link]
<script src="[Link]"></script>

➢ JavaScript : [Link]
// Déclaration des variables
// mieux vaut déclarer les variables au début
// on préfère let à var ou rien
// on checke l'usage des variables en cliquant dessus

let v1 = 5
let v2 = 10
let resultat = v1+v2
let message = ''

alert('v1+v2: '+v1 + ' + ' + v2 + ' = ' + resultat)

message = '1 : Le double du résultat est : ' + resultat*2
alert(message);
[Link](message)

v1 = prompt('Entrez le premier chiffre :')

v2 = prompt('Entrez le second chiffre :')
resultat = parseInt(v1) + parseInt(v2);

alert(v1 + ' + ' + v2 + ' = ' + resultat);

[Link](v1 + ' + ' + v2 + ' = ' + resultat);

message = '2 : Le double du résultat est : ' + resultat*2

alert(message)
[Link](message)
• alert pour afficher une variable dans une fenêtre
• prompt pour lire une variable dans une fenêtre
• parseInt() permet de transformer du texte en entier. Il existe aussi une fonction parseFloat().
On peut aussi ajouter parseFloat(… ).toFixed(2) pour limiter à deux chiffres après la virgule.
• On peut additionner avec le signe « + » ou faire une concaténation.
[Link]

10
05 – premières fonctions – A tester

05-fonction

➢ HTML : [Link]
<script src="[Link]"></script>

➢ JavaScript : [Link]
function fonction_1(){
let v1 = 5, v2 = 10
let resultat = v1+v2
let texte = '' // mieux peut commencer par déclarer texte
alert(v1 + ' + ' + v2 + ' = ' + resultat)
texte = 'f_1: Le double du résultat est : ' + resultat*2
alert(texte)
[Link](texte)
}

function fonction_2(v1, v2){

let resultat = v1 + v2
let texte = '' // mieux peut commencer par déclarer texte
alert(v1 + ' + ' + v2 + ' = ' + resultat)
texte = 'f_2: Le double du résultat est : ' + resultat*2; //
sans let
alert(texte)
return texte
}

// MAIN
// le code s'exécute dans l'ordre : d'abord on déclare les
fonctions
// puis on les utilise dans le main
//
fonction_1(); // appel à la fonction

let w1 = prompt('Entrez le premier chiffre :')

let w2 = prompt('Entrez le second chiffre :')

let message = fonction_2(parseInt(w1), parseInt(w2)) // appel à

la fonction
[Link](message) // affichage de la variable globale de f_v2
On reprend le calcul précédent et on écrit des fonctions.
Une première fonction sans paramètre.
Une deuxième fonction avec paramètre.
La variable « texte » dans f_v2 est globale : on peut l’afficher après l’appel à la fonction. C’est plutôt
à éviter.

11
05-fonction-2

➢ HTML : [Link]
<script src="[Link]"></script>

➢ JavaScript : [Link]
[Link]("Tests de [Link]")

let a=5, b=3

[Link](a + ' x ' +b + ' = ' + a*b)

function direBonjour(prenom) {
let message = "Bonjour " + prenom + " !"
return message
}

[Link](direBonjour("Baptiste"))
[Link](direBonjour("Sophie"))

[Link]("Au revoir !")

[Link] permet d’écrire dans la console de log. C’est utile pour déboguer son programme.

12
06 – premières listes – A tester et exercices

➢ HTML : [Link]
<script src="[Link]"></script>

➢ JavaScript : [Link]
[Link]("Tests de liste, pop, push, for, sort et forEach")

let liste=[10, 5, 20, 15, 25]

[Link](liste)

let elt = [Link]()

[Link](elt)

[Link](35)
[Link](liste)

for(let i=0; i<[Link]; i++){

[Link](liste[i]*2)
}

[Link]((a, b) => a - b)
[Link](liste)

[Link]((elt)=>{
[Link](elt*100)
})

[Link]("Au revoir !")

➢ Exercice
• Installez [Link] et tester le code avec [Link]
 Ouvrez un terminal dans le dossier de [Link]
 Tapez : node [Link]

13
07 - [Link]() et test – A tester

➢ HTML : [Link]
<script src="[Link]"></script>

➢ JavaScript : [Link]
[Link]('<h1>Partie JavaScript : [Link] écrit à la
fin de la page</h1>');

let prenom = prompt('Entrez votre prénom :');

let age = prompt('Entrez votre age :');

age = parseInt(age);

if(age>25){
[Link]('Désolé '+prenom+'<br>');
[Link]('Vous n\'avez pas droit à la carte Jeune');
}
else{
[Link]('Bonjour '+prenom+'<br>');
[Link]('Vous pouvez bénéficier de la carte Jeune');
}
• [Link] permet d’écrire à la fin de la page HTML

14
08 – document. getElementById() et boucle for – A tester

➢ HTML : [Link]
<body>
<h1>Début de la page</h1>
<div id="resultats"></div>
<h1>Fin de la page</h1>

<script src="[Link]"></script>
</body>

➢ JavaScript : [Link]
// on fabrique le code HTML qu'on va ajouter
let innerHTML = '<h3>Table de 5 : </h3>'
for(let i=1; i<11; i++){
innerHTML += '5 * '+i+' = '+5*i+'<br>';
}
let balise=[Link]('resultats_1');
[Link] = innerHTML

//Version compacte :
[Link]('resultats_2').innerHTML = innerHTML
• balise=[Link]('resultats') permet de récupérer la balise dont l’id vaut
“resultat”.
• [Link] est le texte qu’on place dans la balise
• Le « += » permet d’ajouter du texte dans la balise
• La boucle for est une boucle standard.
• Version compacte :
[Link]('resultats').innerHTML = '<h3>Table de 5
: </h3>';

15
09 – Button : programmation événementielle – A tester
L’objectif est de déclencher du code JavaScript en cliquant sur un bouton.

➢ HTML : [Link]
<body>
<h1>Début de la page</h1>
<fieldset>
<p>Zone de démonstration</p>
<p id="demo"></p>
</fieldset>

<button onclick="[Link]('demo').innerHTML
= 'bien cliqué sur le bouton 1'">Cliquez moi 1!!!</button>

<button onclick="boutonTest()">Cliquez moi 2 !!!</button>

<h1>Fin de la page</h1>

<script src="[Link]"></script>
</body>

➢ JavaScript
function boutonTest(){
[Link]('demo').innerHTML =
'<p style="background-color:aqua"> bien cliqué sur le bouton
2</p>'
}
• La balise <button> sert à créer un bouton qui actionnera du code JavaScript.
• On peut ajouter des attributs dans la balise <button> qui définisse un événement à l’origine de
l’exécution d’un code JavaScript. Ici l’événement « onclick ». La valeur de l’attribut, c’est du
code JavaScript à exécuter quand l’événement est déclenché.
• Pour la première balise <button>, le code JavaScript est un « [Link] »
• Pour la deuxième balise <button>, le code JavaScript est l’appel à la fonction boutonTest()
• La fonction boutonTest() est définit dans le fichier JavaScript qui est inclus dans la balise
<script>
• Le bilan est que la page HTML contient du code JavaScript directement dans la balise <button>

16
10 – onclick, onmouseover, onmouseout – A tester
L’objectif est de déclencher du code JavaScript en fonction de certains événements (onclick,
onmouseover, etc.), ces événements pouvant s’appliquer à n’importe quelle balise.
L’objectif est aussi d’ajouter ces événements dans le code JavaScript et pas dans la page HTML.

➢ HTML : [Link]
<body>
<h1>Début de la page</h1>

<p id="p1"> Premier paragraphe de test : cliquez moi pour

changer la couleur de fond</p>

<p id="p2"> Deuxième paragraphe de test : passez sur moi pour

changer la couleur de fond</p>

<p id="p3"
onclick="[Link]('p3').[Link]='yel
low';">
Troisième paragraphe de test : cliquez moi pour changer la
couleur de fond
</p>

<h1>Fin de la page</h1>

<script src="[Link]"></script>
</body>

➢ JavaScript
// on préfère éviter le JavaScript dans le HTML

// Paragraphe p1 :
let baliseP1 = [Link]('p1');
[Link] = function(){
[Link]='aqua';
}

[Link]('p1').addEventListener("dblclick",
function (event) {
[Link]='yellow';
})

// Paragraphe p2 :
let baliseP2 = [Link]('p2');
[Link] = function(){
[Link]='yellow';
}
[Link]=function(){
[Link]='';
}

• Dans le HTML, dans le premier <p> est repris en JavaScript.

• Dans le JavaScritpt : on récupère la balise p1.
• Sur cette balise on met dans l’attribut « onclick » une fonction qui définit l’action à réaliser.
• L’action à réaliser consiste à modifier le [Link] de la balise.

17
• Notez que le nom reprend celui du CSS : background-color, mais en « Camel Case » (pas de
tiret, majuscule sur le deuxième mot).
• On fait la même chose sur la balise p2, mais cette fois sur les événements « onmouseover » et
« onmouseout »
• Dans le code HTML, sur un paragraphe p3, on fait directement ce qu’on a fait sur le paragraphe
p1.

18
 BASES DU CODE

Types et opérations de base

Les 3 + 1 types

3 types simples :number, string, boolean

Le type d'une valeur détermine son rôle et les opérations qui lui sont applicables.
Les principaux types de bases du JS sont : nombre, chaîne de caractères, booléen
Type number : entier ou réel. Les réels s’écrivent avec un « . »
Type string : chaîne de caractère : entre guillemets ou apostrophes
Type boolean : true et false, en minuscules

1 type complexe : object – Le JSON

JS permet de définir des tableaux et des objets (= structure)
Tous les types complexes sont des « object » (les tableaux et les objets).
Le JSON : JavaScript Object Notation, c’est la syntaxe des objets en JavaScript. C’est une syntaxe
standard qu’on utilise pour les API et qu’on retrouve en Python.

19
➢ Les tableaux
• const tabAnimaux = ["chien", "chat", "poule"]; // on utilise un const : on peut ajouter, modifier
ou supprimer dans le tableau, mais on ne peut pas mettre un nouveau tableau.
• [Link]; // 3

➢ Les objets
• let obj = {};
const obj = {
"nom": "Carotte",
"for": "Max",
"details" : {
"couleur" : "orange",
"taille" : 12
}
};
[Link]; // orange
obj["details"]["taille"]; // 12

• On peut ne pas mettre de guillemets sur pour le nom des propriétés, mais ce n’est pas l’usage :
const obj = {
nom: "Carotte",
for: "Max",
details: {
couleur: "orange",
taille: 12
}
};
[Link]; // orange
obj["details"]["taille"]; // 12

20
opérateur typeof

typeof de number, de string, de boolean

typeof 1; typeof(1) // number
typeof 1.1; typeof(1.1) // number

a=5;
typeof a ; typeof (a) // number

typeof “hello”; // string

typeof true; // boolean
typeof (1==1); // boolean

21
typeof d’ « object »
les tableaux et les objets (= structure) sont de type « object »

➢ tableau
typeof [1, 2] // object // tableau de 2 entiers
tab=[1, 2]
typeof tab // object // tableau de 2 entiers
typeof tab[0] // number

➢ objet ( on parlait de « structure » en langage C )

typeof {nom :'toto', age :15} // object à 2 attributes

personne= {nom :'toto', age :15}

typeof personne // object à 2 attributs

typeof [Link] // string

22
Opérations de base

Principe
Chaque type permet d’accéder à des opérateurs et à des méthodes.

Exemple
4*3 // affiche le résultat
la division par 0 renvoie « Infinity »

« bonjour » ou ‘bonjour’ : affiche « bonjour »

« bonjour \n tout le monde » : le \n est un passage à la ligne
« bon »+ «jour » : affiche « bonjour »

« bonjour »[0] : vaut « b »

« bonjour »[3] : vaut « j »
« bonjour ».length : vaut 7

« bonjour ».toUpperCase : vaut « BONJOUR »

23
Type Number
toFixed(x) Formats a number with x numbers of digits after the decimal point
toString() Converts a number to a string

[Link](2)

etc.
[Link]

Type String
substr(debut, lgr) Extrait les caractères à partir d’une position de début sur une longueur donnée
concat() Joins two or more strings, and returns a new joined strings
etc.

“hello world”.substr(4, 3) // “o w”

Etc.
[Link]

Type Boolean
toString() Converts a boolean value to a string, and returns the result

(1==1).toString() // “true”
[Link]

24
Variable

Principes et usages modernes : ES6+

Présentation
Nom, valeur, type, adresse, signification
Le nom de la variable est constitué de maj, min, chiffre, $, _ (underscore)
Le type est défini à l’usage

Déclarer une variable : let ou const

Quand on déclare une variable, on utilise le mot clé « let », « const » (ou « var » pour les globales : à
éviter).
On peut écrire : let a ;
Ou écrire let a = 5 ;

[Link]

Initialisation d’une variable

L’initialisation, c’est le moment où on donne la première valeur à une variable.
On peut le faire au moment de la déclaration : let a = 5 ;
On peut le faire après la déclaration : let a ; a=5 ;

Constante
[Link]

const a = 3

Une constante ne pourra pas être modifiée, MAIS :

On pourra modifier le contenu d’un tableau ou d’un objet déclaré en constante,
mais pas toute la variable : on modifie le contenu de la référence, pas la référence elle-même.

Le bon usage ES6+

Le bon usage consiste à n’utiliser que des let et des const.

Le var peut se justifier pour simuler de la programmation objet : mieux vaut alors programmer des
classes !

25
Affichage - Saisie

JavaScript output
[Link]
Toutes les possibilités d’affichage dans la page sont présentées :

[Link]
[Link](3)
[Link](a) : affiche a
[Link](a, b)
[Link](st1, st2)
[Link](st1+st2) : concaténation
a=5 ; b=3 ;
[Link](a + ‘ x ‘ +b + ‘ = ‘ + a*b) ;
etc.

Affichage d’une fenêtre d’alerte, avec ou sans confirmation

alert() ou [Link]() sont équivalent : pas de confirmation

confirm() : permet d’annuler

Affichage d’une fenêtre avec texte et champs de saisie

let a = prompt(« entrez a : )

textContent et innerHTML
let demo = [Link]("demo")
[Link] = « coucou<br> » // la balise est prise en compte

[Link]("demo").textContent = « coucou<br> » // la balise <br> sera du texte

Write
Write n’est pas pratique : il écrit à la fin de la page, voir ouvre une nouvelle page.
[Link]

[Link](5 + 6);

➢ Affichage dans une page HTML vierge sur clic d’un bouton
<button onclick="[Link](5 + 6)">Try it</button>

26
Tests

Type et expression booléenne

&&, ||, true, false
==, !=, <, <=, >, >=
[Link]
===, !==
L’égalité faible == fait une conversion de type.
L’égalité forte === n’en fait pas.
« 17 » == 17 est true
« 17 » === 17 est false

if, else else if switch

if (condition) { if (condition) { switch (variable) {
case valeur :
} } instructions
else { else if (condition) { break
case valeur :
} } …
else { default :
instructions
} }

27
Boucles

while
while(condition){
instructions
}

i=0
while(i<5){
[Link]("i: "+i)
i+= 1
}

for
for (let i = 0; i < 5; i++) {
[Link](i)
}

28
Fonctions

Principes
[Link]

Déclaration d’une fonction

Une fonction est un regroupement d'instructions qui réalisent une tâche donnée.
Une fonction rend le code plus modulaire.
Une fonction est constituée d’une en-tête et d’un corps.
Une fois écrite, une fonction peut être appelée depuis n'importe quel emplacement du programme.
Une fonction peut recevoir des informations sous la forme de paramètres.
Une fonction peut renvoyer ou non une valeur de retour.

Variables dans les fonctions

Toutes les variables déclarées avec un « let » (ou un « const ») dans les fonctions sont locales
aux fonctions : elles ne sont pas utilisables en dehors des fonctions.

Les variables déclarées avec un var ou sans mot clé sont globales. Elles seront utilisables en dehors
de la fonction : c’est à éviter !!!

Variable locale ayant le nom d’une variable globale

Si une fonction déclare une variable locale qui existait déjà comme variable globale, la variable
globale n’est plus visible dans la fonction. La variable globale est alors indépendante de la variable
locale qui a le même nom.

➢ Le bon usage
N’utiliser que des variables locales dans les fonctions : il faut donc toutes les déclarer avec un let ou
un const.
Il faut éviter de déclarer des variables globales dans les fonctions.
Il faut éviter, autant que possible, d’utiliser des variables globales dans les fonctions.

29
Fonctions mathématiques prédéfinies : Math

➢ Exemples
[Link]([Link](4.5, 5)); // Affiche 4.5
[Link]([Link]()); // Affiche un nombre aléatoire entre 0 et 1

➢ Constantes prédéfinies
[Link]

➢ Toutes les méthodes

[Link]
[Link]

[Link]
[Link]

30
Fonctions de manipulation de chaines prédéfinies : String

➢ Présentation de toutes les méthodes :

• String
[Link]

➢ Exemples
[Link]

mot= « test » ;
[Link] ;
[Link]() ; [Link]() ;
[Link](0) ; mot[0] ;
[Link](«A »)
etc.

31
Fonctions de manipulation de date prédéfinies : Date

Présentation de toutes les méthodes :

• Date
[Link]
let d = new Date();
[Link]() : retourne le jour du mois
[Link]() : retourne le jour de la semaine : 0 pour dimanche, 1 pour lundi
getHour
setDate, setHours,
etc.

➢ Exemples
[Link]
etc.

32
Exercices – Série 1

1 – Calculs sur des figures

Écrire une page qui permet de saisir la largeur et la longueur d’un rectangle puis qui affiche son
périmètre et sa surface et qui qui permette de saisir le rayon d’un cercle et qui affiche le périmètre du
cercle. Le résultat doit avoir 2 chiffres après la virgule.

On fournit 2 boutons à l’utilisateur. Il peut saisir les valeurs. Le résultat s’affiche en dernière ligne de
la page, dans une fenêtre d’alerte et dans la console de log.
Vous devez vous appuyer sur les exemples.

2 – Jour de la semaine

Sur le même principe que l’exercice précédent, écrire une fonction qui affiche le jour de la semaine.
Regardez ici le fonctionnement de la fonction getDay :
[Link]
Le retour d’un getDay sur une date vaut 0 pour dimanche, 1 pour lundi, etc.
Pour cela, on se dotera d’une fonction qui renvoie le jour de la semaine à partir du chiffre
correspondant au résultat du getDay().

On affiche les résultats ainsi :

L’encadrement est une balise <fieldset>

33
3 – Table de multiplication
1. Ecrire une page HTML avec du JS qui permet d’obtenir le résultat suivant en cliquant sur le
bouton :

On pourra saisir la valeur 7 ou bien n’importe quelle autre valeur.

Principe de résolution :
On va construire le code HTML à produire dans une variable appelée : innerHTML
Quand elle est entièrement construite : <ul><li> etc. </ul> on écrira une instruction du
type de :
[Link]=innerHTML;

4 : Compteur de clics

Objectif
Avec l’interface ci-dessous, on peut compter les clics et modifier l’affichage chaque fois qu’on clique
sur « cliquez-moi pour compter ».
On peut remettre le compteur à zéro.

34
 TABLEAUX ET OBJETS - JSON

1 - Tableaux : exemple 1

Présentation
[Link]
[Link]
• Les tableaux permettent de regrouper des données
• On peut mettre tout ce qu’on veut dans un tableau : number, string, booléen, objet
• On peut mélanger toutes sortes de types de données dans un même tableau.

Déclaration
• const tab = []; // Création d'un tableau vide
• const tab = [5, 10, 12]; // Création d'un tableau plein
• tab=new Array()
• tab=new Array(10) ; // Création d'un tableau de 10 cases vides

Accès aux éléments

• Comme les caractères d'une chaîne, les éléments d'un tableau sont identifiés par un indice
débutant à zéro : tab[0], tab[1]
• tab[4] =10 ;
• On ne peut pas écrire tab[0]=5 si le tableau n’a pas préalablement été déclaré.

35
length
• [Link] : retourne la position + 1 du dernier élément : le nombre d’éléments. Les éléments
d’indice négatifs ne sont pas pris en compte.

Tous les éléments du tableau

• tab : liste toutes les valeurs, sauf les éléments d’indice négatif.
• for(let i=0 ; i< [Link] ; i++) [Link](tab[i]) ;
• for(let key in tab) [Link](tab[key]) ;
• for(let value of tab) [Link](value) ;

Trous dans le tableau !

• On peut mettre l’index qu’on veut : on n’est pas obligé de tout remplir. Par exemple si le
contenu de tab s’affiche ainsi : [5, 3, 5: 9, 8 :2], c’est que tab[0]=5, tab[1]=3, tab[5]=9,
tab[8]=2.
• const tab=[5, 3] ; tab[5]=9 ; tab[8]=2 ; produit le tableau précédent.
• Attention : [Link], ne donne pas le nombre d’éléments. Dans le tableau précédent, c’est 9.

Indice négatif
• On peut mettre des indices négatifs dans le tableau.
• On y accède avec le « for key in » mais pas avec le « for value of ».

36
Fonctions de manipulation du tableau
[Link]
• [Link](5) // true
• [Link](5) // 0 : la position de 5 dans le tableau
• delete tab[0]; // supprime l’élément 0 qui est alors undefined.
• [Link](valeur) : ajoute un élément après celui de l’index le plus élevé.
• elt = [Link]() : sort du tableau l’élément ayant l’index le plus élevé. Sa valeur passe dans elt.
• [Link]() : attention, c’est un tri alphabétique : 10 est avant 2 !
[Link]

Type
• typeof tab : retourne « object » : un tableau est un objet (au sens POO)
• [Link](tab) : retourne « true » si c’est un tableau
• tab instanceof(Array) : retourne « true » si c’est un tableau

2 - Objet ( = structure) en JS : exemple 2

Présentation
• Un objet ( = structure), c’est une variable qui contient des champs (ou propriétés ou attributs)
qui peuvent contenir toute sorte de valeurs.
• Les objets sont utiles pour décrire des objets du monde réel avec leurs caractéristiques.
• On accède aux champs avec l’opérateur « . »
let eleve = {
id:1,
nom: "toto",
note: 15
};
[Link]; // vaut toto
[Link]; // vaut 1
[Link]=18; // on modifie la note
[Link]; // vaut 18

eleve[‘note’] = 15 // on modifie la note : autre écriture

37
Tous les composants d’un objets
• eleve : liste tous les champs de l’objet ( = structure), avec les valeurs
• for( key in eleve) [Link](eleve[key]) ;

Méthodes applicables
• typeof eleve retourne object
• [Link]("nom") retourne true : pour savoir si une propriété appartient à un objet
( = structure).

Application
Testez l’exemple 2
Affichez l’objet ( = structure) dans la page HTML

3 - Boucles spéciales : exemples 1 et 2

Boucle « for », rappel :

for(i=0 ; i< [Link] ; i++) [Link](tab[i]) ;
• Attention, ça passe par tous les trous.

boucle « for value of» : rappel

• La boucle « for value of » permet de récupérer chaque valeur d’un tableau (pas d’un objet)
dans une variable.
for(let value of tab) [Link](value) ;
• Attention, ça passe par tous les trous, comme une boucle for, et aussi les clés non entières.

boucle « for key in» : rappel

• La boucle « for key in » permet de récupérer chaque élément d’un objet ( = structure) ou d’un
tableau dans une variable.
for(let key in tab) [Link](tab[key]) ;
• Ca ne retourne que les key existantes, négatives comprises.
• Exemple avec une structure :
const person = {fname:"John", lname:"Doe", age:25};

let text = "";

let x;
for (x in person) {
text += person[x] + " ";
}

// text vaut : "John Doe 25"

[Link]

38
méthode forEach
• La méthode forEach() permet d'exécuter une fonction sur chaque élément du tableau. On code
la fonction directement dans le forEach :
const tab = ['a', 'b', 'c'];

[Link](function(element) {
[Link](element);
});

• On peut aussi passer une fonction en paramètre et définir la fonction ailleurs.

const tab = ['a', 'b', 'c'];

[Link](maFonction(element));

function maFonction(element){
[Link](element);
}

[Link]

39
methode map
• La méthode map() retourne un tableau avec les valeurs retournées par le fonction.
const tab = [1, 2, 3, 4]
const tabCarre = [Link](function (elt) {
return elt*elt
})
[Link](tabCarre) // [ 1, 4, 9, 16 ]

• [Link]
const personnes=[{id: 1, nom:'toto'}, {id: 2, nom: 'titi'}]
tabNoms = [Link](function (personne) {
return [Link]
})
[Link](tabNoms) // [ 'toto', 'titi' ]

➢ map et index
const tab = [1, 2, 3, 4]
[Link](function (elt, index) {
[Link]('tabCarre['+index+']='+elt+' -> carré='+elt*elt)
})

➢ max et fonction fléchée

const tabCarre = [Link](function (elt) {
return elt*elt
})

devient :
const tabCarre = [Link](elt => {
return elt*elt
})

devient :
const tabCarre = [Link](elt => elt*elt)

méthode filter
• La méthode filter() retourne un tableau avec uniquement certaines valeurs du tableau de
départ.
const entiers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

const pairs = [Link](entier => entier%2 == 0);

[Link](pairs); // [2, 4, 6, 8, 10];

• [Link]
US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter

40
4 – Tableau de d’objets ( = structures) : exemple 3

Présentation
On peut mettre des objets dans des tableaux :
const eleve1 = {
id:1,
nom: "toto",
note: 15
};
const eleve2 = {
id:2,
nom: "tata",
note: 16
};
const tabEleves = [eleve1, eleve2];

Accès aux données

tabEleves[1].nom vaut « tata ».

Tri d’un tableau d’objets (syntaxe ES6 : fléchée)

[Link]( (a,b) => [Link] -[Link])

41
5 - JSON

Format JSON : JavaScript Object Notation

On peut aussi déclarer directement un tableau d’objets ( = structures) :
const tabEleves = [
{
id:1,
nom: "toto",
note: 15
},
{
id:2,
nom: "tata",
note: 16
}
]
Ou bien, compacté :
const tabEleves = [
{ "id":1, "nom": "toto", "note": 15 },
{ "id":2, "nom": "tata", "note": 16 }
]
Ou encore plus compacté :
const tabEleves = [ { "id":1, "nom": "toto", "note": 15 }, {
"id":2, "nom": "tata", "note": 16 } ]
Le format [ ] et {} avec les attributs entre guillemets, c’est du JSON.

Affichage d’un fichier JSON dans un navigateur

• On peut afficher un fichier JSON dans un navigateur comme n’importe quel fichier texte : en
mode CLI.
• On peut aussi avoir un affichage formatté en mode GUI.

• Firefox propose un affichage formatté par défaut.

• Dans Chrome ou Brave, il faut installer une extension : par exemple : JSON formatter.

42
Lecture d’un format JSON dans Firefox (ou avec une extension formater JSON)
Le fichier [Link] contient :
[{"id":1 ,"nom":"toto", "note": 15}, {"id":2, "nom":"tata", "note": 16}]

Quand on ouvre un fichier directement dans Firefox, on obtient :

Exemples
Prenez le fichier JSON de l’exemple 3 et affichez le dans Firefox
const eleve1 = {
id:1,
nom: "toto",
note: 15
};
const eleve2 = {
id:2,
nom: "tata",
note: 16
};
const tabEleves = [eleve1, eleve2];

43
6 – Objet (= structure) avec fonctions : exemple 4

Présentation
On peut déclarer une ou plusieurs fonctions en même temps qu’un objet (= structure).
C’est une première approche de la programmation objet.

Exemple
couple={
a:5,
b:10,
toString:function(){return "a="+this.a+" - b="+this.b;}
}

Usages
[Link](couple.a) vaut 5
couple.a = 3
[Link]([Link]) vaut "a=3 – b=10"

Exemple
exemple 4 – Tableau d’objets (= structures)
Affichez l’objet dans la page HTML

44
Exercices – Série 2

0 – JSON

Installation de l’extension JSON Formatter dans Chrome

• Installez JSON Formatter dans Chrome.
• Paramétrez JSON Formatter dans Chrome : gérer extensions / détails / Autoriser l’accès aux
URL de fichier.

• tests de fichiers :
• [Link]/IMG/json/[Link] : ici
• [Link]/IMG/json/[Link] : ici
• [Link]/IMG/json/les_films.json : ici
• [Link]/IMG/json/[Link] : ici
• [Link]/IMG/json/[Link] : ici

Exercice 1 :
• Chargez ces fichiers directement sur votre ordi à partir des liens. Regardez le résultat :
cherchez à comprendre les données.

Exercice 2 :
• Enregistrez le fichier « les_films.json » dans un fichier. Lisez ce fichier dans votre
navigateur.
• Dans une page HTML, afficher ce fichier en format <table>
• Ajoutez 3 boutons qui permettent de trier : par année, par titre et par id.
• Ajoutez un bouton qui permette de sélectionner les films uniquement après une année
donnée.

Exercice 3 :
• Enregistrez le dernier exemple (fréquentation) dans un fichier. Lisez ce fichier dans votre
navigateur.
• Écrivez un code qui affiche dans une page HTML les recettes pour chaque année entre 2000
et 2009, dans l’ordre des années. D’abord vous affichez une liste textuelle de valeurs. Puis
vous affichez les résultats dans un tableau HTML.
• Pour faire ça, vous pouvez commencer par afficher les résultats pour toutes les valeurs.

45
Exercice 4
Un point est caractérisé par ses coordonnées x et y. Un carré à base horizontale est défini par les coordonnées de son point
en bas à gauche et par son côté. Les coordonnées et le côté sont des réels.
On travaille sur un ensemble de carrés.
• Définir les objets qui permettent de gérer ce problème. Créer le carré du schéma ci-dessous.
• Créez un fichier JSON qui regroupe les objets du schéma ci-dessous. Vous rajouterez 2 carrés aux choix.

Coté = 2
4

P(1,3)
3

P(4,2)
2

P(2,1)
1

0 1 2 3 4 5

Exercice 5
Un élève est caractérisé par son nom, son prénom, sa date de naissance. Il y a 3 matières d’informatique : algo, C++ et
SQL. Chaque matière donne lieu à 2 QCM et à 1 examen. Les QCM comptent pour 25%. L’examen pour 50%. On
connaît les dates d’examen et de QCM. Chaque élève porte toutes les informations le concernant. On connaît les notes
pour chaque examen, la note finale pour la matière et la moyenne des 3 matières.
• Définir la ou les objets JSON permettant de gérer un élève.
• Définir l’objet JSON permettant de gérer une classe. On enregistre aussi la moyenne générale de la classe dans
la structure de la classe.

46
1 – Tableau de notes
Définir en JavaScript un tableau contenant des notes d'étudiants comprises entre 0 et 20.
• Implémenter en JavaScript les fonctions qui permettent de :
✓ afficher un tel tableau de façon standard HTML
✓ savoir combien d'étudiants ont eu plus de 10
✓ calculer la moyenne des notes
✓ connaître la note maximale
✓ rechercher une note particulière : on donne la note, on récupère l’indice.
✓ trier le tableau
• Remarque de méthode :
✓ Vous pouvez vous aider de : [Link] Pour
par exemple : indexOf ou la fonction de tri.
✓ dans les fonctions, on ne fera aucun affichage.
✓ On utilise un fichier HTML et un fichier JavaScript.
✓ On affiche les résultats dans une div prévue pour dans le HTML et aussi en fin de fichier
avec un [Link] pour afficher dans la page HTML
✓ Dans le fichier JavaScript, à la fin, on a d’abord les fonctions, puis la création du tableau,
puis les appels aux [Link]. Le fichier JS est comme un contrôleur qui include le
modèle (les fonctions), puis « met la colle du contrôleur » (définit le tableau), puis include
la vue (les [Link]).

47
➢ Objectifs à atteindre en termes de présentation (il manque quelques fonctionnalités)

48
2 - Tableau d’élèves avec des notes – Tri d’un objet (= structure)
Dupliquer le travail de l’exercice précédent.
Dans l’exercice précédent, ajouter un prénom pour chaque note. On utilise forcément une fonction.
• Mettez à jour toutes les fonctions.
• Ajoutez une fonction de tri par nom et une fonction de tri par note (googler trier un tableau
json). Afficher le tableau trié par nom puis trié par note.

➢ Objectifs à atteindre en termes de présentation :

etc.

49
3 - Tableau d’élèves avec des notes – creerEleve
Dupliquer le travail de l’exercice précédent
• Créer une fonction qui permet de créer un élève : creerEleve(nom, note, photo)
• Remplir désormais le tableau complet en utilisant cette fonction.
• Créer une fonction qui permet d’afficher un élève de telle sorte qu’elle puisse être utilisée dans
la fonction qui affiche tout le tableau (afficher veut dire : retourner un texte avec le code
HTML). Mettez à jour la fonction.
• Afficher un élève au choix après les tris.
• Le but est de gérer chaque fonctionnalité avec un bouton.

➢ Objectifs à atteindre en terme de présentation :

50