Parcours JavaScript

1. Associer un contenu JS

Il y a plusieurs façons d'associer un contenu JavaScript à un fichier HTML :

on peut écrire le code JavaScript dans le fichier HTML en l'insérant dans un élément <script>:
```
<script type="text/javascript">
 //code JS
</script>
```
on peut faire référence à un fichier externe nommé par exemple script.js contenant le code JavaScript en utilisant l'attribut src d'un élément <script> :
```
<script language="JavaScript" src="script.js"></script>
```

Avertissement

L'utilisation d'interfaces web comme Capytale ou CodePen.io, pour écrire simultanément les codes html, css et js, rend souvent ce lien transparent : il n'est pas explicite dans le code affiché.

2. Désigner un élément

La réalisation d'une interaction nécessite de distinguer :

l'élément sur lequel l'utilisateur devra agir
le type d'événement pris en compte : clic, survol, etc.
l'élément sur lequel une action sera réalisée
le type d'action réalisée

Les éléments doivent être désignés depuis le code JS. Il existe plusieurs méthodes pour cela ; dans le contexte de ce parcours on aura recours à la méthode document.querySelector dont la syntaxe est :

element = document.querySelector(sélecteurs);

La méthode querySelector() renvoie le premier élément dans le document correspondant au sélecteur - ou groupe de sélecteurs - spécifié(s), ou null si aucune correspondance n'est trouvée.

Exemples

Voici quelques éléments html et la référence faite à ces éléments dans le code js :

htmljs

<body>
<h1>Titre</h1>
<p id="special_p">Paragraphe spécial</p>
</body>

// sélection d'un élément dont la balise est unique
let corps = document.querySelector('body');
let titre = document.querySelector('h1');
// sélection avec un identifiant
let monParagraphe = document.querySelector('#special_p');

3. Être à l'écoute des événements

La méthode addEventListener() associe une fonction à appeler à chaque fois que l'événement spécifié est réalisé sur l'élément ciblé.

La syntaxe est :

element.addEventListener(événement, fonction_a_appeler);

L'événement est à citer entre guillemets.

Exemple

let bouton = document.querySelector('button');
bouton.addEventListener("click", fonction_a_appeler);

Voici quelques événements possibles :

Événement	Description
click	clic de la souris sur l'élément
dblclick	double-clic de la souris sur l'élément
keydown	appui sur une touche du clavier
keyup	touche du clavier pressée puis relâchée
mouseover	le curseur de la souris survole l'élément
mouseout	le curseur de la souris quitte l'élément

4. Réaliser une action

Lors d'une interaction, l'action à réaliser lorsqu'un événement se produit est écrite en JS dans une fonction. De nombreuses actions sont possibles, comme changer une couleur ou la taille d'un élément, ajouter/modifier un contenu, rendre un contenu visible ou le masquer, etc.

4.1 Modifier le style d'un élément

Les propriétés CSS s'écrivent en JavaScript sans le caractère - et avec des majuscules pour séparer les mots. (Référence des propriétés CSS)

Exemples

element.style.color="red";
element.style.backgroundColor="rgb(255,0,0)";
element.style.fontSize="16px";
element.style.textAlign="center";

Les valeurs que l'on attribue aux propriétés sont des chaines de caractères entre guillemets.

4.2 Modifier le contenu d'un élément

Exemples

//modifier le texte d'un élément
element.textContent="nouveau contenu";

// modifier la source d'une image
image.src="nouvelle_url";

5. Exemples

5.1 Modifier le contenu du titre et sa couleur

Questions

Détailler toutes les instructions qui permettent que le clic sur le bouton "bleu" change le contenu du titre et sa couleur.
Pourquoi les boutons ne sont-ils pas sélectionnés par l'instruction let bouton=document.querySelector("button"); ?

5.2 Afficher/cacher du texte avec deux boutons

Questions

Quel est l'identifiant de l'élément qui contient la réponse à la question posée ?
Quelle est la balise de cet élément ?
Pourquoi a-t-on choisi cette balise pour insérer la réponse ?

5.3 Inverser des couleurs de texte, d'arrière-plan

Questions

Que réalise la fonction inverser()?
À quelle condition cette fonction s'exécute-t-elle ?

5.4 Faire défiler des images avec un bouton

Vrai ou faux ?

Les légendes des images sont stockées dans un tableau.
Les url des images sont stockées dans un tableau.
Au clic sur l'image, la fonction suivant est exécutée.
Au clic sur le bouton, la fonction suivant est exécutée.
Au clic sur le bouton, la valeur de la variable indice augmente de 1.
La fonction suivant détermine la prochaine image à afficher au hasard.
La fonction suivant modifie l'attribut src de l'élément qui a pour identifiant "illustration".
Lorsque la variable indice a une valeur supérieure ou égale à la taille du tableau urlTab, la fonction suivant déclenche une erreur.

6. Exercices

6.1 Alignement

Alignement breton

code Capytale : 3c57-373162

Compléter le code JS sans modifier les codes HTML et CSS pour que l'appui sur les boutons Gauche, Centré ou Droite aligne tous les éléments du cadre en conséquence.

6.2 Encodage

Encodage

code Capytale : 40d7-372824

En JavaScript, document.characterSet est une propriété qui renvoie l'encodage du document. Sans modifier les codes HTML et CSS, compléter le code JS fourni pour qu'au clic sur le bouton, une nouvelle ligne de texte apparaisse et communique le type d'encodage du document.

6.3 Compteur

Compteur

code Capytale : ad48-367903

Créer un "compteur de clics", c'est à dire une page avec un bouton et une zone d'affichage dont la valeur augmente de 1 à chaque clic. Ajouter à cette page un deuxième bouton de remise à zéro du compteur.

6.4 Lancer de dé

Lancer de dé

code Capytale : 6c71-372788

Math.ceil(Math.random()*6) fournit en JavaScript un entier aléatoire entre 1 et 6.
Réaliser une page qui affiche une face d'un dé, choisie aléatoirement, lorsqu'on clique sur un bouton.
Les images des six faces sont fournies.