JavaScript
1- Définition
JavaScript est un langage utilisé pour rendre les pages web interactives il permet d’ajouter
fonctionnalités dynamiques comme :
• Mise à jour de contenu d’une page
• Valider des formulaires avant envoi
2- Intégration de JavaScript
Méthode 1 : interne (dans <head> ou <body> )
Méthode 2 : externe (dans <head> )
3- Variables et Constantes
Constante :
STI Khaireddine Ihrissane
Constante (valeur non modifiable) déclare avec le mot-clé const
Exemple
Variable :
Une variable est un espace de stockage qui permet de stocker une valeur.
Les variables sont déclarées avec le mot clé let ou var sans spécifier explicitement
var : la variable est visible dans toute la fonction où elle est déclarée.
Même si on la met dans un bloc (if, for…), elle reste accessible en dehors de ce bloc.
let : la variable est accessible uniquement dans le bloc ({}) où elle est déclarée.
Exemple
4- Les opérateurs
Les opérateurs Logiques
&& : Et
|| : Où
! : Non
Les opérateurs de comparaison
= = : égalité
! = : différent
> : supérieur
< : inférieur
>= : supérieur ou égale
<= : inférieur ou égale
Les opérateurs Arithmétiques
+ : addition
STI Khaireddine Ihrissane
- : soustraction
/ : division
* : multiplication
% : modulo
++ : pré-incrémentation
- - : pré-décrémentation
5- Types de Données
Types primitifs : string, number, boolean, null, undefined
Types Complexes : object, array, function
6- Les Entrées et Sorties
Les Entrées
prompt : En JavaScript, prompt() est une fonction intégrée qui affiche une petite fenêtre
demandant à l’utilisateur de saisir une valeur.
STI Khaireddine Ihrissane
Les Sorties
alert : En JavaScript, alert() est une fonction intégrée qui affiche une petite fenêtre
contenant un message et un bouton OK.
innerHTML : En JavaScript, innerHTML est une propriété qui permet de lire où
modifier le contenu HTML d’un élément dans une page web.
[Link] : En JavaScript, [Link]() est une méthode qui permet
d’écrire directement du texte ou du HTML dans la page web pendant son chargement.
STI Khaireddine Ihrissane
7- Les Structures Conditionnelles
L’instruction if .. else
Exemple
L’instruction if .. else if .. else
Exemple
STI Khaireddine Ihrissane
L’instruction switch
Exemple
STI Khaireddine Ihrissane
8- Les Boucles
Boucle for
Exemple
Boucle while
Exemple
Boucle do .. while
Exemple
STI Khaireddine Ihrissane
9- Les Fonctions
En JavaScript, une fonction est un bloc de code réutilisable qui peut prendre des paramètres
et retourner une valeur.
Exemple
10- Fonction et les Méthodes de JavaScript
Number(ch) : Convertir une chaine en Nombre
parseInt(ch,b) : Convertir une chaine présentant dans une base b en entier
parseFloat(ch) : Convertir une chaine en réel
isNaN(valeur) : vérifier si une valeur n’est pas un Nombre
Méthode de l’objet Math
abs(n) : Retourner la valeur absolue d’un Nombre
sqrt(n) : Retourner la racine carrée d’un Nombre
floor(n) : Retourner le plus grand entier inférieur ou égale à la valeur donnée
round(n) : Retourner l’entier plus proche de n
random() : Retourner un nombre aléatoire entre [0,1[
Méthode sur les chaines
[Link](i) : Retourner un caractère selon l’indice i
[Link]() : Retourner la longueur d’une chaine
[Link]() : Convertir tous les caractéres de ch en Minuscule
STI Khaireddine Ihrissane
[Link]() : Convertir tous les caractéres de ch en Majuscule
[Link]() : Supprimer les espaces existent au début et à la fin de ch
[Link](d,f) : Retourner une sous_chaine d’une ch à partir de l’indice d jusqu’à l’indice
f (f exclu)
[Link](ch2,p) : Retourner la position de 1er occurrence de ch2 dans ch1 à partir la
position p sinon -1
[Link](ch2,p) : Retourner la position de la dernière occurrence de ch2 dans ch1
jusqu’à la position p sinon -1
[Link](c1..cn) :Retourner une chaine à partir d’un ou plusieurs code ASCII
[Link](p) :Retourner code ASCII d’un caractère de position p
Exercice d’application : Mini Captcha
Créer un formulaire contenant les champs suivants :
• Nom : champ texte (obligatoire).
• Email : champ email (obligatoire, avec contrôle de validité).
• Captcha généré : zone d’affichage en lecture seule.
• Saisie Captcha : champ dans lequel l’utilisateur doit recopier le code affiché.
Boutons à prévoir :
• Générer : permet de créer ou régénérer un code aléatoire.
• Valider : permet de soumettre le formulaire et vérifier les conditions
Validation et contrôles :
• Vérifier que tous les champs obligatoires sont remplis.
• Vérifier que l’email est valide.
• Comparer la saisie utilisateur avec le code captcha généré.
• Afficher un message de succès si toutes les conditions sont respectées.
• Sinon, afficher un message d’erreur explicite (ex : "Captcha incorrect" ou "Veuillez
remplir tous les champs").
STI Khaireddine Ihrissane
STI Khaireddine Ihrissane
