Scribd
Importer
3 vues65 pages

Cours Javascript Variables

Ce document présente les bases de JavaScript, y compris la syntaxe, la déclaration des variables, et les types d'opérateurs. Il aborde également les méthodes d'affichage des données, la portée des variables, et les types de données primitifs. Enfin, il explique les opérateurs arithmétiques, de comparaison et d'affectation, ainsi que l'utilisation de l'opérateur ternaire.

Transféré par

marwanrh2004
Copyright
© © All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats PDF, TXT ou lisez en ligne sur Scribd
3 vues65 pages

Cours Javascript Variables

Ce document présente les bases de JavaScript, y compris la syntaxe, la déclaration des variables, et les types d'opérateurs. Il aborde également les méthodes d'affichage des données, la portée des variables, et les types de données primitifs. Enfin, il explique les opérateurs arithmétiques, de comparaison et d'affectation, ainsi que l'utilisation de l'opérateur ternaire.

Transféré par

marwanrh2004
Copyright
© © All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats PDF, TXT ou lisez en ligne sur Scribd
Vous êtes sur la page 1/ 65

JavaScript

Syntaxe, Variables et conditionnements

Pr. Ahmed Drissi el maliani

FSR, March 7, 2025 1/65


Plan

Syntaxe

Les Outputs

Les Variables

Opérateurs

Conditions

2/65
Syntaxe

• En HTML, le JavaScript est inséré entre les balises <script> et </script>


• La balise <script> alerte le navigateur de commencer à interpréter tout le texte
entre ces balises comme un code Javascript.
• Les balises <script> peuvent être placées n’importe où dans la page web
• Il est recommandé de les garder dans les balises <head>.

3/65
JS dans le Head

4/65
JS dans le Body

Note:
Placer les scripts à la fin de l’élément <body> améliore la vitesse d’affichage, car
l’interprétation des scripts ralentit l’affichage.

5/65
JS dans un fichier externe

Note:
Les fichiers externes ne peuvent contenir les balises <script>.
6/65
Placement et Organisation des Scripts

Scripts dans le corps de la page


• Un script placé dans le <body> s’exécute pendant le chargement de la page

Scripts dans l’en-tête


• Les scripts dans le <head> se chargent avant l’affichage de la page
• Utile pour les scripts qui doivent être prêts dès le chargement

Fichiers JavaScript Externes (.js)


• Avantages des fichiers externes :
• Réutilisation du script sur plusieurs pages
• Mise à jour centralisée
• Code HTML plus propre et lisible

7/65
Plan

Syntaxe

Les Outputs

Les Variables

Opérateurs

Conditions

8/65
Les Outputs

• L’affichage des données en JavaScript peut se faire par :


• Écriture dans un élément HTML, en utilisant innerHTML.
• Écriture dans la sortie HTML, en utilisant document.write().
• Écriture dans une boîte d’alerte, en utilisant window.alert().
• Écriture dans la console du navigateur, en utilisant console.log().

9/65
InnerHtML

<h1 id="message"></h1>
<script>
document.getElementById("message").innerHTML = "Bonjour !";
</script>

10/65
document.write()

• document.write() est Utilisé principalement à des fins de test.


• Son utilisation après le chargement du document supprimera tout le HTML
existant.
11/65
window.alert()

• Ou seulement avec alert() (sans utiliser "window")


• Bloque l’éxecution.

12/65
console.log()

• Utilisé pour le déboggage.

13/65
Plan

Syntaxe

Les Outputs

Les Variables

Opérateurs

Conditions

14/65
Décalaration des Variables

• Les variables sont des conteneurs pour stocker des valeurs de données.
• Les variables JavaScript peuvent être déclarées de 4 manières :
• Automatiquement
• En utilisant var
• En utilisant let
• En utilisant const

15/65
Déclaration Automatique

• Dans cet exemple, x, y et z ne sont pas déclarées.


• Elles sont automatiquement déclarées lors de leur première utilisation.
x = 5;
y = 6;
z = x + y;
• Une bonne habitude de programmation est de toujours déclarer les variables avant
de les utiliser.
var x = 5;
var y = 6;
var z = x + y;

16/65
Déclaration par var

• Reconnu par tous les navigateurs


• Permet de redeclarer une variable déja déclarée.

17/65
Déclaration par let

• Le mot clé ’let’ introduit en 2015


• Les variables déclarées avec ’let’ ne peuvent pas être redéclarées.

• Différence entre re-déclarer et reinitialiser:


• let x="FSR";
x=5;

18/65
Portée des variables : let et var
• let permet d’utiliser des variables dans une portée de bloc (à l’intérieur de {}) :
• Les variables déclarées à l’intérieur d’un bloc en utilisant let ne peuvent pas être
accessibles à l’extérieur du bloc.
• Elles ont donc une portée de bloc.

• Les variables déclarées à l’intérieur d’un bloc en utilisant var peuvent être
accessibles à l’extérieur du bloc.
• Elles n’ont donc pas de portée de bloc.

19/65
Portée des variables : let et var

• Exemple:

20/65
Déclaration par const

• Le mot clé ’cont’ est introduit en 2015.


• Les variables déclarée avec const doivent être assignées lors de leur déclaration.
• const x = 3;
• Les variables définies avec const ne peuvent pas être redéclarées ou réassignées.
• const x = 3;
• x = 5; //Error
• Les variables définies avec const ont une portée de bloc.

21/65
Exemple mixte

const price1 = 5;
const price2 = 6;
let total = price1 + price2;
• Les deux variables price1 et price2 sont déclarées avec le mot-clé const.
• Ce sont des valeurs constantes et elles ne peuvent pas être modifiées.
• La variable total est déclarée avec le mot-clé let.
• La valeur de total peut être modifiée.

22/65
Quand utiliser var, let ou const ?

1. Déclarez toujours les variables.


2. Utilisez toujours const si la valeur ne doit pas être modifiée.
3. Utilisez toujours const si le type ne doit pas être modifié (Tableaux et Objets).
4. Utilisez let uniquement si vous ne pouvez pas utiliser const.
5. Utilisez var uniquement si vous DEVEZ prendre en charge les anciens navigateurs.

23/65
Identifiants

• Toutes les variables JavaScript doivent être identifiées avec des noms
uniques appelés identifiants.
• Les identifiants peuvent être des noms courts (comme x et y) ou des noms plus
descriptifs (age, sum, totalVolume).
• Règles générales pour construire les identifiants sont :
• Les noms peuvent contenir des lettres, des chiffres, des traits de soulignement et
des signes dollar.
• Les noms doivent commencer par une lettre.
• Les noms peuvent également commencer par $ et _.
• Les noms sont sensibles à la casse (y et Y sont des variables différentes).
• Les mots réservés (comme les mots-clés JavaScript) ne peuvent pas être utilisés
comme noms.

24/65
Le signe dollar $ en JavaScript

• Puisque JavaScript traite le signe dollar comme une lettre, les identifiants
contenant $ sont des noms de variables valides :
let $$$ = 2;
let $myMoney = 5;

25/65
Une déclaration, plusieurs variables

• Vous pouvez déclarer plusieurs variables dans une seule déclaration.


• Commencez la déclaration avec let et séparez les variables par une virgule :

let person = "Karim Chadili", carName = "Volvo", price = 200;

26/65
Valeur = indéfini

• Dans les programmes informatiques, les variables sont souvent déclarées sans
valeur.
• La valeur peut être quelque chose qui doit être calculé, ou quelque chose qui sera
fourni plus tard, comme une entrée utilisateur.
• Une variable déclarée sans valeur aura la valeur undefined.
• La variable carName aura la valeur undefined après l’exécution de cette
déclaration :
let carName;

27/65
Exercice

• Déclarer des variables avec différents types :


• let age;
• const nom = "Alice";
• var score = 0;
• Expliquer pourquoi certaines déclarations fonctionnent ou non :
• age = 25;
• nom = "Bob";
• score = score + 1;

28/65
Exercice

Prédire et expliquer le résultat du code suivant :

let x = 1;
if (true) {
let x = 2;
console.log(’Dans le bloc:’, x);
}
console.log(’Hors du bloc:’, x);

29/65
• Résultat attendu :
• Dans le bloc: 2
• Hors du bloc: 1
• Explication :
• La portée de let est limitée au bloc dans lequel la variable est déclarée.
• La variable x déclarée dans le bloc if masque la variable x.
• Une fois hors du bloc, la variable x est à nouveau accessible.

30/65
Types de Variables

• JavaScript permet de travailler avec les types de données primitifs :


• Nombres
• Chaînes de caractères
• Booléen
• Nul
• Indéfini
• Objet (objet, tableau, date, ...)

31/65
Types de Variables

32/65
Conversion de Types de Données en JavaScript

• JavaScript est un langage à typage dynamique.


• Il n’est pas nécessaire de spécifier le type de données d’une variable lors de sa
déclaration.
• Les types de données sont convertis automatiquement durant l’exécution.

33/65
Exemple de Typage Dynamique

var réponse = 42;


Puis plus tard, la même variable peut contenir une chaîne :
réponse = "Merci pour le dîner...";

34/65
Opérateur + et Conversion Automatique

• Lorsque des expressions impliquent des chaînes et des valeurs numériques avec
l’opérateur +, JavaScript convertit les nombres en chaînes.
Exemples :
• x = "La réponse est " + 42; "La réponse est 42"
• y = 42 + " est la réponse"; "42 est la réponse"

35/65
Opérations Arithmétiques et Conversion

• Si on utilise des opérateurs autres que +, JavaScript ne convertit pas


nécessairement les valeurs numériques en chaînes.
Exemples :
• "37" - 7; 30
• "37" + 7; "377"

36/65
Évaluation des expressions en JavaScript

• JavaScript évalue les expressions de gauche à droite.


• Exemple 1 :
• let x = 16 + 4 + "Volvo";
• Résultat :
• 20Volvo
• Exemple 2:
• let x = "Volvo" + 16 + 4;
• Result: ???

37/65
Conversion de Chaînes en Nombres

• Pour convertir une chaîne en nombre, on utilise des méthodes comme parseInt()
et parseFloat().
• parseInt() est utilisé pour les entiers.
Exemple avec parseInt() :
• parseInt("101", 2); 5 (Conversion binaire en décimal)

38/65
Utilisation de parseFloat()

• parseFloat() est utilisé pour convertir une chaîne en nombre flottant (décimal).
Exemple :
• parseFloat("3.14"); 3.14
• parseFloat("10.99abc"); 10.99

39/65
Les booléens en JavaScript

• Les booléens ne peuvent avoir que deux valeurs : true ou false.


• Exemple :
• let x = 5;
• let y = 5;
• let z = 6;
• (x == y) // Renvoie true
• (x == z) // Renvoie false

40/65
Exercice

• Identifier le type de chaque variable :


• let valeur1 = "123";
• let valeur2 = 123;
• let valeur3 = true;
• let valeur4 = "true";
• Convertir ces valeurs entre différents types.
• Exemple : convertir valeur1 en nombre :
• let nombre1 = parseInt(valeur1);
• let nombre1 = Number(valeur1);

41/65
Exercice

• Manipulation des variables pour créer une phrase:


• Déclarez des variables pour le nom et l’âge :
• let nom = "John";
• let age = 25;
• Utilisez ces variables pour créer une phrase de présentation :
• Stockez le résultat dans une nouvelle variable appelée "presentation".
• Exemple de résultat attendu : "Je m’appelle John et j’ai 25 ans"
• Pour vérifier votre résultat, utilisez console.log(...) :

42/65
Exercice

• let nom = "John";


• let age = 25;
• let presentation = "Je m’appelle " + nom + " et j’ai " + age + " ans";
• console.log(presentation);

43/65
Plan

Syntaxe

Les Outputs

Les Variables

Opérateurs

Conditions

44/65
Types d’opérateurs JavaScript

• Il existe différents types d’opérateurs JavaScript :


• Opérateurs arithmétiques
• Opérateurs d’affectation
• Opérateurs de comparaison
• Opérateurs de chaînes de caractères
• Opérateurs logiques
• Opérateurs binaires

45/65
Opérateurs arithmétiques

Opérateur Description
+ Addition
- Soustraction
* Multiplication
** Exponentiation
/ Division
% Modulus (Reste de la division)
++ Incrémentation
– Décrémentation

46/65
Opérateurs d’affectation en JavaScript

Opérateur Exemple Équivalent à


= x = y x = y
+= x += y x = x + y
-= x -= y x = x - y
*= x *= y x = x * y
/= x /= y x = x / y
%= x %= y x = x % y
**= x **= y x = x ** y

47/65
Opérateurs de comparaison en JavaScript

Opérateur Description
== Égal à
=== Valeur et type égaux
!= Différent de
!== Valeur ou type différents
> Supérieur à
< Inférieur à
>= Supérieur ou égal à
<= Inférieur ou égal à

48/65
Opérateurs de comparaison en JavaScript

Opérateur Description Exemples qui renvoient true


== Égalité (après conversion implicite) 3 == var1, "3" == var1, 3 == ’3’
!= Inégalité (après conversion implicite) var1 != 4, var2 != "3"
=== Égalité stricte (sans conversion) 3 === var1
!== Inégalité stricte (sans conversion) var1 !== "3", 3 !== ’3’
> Supériorité stricte var2 > var1, "12" > 2
>= Supériorité ou égalité var2 >= var1, var1 >= 3
< Infériorité stricte var1 < var2, "2" < 12
<= Infériorité ou égalité var1 <= var2, var2 <= 5
const var1=3;
const var2=4;

49/65
Opérateur ternaire

• Le seul opérateur JavaScript à prendre trois opérandes. Il permet de se résoudre en


une valeur ou en une autre selon une condition donnée:
condition ? val1 : val2;
• Exemple:
• const statut = age >= 18 ? "adulte" : "mineur";
• affecte la valeur "adulte" à la variable statut si age est supérieur ou égal à 18.
Sinon, c’est la valeur "mineur" qui est affectée à statut.

50/65
Comparaison et Concaténation de Chaînes en JavaScript
• Comparaison de chaînes JavaScript
• Tous les opérateurs de comparaison ci-dessus peuvent également être utilisés sur les
chaînes de caractères.
• Notez que les chaînes sont comparées alphabétiquement.
• let text1 = "A";
let text2 = "B";
let result = text1 < text2;
• Addition de chaînes JavaScript
• L’opérateur + peut également être utilisé pour ajouter (concaténer) des chaînes.
• Addition de chaînes et de nombres
• L’addition de deux nombres renverra la somme sous forme de nombre:
5 + 5 = 10.
• L’addition d’un nombre et d’une chaîne renverra la somme sous forme de chaîne
concaténée:
5 + "5" = "55".

51/65
Opérateurs Logiques en JavaScript

Opérateur Description
&& Et logique
|| Ou logique
! Négation logique
• &&: renvoie true si les deux opérandes valent true et false sinon.
• ||: renvoie true si l’un des deux opérandes vaut true et false si les deux valent
false.
• !: Renvoie false si son unique opérande peut être converti en true, renvoie true
sinon.

52/65
Opérateurs binaires

• Les opérateurs binaires travaillent sur des nombres binaires.


• Tout opérande numérique dans l’opération est converti en un nombre binaire.
• Le résultat est reconverti en un nombre JavaScript.
Opérateur Utilisation Description
& a & b ET binaire : Renvoie 1 si les deux bits sont 1.
| a | b OU binaire : Renvoie 1 si au moins un bit est 1.
ˆ a ˆ b OU exclusif (XOR) binaire : Renvoie 1 si les bits sont différents.
˜ ã NON binaire : Inverse les bits de l’opérande.

53/65
Opérateurs binaires

Expression Résultat Description binaire


15 & 9 9 1111 & 1001 = 1001
15 | 9 15 1111 | 1001 = 1111
15 ˆ 9 6 1111 ˆ 1001 = 0110
1̃5 -16 0̃000 0000 ... 0000 1111 = 1111 1111 ... 1111 0000
9̃ -10 0̃000 0000 ... 0000 1001 = 1111 1111 ... 1111 0110

54/65
Exercices

• Prédire les résultats des comparaisons suivantes :


• console.log(5 == "5");
• console.log(5 === "5");
• console.log(1 == true);
• console.log(1 === true);

55/65
• Prédire les résultats des comparaisons suivantes :
• console.log(5 == "5"); // true
• console.log(5 === "5"); // false
• console.log(1 == true); // true
• console.log(1 === true); // false

56/65
Exercice

• Ecrire les opérations suivantes :


• Déclaration des variables :
• let a = 10;
• let b = 3;
• Addition :
• Soustraction :
• Multiplication :
• Division :
• Modulo (reste de la division) :

57/65
Exercice

• Déclaration des variables :


• let a = 10;
• let b = 3;
• Addition :
• let addition = a + b;
• Soustraction :
• let soustraction = a - b;
• Multiplication :
• let multiplication = a * b;
• Division :
• let division = a / b;
• Modulo (reste de la division) :
• let modulo = a % b;

58/65
Plan

Syntaxe

Les Outputs

Les Variables

Opérateurs

Conditions

59/65
Instructions Conditionnelles en JavaScript

• JavaScript, propose les instructions conditionnelles suivantes :


• Utilisez if pour spécifier un bloc de code à exécuter, si une condition spécifiée est
vraie.
• Utilisez else pour spécifier un bloc de code à exécuter, si la même condition est
fausse.
• Utilisez else if pour spécifier une nouvelle condition à tester, si la première
condition est fausse.
• Utilisez switch pour spécifier plusieurs blocs de code alternatifs à exécuter.

60/65
L’instruction if

• Utilisez l’instruction if pour spécifier un bloc de code JavaScript à exécuter si une


condition est vraie.

61/65
L’instruction esle

• Utilisez l’instruction else pour spécifier un bloc de code JavaScript à exécuter si


la condition est fausse.

62/65
L’instruction else if

• Utilisez l’instruction else if pour spécifier une nouvelle condition si la première


condition est fausse.

63/65
L’instruction switch en JavaScript
• Utilisez l’instruction switch pour sélectionner l’un des nombreux blocs de code à
exécuter.

• Fonctionnement :
• L’expression switch est évaluée une seule fois.
• La valeur de l’expression est comparée aux valeurs de chaque case.
• S’il y a une correspondance, le bloc de code associé est exécuté.
• S’il n’y a pas de correspondance, le bloc de code default est exécuté.
64/65
Le mot-clé break en JavaScript

• Lorsque JavaScript atteint un mot-clé break, il sort du bloc switch.


• Cela arrêtera l’exécution à l’intérieur du bloc switch.
• Il n’est pas nécessaire d’interrompre le dernier cas dans un bloc switch. Le bloc se
termine de toute façon.

65/65

Vous aimerez peut-être aussi