Répéter une action à intervalles réguliers

Répéter une action à intervalles réguliers
6. Animez vos pages Répéter une action à intervalles réguliers Un premier niveau d'animation consiste à modifier le contenu d'un élément de manière répétée. Illustrons cela en créant un compte à rebours sur une page web. Fichier compteur.html et compteur1.js Le compte à rebours fonctionne... Ou plutôt semble fonctionner : il ne s'arrête jamais

6. Animez vos pages Répéter une action à intervalles réguliers Démarrer une action répétée Le programme JavaScript définit une fonction diminuerCompteur qui récupère puis décrémente (diminue de 1) la valeur de l'élément HTML qui affiche la valeur du compteur. L'appel à Number permet de convertir le texte du compteur (chaîne de caractères) en valeur numérique. Cette conversion est indispensable pour pouvoir ensuite effectuer l'opération mathématique de soustraction. C'est l'appel à setInterval qui déclenche le compte à rebours. Cette fonction permet d'appeler une fonction à intervalles réguliers. Les paramètres de setInterval sont la fonction à appeler et le délai entre deux appels. Ce délai est exprimé en millisecondes.

6. Animez vos pages Répéter une action à intervalles réguliers Annuler une action répétée compteur2.js À présent, essayons d'arrêter le compteur une fois le compte à rebours terminé. Nous allons en profiter pour modifier le texte de la page. Voici le code JavaScript de notre exemple, modifié pour atteindre ce résultat. Dans la fonction diminuerCompteur, on ne décrémente le compteur que si sa valeur actuelle est strictement supérieure à 1. Dans le cas contraire, on appelle la fonction clearInterval puis on modifie le contenu du titre affiché par la page. La fonction clearInterval permet de stopper une exécution répétée. Elle prend en paramètre l'identifiant de l'action, renvoyée par la fonction setInterval et stockée dans notre exemple dans la variable intervalId.

Effectuer une action après un délai
6. Animez vos pages Effectuer une action après un délai Imaginons que l'on souhaite modifier le texte de notre page après son "explosion". Pour cela, nous pouvons modifier notre exemple dans le fichier compteur3.js Une fois le compte à rebours terminé, on fait appel à setTimeout pour modifier de nouveau le titre après un délai de deux secondes. La fonction setTimeout permet d'exécuter une fonction une seule fois après un certain délai, exprimé en millisecondes.

Animer des éléments de la page
6. Animez vos pages Animer des éléments de la page deplacement.html Prenons comme exemple le déplacement d'un élément de type div de gauche à droite sur la page. Ajoutez l'extrait de code HTML suivant dans la balise<body> de la page web d'exemple. L'attribut CSS position: relative va nous permettre déplacer l'élément en modifiant sa propriété CSS left depuis le code JavaScript

6. Animez vos pages Animer des éléments de la page Débuter une animation Notre exemple de code définit une fonction deplacerBloc dont le rôle est de déplacer le bloc sur sa gauche. Pour cela, elle récupère la position actuelle du bord gauche du bloc, puis lui ajoute la valeur contenue dans la variable vitesse, ce qui a pour effet de décaler le bloc sur sa droite. Enfin, elle fait appel à requestAnimationFrame pour continuer l'animation. Les valeurs des positions sont exprimées en pixels. Ce sont des chaînes de caractères de la forme "XXpx", ce qui nécessite l'utilisation de la fonction parseFloat pour les convertir en valeurs numériques avant d'effectuer des calculs. La fonction requestAnimationFrame permet de demander au navigateur d'exécuter dès que possible une fonction qui met à jour une animation. Le terme "dès que possible" signifie que le navigateur va optimiser la mise à jour de l'animation afin de la rendre fluide.

6. Animez vos pages Animer des éléments de la page Débuter une animation Voici comment utiliser requestAnimationFrame en combinaison avec une fonction d'animation function animer() { // Code de l'animation // ... requestAnimationFrame(animer); }

6. Animez vos pages Animer des éléments de la page Stopper une animation Voyons maintenant comment arrêter le bloc lorsqu'il arrive au bout du cadre qui le contient. Pour cela, il faut vérifier si la position du bord gauche du bloc est inférieure à la largeur du cadre, en tenant compte de l'épaisseur du bloc lui-même. Voici le code JavaScript deplacement2.js modifié à cet effet. La nouvelle fonction deplacerBloc vérifie si le bloc est arrivé au bout du cadre avant de le déplacer. Si c'est le cas, elle arrête l'animation en appelant cancelAnimationFrame. La fonction cancelAnimationFrame permet de stopper une animation. Elle prend un paramètre l'identifiant de l'animation, stocké ici dans la variable animationId et renvoyé par chaque appel à requestAnimationFrame.

TP 6. Animez vos pages Chronometre
Récupérer la page web chronometre.html associée à un fichier chronometre.js qui permet de démarrer et d'arrêter un chronomètre qui compte le nombre de secondes écoulées. Ballon Récupérer la page web ballon.html créez le fichier ballon.js qui permet de faire rebondir le ballon de gauche à droite.

Interrogez votre serveur avec JavaScript
7. Interrogez un serveur web Interrogez votre serveur avec JavaScript Un premier exemple page serveur.html et serveur.js Il s'agit de l'exemple d'une liste de langages de programmation utilisé dans un précédent chapitre. Cette fois-ci, la liste des langages est initialement vide. Ouvrez la pagecours.html dans votre navigateur, puis affichez sa console. Une liste de langages s'affiche, ainsi qu'un message d'avertissement que nous expliquerons un peu plus loin. On peut vérifier que cette liste de langages correspond exactement au contenu du fichierlangages.txt publié par le serveur web

7. Interrogez un serveur web Interrogez votre serveur avec JavaScript L'objet XMLHttpRequest L'objet XMLHttpRequest permet de créer des requêtes HTTP en JavaScript. Sa méthode open permet de configurer la requête HTTP avant son lancement. Elle prend en paramètres le type de requête HTTP (le plus souvent GET, POST ou PUT), l'URL cible, ainsi qu'un booléen indiquant si la requête sera asynchrone ou non (voir plus loin). Sa méthode send envoie la requête HTTP vers l'URL cible fournie à open. Elle prend en paramètre l'éventuelle information envoyée au serveur (requêtes POST ou PUT), ou bien null dans le cas d'une requête GET Sa propriété responseText contient sous forme textuelle la réponse renvoyée par le serveur à la requête HTTP.

7. Interrogez un serveur web Interrogez votre serveur avec JavaScript L'exemple du code JavaScript La première ligne crée un nouvel objet nommé req en utilisant le constructeur XMLHttpRequest La deuxième ligne configure une requête HTTP GET synchrone vers l'URL La troisième ligne envoie la requête vers l'URL cible. La quatrième ligne affiche dans la console du navigateur la réponse reçue du serveur, c'est-à-dire le contenu du fichier langages.txt récupéré par la requête.

7. Interrogez un serveur web Interrogez votre serveur avec JavaScript Requêtes synchrones et requêtes asynchrones Une requête HTTP synchrone bloque le programme appelant jusqu'à ce que la réponse soit disponible, ce qui peut prendre un certain temps. Passer en mode asynchrone Pour y arriver, nous allons employer une technique que vous connaissez déjà : les événements ! Grâce à eux, notre programme sera notifié de la disponibilité de la réponse et pourra y réagir. Voici notre exemple précédent réécrit de manière asynchrone. serveur-asynchrone.js Un événement de type load indique la fin du traitement de la requête par le serveur. Le gestionnaire associé affiche son résultat dans la console. Le résultat obtenu est identique, mais le fichier langages.txt est maintenant récupéré de manière asynchrone et le message d'avertissement a disparu.

7. Interrogez un serveur web Interrogez votre serveur avec JavaScript Gestion des erreurs Tout échange entre deux programmes peut donner lieu à des erreurs : l'URL cible est incorrecte, le serveur est indisponible, le réseau dysfonctionne, etc. La gestion des erreurs est une problématique complexe. Fixons-nous comme premier objectif de les détecter pour les afficher dans la console du navigateur. serveur-erreur.js

7. Interrogez un serveur web Interrogez votre serveur avec JavaScript Gestion des erreurs On distingue deux principaux cas d'erreur : La requête n'a pas réussi à atteindre le serveur (nom du serveur incorrect, erreur réseau, etc). Ces erreurs déclenchent l'apparition d'un événement de type error sur la requête. Le gestionnaire associé affiche le message "Erreur réseau" dans la console. La requête a atteint le serveur, mais son traitement a échoué (ressource demandée non trouvée, problème interne au serveur, etc). C'est le code de retour HTTP de la requête, contenu dans sa propriété status, qui indique son résultat. Un code supérieur ou égal à 200 et strictement inférieur à 400 signale la réussite de la requête. Tester avec le serveur localghost et langage.txt

7. Interrogez un serveur web Interrogez votre serveur avec JavaScript Écrire une fonction AJAX générique Imaginez que votre programme JavaScript ait plusieurs requêtes HTTP à effectuer. À chaque appel, il faudrait dupliquer le code précédent en modifiant uniquement l'URL cible et le traitement en cas de réussite de la requête. Cette duplication alourdirait significativement le code source et le rendrait peu lisible. La solution classique pour éviter de dupliquer du code consiste à factoriser (centraliser) le code auparavant dupliqué, puis à faire appel à ce code toutes les fois que c'est nécessaire. En JavaScript, cela se traduit souvent par la création de fonctions. Voici comment nous pouvons faire pour factoriser le code d'exécution d'une requête HTTP asynchrone, autrement dit un appel AJAX. functionAJAX.js

7. Interrogez un serveur web Interrogez votre serveur avec JavaScript Écrire une fonction AJAX générique La fonction ajaxGet permet d'exécuter une requête HTTP asynchrone. Elle prend en paramètres l'URL cible et la fonction appelée en cas de succès de la requête. En effet, JavaScript permet de passer des fonctions en paramètre comme n'importe quelle autre valeur. Le terme callback utilisé ici comme nom du second paramètre est souvent employé pour désigner une fonction appelée ultérieurement, en réaction à un certain événement. Les messages d'erreur ont été améliorés et affichent à présent l'URL cible en plus des autres informations. Cette fonction est dite générique : elle n'est pas spécifique à un contexte ou des données particuliers, et peut être utilisée dans tout programme JavaScript qui a besoin d'effectuer des appels AJAX. Le code de lancement d'un appel AJAX est considérablement simplifié : il suffit de créer la fonction qui gère le résultat puis d'appeler ajaxGet.

7. Interrogez un serveur web Interrogez votre serveur avec JavaScript Écrire une fonction AJAX générique fonction anonyme function afficher(reponse) { console.log(reponse); } ajaxGet(" afficher); ajaxGet(" function (reponse) { console.log(reponse); });

TP 7. Interrogez un serveur web
Afficher la liste des programmes contenus dans le fichier langages.txt. utiliser la méthode split,

7. Interrogez un serveur web Interrogez votre serveur avec JavaScript Gestion du format JSON par JavaScript Transmettre des informations sous forme d'un fichier texte se révèle vite limité lorsque ces informations sont structurées : par exemple, lorsqu'il s'agit d'une liste d'éléments possédant tous les mêmes propriétés. C'est pourquoi on emploie souvent le format JSON pour échanger des données entre programmes. .

7. Interrogez un serveur web Interrogez votre serveur avec JavaScript Présentation de JSON (JavaScript Object Notation) est un format léger d'échange de données. Il est facile à lire ou à écrire pour des humains. Il est aisément analysable ou générable par des machines. JSON est un format texte complètement indépendant de tout langage, mais les conventions qu'il utilise seront familières à tout programmeur JSON se base sur deux structures: Une collection de couples nom/valeur. Une liste de valeurs ordonnées . Voir avion.json

7. Interrogez un serveur web Interrogez votre serveur avec JavaScript Présentation de JSON (JavaScript Object Notation) Le langage JavaScript permet de gérer facilement ce format de données. La fonction JSON.parse permet de transformer une chaîne de caractères conforme au format JSON en un objet JavaScript. La fonction JSON.stringify joue le rôle inverse : elle transforme un objet JavaScript en chaîne de caractères conforme au format JSON Voir transforme.html

7. Interrogez un serveur web Interrogez votre serveur avec JavaScript Récupérer des données JSON depuis un serveur La technique utilisée pour récupérer des données JSON est la même que pour un fichier texte, et nous allons pouvoir réutiliser notre fonction générique ajaxGet. Seul le traitement de la réponse reçue diffère pour s'adapter au format JSON. Voir serveur-json.html

7. Interrogez un serveur web Interrogez votre serveur avec JavaScript TP L'objectif de cet exercice est d'afficher sous forme tabulaire des informations sur quelques oeuvres peintes entre la fin du XIXe et le début du XXe siècle. Voici les tableaux à afficher : "La Nuit étoilée" de Vincent Van Gogh, peint en 1889. "Le Cri" d'Edvard Munch, peint en 1893. "Guernica" de Pablo Picasso, peint en 1937. Commencez par créer un fichie rtableaux.json rassemblant les informations ci-dessus. Afficher le contenu du fichier dans une page.

Introduction aux API web
8. Utilisez des API web Introduction aux API web Une API (Application Programming Interface ou interface de programmation) est un ensemble de services offert par un logiciel à d'autres logiciels. Grâce aux API, les programmes informatiques peuvent interagir entre eux selon des conditions déterminées. On appelle API web une API accessible via les technologies du Web, notamment le protocole HTTP ou sa version sécurisée HTTPS. Un nombre croissant de sites et de services en ligne proposent des API web destinées aux développeurs. Elles offrent à ces développeurs le moyen d'exploiter leurs données et leurs services.

Introduction aux API web
8. Utilisez des API web Introduction aux API web

Consommez une API web 8. Utilisez des API web
Pour pouvoir consommer (utiliser) une API web, il faut connaître son adresse et son mode de fonctionnement. La plupart des API web sont accessibles via une URL et utilisent le format JSON pour les échanges de données. Testez une API web avec le navigateur La première API que nous allons utiliser expose une liste d'articles, un peu à la manière d'un blog. Elle est accessible à l'URL et renvoie des données au format JSON. Pour obtenir une meilleure présentation du résultat, il est conseillé d'installer une extension de navigateur comme par exemple RESTClient pour Firefox ou Postman pour Chrome. Ces extensions sont très pratiques pour bien comprendre comme fonctionne une API avant de l'utiliser dans un programme.

Exploitez une API web avec JavaScript
8. Utilisez des API web Exploitez une API web avec JavaScript À présent que nous connaissons l'URL de l'API et le type de données qu'elle renvoie, essayons d'y faire appel depuis notre page web. Pour cela, nous allons réutiliser la technique des appels AJAX étudiée au chapitre précédent. Voir api.js api.html L'utilisation d'une API web se fait exactement comme l'interrogation d'un serveur web local. La fonction ajaxGet est réutilisée pour fournir le mécanisme d'appel et la gestion des erreurs. La liste des articles est traduite en un tableau d'objets JSON puis affichée dans la page web.

8. Utilisez des API web Exploitez une API web avec JavaScript Autre exemple d'api : informations sur la fonction de Premier Ministre

8. Utilisez des API web Exploitez une API web avec JavaScript TP Profil GitHub (api nom de profil github.html TP Mini-lexique (api lexique.html

Répéter une action à intervalles réguliers

Présentations similaires

Présentation au sujet: "Répéter une action à intervalles réguliers"— Transcription de la présentation:

Présentations similaires

Notre projet

Feed-back

Entrer

S'autoriser via un réseau social:

Répéter une action à intervalles réguliers

Présentations similaires

Présentation au sujet: "Répéter une action à intervalles réguliers"— Transcription de la présentation:

Présentations similaires

Notre projet

Feed-back