Ressources Magic Makers

EXPERIMENTER

J'apprends en me trompant.

EXPERIMENTER

J'apprends en me trompant.

PARTAGER

J'ai des idées et je les partage avec les autres.
partager

PARTAGER

J'ai des idées et je les partage avec les autres.

RAISONNER

Je suis fier de ce que je fais.

RAISONNER

Je suis fier de ce que je fais.

INVENTER

Je suis la pour créer.

INVENTER

Je suis la pour créer.

S'AMUSER

Je viens parce que j'en ai envie.

S'AMUSER

Je viens parce que j'en ai envie.
Menu
UP

 

Site en maintenance

 
Nous sommes actuellement entrain de mettre à jour les ressources de ce site.
Pendant la mise à jour vous pouvez retrouver tous les nouveaux contenus sur le site
 

https://lp-magicmakers.fr/

 
 

Meteor avec JavaScript

On a un peu vu comment marchait Meteor mais on va ajouter un peu plus de JavaScript pour avoir des interactions un peu plus poussées.

La variable Session

La variable Session est très utile en Web, elle permet de stocker des informations importantes sur ce qu’un utilisateur fait. Par exemple on en a besoin pour les Templates dynamiques car elle nous permet de nous souvenir où l’utilisateur est sur notre site. La variable Session n’est pas partagée entre les différents utilisateurs.

La variable Session est un tableau au quel on peut associer une clé et une valeur. Dans notre code on pourra récupérer la valeur souhaitée, changer une valeur en connaissant sa clé.

De plus la variable Session, une fois définie est disponible dans les fichiers JavaScript.

Pour utiliser la variable Session il suffit de taper dans son terminal :

1
meteor add session

Une fois qu’on a ajouté la variable session dans notre projet on a plus besoin d’y retoucher.

Pour déclarer une variable Session on utilise la fonction set() au début de notre code, après les imports :

1
2
3
4
//Variable session
Session.set('page', 'home');
Session.set('mois', 0);
Session.set('annee', 2019);

Puis pour récupérer la valeur associée à une clé de notre variable Session :

1
var page = Session.get('page');

La variable Session est comme les autres variables, on donne un nom au clé qui a du sens et qui nous permettra de nous y retrouver !

Programmer ses Templates

On a créé des Templates mais maintenant on va chercher à les programmer. Pour ce faire on aura besoin de la ligne d’import au début de notre fichier JavaScript :

1
import { Template } from 'meteor/templating';

On peut distinguer trois grandes fonctions qui nous permettront de faire des choses vraiment différentes : « onCreated », « helpers » et « events. »

Chacune de ses fonctions ne pourra être déclarée qu’une seule fois par Template.

Template exemple :

1
2
3
4
<template name="hello">
  <button>Click Me</button>
  <p>You've pressed the button {{counter}} times.</p>
</template>

onCreated

onCreated est utilisée comme son nom l’indique à la création du Template, donc au chargement de la page. On va l’utiliser pour déclarer des variables qu’on souhaite avoir pour la suite par exemple.

Exemple : On crée une variable counter qui commence à 0.

1
2
3
4
Template.hello.onCreated(function helloOnCreated() {
    //La variable counter commence à 0
    this.counter = new ReactiveVar(0);
});

helpers

La deuxième est « helpers() » elle va nous permettre d’afficher des informations dans la page HTML. Pour l’utiliser on crée un bloc pour le Template que l’on cherche à modifier.

Exemple : On injecte dans le HTML la variable counter.

1
2
3
4
5
Template.hello.helpers({
    counter: function() {
        return Template.instance().counter.get();
    },
});

Dans notre page HTML on a :

<p>You've pressed the button {{counter}} times.</p>

Avec entre nos accolades un mot clé qu’on va ensuite programmer dans notre JavaScript.

Dans notre page Javascript on a une fonction qui s’appelle counter. Dans cette fonction il ne faut pas oublier de retourner (return) une valeur.

events

La fonction « events » s’utilise avec les événements JavaScript et HTML qui vont se passer sur la page. Elle permet d’agir quand un bouton est pressé, un formulaire remplie, et bien d’autre encore. Elle s’utilise de la manière suivante :

Exemple : Quand on clique sur le bouton on ajoute 1 à la variable counter.

1
2
3
4
5
6
Template.hello.events({
    'click button'(event, instance) {
        //rajoute un à la variable
        instance.counter.set(instance.counter.get() + 1);
    },
});

La syntaxe pour la fonction « events » est la suivante. Entre les guillemets on a d’abord le nom de l’évènement JavaScript, espace, puis le nom de l’élément. Ça peut être le nom de la balise ou le nom d’une classe (auquel on rajoute un point devant : « .classe »), ou le nom d’un ID (auquel on rajoute un dièse devant : « #id »).

Les événements

Les événements en JavaScript permettent de savoir lorsqu’un utilisateur fait une action sur la page. Par exemple on peut utiliser les événements pour savoir quand un utilisateur click sur un bouton. Dans Meteor on utilise la fonction events sur le template, comme expliqué juste au dessus.

Liste non-exhaustive des événements les plus courants :

Pour une liste plus complète : Evénement JavaScript