JavaScript : les bases du langage
I. Introduction : Pourquoi JavaScript ?
JavaScript : est un langage de programmation Web, qui permet de rendre interactive une page
web.
Animation des éléments de la page : faire bouger, apparaître ou disparaître.
Mettre à jour des éléments de la page : changer un texte, reculer un nombre…
Attendre que l’utilisateur face quelque chose (cliquer, taper au clavier, bouger la souris,…) et réagir.
Le point fort du JavaScript est de manipuler/changer dynamiquement le contenu HTML et CSS
des documents Web.
Et pour pouvoir accéder à ces éléments, il faut utiliser la DOM (Document Object Model), qui est un arbre
(hiérarchie) généré automatiquement par le navigateur, au moment du chargement de la page, dont le premier
nœud est document.
DOM = interface de programmation qui permet de manipuler le code HTML de façon dynamique, en utilisant un
langage de script
II. Code JavaScript où ?
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
alert("bonjour head")
</script>
</head>
<body onload="alert(‘bonjourinline’) ;">
<p>Test JavaScript</p>
<script>
alert("bonjour body") Script.js
</script>
<script src="script.js"></script> alert("bonjour fichier externe")
</body>
</html>
NB : il est de préférence de mettre le code JavaScript à la fin du body, pour qu’il ne soit pas interprété au début (et ça
va prendre du temps) et ceci pour ne pas ralentir le chargement de la page.
En HTML, le code JavaScript est inséré entre les balises <script> … </script>
1- Dans une balise HTML 2- Dans la partie body ou 3- Fichier externe
(inline) dans la partie head
<balise évènement="Mon <script Créer un fichier .js et taper dedans ton code
code JavaScript"> … </balise> type="text/JavaScript"> JavaScript
// Mon code JavaScript <script src="nom_fichier.js">
… </script>
</script>
<!DOCTYPE html> <!DOCTYPE html> <!DOCTYPE html>
<html> <html> <html>
<head> <head> <body>
<meta http-equiv="content- <meta http-
type" content="text/html; equiv="content-type" <h2>JavaScript fichier externe</h2>
charset=windows-1252"> content="text/html;
<title>d</title> charset=windows-1252"> <p id="demo">Paragraphe.</p>
</head> <title>d</title>
<body> </head> <button type="button"
<button <body> onclick="modifier()">Essayer</button>
onclick="alert('bonjour');"> <button
cliquer sur moi</button> onclick="mafonction()">cliq <p>(ma Fonction se trouve dans un fichier
</body> uer sur moi</button> nommé "myScript.js")</p>
</html> <script>
function mafonction() <script src="monscript.js"></script>
{alert("bonjour");
} </body>
</script> </html>
</body> copier ce code dans le fichier
</html> monscript.js
function modifier() {
document.getElementById("demo").inner
HTML = "Paragraphe changé.";
}
III. Les structures de données :
Les variables JavaScript peuvent contenir de nombreux types de données : nombres, chaînes, objets et plus :
NB : typeof() peut renvoyer l’un de ces types primitifs ou non primitifs. Exp : exp_type_of
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
b=134;
c=true;
d="bonjour";
e=new Array();
document.getElementById("demo").innerHTML=
typeof (a)+ "<br>" + typeof (b) + "<br>" typeof (c) + "<br>"+ typeof (d) + "<br>" + typeof (e);
</script>
</body> </html>
II.1. Undefined :
En JavaScript, une variable sans valeur a la valeur undefined. Le type l'est
aussi undefined.
II.2. Number :
JavaScript n'a qu'un seul type de nombres. Les nombres peuvent être écrits avec ou sans
décimales :
pas de séparation nette entre entiers et flottants
-Infinity, Infinity
Opérateurs arithmétiques JavaScript
Operateur Description
+ Addition
- Soustraction
* Multiplication
** Exponentiation (ES2016)
/ Division
% Modulo
++ Incrémente
-- Décrémente
Opérateurs de comparaison JavaScript
Operateur Description
== égalité en valeur
!= différent
> strictement supérieur
< strictement inférieur
>= supérieur ou égal
<= inférieur ou égal
II.3. Boolean :
Les booléens ne peuvent avoir que deux valeurs : true ou false.
Opérateurs logiques JavaScript
Operator Description
&& Et
|| Ou
Operator Description
! Non
II.4. String :
pas de type caractère séparé de string, Il faut considérer des chaînes de longueur 1
Une chaîne (ou une chaîne de texte) est une série de caractères comme "John Doe".
les chaînes se notent entre " ou ’ : "exemple", ’un autre’
opérateur de concaténation :
+ . Exp : "bon"+"jour" donne "bonjour"
les opérateurs relationnels.
+ objet String =⇒ nombreuses méthodes
II.5. Les objets (Object) :
String
Array
Math
Date
IV. Les objets (objects) :
IV.1. String :
IV.1.1. Propriétés :
propriété Rôle exemple
ch = "Bonjour"; n =
length retourne la longueur de la chaine ch.length;
IV.1.2. Méthodes :
méthode description exemple
retournera le caractère à la position var ch = "bonjour";
spécifiée (index). r = ch.charAt(6);
charAt (index) alert(r);
ch1 = "bien venue";
ch2 = " le monde";
utilisée pour joindre des chaînes ch3 = " bonne journée!";
concat ()
r = ch1.concat(ch2, ch3);
alert(r);
ch1 = "bonjour le monde";
détermine la première position c. a = ch1.indexOf("le");
indexOf (c) renvoie -1 si la valeur n'est pas trouvée. alert(a);
b=ch1.indexOf("bonne");
alert(b);
ch1 = "bonjour le monde";
lastIndexOf (c) détermine la dernière position c. a = ch1.lastindexOf("n");
renvoie -1 si la valeur n'est pas trouvée . alert(a);
slice (p1,p2) extraire une partie de la chaîne de la ch = "bonjour le monde!";
position p1 à la position p2 r = ch.slice(0, 7);
alert(r);
extraire une partie de la chaîne de la ch = "bonjour le monde!";
substr (p,n) position p , n caractères. re = ch.substr(0, 7);
si on ne donne pas n la copie sera alert(r);
jusqu'à la fin
toString ()
renvoie la valeur d'une chaîne var x = 34;
var r = x.toString();
alert.log(r+typeof r);
var ch = "bpnjour";
renvoie une nouvelle chaîne avec n var r = ch.repeat(2);
repeat (n) copies de la chaîne. alert.log(r);
recherchera ch1 et la remplacée par ch = "bonjour le monde!";
replace (ch1,ch2) ch2. r = ch.replace(" ","-");
alert(r);
ch = "bonjour le monde!";
trim () supprime les espaces non utiles. (début, r = ch.trim();
fin, en double) alert(r);
ch = "BONJOUR!";
convertit une chaîne en lettres r = ch.ToLowerCase();
toLowerCase () minuscules. alert(r);
toUpperCase () convertit une chaîne en lettres majuscules. ch = "bonjour!";
r = ch.ToUpperCase();
méthode description exemple
alert(r);
IV.2. Array (tableau) :
IV.2.1. Propriétés :
propriété Rôle exemple
t = new Array();
length retourne la taille du tableau n = t.length;
new Array() ; permet de créer un nouveau tableau.
IV.2.2. Méthodes :
Description
Méthode Exemple
convertit un tableau en une fruits = ["Banane", "Orange",
toString() chaîne de valeurs de tableau "Pomme", "Mangue"];
(séparées par des virgules). ch= fruits.toString();
alert(ch);
fruits = ["Banane", "Orange",
supprime le dernier élément d'un "Pomme", "Mangue"];
pop() tableau et renvoie la valeur qui a x= fruits.pop();
été "supprimé" document.write(x,"<br>",fruits);
supprime le premier élément du fruits = ["Banane", "Orange",
tableau et "décale" tous les "Pomme", "Mangue"];
shift() autres éléments vers un index x= fruits.shift();
inférieur. document.write(x,"<br>",fruits);
fruits = ["Banane", "Orange",
ajoute un nouvel élément à un "Pomme", "Mangue"];
push() tableau (à la fin) et retourne la x= fruits.push("kiwi");
nouvelle taille du tableau. document.write(x,"<br>",fruits);
fruits = ["Banane", "Orange",
ajoute un nouvel élément à un "Pomme", "Mangue"];
unshift() tableau (au début) et retourne la x= fruits.unshift("kiwi");
nouvelle taille du tableau. document.write(x,"<br>",fruits);
fruits = ["Banane", "Orange",
"Pomme", "Mangue"];
ajouter de nouveaux éléments v à x= fruits.splice(2,0;"kiwi");
splice(p,e,v) un tableau à une position p avec document.write(x,"<br>",fruits);
nombre d'effacement e remplacer 0 par 1 et exécuter
fruits = ["Banane", "Orange",
"Pomme", "Mangue"];
sort() trie un tableau de chaine par fruits.sort();
ordre alphabétique document.write(fruits);
trie un tableau de valeur points = [40, 100, 1, 5, 25, 10];
sort(function(a, b) numérique points.sort(function(a, b){return a -
{return a - b}) b});
document.write(points);
reverse() inverse les éléments d'un tableau. fruits = ["Banane", "Orange",
Vous pouvez l'utiliser pour trier un "Pomme", "Mangue"];
Description
Méthode Exemple
fruits.sort();
fruits.reverce();
tableau par ordre décroissant
document.write(fruits);
IV.3. Math :
IV.3.1. Propriétés :
Math.PI;
IV.3.2. Méthodes :
Méthode Description Exemple
renvoie la valeur de x
Math.round(x) Math.round(4.7); // donne 5
arrondie à son entier le plus
Math.round(4.4); // donne 4
proche
Math.pow(x, y) renvoie la valeur de x à la Math.pow(8, 2); // donne 64
puissance de y
Math.sqrt(x) envoie la racine carrée de x Math.sqrt(64); //donne 8
renvoie la valeur absolue
Math.abs(x) Math.abs(-4.7); // donne 4.7
(positive) de x
renvoie la partie entière de
Math.floor(x) Math.floor(4.7); // donne 4
x
renvoie un nombre réel
Math.random() Math.random(); // donne une
aléatoire compris entre 0
valeur réelle entre [0..1[
(inclus) et 1 (exclusif)
Math.sin (x) Math.cos
sinus et cosinus de x
(x)
Math.random() et Math.floor() peuvent être utilisées pour renvoyer des entiers
aléatoires.
Exemple :
Math.floor(Math.random() * 10); // donne un entier aléatoire de 0 à 9
Math.floor(Math.random() * 101);// donne un entier aléatoire de 0 à 100
IV.4. Date :
IV.4.1. Création :
Exemple
Mode de création
crée un nouvel objet de date avec la date
d = new Date();
et l'heure actuelles
Crée un nouvel objet de date avec une d = new Date(2020, 11, 24, 10, 33, 30, 0);
date et une heure spécifiées : on donne
l'année, le mois, le jour, l'heure, la Remarque: JavaScript compte les mois de 0 à
minute, la seconde et la milliseconde 11.
(dans cet ordre) Janvier est 0. Décembre est 11.
crée un nouvel objet de date à partir d = new Date("October 13, 2014
d'une chaîne de date 11:13:00");
IV.4.2. Méthode :
Méthode Description
Exemple
convertit une date dans un format plus d = new Date();
toDateString() lisible document.write(d.toDateString());
renvoie la date en millisecondes depuis d = new Date();
getTime() 1970. utilisé pour calculer la différence document.write(d.getTime());
entre deux dates.
renvoie l'année d'une date sous forme d = new Date();
getFullYear() de nombre à quatre chiffres document.write(d.getFullYear());
renvoie le mois d'une date sous forme d = new Date();
getMonth() de nombre (0-11) document.write(d.getMonth());
renvoie le jour d'une date sous forme de d = new Date();
getDate() nombre (1-31) document.write(d.getDate());
renvoie les heures d'une date sous d = new Date();
getHours() forme de nombre (0-23) document.write(d.getHours());
renvoie les minutes d'une date sous d = new Date();
getMinutes() forme de nombre (0-59) document.write(d.getMinutes());
renvoie les secondes d'une date sous d = new Date();
getSeconds() forme de nombre (0-59) document.write(d.getSeconds());
V. Les actions élémentaires simples :
V.1. Les entrées :
les formulaires représentent les entrées en JS
ou
l'instruction prompt("message")
V.2. L’affectation :
= représente le signe de l'affectation
NB : L’opérateur d’affectation se note =. Une variable non initialisée a pour valeur null ou undefined
V.3. Les sorties :
Ecrire dans un élément HTML, en utilisant innerHTML.
Écriture dans la sortie HTML en utilisant document.write().
Ecrire dans une boîte d'alerte, en utilisant window.alert().
VI. Les structures de contrôles conditionnelles :
VI.1. if … else … (si … sinon …):
Forme Syntaxe Exemple
if (condition) if (d.getHours() < 18) {
{ message = "Bonjour";
// traitement si condition est vrai } else {
Simple } message = "Bonsoir";
else }
{ document.write(message);
// traitement si condition est faux
}
if (d.getHours() < 12)
if (condition1) {
{ message = "Bonjour";
// traitement si condition1 est vrai }
}
else if (d.getHours() < 18) {
else if (condition2) {
message = "bon aprés midi";
// traitement si condition2 est vrai
Généralisée } }
else { else
// traitement si condition1 et {
condition2 est fauxi message = "bonsoir";
} }
document.write(message);
VI.2. switch (selon) :
Exemple
Syntaxe
switch (new Date().getDay()) {
case 0:
day = "Dimanche";
break;
case 1:
day = "Lundi";
switch(expression) { break;
case x: case 2:
// code cas expression égal x day = "Mardi";
break; break;
case y: case 3:
// code cas expression égal y day = "Mercredi";
break; break;
default: case 4:
// code si tous les valeurs sont différents de expression day = "Jeudi";
} break;
case 5:
day = "Vendredi";
break;
case 6:
day = "Samedi";
}
document.write(day);
break sortir du switch
VII. Les structures de contrôles itératives :
VII.1. la boucle for :
Exemple
Syntaxe
text = "";
for (initialisation; condition d'arrêt; pas) for (i = 0; i < 5; i++) {
{ // code à exécuter text += "Le nombre est " + i + "<br>";
} }
document.write(text);
VII.1. la boucle Do {…} while :
Exemple
Syntaxe
do { do {
// code à exécuter x=prompt("donner un nombre supérieur ou
} égale à 10")
while (condition de retour à la boucle);
Exemple
Syntaxe
}
while (x< 10);
document.write(x);
VII.1. la boucle while :
Exemple
Syntaxe
i=0;
while (condition) { while(i<10)
// code à exécuter {
} text += "Le nombre est " + i + "<br>";
N'oubliez pas d'augmenter la variable i=i+1;
utilisée dans la condition, sinon la }
boucle ne se terminera jamais ! document.write(text);
VIII. Les modules :
Function non_fonction(paramètres)
Définition {// Code de la fonction}
Une fonction peut ne pas avoir de paramètres
Paramètres En JavaScript, les références d’objet sont des valeurs
Les variables locaux sont précédés par var
Variables Les paramètres sont des variables locaux
nom_fonction(paramètres)
Appel // Renvoie ou pas, une valeur de retour (ayant
un type de retour ou void)
VIII.1. Exemple :
Définition function produit(a, b) {
return a * b;
}
return permet de retourner le résultat de la fonction
Paramètres a et b
Variables function f (a,b) {
var c=10;
d=50;
return a+b ==c+d;
}
document.write(f(5+7),"<br>"),
document.write(c,"<br>");
document.write(d,"<br>");
Appel function produit(a, b) {
return a * b;
}
s=produit(15,23)
IX. Les formulaires :
IX.1. Les zones de texte :
valeur de la zone de
Value texte
IX.2. Les cases à cocher :
cochée/décochée IX.3.
Checked
Les
value valeur de la case
boutons radio :
checked cochée/décochée
valeur du bouton
value radio
IX.4. Les listes :
nomliste.options[x] donne accès à l’élément x de la liste liste
nomliste.options.selectedIndex index de l’élément sélectionné, commence par
0, -1 si aucun option est sélectionné
name
nom de la liste
length
nombre d’entrées dans la liste
value
valeur d’une entrée
text
libellé d’une entrée.
new Option(texte,valeur)
créer une nouvelle option
IX.5. Les boutons :
Évènement de fenêtre <body>
Evènements Description
onhaschange Le script démarre si le document est modifié
onload Le script démarre lorsque le document est chargé
onundo Annulation ou retour en arrière
onunload Script à exécuter lorsque l’utilisateur quitte le document
Évènement de curseur souris
Attribut Description
onclick Le script démarre si on clique sur l’élément
ondblclick Le script démarre si on double-clic sur l’élément
onmousedown Script à exécuter quand un bouton de la souris est pressé
onmousemove Script à exécuter lorsque le curseur de la souris bouge
onmouseout Script à exécuter lorsque le curseur de la souris sort d’un élément
Script à exécuter lorsque le curseur de la souris est au-dessus d’un
onmouseover élément
onmouseup Script à exécuter quand un bouton de la souris est relâché
onmousewheel Script à exécuter lorsqu’on tourne la molette de la souris
Script à exécuter lorsque la barre de défilement d’un élément est en
onscroll cours de défilement
Évènement de formulaire
Attribut Description
Le script démarre lorsque l’élément, le champ du formulaire, perd le
onblur
focus
onchange Script à exécuter lorsqu’un élément est modifié
oncontextmenu Script à exécuter quand un menu contextuel est déclenché
onfocus Script à exécuter quand un élément gagne le focus
onformchange Script à exécuter lorsqu’un formulaire est modifié
onforminput Script à exécuter lors de la saisie d’un formulaire
oninput Script à exécuter lors de la saisie d’un élément
oninvalid Script à exécuter quand un élément n’est pas valide
onselect Script à exécuter quand un élément est sélectionné
onsubmit Script à exécuter lors de la soumission d’un formulaire
Évènement multimédia
Attribut Description
oncanplay Le script démarre lorsque le média commence à jouer
oncanplaythrough Script à exécuter lorsque le média peut être lus jusqu’à la fin
ondurationchange Script à exécuter lorsque la longueur du média est modifiée
onemptied Script à exécuter lorsqu’un élément média devient tout à coup vide
onended Script à exécuter lorsque la lecture du média est finie
Script à exécuter quand une erreur survient lors du chargement d’un
onerror élément
onloadeddata Script à exécuter lorsque les données du média sont chargées
Script à exécuter lorsque la durée ou d’autres données d’un élément média
onloadedmetadata est chargé
Script à exécuter lorsque le navigateur commence à charger un élément
onloadstart média
onpause Script à exécuter lorsqu’un élément média est en pause
onplay Script à exécuter lors de la lecture d’un élément média
onplaying Script à exécuter lorsqu’un élément média a commencé à jouer
onratechange Script à exécuter lorsque les données d’un élément média ont changé
onreadystatechang
e Script à exécuter lorsque l’état « prêt pour la lecture » change
ontimeupdate Script à exécuter lorsque la position de lecture est changée
Script à exécuter lorsque le volume est changé – Marche également
onvolumechange lorsque le volume est réglé sur « muet »
Script à exécuter lorsque les médias ont cessé de jouer, mais doivent
onwaiting New reprendre
Évènement du clavier
Attribut Description
onkeydown Script à exécuter lorsque qu’une touche est pressée
onkeypress Script à exécuter lorsqu’une touche du clavier est enfoncée puis relâchée
onkeyup Script à exécuter lorsqu’une touche est relâchée
