Langage avancé API HTML5
Le terme HTML5 ne fait pas uniquement référence au langage HTML. En fait, HTML5 représente:
- l'évolution du langage HTML
- l'évolution des CSS (CSS3)
- l'ajout de nouvelles API JavaScript
C'est d'ailleurs surtout cette dernière partie qui apporte à HTML5 son coté le plus intéressant, avec les notions d'interactions avancées, de stockage coté client, d'accès au système et au hardware, etc. Voici quelques APIs les plus intéressantes:
Device Orientation#
L'API Device Orientation permet de récupérer la position d'un device dans l'espace. Les trois angles Alpha (Z), Beta (X) et Gamma (Y) sont ainsi connus.
Ecoute l'évènement
window.addEventListener('deviceorientation', function(event) {
let a = event.alpha; // autour de Z
let b = event.beta; // autour de X
let g = event.gamma; // autour de Y
}, false);
Un exemple complet sur HTML5Rocks
Storage#
Une des principales avancées de HTML5 et sans doute le stockage client. Il est désormais possible de stocker de manière très simple de grosses quantités de données, sans la lourdeur des cookies. Pour cela, plusieurs options:
localStorage
pour un stockage persistent des donnéessessionStorage
pour un stockage pendant la session de l'utilisateur
Les deux stockages se font sous la forme de paire clé/valeur.
Stockage et récupération de données
localStorage.setItem('value', value);
localStorage.getItem('value');
Il n'existe pas de limite de stockage. Les navigateurs vont cependant faire en sorte de réserver au minimum 5Mo.
Exercice - Stockage#
Nous allons réaliser un compteur de click (avec persistance des données)
Pour cela, dans une page HTML :
- créez deux boutons (Ajoute et Enlève)
- lors du click sur chaque bouton, ajoutez ou enlevez 1 à un compteur (initialisé à 0)
- affichez cette valeur dans la page
- stockez cette valeur dans le stockage local persistant (cherchez où le navigateur stocke cette donnée)
Enfin, faites en sorte que le stockage local soit utilisé lorsque l'on recharge la page et/ou ferme et réouvre l'onglet
Indexed DB#
L'API IndexedDB va encore plus loin puisqu'elle offre une véritable base de données indexée au sein du navigateur. Pour en savoir plus, voir cet exemple de création d'une todolist
FileAPI#
La File API permet la manipulation de fichier coté client. Cela permet par exemple de lire une image lors du drag & drop de celle-ci depuis le système.
Upload d'images en drag & drop
<div class="drop">Déposez-ici !</div>
.drop {
width: 200px;
height: 200px;
border: 5px dashed #333;
}
// element
let drop = document.querySelector('.drop');
// events
drop.addEventListener('dragover', dragover);
drop.addEventListener('drop', dropin);
// helpers
function dragover (e) {
// event dragover doit obligatoirement empêcher l'action par défaut du navigateur
e.preventDefault();
};
function dropin (e) {
// empêcher l'action par défaut du navigateur (pour éviter l'affichage de l'image)
e.preventDefault();
// récup du fichier transferé, et nouvel objet FileReader
let file = e.dataTransfer.files[0],
reader = new FileReader();
// event load sur le FileReader
reader.addEventListener('load', function (event) {
// met l'image en arrière-plan de l'élément (via CSS)
drop.style.background = 'url(' + event.target.result + ') no-repeat center / 100% 100%';
});
// lit le fichier reçu en Data URL (base 64)
reader.readAsDataURL(file);
};
D'autres méthodes existent, comme FileReader.readAsArrayBuffer()
, FileReader.readAsText()
ou encore FileReader.readAsBinaryString()
Graphiques#
De gros efforts ont été faits concernant l'environnement graphique dans le navigateur. Il est aujourd'hui possible de dessiner en 2D, en vectoriel et même en 3D.
Canvas#
L'élément HTML <canvas>
crée un contexte graphique 2D/3D de dessin via JavaScript. Pour le mode 3D, on parle alors de WebGL.
Création d'un rond en 2D
<canvas id="canvas" width="200" height="100"></canvas>
let canvas = document.getElementById('canvas');
let ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineTo(100, 100);
ctx.stroke();
Exercices - Art génératif#
- Creéz un élément
<canvas>
en HTML - Récupérez cet élément et son contexte 2D en JS
- Définissez la largeur et hauteur du
<canvas>
(320px * 320px) - Créez une fonction
dessine(x, y, largeur, hauteur)
qui doit dessiner une diagonale: un trait du pointx
/y
, jusqu’au pointx+largeur
/y+hauteur
- Testez cette fonction
- Créez une fonction
vraiOuFaux()
qui doit renvoyer vrai ou faux de manière aléatoire - Utilisez cette fonction
vraiOuFaux()
dansdessine()
pour aléatoirement dessiner une diagonale du haut/gauche vers le bas/droite OU depuis le haut/droite vers le bas/gauche - Enfin, définissez un quadrillage et appellez la fonction
dessine()
pour chaque case- Créez une variable
pas
(80px par exemple, soit 4 cases * 4 cases) - Créez une double boucle (
i
etj
augmentant depas
) - Appellez
dessine()
en lui passant les bons paramètres (x
,y
etpas
) - Modifiez le pas à votre convenance
- Créez une variable
Voici une démo simple et une plus complexe
Des démos WebGL: Pablo The Flamingo.
Un framework à découvrir pour une prise en main rapide de WebGL: BabylonJS
WebSockets#
Par défaut, les échanges client/serveur s’effectuent au travers d’une connexion HTTP de manière unidirectionnelle. Le client demande une info au serveur et le serveur lui répond (possiblement en arrière plan grâce à AJAX).
L’API WebSockets est basée sur les socket TCP qui permettent d’aller plus loin en établissant une connexion ouverte bi-directionelle entre le serveur et les clients connectés. Les clients peuvent alors envoyer un message au serveur et celui ci peux le renvoyer en broadcast, c’est à dire à tous les clients, sans demande de leur part. Les échanges sont simplifiés par des entêtes réduites.
Cela est notamment nécessaire dans le cadre du web temps-réel.