Archives de
Tag: javascript

Vue.js et localstorage

Vue.js et localstorage

Commentaires 0 Commentaire

Afin d’utiliser les données https://github.com/CSSEGISandData/COVID-19/tree/master/csse_covid_19_data/csse_covid_19_time_series nous allons les récupérés a la création de notre application. Pour ce faire nous regardons si nous avons dans le localstorage une date de défini ou de moins d’une heure. Si non, nous récupérons à l’aide de fetch les données, convertissons le csv a l’aide de papaparse puis stockons le résultats sous forme de JSON dans le localstorage. Une fois les 3 fichiers chargés grâce à Promise.all, nous allons vers la route /single. Le dépôt…

Lire la suite Lire la suite

for en JavaScript sur un tableau

for en JavaScript sur un tableau

Commentaires 0 Commentaire

Une grande partie viens de MDN. for Permet d’initialiser des variables, de spécifier une condition pour finir la boucle, une expression final exécuté a la fin de chaque boucle et enfin les instructions a effectuer. for…in Utile pour parcourir les propriété d’un objet. Attention avec les tableau car l’ordre de parcours n’est pas garantie. for…of Permet de parcourir tout objet itérable et d’exécuter les instructions. Array.forEach Exécute la fonction callback sur chacun des éléments. Sources: https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Instructions/for https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Instructions/for…in https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Instructions/for…of https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Objets_globaux/Array/forEach

Un plugin Gutenberg pour ajouter une carte Google statique

Un plugin Gutenberg pour ajouter une carte Google statique

Commentaires 8 commentaires

Gutenberg est le nouvel éditeur de WordPress, il est dans le même type que celui de Medium. Tout est bloc, texte, image, galerie, titre, liste. J’ai voulu voir comment rajouter un nouveau bloc. Il est basé sur React, c’est donc du JavaScript. La première partie du plugin est un fichier PHP afin de charger notre fichier JavaScript: function dayo_gutenberg_map_enqueue_block_editor_assets() { wp_enqueue_script( ‘dayo_gutenberg_map’, plugins_url( ‘block.js’, __FILE__ ), array( ‘wp-blocks’, ‘wp-element’ ) ); } add_action( ‘enqueue_block_editor_assets’, ‘dayo_gutenberg_map_enqueue_block_editor_assets’ ); La partie JavaScript fessant…

Lire la suite Lire la suite

Ajouter une option dans WordPress puis la récupérer avec l’API REST

Ajouter une option dans WordPress puis la récupérer avec l’API REST

Commentaires 0 Commentaire

Dans cette article nous verrons comment ajouter une option dans les réglages de WordPress, puis comment la récupérer avec une route REST personnalisé. La première étape est donc d’ajouter une nouvelle option dans l’onglet Général: add_action( ‘admin_init’, function () { add_settings_field( ‘dayo_map_key’, ‘Google Map Static API Key’, function () { echo ‘<input name= »dayo_map_key » id= »dayo_map_key » type= »text » value= »‘ . get_option( ‘dayo_map_key’ ) . ‘ » class= »code » />’; }, ‘general’ ); register_setting( ‘general’, ‘dayo_map_key’ ); } ); Ce qui donnera : L’étape suivante est…

Lire la suite Lire la suite

Vue.js partie 2

Vue.js partie 2

Commentaires 0 Commentaire

Allons un peu plus loin en ajoutant un formulaire et une collection de livre. Commençons par Vue.js. Pour ajouter un livre à une collection, il nous faut donc une collection de livre, un tableau feras l’affaire: data: { livre: {nom:  », commentaire:  », lu:  »}, livres: [] } Afin de commencer avec de livre, nous utilisons la fonction suivante qui est appelé lors de l’instanciation de Vue.js: ready: function() { var livres = [ { nom: ‘Fondation’, commentaire: ‘Un bon…

Lire la suite Lire la suite

Vue.js – partie 1

Vue.js – partie 1

Commentaires 0 Commentaire

Pour commencer à découvrir Vue.js, voyons avec un exemple simple comment fonctionne le Two–way Binding. Le code suivant permet de bien comprendre le Two-way Binding en action: <!DOCTYPE html> <html lang= »en »> <head> <meta charset= »UTF-8″> <title>Vue.js Lumen</title> </head> <body> <div id= »livres »> <h1>Ajouter un livre</h1> <input v-model= »livre.nom »><br /> <textarea v-model= »livre.commentaire »></textarea><br /> <input v-model= »livre.lu »><br /><br /> <h2>{{ livre.nom }}</h2> <p>{{ livre.commentaire }}</p> <p>{{ livre.lu }}</p> </div> <script src= »http://cdnjs.cloudflare.com/ajax/libs/vue/1.0.17/vue.js »></script> <script> new Vue({ // Sélecteur pour notre application Vue.js el: ‘#livres’, // Nos données serons stocké…

Lire la suite Lire la suite

Mes débuts avec Ember.js 1 [FR]

Mes débuts avec Ember.js 1 [FR]

Voulant m’essayer au framework JavaScript pour des Single Page Application j’ai cherché sur internet ce qu’il se fessait et mon choix c’est arrêté sur Ember.js. Pour commencer il faut créer la base l’application: Télécharger les dépendances, jQuery, Handlebars, Ember.js et Ember Data. Créer un fichier html Ajouter les feuilles de styles Le code de base est disponible dans un de mes dépôts github sous le tag 0.1. Dans un premier temps, nous allons créer notre application : App = Ember.Application.create();…

Lire la suite Lire la suite