Introduction aux API Web
Les API (Application Programming Interfaces soit « interface de programmation d'application
») sont des constructions disponibles dans les langages de programmation pour permettre
aux développeurs de créer plus facilement des fonctionnalités complexes. Elles s'occupent
des parties de code plus complexes, fournissant au développeur une syntaxe plus facile à
utiliser à la place.
En guise d'exemple concret, pensez à des branchements électriques dans une maison,
appartement ou autre logement. Si vous souhaitez utiliser un appareil dans votre maison, il
vous suffit de le brancher dans une prise et cela fonctionne. Vous n'essayez pas de le
brancher directement à l'alimentation électrique — le faire serait réellement inefficace, et, si
vous n'êtes pas électricien, difficile et dangereux à réaliser.
Source de l'image : Overloaded plug socket par The Clear Communication People, sur
Flickr.
De la même façon, par exemple, pour programmer des graphismes en 3D, il est beaucoup
plus facile de le faire en utilisant une API écrite dans un langage de haut niveau comme
JavaScript ou Python, plutôt que d'essayer d'écrire du code bas niveau (comme C ou C ++)
qui contrôle directement le GPU de l'ordinateur ou d'autres fonctions graphiques.
Note : Voir aussi l'entrée du glossaire du terme API pour plus de descriptions.
API JavaScript côté client
Le JavaScript côté client en particulier a de nombreuses API à sa disposition — elles ne font
pas partie du langage JavaScript lui-même, elles sont construites par-dessus JavaScript,
offrant des super-pouvoirs supplémentaires à utiliser dans votre code. Elles appartiennent
généralement à une des deux catégories :
● Les API du navigateur sont intégrées au navigateur web et permettent de rendre
disponibles les données du navigateur et de son environnement afin de réaliser des
choses complexes avec. Ainsi, l'API Web Audio fournit des constructions JavaScript
pour manipuler des données audio dans le navigateur. On pourra utiliser cette API
afin de récupérer une piste audio puis d'abaisser son volume, d'y appliquer des
effets, etc. Sous le capot, c'est le navigateur qui s'occupe des couches plus
complexes en code « bas niveau » (C++ ou Rust par exemple) afin de réaliser le
traitement du signal. Là encore, cette complexité est masquée par l'abstraction
offerte par l'API.
● Les API tierces ne sont pas intégrées au navigateur par défaut, et vous devez
généralement récupérer le code de l'API et des informations depuis un site Web. Par
exemple: l'API Twitter vous permet d'afficher vos derniers tweets sur votre site Web.
Elle fournit un ensemble de constructions que vous pouvez utiliser pour interroger le
service Twitter et qui renvoie alors les informations demandées.
Relations entre JavaScript, les API et autres outils JavaScript
Ci-dessus, nous avons indiqué ce qu'est une API JavaScript côté client et sa relation avec le
langage JavaScript. Pour récapituler, clarifier, et apporter plus de précisions sur d'autres
outils JavaScript qui existent:
● JavaScript — Un langage de programmation de haut niveau intégré aux navigateurs,
qui permet de mettre en œuvre des fonctionnalités sur les pages et applications
Web. Notez que JavaScript est également disponible dans d'autres environnements
de programmation, tels que Node. Mais ne vous en préoccupez pas pour l'instant.
● Les API du navigateur — Constructions intégrées dans le navigateur, situées
au-dessus du langage JavaScript, permettant une mise en œuvre plus facile de
fonctionnalités.
● Les API tierces — Constructions intégrées à des plateformes tierces (par exemple
Twitter, Facebook) qui permettent d'utiliser certaines fonctionnalités de ces
plateformes dans vos propres pages Web (par exemple: afficher vos derniers Tweets
sur votre page Web).
● Les bibliothèques JavaScript — Habituellement, un ou plusieurs fichiers JavaScript
contenant des fonctions personnalisées que vous pouvez attacher à votre page Web
pour accélérer ou activer l'écriture de fonctionnalités courantes. Des exemples
incluent jQuery, Mootools et React.
● Les frameworks JavaScript — Au-dessus des bibliothèques, les frameworks
JavaScript (par exemple Angular et Ember) sont plutôt des packages de HTML,
CSS, JavaScript et autres technologies, que vous installez puis utilisez pour écrire
une application web entière. La différence essentielle entre une bibliothèque et un
framework est « l'Inversion du Contrôle ». Avec une bibliothèque, c'est le
développeur qui appelle les méthodes de la bibliothèque — il exerce le contrôle.
Avec un framework, le contrôle est inversé : c'est le framework qui appelle le code du
développeur.
Aller plus Loin :
[Link]
Introduction
Jusq l’instant j’ai vu l’object Window qui pointe sur un
document DOM, en particuler son gestionnaire
d’evenements ONLOAD. et cela dans l’exercice du
serpent; lorsque ma page html est chargé on souhaite
afficher notre canevas et ainsi de suite en affectant une
fonction qui va faire tout ça : pour découvrir plus sur
cette interface, la difference entre ses proprietes, ses
méthodes et ses géstionnaires d’evenements je
CLICKE ICI :
window
L'objet window représente une fenêtre contenant un
document DOM ; la propriété document pointe vers le
document DOM chargé dans cette fenêtre. Une fenêtre
pour un document donné peut être obtenue en utilisant
la propriété [Link].
Cette section fournit une brève référence pour toutes
les méthodes, propriétés et événements disponibles
via l'objet DOM window. L'objet window implémente
l'interface Window, qui à son tour hérite de l'interface
AbstractView. Certaines fonctions globales
supplémentaires, espaces de noms, objets, interfaces
et constructeurs, non typiquement associés à la
fenêtre, mais disponibles sur celle-ci, sont répertoriés
dans la Référence JavaScript et la Référence DOM.
Dans un navigateur utilisant des onglets, comme
Firefox, chaque onglet contient son propre objet
window (et si vous écrivez une extension, la fenêtre du
navigateur elle-même est un objet window séparé —
consultez Travailler avec des fenêtres dans du code
chrome pour plus d'informations). C'est-à-dire que
l'objet window n'est pas partagé entre les onglets dans
la même fenêtre. Certaines méthodes, notamment
[Link] (en-US) et [Link],
s'appliquent à la fenêtre entière et non à l'onglet
spécifique auquel l'objet window appartient. En
général, ce qui ne peut raisonnablement pas concerner
un onglet se rapporte à la fenêtre à la place.
EventTarget
Window
Propriétés
Cette interface hérite des propriétés de l'interface
EventTarget.
Notez que les propriétés qui sont des objets (par
exemple, pour redéfinir le prototype d'éléments
intrinsèques) sont répertoriées dans une section
distincte ci-dessous.
[Link] Non-Standard Lecture seule
Cette propriété indique si la fenêtre en cours est fermée
ou non.
[Link] Lecture seule
Renvoie une référence à l'objet console qui fournit
l'accès à la console de débogage du navigateur.
[Link] et Window._content Non-Standard
Deprecated Lecture seule
Renvoie une référence à l'élément de contenu dans la
fenêtre en cours. Depuis Firefox 57 (initialement Nightly
uniquement), les deux versions sont uniquement
disponibles à partir du code chrome (privilégié) et ne
sont plus disponibles sur le Web.
[Link] Non-Standard Lecture seule
Renvoie les objets du contrôleur XUL pour la fenêtre
chrome en cours.
[Link] seule
renvoie une référence à l'objet CustomElementRegistry
(en-US), qui peut être utilisée pour enregistrer de
nouveaux éléments personnalisés et obtenir des
informations à propos d'éléments personnalisés
précédemment enregistrés.
[Link] Lecture seule
Retourne l'objet crypto du navigateur.
[Link] Deprecated
Récupère / définit le texte de la barre d'état pour la
fenêtre donnée.
[Link] Non-Standard Lecture seule
Renvoie le rapport entre les pixels physiques et les
pixels indépendants du périphérique dans l'affichage
en cours.
[Link] Lecture seule
Récupère les arguments passés à la fenêtre (si c'est
une boîte de dialogue) au moment où
[Link]() a été appelé. C'est un
nsIArray.
[Link] Deprecated
Synonyme de [Link] (en-US)
[Link] Lecture seule
Renvoie une référence au document que la fenêtre
contient.
[Link] Lecture seule Experimental
Renvoie une référence à un objet DOMMatrix
représentant des matrices 4x4, adapté aux opérations
2D et 3D.
[Link] Lecture seule
Experimental
Renvoie une référence à un objet DOMMatrixReadOnly
(en-US) représentant des matrices 4x4, adapté aux
opérations 2D et 3D.
[Link] Lecture seule Experimental
Renvoie une référence à un objet DOMPoint
représentant un point 2D ou 3D dans un système de
coordonnées.
[Link] Lecture seule
Experimental
Renvoie une référence à un objet DOMPointReadOnly
représentant un point 2D ou 3D dans un système de
coordonnées.
[Link] Lecture seule Experimental
Renvoie une référence à un objet DOMQuad, qui fournit
un objet quadrilatère, c'est-à-dire, ayant quatre coins et
quatre côtés.
[Link] Lecture seule Experimental
Returns a reference to a DOMRect object, which
represents a rectangle.
[Link]
[Link]()
La méthode [Link]() de l'API
Canvas 2D API enregistre l'état complet du canvas en
plaçant l'état courant dans une stack.
L'état du dessin
L'état du dessin qui est sauvegardé dans une stack se
compose de :
● La matrice de transformation actuelle.
● La région de détourage actuelle.
● Le tableau pour les tracés en pointillés.
● Les valeurs des attributs suivant : strokeStyle,
fillStyle, globalAlpha, lineWidth (en-US), lineCap,
lineJoin, miterLimit (en-US), lineDashOffset (en-
US), shadowOffsetX (en-US), shadowOffsetY (en-
US), shadowBlur (en-US), shadowColor (en-US),
globalCompositeOperation, font, textAlign,
textBaseline, direction, imageSmoothingEnabled.
Syntaxe
void [Link]();
Exemples
Enregistrer l'état du dessin
Cet exemple utilise la méthode save() pour enregistrer
l'état par défaut et restore() pour le rétablir plus tard, on
pourra ainsi dessiner un rectangle avec l'état de base
après.
HTML
<canvas id="canvas"></canvas>
JavaScript
const canvas = [Link]('canvas');
const ctx = [Link]('2d');
// On sauvegarde l'état par défaut
[Link]();
[Link] = 'green';
[Link](10, 10, 100, 100);
// On restaure l'état par défaut
[Link]();
[Link](150, 40, 100, 100);
Résultat :