Projet numérologie / partie 1 : front / niveau 1 / intégration html et js
- François Brucker
Lier le code js et la page html
Tache 1 : cliquer sur le bouton
Pour l'instant, lorsque vous cliquez sur le bouton, il n'y a l'air de rien se passer. En fait si, il s'est passé quelque chose la première fois que vous avez cliquez dessus : un ? s'est ajouté à la fin de l'url et on voit que la page se recharge.
La gestion par défaut des formulaires html est archaïque. On va faire comme si elle n'existait pas.
Nous allons utiliser le javascript pour gérer le click sur ce bouton. Pour cela, on a plusieurs choses à faire/comprendre :
- trouver le bouton
- greffer du code qui s'exécutera lorsque l'on cliquera sur le bouton
- trouver où se trouve le texte à récupérer
Pour récupérer des objets de l'arbre DOM, le plus simple est de les identifier de façon unique en utilisant un identifiant. Une balise peut en effet avoir deux types d'attributs spéciaux :
Identifiants de balises
- des classes avec attribut
class="class1 class2 ...". Les différentes classes d'une balise sont séparée par des espaces (une classe ne peut donc pas posséder d'espaces dans son nom) - un identifiant avec l'attribut
id="identifiant". Cet identifiant doit être unique.
Un identifiant sert lorsque l'on veut choisir une balise particulière au sein d'un ensemble de balises.
Nous voulons :
- récupérer le texte de l'input
- savoir quand on clique sur le bouton
Modifions donc leur code dans le fichier numérologie/index.html en leur ajoutant des identifiants :
<!-- ... -->
<form class="pure-form">
<label>Prénom :</label>
<input type="text" id="form-input"/>
<button type="submit" id="form-button" class="pure-button pure-button-primary">Envoi</button>
</form>
<!-- ... -->Voyez comment les commentaires html sont différents des autres commentaires.
Console javascript
Ouvrez les outils de développement de chrome et choisissez le panel console.
Cette console est l'interpréteur javascript de la page. On peut y écrire du javascript comme dans du node, mais l'intérêt principal est qu'il possède des objets et des attributs permettant de manipuler l'arbre DOM :
document.querySelector("#form-input").valueEt vous y découvrirez la valeur de votre input, qui est vide ('') si vous n'avez rien tapé dans ce champ.
Changez la valeur de l'input et vérifiez que la ligne précédente donne un autre résultat
Comment avons-nous réalisé ce prodige ?
document.querySelectorqui permet de retrouver un élément de l'arbre DOM par son identifiant (il faut mettre un#devant l'identifiant)- l'attribut
valued'un input qui donne sa valeur.
Il faut maintenant réussir à faire ça lorsque l'on clique sur un bouton.
Événements
Dès qu'il se passe quelque chose sur la page, un évènement est lancé. Ici, pour le bouton, c'est lorsque l'on clique dessus. On va donc se greffer à cet évènement. Tapez dans la console :
document.querySelector("#form-button").addEventListener("click", (event) => {
console.log(document.querySelector("#form-input").value)
event.preventDefault()
})Vous pouvez ensuite cliquer sur le bouton pour voir le code s'exécuter.
Le code se comprend comme ça :
- on récupère (comme avant) le bouton.
- on ajoute une fonction qui fa être exécuté lors de l'évènement "click"
La notation (param) => {code} crée une fonction javascript.
La ligne event.preventDefault() est importante, elle empêche le comportement par défaut de l'évènement click qui recharge la page. Supprimez cette ligne pour voir le résultat.
Integration dans l'html
Le code qu'on a placé dans la console va être ajouté à notre html. Ici, on place le code javascript à la fin du <body></body> pour que les balises existent quand on va les chercher avec querySelector.On intègre ce code grâce à la balise <script></script>.
Le javascript se place à l'opposé du style css.
Le fichier html numérologie/index.html est alors :
<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>Numérologie</title>
<link rel="stylesheet" href="https://unpkg.com/purecss@2.0.6/build/pure-min.css" integrity="sha384-Uu6IeWbM+gzNVXJcM9XV3SohHtmWE+3VGi496jvgX1jyvDTXfdK+rfZc8C1Aehk5" crossorigin="anonymous">
<link href="main.css" rel="stylesheet">
</head>
<body>
<div class="main">
<form class="pure-form">
<label>Prénom :</label>
<input type="text" id="form-input"/>
<button type="submit" id="form-button" class="pure-button pure-button-primary">Envoi</button>
</form>
<div class="pure-g">
<div class="pure-u-1-3"></div>
<div class="pure-u-1-3"><p>7</p></div>
<div class="pure-u-1-3"></div>
</div>
</div>
<script>
document.querySelector("#form-button").addEventListener("click", (event) => {
let chaîne = document.querySelector("#form-input").value;
console.log(chaîne);
event.preventDefault();
})
</script>
</body>
</html>Dès que vous cliquerez sur le bouton, la valeur sera envoyée dans la console.
Testez le !
Tâche 2 : chargement et utilisation de fichier javascript
On ne veut pas juste afficher le prénom dans la console, on veut lui associé le chiffre calculé en partie 2. Il faut donc charger nos fonctions javascript dans le html.
Cela se fait simplement avec l'attribut src de la balise <script></script> qui contient un chemin relatif vers un fichier javascript :
<script src="./numérologie.js"></script>Il ne faut rien mettre d'autre dans script si on charge un fichier
Après cette ligne dans le html, la fonction chiffreAssocie sera connue. Cela donne le fichier numérologie/index.html suivant, qui commence par charger notre fichier dans une balise script, puis l'utilise dans une autre (c'est possible car l'interpréteur javascript est commun à la page) :
<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>Numérologie</title>
<link rel="stylesheet" href="https://unpkg.com/purecss@2.0.6/build/pure-min.css" integrity="sha384-Uu6IeWbM+gzNVXJcM9XV3SohHtmWE+3VGi496jvgX1jyvDTXfdK+rfZc8C1Aehk5" crossorigin="anonymous">
<link href="main.css" rel="stylesheet">
</head>
<body>
<div class="main">
<form class="pure-form">
<label>Prénom :</label>
<input type="text" id="form-input"/>
<button type="submit" id="form-button" class="pure-button pure-button-primary">Envoi</button>
</form>
<div class="pure-g">
<div class="pure-u-1-3"></div>
<div class="pure-u-1-3"><p>?</p></div>
<div class="pure-u-1-3"></div>
</div>
</div>
<script src="./numérologie.js"></script>
<script>
document.querySelector("#form-button").addEventListener("click", (event) => {
let chaîne = document.querySelector("#form-input").value;
console.log(chaîne);
event.preventDefault();
})
</script>
</body>
</html>Par défaut, on a mis un chiffre de "?" puisque le prénom est vide au chargement.
Tâche 3 : modification du html
Il nous reste à changer le chiffre lorsque l'on appuie sur le bouton. Il faut pouvoir modifier le contenu du paragraphe. Pour cela :
- on donne un identifiant unique au paragraphe à modifier
- on regarde la doc pour savoir quelle attribut modifier : ici c'est textContent
Le fichier html numérologie/index.html final est alors :
<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>Numérologie</title>
<link rel="stylesheet" href="https://unpkg.com/purecss@2.0.6/build/pure-min.css" integrity="sha384-Uu6IeWbM+gzNVXJcM9XV3SohHtmWE+3VGi496jvgX1jyvDTXfdK+rfZc8C1Aehk5" crossorigin="anonymous">
<link href="main.css" rel="stylesheet">
</head>
<body>
<div class="main">
<form class="pure-form">
<label>Prénom :</label>
<input type="text" id="form-input"/>
<button type="submit" id="form-button" class="pure-button pure-button-primary">Envoi</button>
</form>
<div class="pure-g">
<div class="pure-u-1-3"></div>
<div class="pure-u-1-3"><p id="chiffre">7</p></div>
<div class="pure-u-1-3"></div>
</div>
</div>
<script src="./numérologie.js"></script>
<script>
document.querySelector("#form-button").addEventListener("click", (event) => {
let chaîne = document.querySelector("#form-input").value;
let chiffre = chiffreAssocie(chaîne);
document.querySelector("#chiffre").textContent = chiffre;
event.preventDefault();
})
</script>
</body>
</html>