OFPPT - CMC BMK Développement Informatique POLE DIA
M105 : Programmer en JavaScript
PARTIE 2 : Acquérir les fondamentaux de JavaScript
I- Maîtriser la syntaxe JavaScript et ses notions fondamentales
1- Introduction de JavaScript
JS est un langage de scripts incorporé aux balises Html et exécuté par le navigateur;
JS rend les pages HTML plus dynamique et interactif;
JavaScript offre des «gestionnaires d'événement» qui reconnaissent et réagissent aux
demandes du client (mouvements de la souris, clics sur les touches du clavier, etc.)
Utilisations courantes pour JavaScript sont :
la manipulation d'images,
la validation du formulaire,
et les changements dynamiques de contenu.
Intégration de JavaScript dans HTML
JavaScript peut être intégré n’importe où dans le document HTML. Il est aussi possible de
l’utiliser plusieurs fois dans le même document HTML.
Méthode 1: Code JavaScript intégré au document HTML
<script language="JavaScript">
// c’est ici ou on écrit le code JS
</script>
Méthode 2: Code JavaScript externe
<script language="javascript" src="[Link]">
</script>
Méthode 3: Pseudo-URL
<a href="JavaScript:[Link]('Welcome!');">
Cliquez ici
</a>
2- Notions de variables et de données
a) Identifiants JavaScript
Un identifiant en JS correspond au nom d’une variable. Ce nom doit être unique.
Ces identifiants peuvent être des noms courts (comme x et y) ou bien des noms plus
descriptifs (comme note, total, NomComplet, etc.).
Les règles à respecter lors du choix des noms de variables sont :
Un identifiant peut contenir des lettres, des chiffres, des traits de soulignement (_)
et des signes dollar ($).
Un identifiant peut commencer par une lettre, un signe $ ou bien un signe _
JS est sensible à la casse (y et Y sont considérés comme des variables différentes).
Un identifiant ne peut pas être un mot réservé du langage.
Prof. BOULMANI Hicham Page 1
OFPPT - CMC BMK Développement Informatique POLE DIA
M105 : Programmer en JavaScript
b) Types de données JavaScript
En JavaScript, les types de données sont divisés en types primitifs et types objets.
Remarque :
Pour vérifier le type d’une variable on utilise la méthode typeof (nomVariable)
Types Primitifs : sont des types immuables et stockés directement en mémoire :
(1) string : Chaîne de caractères, doit être entre guillemets (simple ou double)
(2) number : Nombres entiers et flottants
(3) bigInt : Grands nombres entiers (marqué par n)
(4) boolean : Valeurs logiques ( true ou false )
(5) undefined : Une variable déclarée mais non assignée (n’a pas de valeur)
Exemples
typeof "Hassan" // "string"
typeof 3.14 // "number"
typeof 315287954n // "bigInt"
typeof NaN // "number"
typeof true // "boolean"
typeof x // "undefined" (si x n’a pas de valeur)
Types Objets
Les objets sont des structures plus complexes, stockées par référence.
(1) Object : Collection de paires clé-valeur, Tableau (Array), Date et null
(2) Function : Fonction
Exemples
typeof {name:'Hassan', age:34} // Retourne "object"
typeof [1,2,3,4] // Retourne "object"
typeof null // Retourne "object"
typeof function myFunc(){} // Retourne "function"
Attention : JavaScript est un langage dynamiquement typé, donc une variable peut
changer de type à tout moment.
x = 10; // x est un nombre
x = "Hello"; // Maintenant, x est une chaîne.
Prof. BOULMANI Hicham Page 2
OFPPT - CMC BMK Développement Informatique POLE DIA
M105 : Programmer en JavaScript
c) Déclaration d’une variable
On peut déclarer une variable JS en utilisant les mots-clés suivants: (var, let, const)
var (ancienne façon) : Peut être redéclarée, sans erreur, dans le même bloc { }.
{ var x = 10;
var x = 15; }
let (modern JavaScript) : Ne peut pas être redéclarée dans le même bloc.
{ let y = 20;
let y = 10; } // Erreur
const : (constante) permet de déclarer une variable qui doit avoir une valeur initiale à
la déclaration et ne peut pas être réassignée ni redéclarée.
const PI = 3.14159;
PI = 3.14; // Erreur
const PI; // Erreur
Remarque : Déclaration de plusieurs variables:
var nb1 = 2, nom = "Ahmed";
d) Portée des variables (variable scope)
Portée du bloc : (Block scope)
En utilisant le mot clé let, les variables déclarées à l'intérieur d'un bloc { } ne sont pas
accessibles depuis l'extérieur du bloc:
{let x = 2;}
// x n'est pas accessible ici
En utilisant le mot clé var, les variables déclarées à l'intérieur d'un bloc { } sont
accessibles depuis l'extérieur du bloc.
{var x = 2;}
// x est accessible ici
Portée locale : (Function scope)
Les variables déclarées dans une fonction JavaScript deviennent LOCALES à la fonction.
function Test() {
var x = "test1";
let y = "test2";
const z = "test3";
}
// x, y et z ne sont pas accessibles en dehors de la
function
Portée globale : (Global scope)
Une variable déclarée en dehors d'une fonction, devient GLOBAL. Les variables
globales sont accessibles de n'importe où dans un programme JavaScript.
Prof. BOULMANI Hicham Page 3
OFPPT - CMC BMK Développement Informatique POLE DIA
M105 : Programmer en JavaScript
3- Conversion de type en JavaScript
On peut convertir le type des variables JavaScript:
Utilisant les fonctions JavaScript proposées;
Automatiquement par JavaScript lui-même (par affectation de nouvelle valeur).
a) Conversion de chaînes en nombres
méthode Number()
Chaîne contenant un nombre (comme "71" ou "3.4") sont converties en nombres
Les chaînes vides sont converties en 0
Tout le reste est converti en NaN (Not a Number)
Exemples :
Number("3.4") // retourne 3.4
Number("71") // retourne 71
Number(" ") ou Number("") // retourne 0
Number("99 88") ou Number("18k") // retourne NaN
méthode parseInt() (partie entière) ou parseFloat()
Exemples :
parseInt("3.4") // retourne 3
parseFloat("3.4") // retourne 3.4
parseInt (" ") ou parseInt ("") // retourne NaN
parseInt("99 88") ou parseInt("99k") // retourne 99
parseInt("k99") // retourne NaN
L'opérateur unaire + peut être utilisé pour convertir une variable en nombre:
let y = +"5"; // y est un nombre de valeur 5
let x = +"5p"; // x est un nombre de valeur NaN
N.B : Si la variable de type chaine ne peut pas être convertie, elle prend la valeur NaN.
b) Conversion de nombres en chaînes
La méthode String() est utilisée pour convertir des nombres en chaînes de caractères. Elle
s’applique sur tout type de nombres, les littéraux, et les expressions:
a = String(x) // a est de type string
b = String(123) // b est de type string
c = String(100 + 23) // c est de type string : ‘123’
La méthode toString() est équivalente:
a = [Link]()
b = (123).toString()
c = (100 + 23).toString()
Prof. BOULMANI Hicham Page 4
OFPPT - CMC BMK Développement Informatique POLE DIA
M105 : Programmer en JavaScript
c) Conversion des dates en nombres
La méthode Number() peut être utilisée pour convertir des dates en nombres:
Le résultat est le nombre de millisecondes depuis le 1er janvier 1970
d = new Date(); // retourne object
Number(d) // retourne number
La méthode de date getTime() est équivalente:
d = new Date(); // retourne Ojectf
[Link](); // retourne Number
d) Conversion de dates en chaînes
La méthode String() permet de convertir des dates en chaînes de caractères:
String(Date())
// retourne une chaine représentant la date actuelle
complète
La méthode de date toString() est équivalente:
Date().toString()
4- Expressions et opérateurs
a) Opérateurs arithmétiques JavaScript
Les opérateurs arithmétiques sont utilisés pour effectuer des opérations arithmétiques
sur des nombres :
Opérateur Signification
+ Addition
- Soustraction
* Multiplication
** Puissance
/ Division
% Modulo (Reste de la division)
var++ Post-incrémentation (Retourne d'abord la valeur, puis l'augmente de 1)
var-- Post-décrémentation (Retourne d'abord la valeur, puis la diminue de 1)
++var Pré-incrémentation (Augmente la valeur de 1 avant de la retourner)
--var Pré-décrémentation (Diminue la valeur de 1 avant de la retourner)
Prof. BOULMANI Hicham Page 5