Javascript

On suit le lapin blanc dans son trou

Sommaire

• Des opérateurs spéciaux ?
• Les tableaux
• Les objets
• Les boucles (aïe aïe aïe)
• La portée des variables

Des opérateurs spéciaux ?

var x = 0;

x++; // cela s'appelle une incrémentation
console.log( x ); // affiche "1"
// équivalent à : x = x + 1;

x--; // cela s'appelle une décrémentation
console.log( x ); // affiche "0"
// équivalent à : x = x - 1;

x += 3
console.log( x ); // affiche "3"
// équivalent à : x = x + 3;

x -= 2
console.log( x ); // affiche "1"
// équivalent à : x = x - 2;

Des opérateurs spéciaux ?

var mot = "Bonjour";

mot += "Lior";
console.log( mot ); // affiche "Bonjour Lior"
// équivalent à : mot = mot + "Lior";

// Attention : l'opérateur "-=" n'existe pas
// pour les chaines de caractères

Variables ++

Les tableaux (et les objets) sont un moyen de créer des variables qui contiennent plusieurs valeurs.

Un tableau est une liste de valeurs. Les éléments d'un tableau peuvent aussi être des tableaux ou des objets.

Et donc ?

var tableau = [10, 20, 30, 40];

console.log( tableau[0] ); // affiche "10"
console.log( tableau[3] ); // affiche "40"

var objet = { prenom: "Lior", nom: "Chamla" };

console.log( objet.prenom ); // affiche "Lior"
console.log( objet.nom ); // affiche "Chamla" 

Des tableaux, dans des tableaux

var tableau = [
    [1, 2, 3],
    ["Lior", "Joseph", "Nicolas"],
    [
        [10, 20, 30],
        [40, 50, 60],
        [70, 80, 90]
    ]
];

console.log( tableau[0][0] ); // affiche "1"
console.log( tableau[0][2] ); // affiche "3"
console.log( tableau[1][1] ); // affiche "Joseph"
console.log( tableau[2][1][2] ); // affiche "60"

// Type de "tableau" => Array

Fonctions des tableaux

var tableau = [10, 20, 30, 40, 50];

tableau.push(60); // [10, 20, 30, 40, 50, 60]

var dernier = tableau.pop(); // [10, 20, 30, 40, 50] et dernier vaut 60

var premier = tableau.shift(); // [20, 30, 40, 50] et premier vaut 10

tableau.unshift(150) // [150, 20, 30, 40, 50]

tableau.reverse(); // [50, 40, 30, 20, 150]

var longueur = tableau.length; // longueur vaut 5

// ATTENTION : Length n'est pas une FONCTION, c'est une PROPRIETE

Fonctions des tableaux

var tableau = [10, 20, 30, 40, 50];

var chaine = tableau.join(' ');

console.log(chaine); // affiche "10 20 30 40 50"

chaine = tableau.join(' !');

console.log(chaine); // affiche "10 ! 20 ! 30 ! 40 ! 50"

var tableau2 = chaine.split(' !');

console.log(tableau2); // affiche [10, 20, 30, 40, 50]

Fonctions des tableaux

var tableau = [10, 20, 30, 40];

var tableau2 = ["a", "b", "c"];

var tableau3 = tableau.concat(tableau2);

console.log(tableau3); // affiche [10, 20, 30, 40, "a", "b", "c"]

Et les objets alors ?

var personne = {
    nom:    "Chamla",
    prenom: "Lior",
    voiture: {
        couleur: "Noire",
        marque:  "Smart",
        kms:     200000
    }
};

console.log( personne.prenom ); // affiche "Lior"
console.log( personne.voiture.couleur ); // affiche "Noire"

// type de "personne" => Object

Des tableaux d'objets ?

var annuaire = [
    {nom: "Chamla", prenom: "Lior", age: 29},
    {nom: "Dupont", prenom: "Joseph", age: 99},
    {nom: "Durant", prenom: "Jacques", age: 35}
];

console.log( annuaire[0].prenom ); // affiche "Lior"
console.log( annuaire[2].age ); // affiche "35"

// type de "annuaire" => Array
// type de "annuaire[0]" => Object

Des tableaux d'objets ?

var personne = {
    nom: "Chamla",
    prenom: "Lior",
    voitures: [
        {marque: "Smart", couleur: "Noire", kms: 100000},
        {marque: "Mercedes", couleur: "Blanche", kms: 200000},
        {marque: "Renault", couleur: "Bleue", kms: 300000}
    ]
}

console.log( personne.voitures[0].kms ); // affiche "100000"
console.log( personne.voitures[2].couleur ); // affiche "Bleue"
console.log( personne.voitures.length ); // affiche "3"

Les propriétés et les fonctions

var personne = {
    nom: "Chamla",
    prenom : "Lior",
    
    disBonjour: function(){
        return "Bonjour, je suis " + this.prenom + " " + this.nom ;
    }
};

console.log( personne.prenom ); // affiche "Lior" 
console.log( personne.disBonjour() ); // affiche "Bonjour, je suis Lior Chamla"

// nom et prenom sont des PROPRIETES de l'objet personne
// disBonjour est une FONCTION de l'objet, on parle de METHODE

Des constructeurs d'objets ?

function Personne(nom, prenom){
    this.nom = nom;
    this.prenom = prenom;
    this.disBonjour = function(){
	return "Bonjour, je suis " + this.prenom + " " + this.nom;
    }
}

var p1 = new Personne("Chamla", "Lior");
var p2 = new Personne("Dupont", "Jean");

console.log(p1.disBonjour()); // affiche "Bonjour, je suis Lior Chamla"
console.log(p2.disBonjour()); // affiche "Bonjour, je suis Jean Dupont"

Récapitulatif : les objets

• Ce sont des variables composites
• propriétés : les "sous variables"
• méthodes : les "sous fonctions"
• On accède aux propriétés et aux méthodes grâce à l'opérateur "."
• IMPORTANT : On peut aussi accèder aux propriétés et aux méthodes grâce à l'opérateur [...] (comme les tableaux)

Bonus : fonction anonyme

// une fonction anonyme est une fonction qui n'a pas de nom
// on peut la déclarer dans une variable par exemple :

var variable = function(mot){
  console.log(mot); 
}

variable("Bonjour"); // affiche "Bonjour"

var objet = {
    propriete1: 'Ma valeur',
    propriete2: 'Ma deuxième valeur',
    methode1: function(param1, param2){
        console.log(param1 + " " + param2);
    }
}

objet.methode1('bonjour', 'toi'); // affiche "bonjour toi"

Les boucles

Courage !

Parcourir un tableau ?

Les tableaux peuvent être très longs ! 

Il existe des moyens pour les parcourir : les boucles !

• La boucle FOR 
• La boucle WHILE

​

Les boucles ne servent pas qu'à parcourir des tableaux, elles peuvent être utiles dans beaucoup d'autres situations.

La boucle FOR

for( var i = 0; i < 5; i++) {
    console.log( i );
}

// la première fois, affiche "0"
// la deuxième fois, affiche "1"
// la troisième fois, affiche "2"
// la quatrième fois, affiche "3"
// la cinquième fois, affiche "4"

La boucle FOR

var tableau = [10, 20, 30, 40, 50];

for( var i = 0; i < tableau.length; i++) {
    console.log( tableau[i] );
}

// tableau.length vaut 5

// la première fois, affiche "10"
// la deuxième fois, affiche "20"
// la troisième fois, affiche "30"
// la quatrième fois, affiche "40"
// la cinquième fois, affiche "50"

La boucle WHILE

var x = 0;

while(x < 5) {
    console.log( x );
    x++;
}

// la première fois, affiche "0"
// la deuxième fois, affiche "1"
// la troisième fois, affiche "2"
// la quatrième fois, affiche "3"
// la cinquième fois, affiche "4"

SPECIAL : le forEach()

var tableau = [10, 20, 30, 40];

function afficherElement(element, index) {
    console.log(element, index);
}

tableau.forEach(afficherElement); // on appelle ça un "callback"

// pour chaque élément du tableau, on appelle la fonction
// afficherElement. Ca lui donne automatiquement l'élément 
// et son index.

// pour la premier élément, affiche : "10, 0"
// pour la troisième élément, affiche : "20, 1"
// pour la quatrième élément, affiche : "30, 2"
// pour la cinquième élément, affiche : "40, 3"

La portée des variables

La portée ?

Les variables ne sont pas accessibles partout de la même manière.

Il existe des variables :

• Globales
• Locales

De quoi ?

• Une variable globale est disponible dans tout le programme 
• Une variable locale est disponible dans le bloc de code ou la fonction dans laquelle elle est déclarée

La portée : dans le IF

  var meteo = "soleil";
  var globale = 10;

  console.log(globale) // affiche "10"

  if(meteo == "soleil"){
      var locale = 5; // automatiquement globale
      console.log(globale); // affiche "10"
      console.log(locale);  // affiche "5"
  }

  console.log(locale);  // affiche "5"
  console.log(globale); // affiche "10"

La portée : dans une fonction

  var globale = 10;

  console.log(globale) // affiche "10"

  function maFonction(){
      globale = 5; // utilise la variable globale
      globale2 = 60; // automatiquement globale
      var locale = 10; // vraiement locale
  }

  maFonction();

  console.log(globale);   // affiche "5"
  console.log(globale2);  // affiche "60"
  console.log(locale);    // lance une erreur

La portée : les paramètres

  var globale = 10;

  console.log(globale) // affiche "10"

  function maFonction(nombre){
      console.log(nombre) // affiche le nombre envoyé (50 par exemple)
      globale = 5; // utilise la variable globale
  }

  maFonction(50);

  console.log(globale);   // affiche "5"
  console.log(nombre);    // lance une erreur

La portée : les paramètres

  var globale = 10;
  var nombre = 20;

  console.log(globale) // affiche "10"
  console.log(nombre) // affiche "20"

  function maFonction(nombre){
      console.log(nombre) // affiche le nombre envoyé (50 pour l'exemple)
      globale = 5; // utilise la variable globale
  }

  maFonction(50);

  console.log(globale);   // affiche "5"
  console.log(nombre);    // affiche "20"

La portée : récapitulatif

• Une variable "globale" est disponible partout
• Une variable déclarée dans un if est "globale"
• Une variable déclarée dans une fonction est "locale"
• Un paramètre d'une fonction est une variable "locale" de la fonction

Une globale locale ? :D

  function maFonction(nombre){

      console.log(nombre) // affiche le nombre envoyé (50 par exemple)

      if(nombre > 20){
        var superieur = true; // globale DANS LE CADRE DE LA FONCTION !
      }
      
      console.log(superieur); // affiche "true"
    
  }

  maFonction(50);

  console.log(nombre);    // lance une erreur
  console.log(superieur); // lance une erreur

Bonus : fonction anonyme

// on peut passer une fonction anonyme comme un callback
// souvenez vous du .forEach() qui demande en paramètre une fonction

var tableau = [10, 20, 30, 40];

function maFonction(element, index){
    console.log(element, index);
}

tableau.forEach(maFonction);


// LA MEME CHOSE EN PLUS COURT :
tableau.forEach(function(element, index){
    console.log(element, index);
});

// la fonction forEach demande un "callback" en paramètre
// un callback est une fonction qui va être appelée par une 
// autre fonction

Bravo ! Au boulot !