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

Le JavaScript

Le JavaScript ? Qu’est-ce-que c’est ?

JavaScript est un langage de programmation de scripts principalement employé dans les pages web interactives mais aussi pour les serveurs. 

JavaScript va nous permettre d’avoir des variables, des boucles et des fonctions.

Les variables

Qu’est ce qu’une variable ? Une variable est un espace de stockage sur votre ordinateur permettant d’enregistrer tout type de données, que ce soit une chaine de caractères, une valeur numérique ou bien des structures un peu plus particulières. 

En programmation on utilise souvent des variables pour stocker des informations importantes. 

Pour donner une valeur à une variable, on utilise le mot-clé : « var » suivit du nom de la variable, séparé par un égal et on met ensuite la valeur qu’on veut affecter. Et il ne faut pas oublier le point virgule à la fin de la ligne.

Exemple :

1
var nouvelle_variable = 0;

Le nom d’une variable ne doit pas comporter d’espace, commencer par un chiffre, et ne doit comporter que des lettres, des chiffres ou le caractère « _ » (underscore). Elle doit faciliter la compréhension pour toi comme pour les gens qui peuvent relire ton code (tes camarades, ton animateur ou animatrice, ou le toi de dans six mois quand tu chercheras à revoir ce que tu as fait.)

Le nom d’une variable doit avoir un sens ! Pour un soucis de lisibilité on ne doit pas appeler nos variables « var1 », « var2 », … En effet car cela peut poser un problème comme : imagine s’il y en a quarante variables il faut savoir ce qu’il y a dans chaque variable.

Pour le nom d’une variable, il faut qu’un enfant de huit ans qui lit le code doit être capable de savoir ce qui est stocké dedans.

Les fonctions

Une fonction est un bout de code auquel on donne un nom et qui renvoie une valeur.

Une définition de fonction est définie dans Meteor de la manière suivante :

nom_fonction: function(){
    //suite d'instruction
    //return
}

Le mot clé « return » dans une fonction signifie la fin de la fonction et ça renvoie la valeur mise après. On peut renvoyer des nombres, des tableaux, des résultats d’une requête de base de donnée…

Exemple :

username: function(){
    return Meteor.user().username;
}

HTML :

<button class="user">{{username}}</button>

Autre exemple :

sommes: function(nombre1, nombre2){
    return nombre1 + nombre2;
}

HTML :

{{sommes 3 4}}

Le nom de la fonction doit aussi être claire, comme le nom des variables !

Les tableaux

Un tableau en JavaScript est une variable un peu spéciale qu’on utilise lorsqu’on veut stocker plusieurs variables qui sont reliées.

Un tableau est une structure ordonnée de données : elle permet de rassembler plusieurs données ensemble (« structure de données »), et elle les range les uns à la suite des autres, dans un ordre précis :

Dans un tableau, il y a donc le premier élément, le deuxième élément, le troisième élément … Mais qu’est ce qu’un « élément » d’un tableau ? 

Un élément de tableau, c’est tout simplement une « information », c’est à dire soit un nombre, soit un nombre à virgule, soit une chaîne de caractère. Quand on range des données dans un tableau, il faut donc réfléchir à quelle information on y met, et son type. 

On utilisera des tableaux quand on veut rassembler ensemble des informations similaires : on veut mettre tous les âges des gens ensemble, cela n’a pas de sens de mixer leur âge avec leur taille. Par contre, on créera un tableau avec les âges, et un tableau avec leur taille, dans ce cas là !

Attention ! Comme tu peux le voir, la première case du tableau (le premier élément), a un index de 0 ! En Python, il faut penser à décaler d’un : le deuxième élément du tableau a un index de 1, le cinquième un index de 4…

 

Un tableau se déclare de la manière suivante :

var shopping = ['pain', 'lait', 'fromage', 'nouilles'];

Pour accéder à une valeur d’un tableau on fait :

shopping[0];
//ça donne "pain"

Pour changer une valeur en particulier :

shopping[0] = 'crème de sésame';
// shopping est maintenant [ "crème de sésame", "lait", "fromage", "nouilles" ]

Pour avoir la taille d’un tableau :

shopping.length;
//renvoie 4

Pour ajouter des valeurs à notre tableau :

shopping.push('céréale');
//shopping est maintenant [ "crème de sésame", "lait", "fromage", "nouilles", "céréale" ]

Les opérateurs

En JavaScript, il y a différent opérateurs, on peut les utiliser pour ajouter une valeur à une variable, enlever une valeur à une variable, diviser une valeur à une variable ou multiplier une valeur à une variable.

Par exemple :

nouvelle_variable = nouvelle_variable + 1;

Ou :

nouvelle_variable = nouvelle_variable * 5;

On peut donc faire plusieurs opérations élémentaire, l’addition avec le « + », la soustraction avec le « – », la division avec « / » et la multiplication avec « * »

Les conditions

Les conditions est une sorte de « test » afin de comparer une variable avec quelque chose d’autre.

Les conditions en JavaScript utilisent le mot-clé : if (si en anglais), la comparaison entre parenthèse (« ( » et « ) ») et ce qu’on fait lorsque la condition est respectée est entre accolade (« { » et « } »).

if(comparaison) {
    //code
}
Les opérateurs de comparaison sortent une valeur qui est soit vrai, soit fausse (true ou false). Les opérateurs de comparaison se composent de : une valeur, l’opérateur, et une deuxième valeur. La liste des opérateurs de comparaison sont :

Un opérateur logique prend des opérateurs de comparaisons et fait le lien.

Opérateur logique :

On peut rajouter plusieurs choses dans les if, les « else if » qui se comportent comme un « if » mais qui va s’exécuter que si on ne rentre pas dans le premier if.

Et le « else » qui s’exécute si la condition n’est pas vrai dans le if et les else if qui le précède.

Exemple :

1
2
3
4
5
6
7
8
 
if(variable1 == variable2) {
    //code
} else if (variable1 > variable2) {
    //code2
} else {
    //Code qui ne s'excutera que si variable1 n'est pas égal à variable2 
    //et si elle n'est pas inférieure à variable2
}

Par soucis de lisibilité on met des espaces entre le nom des variables et les opérateurs de comparaison. On fait attention à bien aligner les codes à l’intérieur des conditions.

Les boucles

Les boucles sont un moyen très pratiques de se simplifier la vie en évitant de réécrire du code plusieurs fois. Par exemple si on veut afficher tous les éléments d’un tableau il est pratique d’utiliser les boucles.

Une boucle for en JavaScript s’écrit de cette manière, d’abord un déclare une variable (ici compteur) qu’on met à 0, puis on définit jusqu’où on doit aller (0, 3, 4, 1000, tableau.length…), puis on dit qu’on ajoute 1 au compteur à chaque passage de boucle (++) :

for(var compteur=0; compteur<fin; compteur++){
    //instruction 1
}
//instruction 2

Exemple, je déclare mon tableau de pokémon préféré puis je crée une boucle for qui va de 0 à la taille de mon tableau non inclus. Puis j’utilise la console pour les afficher. :

1
2
3
4
var pokemon_pref = ["Salamèche", "Nanméouïe", "Motisma", "Zorua"];
for(var compteur=0; compteur<pokemon_pref.length; compteur++){
    console.log("J'aime le pokémon : " pokemon_pref[i]);
}

La console

Pour afficher la valeur d’une variable ou afficher le résultat d’un calcul, ou juste pour savoir où notre code à un problème on utilise la console.

Pour avoir la console il suffit d’aller dans votre navigateur préféré et de taper sur la touche « f12 »

Pour l’utiliser on peut dans notre code mettre la ligne :

console.log("bonjour");

Et cela donne :

Et on peut voir la ligne et le fichier où elle est.

Import

Les import permettent de fractionner son code en plusieurs fichiers pour permettre d’alléger les différentes parties. Ainsi il est plus facile de s’y retrouver.

Les import permet de récupérer du code fait par quelqu’un d’autre.

Il y a deux manières de faire des import qu’on utilisera en JavaScript. Simplement quand on veut importer :

//Import html + js
import './annonce.js';
import './body.html';

Ou pour les imports des Bases de Données:

//Import des bases de données
import { Annonces } from '../api/annonce.js';

Avec entre les {} il y a le nom de ce qu’on doit avoir dans le fichier, et après le from il y a le chemin vers le fichier à import.

La variable Session est quand même présente dans tous les fichiers.

Dans nos projets Meteor on va avoir besoin de quelques import qui sont très utiles, les import fait par Meteor :

//import utiles
//Import pour les utilisateurs
import { Meteor } from 'meteor/meteor';
//import pour les templates
import { Template } from 'meteor/templating';

Le Javascript avec le HTML

Le JavaScript est utilisé notamment pour animer des pages web. Ainsi il y a plusieurs moyens d’obtenir ce qu’il se passe. Par exemple on peut récupérer toutes les classes qui portent un même nom, ou un ID en particulier.

//renvoie l'élément qui a l'id "information"
document.getElementById("information");


//renvoie tous les balises HTML qui contiennent la classe "annonces" 
//sous la forme d'un tableau
document.getElementsByClassName('annonces');

On peut donc avoir les balises, mais une fois qu’on les a récupéré, il faut ensuite pouvoir soit afficher le texte à l’intérieur ou encore récupérer l’id ou le nom de la classe selon celui qu’on n’a pas.

//pour avoir le nom de la.es classe.s
doc.className;
//pour avoir le nom de l'id
doc.id;
//pour avoir le texte de la balise
doc.innerText;

On peut aussi avoir ces informations là sur un événement.