Fiche Javascript :

Objet de la fiche :

État de la fiche

Plan de la fiche :

• | Avant propos |
• | Custom Data Attributes |
• | La balise progress |
• | Evènements concernant les animations : API AnimationEvent |
• | La balise canvas |
• | Accés aux fichiers locaux : API Files |
• | Application au projet de site Web |

Avant propos :

Le Html5 est une évolution de portée considérable qui modifie totalement la conception des pages et applications Web. On va aborder ici quelques unes de ces API sous fourme pratique avec de nombreux exemples. D'autres API et particulièrement celles liées à l'audio, à la vidéo et au glisser/coller seront abordées dans les fiches suivantes.

Custom Data Attributes

Rappel

HTML5 permet d'écrire librement tout attribut débutant par data- et ainsi associer des données personnalisées directement dans un élément HTML.

La propriété dataset permet d'interagir avec ces données. Chaque attribut data est membre de dataset.

Exemple simple

Exemple
Survolez l'image

Nous venons de voir comment lire ces attributs, mais il est aussi possible :

• de les modifier : document.getElementById('img_data').dataset.lieu = "Fontainebleau";
• de les supprimer : document.getElementById('img_data').dataset.date = null;

Remarque

L'API dataset n'étant pas à l'heure actuelle implémentée de façon universelle, on peut utiler l'autre alternative JavaScript, à savoir l'accès classique aux attributs quels qu'ils soient (getAttribute et setAttribute) et pourquoi pas ceux débutant par data-.

• Pour lire un attribut : var lieu = document.getElementById('img_data').getAttribute('data-lieu');
• Pour modifier un attribut : document.getElementById('img_data').setAttribute('data-lieu') = "Fontainebleau";
• Pour supprimer un attribut : document.getElementById('img_data').removeAttribute('data-date');

La balise progress

But

La balise "progress" permet d'afficher l'état d'avancement d'une tâche ou d'une action à l'aide d'une barre de progression.
javascript va nous permettre d'animer cette barre.

Syntaxe et propriétés spécifiques

<progress (propriété générales) (propriétés spécifiques)></progress>

Exemple simple

Evènements concernant les animations : API AnimationEvent

CSS3 permet de mettre en oeuvre des animations très efficaces en termes de richesse, fluidité et rapidité, mais une fois les styles déclarés on perd le contrôle des différentes "frame". Heureusement, l'interface AnimationEvent nous apporte des informations sur les animations CSS en cours.

Attention : Ces fonctionnalités sont encore expérimentales et en cours d'évolution. Elles peuvent donc ne pas fonctionner sur certains navigateurs.

Le gestionnaire d'évènements

Les évènements disponibles

Trois types d'évènements sont disponibles durant le déroulement de l'animation.

Propriérés de l'interface AnimationEvent

Toures ces propriétés sont en lecture seule.

Déclaration des évènements

C'est la déclaration classique avec addEventListener

Reprenons l'exemple purement CSS3 de la fiche CCS_HTML5

Partie html	Partie CSS
<div id="blop"></div>	#blop{ position:relative; background-color: red; height: 50px; width: 50px; border-radius: 50%; margin:auto;top:0px; animation: changeColor 3s 2, changeSize 3s ease-in 2, moveH 3s 6.5s 3 ; } @keyframes changeColor { 0% {background-color: red;} 100% {background-color: green;} } @keyframes changeSize { 0% {transform: scale(1)} 100% {transform: scale(1.6)} } @keyframes moveH { from { margin-left:-20%; } to { margin-left:100%;} }

Remarques sur le code

• Relancer une animation avec javascript :
  
  Il n'existe pas de méthode pour relancer une animation lorsqu'elle est terminée. L'astuce consiste à supprimer la classe associée à l'élément, puis à la redéfinir, ce qui oblige le DOM à se remettre à jour et ainsi re-exécuter l'animation. Pour cela on va utiliser la méthode toggle de classList
  Si la classe blop est affectée, on la retire et on retourne false; Sinon, on l'ajoute et retourne true.
  resultClassList = anim.classList.toggle("blop");
• événement animationiteration :
  Notez que lors de la fin de l'animation, l'événement animationiteration n'est pas envoyé, seul animationend est déclenché.

La balise canvas

Tracer des formes simples (droites, rectangles)

Accés aux fichiers locaux : API Files

HTML5 met à disposition une API standard pour interagir avec les fichiers locaux au travers des spécifications de l'API files.

Il existe 3 niveaux de l'API File:

• File API: Reader ou autrement appelé FileReader API pour lire des fichiers locaux,
• File API: Writer ou autrement appelé FileWriter API pour créer, sauvegarder ou modifier des fichiers locaux,
• File API: Directories ou autrement appelé FileSystem API pour effectuer toutes opérations sur des répertoires (créer, renommer, effacer, copier, déplacer, etc.

Interface File : File objects et Blob objects

Généralités

Propriétés

• object.size : taille du fichier.
• object.name : le nom du fichier.
• object.type : type MIME du fichier.
• object.lastModifiedDate : date de la dernière modification.

Interface FileReader()

Possibilités

• Lire(via l'interface FileReader) un fichier ou les données d'un fichier à n'importe quelle position d'octet.

Syntaxe

var reader = new FileReader();
var f = files[i] // fichiers objets

EventTarget

• EventTarget.addEventListener() : supervision d'évènements spécifiques.
• EventTarget.removeEventListener() : suppression de la supervision d'un évènement.
• EventTarget.dispatchEvent() : Envoie un évènement dans le système d'évènements.

Propriétés et méthodes

Note¹ les Blob

Définition

Structure

Convertir un blob en fichier

note² les tableaux typés

Exemples

On va utiliser l'élément HTML Input qui est une extensions (comme le sont Form, Select, Embed, etc) de la classe centrale HTMLElement pour sélectionner les fichiers.

Avec readAsDataURL

Avec readAsText

Avec readAsArrayBuffer

Avec readAsBinaryString

JavaScript retourne la liste des fichiers sélectionné sous forme d'une FileList.

Interface FileWriter()

Propriétés et méthodes

Interface FileSystem()

Propriétés et méthodes

Application au projet de site web