Exercices

01

Console.log

Afficher dans la console un message qui dit : "Bonjour + ton nom". Le nom doit être stocké dans une variable. Utiliser la console.log :

console.log("Ton message ici" + variable)

02

Opérations Mathématiques

Déclarer deux variables, age et nombreDePassions.

Ensuite, effectuer les opérations suivantes :

• Addition : Ajoutez 5 ans à votre age actuel et stockez le résultat dans une nouvelle variable newAge.
• Soustraction : Soustrayez nombreDePassions à newAge et stockez le résultat dans une nouvelle variable diffPassionsAge.

Afficher dans le tout dans un console.log.

03

Conditions

Vérifiez si vous êtes majeur en utilisant la variable age et une condition if / else. Modifier ensuite la variable age pour tester toutes les possibilités.

 //si mon âge est plus grand que ou égal à 18
if(maVariable >= x) {
    // afficher un message qui dit :"Chouette, vous êtes majeur!"
} else {
    // afficher un message qui dit :"Oh no, sorry :/ !"
}

04

Insérer du contenu en HTML

1. Créer dans votre document HTML un div avec un ID spécifique. En Javascript, vous aller créer une variable qui contient du texte.
2. À l'aide de document.getElementById("ton_id"); aller rechercher votre div.
3. À l'aide de innerHTML afficher votre message stocker dans la variable à l'intérieur de votre div.

05

Ajouter du contenu lors du click

En vous intéressant à l'event : addEventListener('click', function{}) ajouter du contenu dans l'HTML au clique sur un bouton.

1. Créer le bouton en HTML et récupérer-le dans votre fichier javascript --> getElementById
2. Ajouter un évènement au clique sur celui-ci --> addEventListener
3. À l'intérieur de la fonction vous allez créer les étapes pour obtenir

let monBouton = //stock de mon bouton;
monBouton.addEventListener('click', function() {
    // Que voulez-vous voir s'exécuter lorsque vous cliquez sur le bouton ?
    // écrire étape après étape ce que vous souhaitez :
    // 1. Test avec la console.log() pour voir si le click est bien detecté, une fois validé 
    // 2. Déclarer une variable avec un message
    // 3. Insérez le contenu du message en HTML
    // l'étape 3 est identique à l'exercice 04, seulement cette fois-ci le contenu est ajouté au click sur le bouton et pas au chargement de la page
});

06

Récupérer le contenu d'un input et l'insérer en HTML

1. Ajouter un formulaire avec un input de type text et un button (où pour une fois, copier le code ci-dessous)
2. En javascript, vous allez d'abord créer une fonction qui détecte le click sur le button
3. Vous allez ensuite stocker dans une variable votre élément HTML input
4. Vous allez extraire la donner du input en utilisant : monInput.value
5. Une fois que vous avez stocker le contenu du input, afficher là dans un console.log() pour vérifier que la donnée est extraite correctement
6. Afficher ensuite le contenu dans le div

<div id="myForm">
    <label for="myInput">Entrez du texte :</label>
    <input type="text" id="myInput">
    <button>Soumettre</button>
</div>
<div id="output"></div>

monElement.innerHTML = message; // Remplace le contenu complet

 monElement.innerHTML += message; // Ajoute le message ou la donnée après le contenu déjà existant

07

Ajouter chaque entrée dans une liste

Au lieu d'ajouter uniquement le contenu texte à la suite, on va à chaque fois qu'on clique sur le bouton, ajouter un élément supplémentaire à une liste. Pour ce faire :

1. On va reprendre l'exercice #06 et ajouter de l'HTML dans l'insertion du .innerHTML. C'est à dire que le innerHTML ne vas pas uniquement ajouter notre variable mais il va également ajouter une balise autour de notre variable. (voir exemple ci-dessous)
2. On doit également pensé à transformer notre <div id="output"></div> en liste <ul>, sinon la liste ne sera pas valide sémantiquement parlant.

monElement.innerHTML = '<li>' + message + '</li>';