Exercices JS
Learn Javascript in five minutes
0.1 Fonctions
- Créer une function somme permettant de calculer la somme de 2 nombres
- Créer une fonction max permettant de calculer le maximum de 2 nombres
- Tester l'appel de ces fonctions en passant des Strings en paramètre
- Créer une seconde version de ces fonctions prenant un nombre d'arguments variable
0.2 Dom et styles
Créer une page de test permettant d'affecter un style CSS (saisi par l'utilisateur dans une zone de texte) à des éléments DOM de la page, sélectionnés par leur sélecteur (saisi également par l'utilisateur).
0.3 Compteur de clicks
Compter les clicks sur un bouton, et afficher le résultat (du nombre de clicks dans un élément div de la page).
0.4 Dom, styles, events
A partir de l'exemple précédent, associer chaque style et chaque sélecteur à un event particulier (fourni dans une liste déroulante). L'application du style sur le sélecteur ne sera déclenchée que sur l'event sélectionné.
0.5 Fonctions liées aux strings
- Créer une zone de texte de type textarea.
- Sur changement dans cette zone (frappe de l'utilisateur, copier/coller…) afficher le nombre de caractères saisis, le nombre de mots, le nombre de phrases (le point étant la fin de la phrase).
- Dans le cadre de cette application, créer une fonction correctement définie pour chaque statistique.
0.6 Fonctions liées aux tableaux
Diaporama/carousel
- Stocker une liste de nom de fichiers d'images dans un tableau.
- Créer une fonction permettant de changer l'image active dans un sens (vers la gauche) et dans l'autre (vers la droite)
- Afficher l'image active, et ajouter des boutons pour le défilement
- Ajouter la possibilité d'un défilement automatique sur timer.
- Ajouter des transitions sur le changement d'image
0.7 Todo list
- Initialiser un tableau permettant de stocker des Strings.
- Créer une fonction permettant d'ajouter une chaîne dans le tableau.
- Créer une fonction permettant de modifier l'élément à une position donnée.
- Créer une fonction permettant de supprimer une chaîne du tableau par son indice.
- Interfacer la liste :
- Ajouter une zone de texte permettant d'ajouter ou de modifier un élément de la liste.
- Afficher les éléments dans une liste HTML, chaque élément doit pouvoir être modifié ou supprimé.
0.8 Synthèse
Implémenter un jeu de master-mind :
Partie fonctionnelle
- Identifier les fonctionnalités du jeu (cas d'utilisation)
- Faire un descriptif textuel de ces cas d'utilisation
Partie Métier
- Déterminer les variables à utiliser pour la mémorisation du jeu
- Identifier les fonctions à créer
Partie Technique + interface
- Trouver un système pour permettre le choix de couleurs et le positionnement des pions
- Interfacer le jeu