[old] Semaine 6 : POO JSON - SimplonSt-Gaudens/programme-web-dev-promo-2 GitHub Wiki

Semaine 6

Objectifs

Revoir les bases de Js
Aborder la Programmation Orientée Objet

Lundi

Présentation Fil Rouge + Flex/Grid

Débriefing

Travailler en équipe, c'est une vraie compétence :
- Savoir écouter, prendre sur soi,
- Reconnaître ses erreurs,
- Gérer les désaccords et les conflits
- On ne choisit pas ses collègues
Les méthodes de travail sont là pour trouver un point d'entente
- Méthode impartiale, pas basée sur les "intuitions" de l'un et de l'autre sur lesquelles on peut se replier quand on est perdu : des repères avec de bonnes méthodes et une bonne organisation, on peut travailler avec n'importe qui
- Ne pas rejeter la faute sur les autres
- Remettre en question sa propre organisation : si une erreur a été commise,c'est qu'elle a eu l'opportunité de se produire. La méthode n'a pas limité suffisamment le périmètre. Ex : le dév junior qui casse la prod.
Une communication claire et régulière mitige ces effets :
- On sait on où va
- On sait qui fait quoi
- On connaît les responsabilités et le périmètre de chacun => Scrum!
Dans un travail d'équipe, à la fin, il n'y a pas de réussite personnelle :
- On gagne tous ou on perd tous
- Le "mais c'est la faute de ..." n'a aucune valeur, le client s'en moque
Le système éducatif n'apprend pas la collaboration, mais entretient l'individualisation et la réussite personnelle. Tout le contraire de la vie professionnelle (à laquelle l'éducation nationale est censée préparer...).
Pour en savoir plus :

Restitution de la semaine : Qui? Quoi?

Les bases de Js

Au cas où, on reprend du début.

Programmation Orientée Objet

POO

Classes

Petit rappel : jusque-là tout était simple. Les variables sont des objets. Les fonctions sont des actions. Ex : si je veux un ballon, je définis une variable. Pour taper dedans, je définis une fonction.
```
    var ballon;
    function taper(ballon) {
      console.log("bim");
    }
```
Découvrons maintenant les classes (au sens POO = Programmation Orientée Objet). Une classe est un objet qui a des attributs et des méthodes. On utilise des variables pour représenter ses attributs (poids, vitesse) et des fonctions pour modéliser les méthodes (avance()). Pour modéliser une classe en javascript (et donc caler tout ça), on utilise... une fonction.

Exemple :

  var Vehicule = function(poids, vitesse) {   // le constructeur  
   this.poids = poids; // son poids  
   this.vitesse = vitesse; // sa vitesse  
   this.avance = function() { // sa méthode pour avancer  
    console.log("vroum vroum");  
   }  
  }  

  var titine = new Vehicule("1000", "50");
  titine.poids; // 1000
  titine.vitesse; // 50
  titine.avance(); // affiche "vroum vroum"

Hé oui, dans javascript, on peut créer une fonction dans une autre fonction. Mieux que ça, on peut modifier une fonction à la volée.

On continue l'exemple précédent :

    Vehicule.prototype.klaxonne = function() { console.log("Pouet") }; // On ajoute une méthode  
     titine.klaxonne(); // affiche "Pouet". Miracle!

Ce qui nous amène à une notion importante : le prototype. C'est là-dedans que sont stockées les propriétés "par défaut" d'une classe. Par exemple, si j'appelle une fonction d'un objet mais que javascript ne la trouve pas sur celui-ci, elle va regarder dans son prototype, qu'elle hérite de son constructeur.

Ca ira mieux avec un exemple. Promis. Reprenons titine où nous l'avions laissée.

  var porsche = new Vehicule();
  porsche.avance = function() { console.log("vrouuuuuuum !") }; // une porsche qui avance fait plus de bruit qu'un véhicule standard

  titine.avance(); // Cette méthode n'a pas été redéfinie dans titine, on se base sur le prototype hérité de Vehicule. On affiche donc "vroum vroum"
  porsche.avance(); // Cette méthode a été redéfinie spécialement pour la porsche. On affiche "vrouuuuuuum !"

Là-dessus, on va ajouter la notion d'héritage. Une classe peut hériter d'une autre classe. Autrement dit, elle peut utiliser les mêmes attributs et méthodes que la classe dont elle hérite.

Exemple : la voiture est un type de véhicule. Elle a un poids, une vitesse et peut avancer et klaxonner.

    Voiture.prototype = new Vehicule();  // Heritage      
    Voiture.prototype.constructor=Voiture;  // Tres important : on definit le constructeur pour pouvoir le modifier
    function Voiture(poids, vitesse, nombre_passagers){ 
     this.nombre_passagers=nombre_passagers;
     this.allume_autoradio = function() { // méthode pour allumer l'auto-radio  
     console.log("lalala");  
    }  
   }

Et on peut même ajouter encore des méthodes à la volée!

   Voiture.prototype.freiner = function(){
       console.log("gniiii");
   }

Ou redéfinir les méthodes héritées (on parle de "surcharger" une méthode) :

   Voiture.prototype.avance = function(){
        console.log("vroum");
   }

Au final, on a donc :

   var coccinelle = new Voiture(500, 50, 4);
   coccinelle.poids; // 500
   coccinelle.vitesse; //50
   coccinelle.nombre_passagers; //4
   coccinelle.avance(); // affiche "vroum"
   coccinelle.allume_autoradio(); // affiche "lalala"
   coccinelle.freiner(); // affiche "gniii"

Mais attention!

   var trotinette = new Vehicule(5, 20);
   trotinette.avance(); //affiche "vroum vroum"
   trotinette.allume_autoradio(); // undefined!

Vous faites la même chose avec la classe Camion?

Le plein de liens

Exercices

Exercice 1 : chrono

Créez une classe Chrono avec :

une méthode start()
une méthode pause()
une méthode stop()
une propriété currentTime
Indices :
- setTimeout
- setInterval
Bonus : Mesurer le temps que met le chrono pour écouler 5 min. Même chose pour 10 min. Comment réduire l'écart entre le temps affiché et le temps réel?

Exercice 2 : bonjour madame la marchande

Créez une classe Produit :

nom
prix

Créez une classe Panier avec :

une méthode ajoute( produit )
une méthode retire( produit )
une proprieté totalHT
une proprieté totalTTC

Utilisation : ajouter ce qu'il faut à ce code de base pour qu'il fonctionne.

var baguette = new Produit( 'Baguette', 0.85); // prix HT
var croissant = new Produit( 'Croissant', 0.80);

var panier = new Panier();
panier.ajoute(baguette);
panier.ajoute(croissant);

console.log(panier.totalHT);
console.log(panier.totalTTC);

Bonus : reprendre cet exemple en ajoutant une classe Viennoiserie qui hérite de la classe Produit en lui ajoutant l'attribut booléen frais.

Mardi

Kata : développer un nombre

Rédigez une fonction expandedForm qui écrive un nombre sous sa forme développée.

**Exemple **:

  expandedForm(12); // Should return '10 + 2*1'
  expandedForm(42); // Should return '4*10 + 2*1'
  expandedForm(70304); // Should return '7*10000 + 3*100 + 4*1'

Quelques vidéos pour se changer les idées

Il est de retour!

Killer tomatoes

Développez une appli pour gérer votre Pomodoro.

Screencap

décider de la tâche à effectuer ;
démarrer le minuteur (25 minutes) ;
travailler sur la tâche jusqu'à ce que le minuteur sonne et la noter comme faite ;
prendre une courte pause (5 minutes) ;
tous les quatre pomodori prendre une pause un peu plus longue (15-20 minutes).
Bonus : utilisez la méthode Pomodoro pour travailler sur ce projet.

Mercredi

Révisions

Le scope en javascript

Exercice live

 # scope1.js
 var x = "hello";

 function l(){
     console.log(x);
 }
 l();

 # Que donne "node scope1.js"?

 # scope2.js
 var x = "hello";

 function l(){
     x = "bye";
     console.log(x);
 }

 l();

 # Que donne "node scope2.js"?

 # scope3.js
 var x = "hello";

 function l(){
     x = "bye";
 }

 console.log(x);
 l();
 console.log(x);

 # Que donne "node scope3.js"?

Jeudi

Randori : Presque Minuit!

Ecrivez une fonction minutesTillMidnight(heure), où heure est sous la forme "HH:MM".
Cette fonction renvoie le nombre de minutes qui séparent heure de minuit.

JSON, comment ça marche?

Jason? Non, pas lui.

JSON est une syntaxe pour sérialiser des données. En français, ça permet de stocker des données dans un fichier qui ressemble à du texte. Ainsi, fini de caler vos données en dur dans le Js (youpi!). L'indentation est facultative mais c'est mieux quand c'est lisible. Exemple :
```
  {
    "name": "test",
    "description": "Ici, on teste JSON",
    "keywords": ["JSON", "test"],
    "memo": {
      "day": "23012017",
        "lieu": "salle de formation"
    }
  }
```
Dans javascript, on a même un objet spécialement pour ça : JSON (hé oui). Dans celui-ci, deux méthodes principalement vont nous intéresser :
- JSON.parse() : transforme du JSON en éléments lisibles par javascript.
- JSON.stringify() : convertit depuis javascript en JSON.
Et pour l'instant, c'est tout ce dont vous aurez besoin.

Quelques liens pour la forme

Mise en application

Diaporama sans POO

Dans un fichier texte (JSON), décrivez une liste de photos ( titre et url), puis chargez le, et utilisez le pour faire défiler automatiquement les photos dans une img.

Diaporama en POO

Même chose mais en créant des objets Diaporama

var diaporama1 = new Diaporama("photos1.txt", "idElementImg" );

Vendredi

Ergonomie & accessibilité

:memo: Design principles

:newspaper: In defense of eye candy

Trends

UI Design Guidelines

Inspiration

Dribbble : réseau social / portfolio pour designers
Behance : réseau social / portfolio pour designers ( racheté par Adobe )

UI, Ergonomie, UX

:book: 52 weeks of UX

Un premier tour chez OpQuast (avant la certification)

Accessibilité checklist 1

Accessibilité checklist 2