Aller au contenu

Exercice 14 - Introduction à JavaScript

  • Créez dans votre dossier designweb un nouveau dossier nommé ex14_introJS.
  • Créez un fichier index.html avec la structure de base d'une page. (La page peut être blanche)
  • Créer dans un sous répertoire js le fichier script.js.
  • Reliez le fichier de script au fichier index.html.

Fonction pour afficher du texte à la console

  • Créez une fonction qui va afficher un message à la console.
  • La fonction va recevoir en paramêtre le texte à afficher.
  • Elle n'a aucune valeur de retour.
  • Documentez la fonction
  • Pour le reste de l'exercice, quand on vous demande d'afficher du texte à la console utilisez cette fonction.

Manipulation de variables

  • Créez une constante qui contiendra votre nom et affichez à la console le texte "Début du script de votre_nom".
  • Créez une variable qui contiendra un message de votre choix et affichez ce texte à la console.
  • Moifiez le texte de la variable et réaffichez le à la console.

Tableau

  • Créez un tableau en JavaScript qui contiendra le nom d'au moins 4 étudiants.
  • À l'aide d'une boucle, affichez le contenu de votre tableau à la console au format suivant
Liste des étudiants
-------------------
- Étudiant 1
- Étudiant 2
- Étudiant 3
- Étudiant 4
  • Ajoutez la valeur de la constante de votre nom à la suite du tableau.
  • Réaffichez à nouveau le tableau.

Fonction fléchée

  • Créez une fonction fléchée qui va prendre le tableau d'élèves en paramêtre et qui retourne le nombre total de lettres de tous les noms.
  • Testez votre fonction en affichant le résultat à la console.

Astuce

Une chaine de caratère peut être considérée comme un tableau. "Mathieu" est en fait un tableau de 7 items avec le caractère "M" à la première position, "a" à la 2e et ainsi de suite.

Opérateur logique

  • Créez une nouvelle fonction qui va aussi prendre en paramêtre le tableau d'élèves.
  • La fonction va retourner une chaine de caractères qui contiendra le nom du tableau qui contient le plus de lettres.
  • S'il y a égalité avec plus d'un nom, retourner tous les noms séparés par une virgule : "Étudiant 1, Étudiant 2"

Sélectionner des éléments

  • Copiez le code html suivant dans votre fichier index.html
<ul id="listePokemons">
    <li class="pokemon" id="no_001">Bulbizarre</li>
    <li class="pokemon" id="no_004">Salamèche</li>
    <li class="pokemon" id="no_007">Carapuce</li>
</ul>
  • Créez une variable et initialisez la avec tous les éléments li en utilisant la fonction de sélection appropriée
  • Affichez le premier item de cette variable à la console.
  • Créez une deuxième variable et initialisez la uniquement avec le deuxième li (Salamèche).
  • Afficher le texte contenu dans li à la console.

Astuce

Pour accéder au contenu de l'élément HTML, vous pouvez utiliser la propriété textContent