Manipulation du DOM | Web: Client 2

class: main-title

<h1>Web: Client 2</h1>

<h2>Manipulation du DOM</h2>

---

<ul>
<li>Survol du modèle client-serveur Web</li>
<li>Intégrer JavaScript à HTML</li>
<li>Manipuler le DOM avec JavaScript</li>
</ul>

---
class: section-title

<h1>Modèle client-serveur Web</h1>

---

<h1 class="menu">Le web: modèle client-serveur</h1>

---

<h1>Navigateur web: le client</h1>

<p class="center">
    <img style="max-height: 480px;" src=/sessions/2023H/1SU/documentation/assets/03.1-manipulation-dom/browser.jpg alt=""><br><br>
    ℹ️ <a href="https://www.html5rocks.com/tutorials/internals/howbrowserswork/" target="_blank" rel="noopener noreferrer">How browsers work</a>
</p>

---

<h1>Le langage du navigateur: développement web front-end</h1>

<p class="center">
    <img src=/sessions/2023H/1SU/documentation/assets/03.1-manipulation-dom/languages.jpg alt=""><br><br>
    ℹ️ <a href="https://frontendmasters.com/books/front-end-handbook/2019/" target="_blank" rel="noopener noreferrer">Front-end Developer Handbook</a>
</p>

---
class: section-title

<h1>Intégrer JavaScript à HTML</h1>

---

<h1 class="menu">Intégrer JavaScript à HTML</h1>

<p>Avec la <strong>balise</strong> <code>&lt;script&gt;</code></p>

<pre><code class="language-html">&lt;!DOCTYPE html&gt;
&lt;html&gt;
    &lt;head&gt;
        &lt;script&gt;  // Exécuté en premier
            console.log("Script in head");
        &lt;/script&gt;
    &lt;/head&gt;

&lt;body&gt;
        JS Demo

&lt;script&gt; // À la fin, lorsque la page est chargée
           console.log("Script at the end of body");
        &lt;/script&gt;
    &lt;/body&gt;
&lt;/html&gt; 
&lt;!--
  Le navigateur interprète le fichier du haut vers le bas
  les scripts seront executé au moment lu dans le fichier 
--&gt;
</code></pre>

---

<h1>Intégrer JavaScript à HTML</h1>

<p>Avec un <strong>fichier externe</strong></p>

<pre><code class="language-html">&lt;!DOCTYPE html&gt;
&lt;html&gt;
    &lt;head&gt;
       &lt;script src="head.js"&gt;&lt;/script&gt;
    &lt;/head&gt;

&lt;body&gt;
        External JS Demo

&lt;script src="body.js"&gt;&lt;/script&gt;
    &lt;/body&gt;
&lt;/html&gt; 
</code></pre>

<pre><code class="language-javascript">//Fichier head.js
console.log("External script in head");
</code></pre>

<pre><code class="language-javascript">//Fichier body.js
console.log("External script in body");
</code></pre>

---
class: section-title

<h1>Manipuler le DOM avec JS</h1>

---

<h1 class="menu">Manipuler le DOM avec JS</h1>

<p class="center">
    Structure du DOM<br>
    <img src=/sessions/2023H/1SU/documentation/assets/03.1-manipulation-dom/dom.jpg height="430px">
</p>

---

<h1>Manipulations du DOM</h1>

<p>Récupérer, Modifier, Manipuler la structure</p>

---

<h1>Récupérer les éléments</h1>

<ul>
<li>Le <strong>document</strong> est l'<em>element</em> racine du DOM. Il est accessible via la <strong>variable globale <code>document</code></strong>.

<ul>
<li>Cet élément particulier possède la fonction <code>getElementById('id');</code></li>
</ul></li>
</ul>

<pre><code class="language-javascript">document.getElementById('header');

// Autres fonctions pouvant être appliquées au document OU 1 element
ELEMENT.getElementsByClassName('paragraph'); // []
ELEMENT.getElementsByTagName('p'); // []
ELEMENT.querySelector('#title');   // 1 element
ELEMENT.querySelectorAll('div .paragraph');  // []
ELEMENT.children; // []
ELEMENT.parent;   // 1 element
</code></pre>

<p>📚 Références JavaScript des <a href="%5Bhttp://%5D(https://developer.mozilla.org/fr/docs/Web/API/Element)" target="_blank" rel="noopener noreferrer">element</a> et du <a href="https://developer.mozilla.org/fr/docs/Web/API/Document" target="_blank" rel="noopener noreferrer">document</a></p>

<p>📚 Référence <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors" target="_blank" rel="noopener noreferrer">Sélecteurs CSS</a>   
🎮 <a href="https://flukeout.github.io/" target="_blank" rel="noopener noreferrer">CSS Diner</a></p>

---

<h1 class="slide-only">Récupérer les éléments, exemple</h1>

<h2 class="doc-only">Exemple</h2>

<!--
<!DOCTYPE html>
<html>
  <head> </head>

<body>
    <div id="container">
      <p id="p1">First paragraph.</p>
      <p id="p2">Another paragraph.</p>
      <a href="/page.html">A link</a>
    </div>

Pourquoi on ne declare PAS le <script> dans le head?
    <script>
      const parent = document.getElementById('container');
      // DOCUMENT.getElementById

console.log(parent);
      console.log(`${parent.children.length} elements dans le container`);

const paragraphs = parent.getElementsByTagName('p');
      // ELEMENT.getElementSByTagName

console.log(`${paragraphs.length} paragraphes: `);

for (let i = 0; i < paragraphs.length; i++) {
        console.log(paragraphs[i]);
      }
    </script>
  </body>
</html>
-->

---

<h1>Modifier les caractéristiques</h1>

<ul>
<li>Une fois qu'on récupère un <em>element</em>, on peut en modifier les caractéristiques.</li>
<li>Ce qui est déclaré en HTML est accessible en JavaScript.

<ul>
<li><a href="https://javascript.info/dom-attributes-and-properties">Propriété vs Attributs</a></li>
</ul></li>
</ul>

<pre><code class="language-javascript">let firstParagraph = document.getElementById('p1');
firstParagraph.textContent = 'New &lt;b&gt;text&lt;/b&gt;!'; // Texte BRUT de la balise
firstParagraph.innerHTML = '&lt;button&gt;Click here!&lt;/button&gt;'; // Contenu HTML de la balise
firstParagraph.style.backgroundColor = 'blue'; // != background-color
firstParagraph.className = 'myClass'; // != class

document.getElementById('logo').src = '/img/logo.jpg';
</code></pre>

<p>📚  <a href="https://www.w3schools.com/jsref/dom_obj_style.asp" target="_blank" rel="noopener noreferrer">Propriétés CSS disponibles</a></p>

---

<h1 class="slide-only">Modifier les caractéristiques, exemple</h1>

<h2 class="doc-only">Exemple</h2>

<!-- 
<!DOCTYPE html>
<html>
  <body>
    <div id="container">
      <p>First paragraph.</p>
      <p>Another paragraph.</p>
      <a id="link" href="/page.html">A link</a>
    </div>

const link = document.getElementById('link');
      link.href = 'https://shawinigan.info';
    </script>
  </body>
</html>
-->

---

<h1>Manipuler la structure du DOM</h1>

<ul>
<li>On peut construire dynamiquement la structure d'une page web à l'aide de Javascript:

<ul>
<li>Ajouter, Déplacer, Retirer des éléments de la hiérarchie</li>
</ul></li>
</ul>

<pre><code class="language-javascript">let newParagraph = document.createElement('p');
newParagraph.innerHTML = 'Le texte...';

PARENT_ELEMENT.appendChild(newParagraph);
PARENT_ELEMENT.insertBefore(newParagraph, ELEMENT);

ELEMENT.remove(); // s'enleve lui-meme
PARENT_ELEMENT.removeChild(ELEMENT); // son conteneur l'enleve

PARENT_ELEMENT.replaceChild(newParagraph, ELEMENT);
</code></pre>

<p>📚 <a href="https://www.w3schools.com/js/js_htmldom_nodes.asp" target="_blank" rel="noopener noreferrer">Manipulations du DOM</a></p>

---

<h1 class="slide-only">Structure du DOM, exemple</h1>

<h2 class="doc-only">Exemple</h2>

<!-- 
<!DOCTYPE html>
<html>
  <body>
    <div id="container">
      <p id="p1">First paragraph.</p>
      <p id="p2">Second paragraph.</p>
      <p id="p3">Another paragraph.</p>
      <p id="p4">Last paragraph.</p>
    </div>

const link = document.createElement('a');
      link.innerHTML = 'Shawi-info';
      link.href = 'https://shawinigan.info';
      newParagraph.appendChild(link);

const parent = document.getElementById('container');
      parent.appendChild(newParagraph);

const first = parent.children[0];
      const last = parent.children[3];
      parent.replaceChild(last, first);

document.getElementById('p2').remove();

const another = parent.children[1];
      parent.removeChild(another);
    </script>
  </body>
</html>
-->

---

<h1 class="menu">Interactions avec l'utilisateur</h1>

<p>Par défaut, le navigateur fourni également 3 <a href="https://www.w3schools.com/js/js_popup.asp" target="_blank" rel="noopener noreferrer">boîtes de dialogue</a></p>

<pre><code class="language-javascript">alert("Hey!");

const ok = confirm("Are you sure?");
console.log(`Confirm = ${ok}`);

const name = prompt("What is your name?");
console.log(`Prompt = ${name}`);
// Attention, quelle est la différence entre annuler le prompt et confirmer sans rien écrire?
</code></pre>

---

<h1 class="slide-only">Interactions avec l'utilisateur, exemple</h1>

<h2 class="doc-only">Exemple</h2>

---
class: section-title

<h1>Outils développeur du navigateur</h1>

---

<h1 class="menu">Outils développeur du navigateur</h1>

<p>Pour les besoins du cours, nous nous concentrerons sur le navigateur web Google Chrome. En général, les navigateurs récents fournissent un ensemble similaire d'outils développeur :</p>

<ul>
<li>Inspection du DOM et CSS</li>
<li>Déboguage JavaScript</li>
<li>Et plus: inspections des requêtes HTTP, du stockage local, indicateurs de performance, etc.</li>
</ul>

<p>📚 <a href="https://developers.google.com/web/tools/chrome-devtools" target="_blank" rel="noopener noreferrer">Chrome DevTools</a>, <a href="https://developers.google.com/web/tools/chrome-devtools/javascript/" target="_blank" rel="noopener noreferrer">Chrome DevTools pour JavaScript</a></p>

<p>📚 <a href="https://designmodo.com/browser-developer-tools/" target="_blank" rel="noopener noreferrer">Outils développeur de Chrome et Firefox</a></p>

---

<h1>Console extras</h1>

<p>La console, accessible dans les outils pour développeur, permet un déboguage simple et rapide</p>

<pre><code class="language-javascript">console.log( ) | info( ) | debug( ) | warn( ) | error( )

//Et avec style! %c
console.log("%cHello %cWorld", "color: red; font-size: xx-large", "color: blue;")

console.table(["a", "b", "c"])

console.assert(condition, "affiche seulement si condition est FAUX")

console.clear()
</code></pre>

<p>ℹ️ <a href="https://css-tricks.com/a-guide-to-console-commands/" target="_blank" rel="noopener noreferrer">Plus d'options pour l'affichage à la Console</a></p>

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

---

<h1>Débogueur</h1>

<p>On peut utiliser <code>console.log</code> pour comprendre le chemin emprunté par notre code</p>

<ul>
<li>Toutefois, la console peut rapidement être inondée d’informations, ce qui rend plus difficile la compréhension du problème</li>
</ul>

<p>Les navigateurs web modernes supportent le mécanisme de <em>points d'arrêts</em></p>

<ul>
<li>Instruction <code>debugger;</code> directement dans le code</li>
<li>Via les outils développeurs du navigateur</li>
</ul>

<p>📚 <a href="https://javascript.info/debugging-chrome" target="_blank" rel="noopener noreferrer">Debugging in Chrome</a></p>

---

<h1>Chrome DevTools 101</h1>

<div style="text-align: center;  margin-top: -32px;">
    <a href="https://developers.google.com/web/tools/chrome-devtools/javascript/" style="font-size: small;">Référence</a>
</div>

---
class: section-title

---

<pre><code id="demo-code" style="height: 480px; overflow: auto;" class="javascript">
// Utiliser VS Code pour créer vos fichiers HTML et JS

// On doit ouvrir le fichier HTML dans le navigateur
// Le JS sera executé lors de l'interpretation du HTML
// Ne pas oublier de recharger la page après chaque changement au code!

// Ouvrir la Console des outils développeur pour surveiller les erreurs JS

// Dans le HTML, on inclut le JavaScript
// Il est preferable de séparer le JS dans un fichier distinct
// <script src="script.js"></script>

// Il faut choisir judicieusement l'endroit de chargement de notre script
// Dans le head pour les utilitaires
// A la fin du body si le JS manipule le DOM au chargement

// Intégrer le JS suivant, dans le head
// et
// À la fin du body
function logBody() {
    console.log('Function logBody');
    console.log(document.body);
}

console.log('Execution au chargement');
console.log(document.body);

// Appeler manuellement la fonction via la Console
// La console offre un environnement d'execution JavaScript complet,
// comme si le code faisait partie de notre fichier

// On peut ajouter un point d'arrêt et inspecter les valeurs des variables

function sum(number) {
    debugger; // point d'arret
    
    let total = undefined;

// 1 + 2 + 3 + ... + number
    if (Number.isInteger(number) && number > 0) {
        total = 0;

for(let i = 1; i <= number; i++) {
            total += i;
        }
    }

return total;
}

//
// Manipulation DOM
//

// Modifier la fonction sum() pour construire un affichage dans le DOM
//   Si le paramètre reçu n'est PAS un entier supérieur à 0, afficher un message en rouge
//   Sinon, afficher en bleu le résultat du calcul
// Tester script dans le head vs body
// Appeler la fonction pour accélérer le développement

function sum(number) {
    let p = document.getElementById('result');

if (p == null) {
        p = document.createElement('p');
        p.id = 'result';

document.body.appendChild(p);
    }

let total = undefined;

// 1 + 2 + 3 + ... + number
    if (Number.isInteger(number) && number > 0) {
        total = 0;

for(let i = 1; i <= number; i++) {
            total += i;
        }
    }

if (total == undefined) {
        p.innerHTML = 'Pas un nombre superieur a 0!';
        p.style.color = 'red';
    } else {
        p.innerHTML = `Résultat = ${total}`;
        p.style.color = 'blue';
    }
}

sum(10);

</code></pre>

<!-- <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

<!-- function logBody() {
    console.log('Function logBody');
    console.log(document.body);
}

console.log('Execution au chargement');
console.log(document.body);

function sum(number) {
    debugger;
    
    let total = undefined;

// 1 + 2 + 3 + ... + number
    if (Number.isInteger(number) && number > 0) {
        total = 0;

for(let i = 1; i <= number; i++) {
            total += i;
        }
    }

return total;
}

//
// Manipulation DOM
//

function sum(number) {
  let p = document.getElementById('result');

if (p == null) {
      p = document.createElement('p');
      p.id = 'result';

document.body.appendChild(p);
  }

let total = undefined;

// 1 + 2 + 3 + ... + number
  if (Number.isInteger(number) && number > 0) {
      total = 0;

for(let i = 1; i <= number; i++) {
          total += i;
      }
  }

if (total == undefined) {
      p.innerHTML = 'Pas un nombre superieur a 0!';
      p.style.color = 'red';
  } else {
      p.innerHTML = `Résultat = ${total}`;
      p.style.color = 'blue';
  }
}
-->

---
class: section-title

<h1>Exercices</h1>

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