Interactivité avec JavaScript

class: main-title

<h1>Web: Client 2</h1>

<h2>Interactivité avec JavaScript</h2>

---

<ul>
<li>Formulaires</li>
<li>Événements</li>
</ul>

---
class: section-title

<h1>Formulaires</h1>

---

<h1 class="menu first">Formulaires</h1>

<p>HTML nous offre des <a href="https://developer.mozilla.org/fr/docs/Web/HTML/Element#Formulaires" target="_blank" rel="noopener noreferrer">composants de formulaire standards</a> pour permettre à l'utilisateur de saisir des données. HTML5 ajoute des types spécifiques(date, couleur, <em>slider</em>, ...)</p>

---

<h1>Formulaires, références</h1>

<p>📚 <a href="https://developer.mozilla.org/fr/docs/Web/HTML/Element#Formulaires" target="_blank" rel="noopener noreferrer">developer.mozilla.org/fr/docs/Web/HTML/Element#Formulaires</a></p>

<p>📚 <a href="https://htmlreference.io/forms/" target="_blank" rel="noopener noreferrer">htmlreference.io/forms/</a></p>

<p>📚 <a href="https://www.w3schools.com/html/html_form_elements.asp" target="_blank" rel="noopener noreferrer">w3schools.com/html/html_form_elements.asp</a></p>

<p>ℹ️ <a href="https://stegosource.com/how-to-build-html-forms-right-semantics/" target="_blank" rel="noopener noreferrer">Respecter la sémantique dans les formulaires</a></p>

---

<h1>Interactivité</h1>

<ul>
<li>JavaScript nous a permis de <strong>construire dynamiquement le DOM</strong></li>
<li>Nous avons offert une <em>interaction minimale</em> à l'utilisateur avec les boîtes de dialogue ou la console</li>
<li>Donc, la logique de notre programme influence le contenu et l’expérience de l’utilisateur</li>
<li>On souhaite offrir à l’utilisateur la possibilité de <strong>participer directement à l’expérience</strong> de la page web</li>
<li>En combinant les <strong>formulaires et les événements</strong>(ex. clic) on peut récupérer efficacement des données auprès de l’utilisateur et les manipuler dans notre logique applicative</li>
</ul>

---

<h1>Récupérer les valeurs</h1>

<p>D'abord récupérer l'élément concerné</p>

<pre><code class="language-javascript">const element = document.getElementById('...');
const element = document.querySelector('...');
// ...
const elements = document.getElementsByName('...'); // tableau []
const elements = document.querySelectorAll('...'); // tableau []
</code></pre>

<p>Ensuite, récupérer la valeur ou l'état</p>

<pre><code class="language-javascript">element.value    // Valeur associée au composant
                 // ValueAsDate valueAsNumber
element.checked  // radio/check indique si activé
optionElement.selected // &lt;options&gt; d'un select, indique si sélectionné
</code></pre>

---

<h1>Récupérer les valeurs, exemple:</h1>

<div style="text-align: center;">
    <a href=/sessions/2023H/1SU/documentation/assets/04.1-evenements/exemples/2-form-values style="font-size: small;" target="_blank" rel="noopener noreferrer">Essayer!</a>
</div>

---
class: section-title

<h1>Événements</h1>

---

<h1 class="menu">Événements</h1>

<p>On peut demander aux éléments du DOM de nous informer de certains <strong>changements d’état</strong> et y réagir via JavaScript.</p>

<ul>
<li>Clic, Survol de la souris</li>
<li>Appui/relâchement d’une touche</li>
<li>Changement de valeur</li>
<li>Chargement de la page/élément</li>
<li>On peut spécifier plusieurs événements, ex: clic ET survol de la souris</li>
</ul>

<p>📚 <a href="https://www.w3schools.com/jsref/dom_obj_event.asp" target="_blank" rel="noopener noreferrer">Liste des événements disponibles</a></p>

---

<h1>Événements: <em>Attributs HTML</em></h1>

<p>On spécifie directement le <strong>nom de l’événement</strong> en tant qu’<strong>attribut HTML</strong> et la valeur est le code JavaScript à exécuter.</p>

</div>

<pre><code class="language-html">&lt;!-- onevenement="code javascript;" --&gt;
&lt;button  type="button" 
         onclick="alert('Bonjour!');"&gt;Cliquez ici!&lt;/button&gt;

&lt;!-- On peut spécifier plusieurs événements et appeler une fonction --&gt;
&lt;button  id="btn" type="button" 
         onclick="hello();" 
         onmouseover="document.getElementById('btn').innerText = 'Oui cliquez!';"
         onmouseout="document.getElementById('btn').innerText = 'Cliquez ici!';"&gt;Cliquez ici!&lt;/button&gt;

&lt;script&gt;
    function hello() {
        alert('Bonjour de la fonction!');
    }
&lt;/script&gt;
</code></pre>

---

<h1>Événements: <em>Propriétés JS</em></h1>

<p>On peut également assigner directement un événement à partir des <strong>propriétés correspondantes en JavaScript</strong>.</p>

<pre><code class="language-html">&lt;button id="btn" type="button"&gt;Cliquez ici!&lt;/button&gt;
&lt;script&gt;
    const btn = document.getElementById('btn');

// On peut spécifier une REFERENCE 
    // vers une fonction par son NOM
    btn.onclick = hello; // hello SANS les ()

// On peut également déclarer une fonction ANONYME
    btn.onmouseover = function() {
        btn.innerText = 'Oui cliquez!';
    };
    btn.onmouseout = function() {
        btn.innerText = 'Cliquez ici!';
    };

function hello() {
        alert('Bonjour fonction standard!');
    }
&lt;/script&gt;
</code></pre>

</div>

---

<h1>Événements: <em>Listeners JS</em></h1>

<p>Un élément peut ajouter ou retirer l'écoute: <strong>addEventListener</strong> ou <strong>removeEventListener</strong></p>

<p>📚 <a href="https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener" target="_blank" rel="noopener noreferrer">addEventListener</a></p>

<p>📚 <a href="https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/removeEventListener" target="_blank" rel="noopener noreferrer">removeEventListener</a></p>

</div>

<pre><code class="language-html">&lt;button id="btn" type="button"&gt;Cliquez ici!&lt;/button&gt;
&lt;script&gt;
    const btn = document.getElementById('btn');

// On précise le nom de l'événement SANS on
    btn.addEventListener('click', function() {
        alert('Bonjour fonction ANONYME');
    });

// On peut écouter plusieurs fois le même événement
    btn.addEventListener('click', hello);

btn.addEventListener('mouseover', function() {
        btn.innerText = 'Oui cliquez!';
    });
    btn.addEventListener('mouseout', function() {
        btn.innerText = 'Cliquez ici!';
    });

function hello() {
        alert('Bonjour fonction STANDARD');      // affichera 1 fois
        btn.removeEventListener('click', hello); // car on remove après
    }
&lt;/script&gt;
</code></pre>

</div>

---

<h1>Quel mécanisme favoriser?</h1>

<p>Quelle est la différence entre les différentes méthodes pour écouter les événements du DOM?</p>

<ul>
<li><a class="doc-only" href="#evenements-attributs-html">Attributs DOM</a><a class="slide-only" href="#11">Attributs DOM</a> : Généralement <b style="color: red">à éviter</b> car dilue le JS dans le HTML. On souhaites organiser la structure(HTML), la mise en forme(CSS) et la logique(JS).</li>
<li><a class="doc-only" href="#evenements-proprietes-js">Propriétés JS</a><a class="slide-only" href="#12">Propriétés JS</a> : Méthode <b style="color: green">à privilégier</b>, simple et efficace!</li>
<li><a class="doc-only" href="#evenements-listeners-js">Listener JS</a><a class="slide-only" href="#13">Listener JS</a> : Offre plus de flexibilité, par exemple on peut écouter <strong>plusieurs fois le même événement</strong>, mais demande plus de rigueur si on ajoute et retire des événements on peut perdre le fil.</li>
</ul>

---

<h1>Données de l'événement</h1>

<p>La <strong>fonction de l'événement</strong> peut recevoir un <strong>paramètre contenant ses détails</strong>.<br></p>

<p>ℹ️ <a href="https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Events#event_objects" target="_blank" rel="noopener noreferrer">Récupérer les données</a></p>

<p>📚 <a href="https://developer.mozilla.org/en-US/docs/Web/API/Event" target="_blank" rel="noopener noreferrer">Données des événements</a></p>

</div>

<pre><code class="language-javascript">const items = ['A', 'B', 'C'];
for(let i = 0; i &lt; items.length; i++){
    const btn = document.createElement('button');
    btn.innerHTML = items[i];
    btn.onmousedown = mouseDownEvent; // Lier la fonction
    btn.dataset.myNumber = (i * 10);  
    // 📚 https://developer.mozilla.org/fr/docs/Learn/HTML/Howto/Use_data_attributes
    document.body.appendChild(btn);
}

function mouseDownEvent(event) {
    // event contient les détails de l'événement, event.target représente l'élément déclencheur
    alert(`${event.target.outerHTML}\n i = ${event.target.dataset.myNumber}\n ${event.button == 0 ? 'gauche' : 'droite'}`);
}
</code></pre>

---

<h1>Événements, références:</h1>

<p>Explications des événements</p>

<ul>
<li><a href="https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Events" target="_blank" rel="noopener noreferrer">https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Events</a></li>
</ul>

<p>Référence des événements disponibles</p>

<ul>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/API/Element#Events" target="_blank" rel="noopener noreferrer">https://developer.mozilla.org/en-US/docs/Web/API/Element#Events</a></li>
<li><a href="https://www.w3schools.com/jsref/dom_obj_event.asp" target="_blank" rel="noopener noreferrer">https://www.w3schools.com/jsref/dom_obj_event.asp</a></li>
</ul>

<p>Exemples d'utilisation de divers événements</p>

<ul>
<li><a href="https://www.w3schools.com/js/js_events_examples.asp" target="_blank" rel="noopener noreferrer">https://www.w3schools.com/js/js_events_examples.asp</a></li>
</ul>

---

<h1>Aide-mémoire des opérations DOM</h1>

<p><a href="https://htmldom.dev/" target="_blank" rel="noopener noreferrer">https://htmldom.dev/</a></p>

---
class: section-title

---

---
class: section-title

<h1>Exercices</h1>

<p>👉 <a href=/sessions/2023H/1SU/documentation/4.2-exercices target="_blank" rel="noopener noreferrer">Énoncé</a></p>