1.
Premiers pas en JavaScript
Objectif : Découvrir les bases de JavaScript (variables, types de données,
opérateurs, alertes et [Link]).
Énoncé :
1. Crée un fichier [Link] avec une structure de base.
2. Ajoute un fichier [Link] et lie-le au fichier HTML.
3. Dans [Link], écris un script qui :
o Déclare une variable nom contenant ton prénom.
o Déclare une variable age et assigne-lui ton âge.
o Affiche ces informations dans la console avec [Link]().
o Affiche une alerte qui dit : "Bonjour, [nom] ! Tu as [âge] ans."
2. Interactions avec l’utilisateur
Objectif : Manipuler prompt(), alert() et les conversions de types.
Énoncé :
1. Demande à l’utilisateur son prénom avec prompt().
2. Stocke la réponse dans une variable et affiche un message de bienvenue sous la forme
: "Bienvenue, [prénom] !".
3. Demande ensuite son année de naissance et calcule son âge (en supposant que nous
sommes en 2025).
4. Affiche son âge dans une alerte sous la forme : "Tu as [âge] ans.".
3. Conditions et boucles
Objectif : Utiliser if, else, switch, et les boucles (for, while).
Énoncé :
1. Demande à l’utilisateur un nombre et stocke-le dans une variable.
2. Vérifie si ce nombre est pair ou impair et affiche le résultat dans la console.
3. Affiche les 10 premiers multiples de ce nombre avec une boucle for.
4. Implémente un petit jeu où l’utilisateur doit deviner un nombre entre 1 et 10. Il peut
entrer plusieurs valeurs jusqu’à trouver la bonne (utiliser while).
4. Fonctions et tableaux
Objectif : Comprendre les fonctions et la manipulation des tableaux.
Énoncé :
1. Crée une fonction somme(a, b) qui retourne la somme de deux nombres.
2. Crée un tableau contenant 5 nombres et affiche leur somme en utilisant la fonction
somme().
3. Ajoute une fonction qui cherche le plus grand nombre dans ce tableau.
5. Manipulation du DOM
Objectif : Modifier le contenu HTML et réagir aux événements.
Énoncé :
1. Crée un fichier [Link] avec un bouton <button id="btn">Clique-
moi</button>.
2. Dans [Link], ajoute un gestionnaire d’événement pour afficher une alerte quand
on clique sur le bouton.
3. Ajoute un <p id="texte">Texte initial</p> et fais en sorte que le texte change
quand on clique sur le bouton.
6. Ajouter des interactions dynamiques à votre portfolio
Ajouter les interactions suivantes:
1. Effet de survol sur les boutons des projets : Change la couleur au survol.
2. Effet de transition sur l’apparition des sections : Anime les sections lors du
défilement.
3. Bouton de retour en haut : Un bouton apparaît lorsque l’utilisateur fait défiler la
page.