JS_exercices_WCS_Bootcamp
Basic JS practice, in 🇫🇷 (sometimes in 🇬🇧 )
Thanks to NideXTC
Last update: 20181212
Recap
Les fonctions : setInterval(), clearInterval(), setTimeout(), clearTimeout()
Les tableaux : sort(), for, for each()
Les fonctions mathématiques : Math.min(), Math.max(), Math.random(), Math.PI, Math.round(), Math.ceiling(), Math.floor(), Math.pow(), Math.sign(), Math.trunc()
Les regexp : test(), search(), match()
Les nombres entiers : parseInt(), parseFloat(), Number(), typeof
Les chaînes de caractères : toString(), concat()
Les dates : date, getHours(), getMinutes(), toLocaleTimeString(), toLocaleDateString()
Les objets : JSON, JSON.parse(), JSON.stringify()
+ Liens utiles JS
1. Les fonctions
Exercice 1.1
Faire une fonction show qui affichera en console le texte passé en paramètre.
Exemple : show('coucou');
Exercice 1.2
Nous voulons stocker notre fonction faite dans l’exercice précédent dans une variable.
Utilisez cette fonction et affichez le résultat en console.
Exercice 1.3 (setInterval() 🇬🇧 )
Écrire un script qui affiche “coucou” en console toutes les secondes.
MDN setInterval()
MDN clearInterval()
Exercice 1.4
Écrire un script qui affiche “coucou” en console toutes les secondes et s’arrête après le 3e passage.
Exercice 1.5 (setTimeout() 🇬🇧 )
Écrire un script qui affiche “coucou” en console au bout de 2 secondes.
MDN setTimeout()
MDN clearTimeout()
2. Les tableaux
Exercice 2.1
Nous avons les valeurs 4,3,5,8.
Mettre ces valeurs dans un tableau et ressortir en console : toutes les valeurs, la première valeur, la taille du tableau.
Exercice 2.2
En reprenant votre tableau de l’exercice précédent, trier ce tableau et le sortir en console.
La méthode sort() trie les éléments d'un tableau, dans ce même tableau, et renvoie le tableau. Ordre alphabétique ou croissant par défaut (sinon utiliser la fonction)
Exercice 2.3
Faire une boucle for et, à chaque tour, afficher la valeur en console.
L'instruction for crée une boucle composée de trois expressions optionnelles séparées par des points-virgules et encadrées entre des parenthèses qui sont suivies par une instruction (généralement une instruction de bloc) à exécuter dans la boucle.
Exercice 2.4
Faire une boucle for each() et, à chaque tour, afficher la valeur en console.
La méthode forEach() permet d'exécuter une fonction donnée sur chaque élément du tableau.
3. Les fonctions mathématiques
Exercice 3.1
Nous avons les valeurs 9,11,55,22.
Comment trouver la valeur minimum et maximum ? Afficher votre résultat en console.
La fonction Math.min() renvoie le plus petit nombre d'une série de 0 ou plusieurs nombres ou bien NaN si au moins un des arguments fourni n'est pas un nombre ou ne peut pas être converti en nombre.
La fonction Math.max() renvoie le plus grand nombre d'une série de 0 ou plusieurs nombres.
Exercice 3.2
Afficher en console un numéro au hasard via une fonction javascript.
La fonction Math.random() renvoie un nombre flottant pseudo-aléatoire compris dans l'intervalle (0, 1) (ce qui signifie que 0 est compris dans l'intervalle mais que 1 en est exclu) selon une distribution approximativement uniforme sur cet intervalle. Ce nombre peut ensuite être multiplié afin de couvrir un autre intervalle.
Exercice 3.3
Afficher en console la valeur de PI (via une constante javascript).
Exercice 3.4
Afficher en console la valeur arrondie de PI à la valeur supérieure et inférieure.
La fonction Math.round() retourne la valeur d'un nombre arrondi à l'entier le plus proche.
Autres fonctions mathématiques utiles
La fonction Math.ceil() retourne le plus petit entier supérieur ou égal au nombre donné.
La fonction Math.floor(x) renvoie le plus grand entier qui est inférieur ou égal à un nombre x.
La fonction Math.pow() renvoie un nombre à une certaine puissance, c'est-à-dire baseexposant.
La fonction Math.sign() renvoie le signe d'un nombre et permet de savoir si un nombre est positif, négatif ou nul.
La fonction Math.trunc() retourne la partie entière d'un nombre en retirant la partie décimale.
4. Les regexp (MDN regexp)
La méthode test() vérifie s'il y a une correspondance entre un texte et une expression rationnelle. Elle retourne true en cas de succès et false dans le cas contraire.
La méthode search() éxecute une recherche dans une chaine de caractères grâce à une expression rationnelle appliquée sur la chaîne courante.
Exercice 4.1
Écrire une regexp pour ressortir le chiffre dans la chaîne “Coucou 3”.
Exercice 4.2
Écrire une regexp pour ressortir la lettre dans la chaîne “1231f156415”.
Exercice 4.3
Écrire une regexp pour ressortir le mot “yolo” dans la chaîne “fjezoifjezyoloceuhfez”.
Exercice 4.4
Écrire une regexp pour ressortir le mot “yolo” (le mot cherché est en minuscule) dans la chaîne “FOEIJFOEZIJFEYOLOFEZKUHFEI.
Exercice 4.5 (MDN match())
La méthode match() permet d'obtenir le tableau des correspondances entre la chaîne courante et une expression rationnelle.
Écrire une regexp pour ressortir les chaînes de caractères dans la chaîne “fezf1548ffdsaf515154v54654” et sortir les valeurs en console.
5. Les nombres entiers
La fonction parseInt() analyse une chaîne de caractère fournie en argument et renvoie un entier exprimé dans une base donnée.
La fonction parseFloat() permet de transformer une chaîne de caractères en un nombre flottant après avoir analysée celle-ci (parsing).
Utilisé pour convertir une chaîne de caractères représentant une valeur numérique en nombre
L'opérateur typeof renvoie une chaîne qui indique le type de son opérande.
Exercice 5.1
Sans modifier les lignes actuelles, comment faire ressortir le typeof en “number” et non en “string” ?
var test = "0123";
console.log(typeof test);
Exercice 5.2
Additionnez ces deux valeurs et affichez le résultat en console.
var uno = "01";
var dos = "02";
6. Les chaînes de caractères
La méthode toString() renvoie une chaine de caractères représentant l'objet renseigné.
La méthode concat() combine le texte de plusieurs chaînes avec la chaîne appelante et renvoie la nouvelle chaîne ainsi formée.
Exercice 6.1
Sans modifier les lignes actuelles, comment faire ressortir le typeof en “string” et non en “number” ?
var test = 0123;
console.log(typeof test);
Exercice 6.2
Ressortez la chaîne en console sous la forme “Hello World”.
var hello = "Hello";
var world = "World";
7. Les dates (Dates 🇬🇧 )
Ce constructeur permet de créer des instances Date qui représentent un moment précis dans le temps. Les objets Date se basent sur une valeur de temps qui est le nombre de millisecondes depuis 1er janvier 1970 minuit UTC.
MDN date prototype, la liste des fonctions de date
La méthode getHours() renvoie l'heure pour la date renseignée, d'après l'heure locale.
La méthode getMinutes() renvoie les minutes pour la date renseignée d'après l'heure locale.
La méthode toLocaleTimeString() renvoie une chaine de caractères correspondant à l'heure dans la date, exprimée selon une locale. Les arguments locales et options permettent aux applications de définir le langage utilisé pour les conventions de format et permettent de personnaliser le comportement de la fonction.
La méthode toLocaleDateString() renvoie une chaine de caractères correspondant à la date (le fragment de l'objet qui correspond à la date : jour, mois, année) exprimée selon une locale. Les arguments locales et options permettent aux applications de définir le langage utilisé pour les conventions de format et permettent de personnaliser le comportement de la fonction.
Exercice 7.1
Ressortir l’heure en console.
Exercice 7.2
Afficher en console la date sous la forme “23/10/2015”.
Exercice 7.3
Afficher en console la date sous la forme “23 octobre 2015” (en français).
8. Les objets (Objects 🇬🇧 & json 🇬🇧 )
L’objet JSON contient des méthodes pour interpréter du JSON (JavaScript Object Notation) (voir également la page du glossaire JSON) et convertir des valeurs en JSON. Il ne peut être appelé ou construit, et, en dehors de ses deux méthodes, n’a pas de fonctionnalité propre.
Interprète une chaîne de caractères comme du JSON, transformant de façon optionnelle la valeur produite et ses propriétés, puis retourne la valeur. (transforme une string en objet Cf. 8.4) Essentiel parce que HTTP ne renvoit que des strings qu'il faudra donc parser pour pouvoir récupérer des infos dedans
Retourne une chaîne de caractères JSON correspondant à la valeur spécifiée, incluant de façon optionnelle seulement certaines propriétés, ou remplaçant des valeurs de propriété dans une forme définie par l’utilisateur. (transforme un objet en string)
Exercice 8.1
Créer un JSON avec 2 élèves :
prénom : Han / nom : Solo
prénom : Chew / nom : Bacca
Afficher cet objet en console.
Exercice 8.2
Créer un JSON avec 2 tableaux de JSON à l’intérieur :
prof :
prénom : Chew / nom : Bacca
prénom : Han / nom : Solo
élève :
prénom : Marty / nom : McFly
prénom : Doc / nom : Brown
Ressortir cet objet en console.
Exercice 8.3
Avec le JSON fait dans l’exercice précédent, affichez en console le nom de Marty.
Exercice 8.4
Nous avons un JSON au format texte ; affichez en console la valeur du prénom.
var text = '{"name" : "Dupont", "first_name" : "Jean"}';
Exercice 8.5
Nous avons le JSON suivant :
var number = {"random" : "1"};
Nous voulons qu’il nous ressorte un nombre aléatoire. Placez une fonction pour qu’en faisant number.random(); elle affiche un nombre aléatoire en console.
Liens utiles Javascript
OpenClassroom 1
OpenClassroom 2
Developpez.com
Codecademy
Enjoy and have fun 😎
