ROYAUME DU MAROC
مكتب التكوين المهني وإنعاش الشغل
office de la formation professionnelle et de la promotion du travail
ISMONTIC TANGER
MODULE 105: Programmation JAVACRIPT
VARIBALES , LES OPERATEURS ET LES
STRUCTURES DE CONTROLE
ADDARRAZI ILHAM
2023-2024
Introduction
Tout d'abord, il faut savoir qu'absolument tous les sites qui tournent sur
l’internet ont une base HTML et CSS.
Il s'agit d'un standard qui n'a pas de concurrent.
Ce qui veux dire que si vous voulez coder un site internet, il faudra
obligatoirement passer par du HTML et du CSS.
Définition
Le Javascript est un langage informatique qui est utilisé sur de très nombreux
sites web. C’est un code qui est exécuté au sein du navigateur du client, en
mode local.
Son fonctionnement n’implique pas de serveur web. Il s’active donc sur le
poste client ou sur l’ordinateur de l’utilisateur.
Créé en 1995 par Brendan Eich, il garantit des animations et des effets
visuels sans aucune recharge de la page. Il propose des techniques
d’ergonomie susceptibles d’optimiser l’expérience des internaute
Utiliser JavaScript au sein d'une page
web
Dans un navigateur, JavaScript ne fait rien « tout seul ». Il a besoin d'être
lancé depuis les pages web HTML.
Pour appeler du code JavaScript depuis un document HTML, il faut
l'élément <script>. Il y a deux méthodes pour utiliser script :
une qui sert lorsqu'on intègre directement le code du script dans la page
web.
Code JS intégré au document html
<script language="JavaScript">
/* ou // code js*/
</script>
une qui sert lorsqu'on souhaite utiliser un script contenu dans un fichier
tiers.
Code JS externe
<script language="javascript" src="[Link]"> </script >
Instructions et blocs d'instructions
Les blocs d'instructions JavaScript sont constitués d'instructions placées entre
une accolade ouvrante ( { ) et une accolade fermante ( } ).
Un bloc d'instructions est obligatoirement introduit par ces déclarations (les
accolades sont nécessaires même pour une seule instruction) :
une déclaration de fonction
les déclarations try, catch et finally
un branchement conditionnel (if et else)
une déclaration de boucle (for, while, do)
Etc.
Chaque instruction est impérativement suivie d'un point-virgule (;).
Types et variables
Une variable est un conteneur servant à stocker des informations de manière
temporaire, comme une chaine de caractères (un texte) ou un nombre par
exemple.
Le propre d’une variable est de pouvoir varier, c’est-à-dire de pouvoir stocker
différentes valeurs au fil du temps et c’est cette particularité qui les rend si
utiles.
1. Identificateur
La programmation JavaScript, comme tous les langages informatiques,
demande au développeur de définir des identificateurs, pour nommer une
variable.
Les identificateurs comportent des caractères alphanumériques et le tiret
soulignant (_).
Ils ne peuvent commencer par un chiffre, et les majuscules comptent.
Types et variables
2. Déclaration:
JavaScript est un langage non typé : le type d’une variable est défini au
moment de l’exécution.
JavaScript autorise la manipulation de types classiques : booléens, entiers,
réels, caractères et chaîne de caractères et tableaux. Cela dit les types ne sont
pas déclarés, uniquement les variables.
Les déclarations:
var : utilisé pour déclarer une variable globale (function scope)
let : utilisé pour déclarer une variable dont la portée est limitée à un
bloc (block scope)
const : permet de déclarer une variable qui doit avoir une valeur
initiale et ne peut pas être réassignée.
Types et variables
2. Déclaration:
Il existe 2 types de déclarations:
Déclaration explicite :
var nom_variable = new Type de la variable;
var nom_variable;
var Numero = 1 ; var Prenom = "Abdelilah" ;
Déclaration implicite :
Numéro = 1 ; Prénom = "Rachid" ;
Types et variables
3. Types:
JavaScript est un langage dont le typage est faible et dynamique. Cela signifie
qu'il n'est pas nécessaire de déclarer le type d'une variable avant de l'utiliser.
Le type de la variable sera automatiquement déterminé lorsque le programme
sera exécuté. Cela signifie également que la même variable pourra avoir
différents types au cours de son existence.
Le dernier standard ECMAScript définit 8 types de données :
Sept types de données primitifs:
o Booléen: Boolean
o Rien: Null
o pas défini: Undefined
o Nombre : Number
o BigInt (proposition pour ES2020)
o Chaîne de caractères : String
o Symbole (type introduit avec ECMAScript 6): Symbol
Objet: Object
Types et variables
Une variable doit être déclarée avant d’ être utilisée.
4. Affectation:
Un opérateur d'affectation assigne une valeur à son opérande gauche, valeur
basée sur celle de l'opérande droit. L'opérateur d'affectation simple est le
signe égal (=), il assigne la valeur de l'opérande droit à l'opérande gauche.
Une variable non initialisée a pour valeur NULL ou UNDEFINED.
Exemple:
var test=new Boolean(true); var nombreReel = 3.14; //un nombre réel
test=new Boolean(1); var variable = 7 ;
var test = true;
var chaine = "Bonjour"; //une chaine de var texte = "Mon chiffre préféré est le " ;
caractères
var entier = 60; //un entier
var variable3 = 2, variable4 = "mon texte
d’initialisation";
Types et variables
5. Affichage des variables:
Le langage JavaScript permet d'inclure des expressions dans une chaîne de
caractères lorsque cette chaîne est délimitée par une paire d'accents graves
seuls ou backticks ( `...` ). Une telle chaîne est appelée un modèle de
libellé ou template literal. A l'intérieur, les expressions sont indiquées par la
syntaxe ${expression}.
Exemple 1 Exemple 2 Exemple 3
const country = "Maroc"; const x = 3, y = 7; const prenom =
prompt("Entrez votre
[Link](`Je vis au $ prénom :");
{country}`); [Link](x+ '+'+ y+ '='+
(x+y) ); alert(`Bonjour, $
[Link]("je vis au" + {prenom}`);
country) ; [Link](`${x} + ${y} = $
{x + y}`);
// "3 + 7 = 10"
Les opérateurs
Les opérateurs arithmétiques: + - * / % =
Les opérateurs de comparaison: = >= <= > > != ===
Les opérateurs d’affectation: = += -= *= /=
Les opérateurs logiques: && ||
Les opérateurs d’incrémentation / décrémentation: ++ --
Les opérateurs
Exercice d’application 1:
Écrire un programme qui demande à l'utilisateur de saisir le longueur et largeur
d’un rectangle et calculer sa surface et son périmètre.
Exercice d’application 2:
Écrire un programme qui demande à l'utilisateur de taper 5 entiers et qui affiche
leur moyenne. Le programme ne devra utiliser que 2 variables.
Exercice d’application 3:
Ecrire un programme en Javascript qui demande à l'utilisateur de saisir deux
nombres a et b et qui permet d’échanger les valeurs de ces deux valeurs.
Affichez les valeurs avant et après permutation.
Les structures de contrôles
La commande if: La commande switch:
switch( variable )
if (exp conditionnelle)
{ {
commande(s) case valeur: (...); break;
} default: (...)
La commande if...else :
}
if (exp)
{ commande(s); } L'opérateur ternaire:
else condition ? expressionSiVraie :
{ commande(s); } expressionSiFausse;
Les structures de contrôles
Exercice d’application 1:
Ecrire un script qui demande une année et qui teste si l’année est bissextile ou non.
N.B : Une année est bissextile si elle est divisible par 4 et pas par 100 ou si elle est
divisible par 400.
Exercice d’application 2:
Construire un script permettant de simuler une calculette: le script demande deux
nombres réels et un operateur arithmétique. Et affiche le calcul de l’ opération. Les
opérateurs sont : +,-,* et /
Utiliser SWITCH
Les structures répétitives
La boucle for: La boucle while:
for() while(exp)
{ {
commande(s); commande(s);
} }
La boucle for.. in:
La boucle do .. while:
for(var in Array)
do
{
commande(s); {
} commande(s);
} while(exp);
Les structures répétitives
Exercice d’application 1:
Ecrire un programme qui compte de 5 en 5 de 0 jusqu'à 100 puis affiche la somme
des nombres trouvés
Utiliser for et while.
Exercice d’application 2:
Ecrire un script qui demande un nombre de départ, et qui ensuite affiche les dix
nombres suivants.
Par exemple, si l'utilisateur entre le nombre 17, le script affichera les nombres de
18 à 27.
Les structures répétitives
Exercice d’application 3:
Ecrire un programme qui demande successivement des nombres à l’utilisateur, et
qui calcule le nombre de valeurs saisies. La saisie des nombres s’arrête lorsque
l’utilisateur entre le caractère « n » ou « N ».
