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.
