Tour d’horizon rapide de la syntaxe de base en JS

Variables

En JavaScript, vous pouvez déclarer des variables en utilisant les mots-clés var, let, ou const

var x = 5; // Déclaration d'une variable x avec la valeur 5
let y = 'coucou'; // Déclaration d'une variable y avec la valeur 'coucou'
const z = false; // Déclaration d'une constante z avec la valeur false

Types de données

JavaScript prend en charge plusieurs types de données, notamment les nombres, les chaînes de caractères, les booléens, les tableaux et les objets.

let number = 10; // nombre entier
let text = 'Hello'; // nhaîne de caractères
let bool = true; // booléen
let array = [1, 2, 3]; // tableau
let object = { name: 'John', age: 30 }; // objet

Opérateurs

Prise en charge des opérateurs arithmétiques (+, -, *, /), de comparaison (==, !=, <, >, <=, >=), et logiques (&&,

, !),…

let sum = 5 + 3; // Addition
let isEqual = (5 == 3); // Comparaison
let isTrue = true && false; // Opérateur logique ET

Structures de contrôle

Les structures de contrôle comme les conditions if, else if, else, les boucles for, while, do…while, etc.

let x = 10;
if (x > 5) {
   console.log('x est supérieur à 5');
} else {
   console.log('x est inférieur ou égal à 5');
}

let i;
for (i = 0; i < 5; i++) {
   console.log(i);
}

Fonctions

Avec le mot-clé function

function sayCoucou(prenom) {
    console.log('Coucou, ' + prenom + '!');
}
sayHello('Mohamed'); // appel de la fonction

Événements

Vous pouvez réagir aux événements de la page web tels que les clics de souris, les appuis de touche, etc., en définissant des gestionnaires d’événements.

    <button onclick="alert('Hello')">Cliquez ici</button>

Liste des événements les plus couramment utilisés pour interagir avec le HTML

Evénements souris

click : Déclenché lorsqu’un élément est cliqué.
dblclick : Déclenché lorsqu’un élément est double-cliqué.
mouseover : Déclenché lorsqu’un curseur de souris passe au-dessus de l’élément.
mouseout : Déclenché lorsque le curseur de la souris quitte l’élément.
mousedown : Déclenché lorsque le bouton de la souris est enfoncé sur l’élément.
mouseup : Déclenché lorsque le bouton de la souris est relâché sur l’élément.
mousemove : Déclenché lorsque le curseur de la souris est déplacé sur l’élément.

Evénements clavier

keydown : Déclenché lorsque la touche du clavier est enfoncée.
keyup : Déclenché lorsque la touche du clavier est relâchée.
keypress : Déclenché lorsqu’une touche du clavier est enfoncée et relâchée.

Evénements formulaire

submit : Déclenché lorsqu’un formulaire est soumis.
change : Déclenché lorsque la valeur d’un élément de formulaire (input, select, textarea) change.
focus : Déclenché lorsqu’un élément de formulaire reçoit le focus.
blur : Déclenché lorsqu’un élément de formulaire perd le focus.

Evénements avec window

load : Déclenché lorsque la page est entièrement chargée.
resize : Déclenché lorsque la taille de la fenêtre du navigateur est modifiée.
scroll : Déclenché lorsque l’utilisateur fait défiler la page.

hashchange : Déclenché lorsque l’URL de l’ancre (hash) de la page change.
popstate : Déclenché lorsque l’historique de navigation de l’utilisateur change.

Evénements média

play : Déclenché lorsqu’une lecture multimédia commence.
pause : Déclenché lorsqu’une lecture multimédia est mise en pause.
ended : Déclenché lorsque la lecture multimédia est terminée.

Autres événements

error : Déclenché lorsqu’une erreur survient lors du chargement de ressources (images, scripts, etc.).
contextmenu : Déclenché lorsqu’un clic droit est effectué sur un élément.

Cette liste n’est pas exhaustive, à vous d’aller chercher l’information sur le web !

DOM (Document Object Model)

Le DOM représente la structure d’une page HTML sous forme d’arbre d’objets. Avec JS, vous pouvez manipuler le DOM pour modifier le contenu, les styles et les attributs des éléments HTML.

document.getElementById('myElement').innerHTML = 'Nouveau contenu'; // Modifier le contenu d'un élément
document.getElementById('myElement').style.color = 'red'; // Modifier la couleur du style CSS