James Hoffman

Techniques de l'Informatique - Cégep de Shawinigan

Menu

Web: Client 2

Le web: modèle client-serveur

Web Applications 101
How browsers work

Les langages du navigateur

Front-end Developer Handbook

Manipuler le DOM avec JS

Structure du DOM
Récupérer, Modifier, Manipuler la structure
Ouvrir

Intégrer JavaScript à HTML

Balise script

html
copier
<!DOCTYPE html>
<html>
<head>
<script> // Exécuté en premier
console.log("Script in head");
</script>
</head>

<body>
JS Demo

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

Fichier externe

html
copier
<!DOCTYPE html>
<html>
<head>
<script src="head.js"></script>
</head>

<body>
External JS Demo

<script src="body.js"></script>
</body>
</html>
js
head.js
copier
console.log("External script in head");
js
body.js
copier
console.log("External script in body");

Récupérer les éléments

  • Le document est l'element racine du DOM. Il est accessible via la variable globale document.
    • Cet élément particulier possède la fonction getElementById('id');
js
copier
document.getElementById('header');

// Autres fonctions pouvant être appliquées au document OU autre element
ELEMENT.getElementsByClassName('paragraph'); // []
ELEMENT.getElementsByTagName('p'); // []

ELEMENT.querySelector('#title'); // 1 element
ELEMENT.querySelectorAll('div .paragraph'); // []

ELEMENT.children; // []
ELEMENT.parent; // 1 element
html
copier
<!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>


<script>
//
// Pourquoi on ne declare PAS le <script> dans le head?
//

const parentContainer = document.getElementById('container');
// DOCUMENT.getElementById
// const parentContainer = document.querySelector('#container');

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

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

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

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

📚 element et document

📚 Sélecteurs CSS

Modifier les caractéristiques

  • Une fois qu'on récupère un element, on peut en modifier les caractéristiques.
  • Ce qui est déclaré en HTML est accessible en JavaScript.
js
Modification
copier
let firstParagraph = document.getElementById('p1');
firstParagraph.textContent = 'New <b>text</b>!'; // Texte BRUT de la balise
firstParagraph.innerHTML = '<button>Click here!</button>'; // Contenu HTML de la balise
firstParagraph.style.backgroundColor = 'blue'; // != background-color
firstParagraph.className = 'myClass'; // != class

document.getElementById('logo').src = '/img/logo.jpg';
html
copier
<!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>

<script>
const secondParagraph = document.getElementsByTagName('p')[1]; // querySelectorAll('p')[ ... ]
secondParagraph.innerHTML = 'Second paragraph edited.';
secondParagraph.style.color = 'red';

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

📚 Propriétés CSS disponibles

Manipuler la structure du DOM

  • On peut construire dynamiquement la structure d'une page web à l'aide de Javascript:
    • Ajouter, Déplacer, Retirer des éléments de la hiérarchie
js
Manipulation
copier
let newParagraph = document.createElement('p');
newParagraph.innerHTML = 'Le texte...';

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

ELEMENT.remove();

PARENT_ELEMENT.replaceChild(newParagraph, ELEMENT);
html
copier
<!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>

<script>
const newParagraph = document.createElement('p');
newParagraph.innerHTML = 'New paragraph: ';

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>

📚 Manipulations du DOM

Interactions avec l'utilisateur

Par défaut, le navigateur fourni également 3 boîtes de dialogue

js
Pop ups
copier
alert("Hey!");

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

const name = prompt("What is your name?");
console.log(`Prompt = ${name}`);
// Quelle est la différence entre annuler le prompt et confirmer sans rien écrire?
html
copier
<!DOCTYPE html>
<html>
<body>
<script>
function go() {
// Message uniquement
alert("Hey!");

// 2 boutons, cancel et ok
// on peut recuperer le choix de l'utilisateur
const ok = confirm("Are you sure?");
console.log(`Confirm = ${ok}`);

// Permet a l'utilisateur d'ecrire dans un champ texte
const name = prompt("What is your name?");
console.log(`Prompt = ${name}`);
}
</script>

<button onclick="go()">Go!</button>
</body>
</html>

Outils développeur du navigateur

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 :

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

📚 Chrome DevTools, Chrome DevTools pour JavaScript

📚 Outils développeur de Chrome et Firefox

👀 Dev Tools Secrets

Console extras

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

js
copier
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()

ℹ️ Plus d'options pour l'affichage à la Console

📚 Documentation Console

Débogueur

On peut utiliser console.log pour comprendre le chemin emprunté par notre code

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

Les navigateurs web modernes supportent le mécanisme de points d'arrêts

  • Instruction debugger; directement dans le code
  • Via les outils développeurs du navigateur

📚 Debugging in Chrome

Chrome DevTools 101

Référence

Démo!

js
copier
// 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"/>

// 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
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
// Tester à nouveau en déplaçant à la fin du body

// 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;
}
js
copier
//
// 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);