Javascript : Les bases
Retrouve ici les principales propriétés CSS. Clique sur le nom de la propriété en orange pour ouvrir la documentation officielle de celle-ci, si tu veux encore plus d’exemples et d’attributs possibles à lui définir.
Dans cette page tu trouveras :
Les variables
En JavaScript, une variable doit être précédé d’un mot clés de déclaration. Il va préciser le type de variable que l’on souhaite programmer, avec essentiellement une information importante : savoir si la valeur de la variable sera modifiable ou non.
Il existe 3 mots-clés de déclaration en javascript : var, let et const.
var
❌ On n’utilisera pas var dans ce cours.
Pourquoi ? C’est l’ancienne façon de faire. Elle fonctionne encore, mais elle a des comportements bizarres qui peuvent poser des problèmes. Aujourd’hui, on utilise plutôt let et const, qui sont plus claires et plus sûres.
On en parle ici car vous pouvez encore la trouver dans des codes sur internet, mais voyons là comme obsolètes.
let & const
let est une variable qu’on peut modifier. On l’utilise quand on pense que la valeur va changer (ex : un score, une réponse, un état).
const est une variable qui ne changera pas (const = constante). On l’ utilise quand on est sûr que la valeur ne bougera pas.
Sélectionner des éléments
Pour agir sur une balise HTML il faut d’abord la cibler, et la sélectionner.
Pour cela, 2 méthodes utiles :
- getElementById : à utiliser pour donner l’identité d’un seul élément
- querySelector : à utiliser pour donner un habillage CSS (classe, balise, id)
Changer le contenu HTML ou le style
Le javascript agit directement sur l’HTML et le CSS. En conséquence, on peut modifier directement via le javascript, le contenu d’une balise HTML et d’une class CSS.
- innerText : change le texte uniquement
- innerHTML : change le texte + peut contenir des balises HTML
- style. : change le style CSS en JS
Les évènements
En JavaScript, un événement est quelque chose qui se passe dans la page :
- Un utilisateur clique sur un bouton
- Il passe la souris sur un élément
- Il tape sur le clavier
- Il fait défiler la page, redimensionne la fenêtre, etc.
JavaScript permet de réagir à ces événements automatiquement, en exécutant du code.
Pour cela, on utilise un écouteur d’évènement (ou event listener). C’est un petit programme qui « écoute » un élément de ta page web pour détecter quand un événement se produit (clic, survol, frappe clavier, etc.).
Cela revient à dire à ton programme : « Quand quelqu’un fait ceci → alors fais cela »
Et on utilise cette fonction :
Exemples d’évènements utiles
click : quand on clique sur un élément
Utile pour déclencher une action quand l’utilisateur appuie sur un bouton par exemple.
mouseover : quand la souris passe au-dessus d’un élément
Utile pour faire apparaître un effet visuel (changer de couleur, montrer un indice…).
keydown : quand une touche est pressée
Utile pour les jeux, les raccourcis clavier, les formulaires…
Liste d’effets visuels fun
Voici quelques exemples d’effets visuels que tu vas pouvoir tester et programmer sur tes pages HTML/CSS !
Changer la couleur de fond aléatoirement
Très visuel et fun, ça montre qu’on peut modifier le style de la page dynamiquement.
On génère une couleur aléatoire et on l’applique avec :
document.body.style.backgroundColor
Afficher une image différente à chaque clic
Changer une image rend l’interaction amusante. Parfait pour créer un diaporama, un jeu, ou une galerie.
On a une liste d’images, et on change la source (src) de l’image affichée à chaque clic.
Effet Machine à écrire (lettre par lettre)
Cet effet donne l’impression qu’un texte est tapé en direct, comme une machine à écrire. C’est parfait pour attirer l’attention sur une phrase ou un message.
On affiche une lettre à la fois, avec un petit délai entre chaque, grâce à setTimeout ou setInterval.
Animation CSS déclenchée en JS
Permet d’ajouter des effets visuels doux (zoom, rotation, fade…) en ajoutant une classe CSS depuis JavaScript.
On crée une animation CSS et on l’applique via JS avec classList.add
Créer dynamiquement plusieurs cases
On peut générer du contenu automatiquement avec une boucle. Parfait pour faire des grilles, des quiz, ou des pixels colorés.
On utilise document.createElement dans une boucle for pour créer et ajouter des éléments à la page.
Faire grandir un élément au clic
Effet visuel sympa et concret : l’élément grossit à chaque clic. Idéal pour illustrer les styles dynamiques et les valeurs numériques.
On utilise style.transform = scale(…) et on augmente progressivement le facteur de zoom.
