Semaine 07 Projets Js avances - SimplonTlse02/programme-dev-web GitHub Wiki

Semaine 7 - Projets Js Avancés

Objectifs

  • Gestion des dépendances (NPM) / NIH syndrom / recréer la roue
  • this / bind / apply / call
  • setTimeout / setInterval
  • organiser son code en objet

Introduction

Une petite vidéo / chanson pour se mettre en jambe ?

Lundi

  • organiser son code en objet
  • Design Pattern
// app.js
(function(){
	"use strict";

	var app = {
		prenom: null,
		defaultSeconds: 180, // = 3 minutes
		time: null,

		init: function(){
			app.prenom = "Simplon";
			app.time = defaulTime;
			app.start(app.time);
		},

		start: function(tempsQuiPasse){
			console.log("Et c'est le "+tempsQuiPasse);
		}
	};

	app.init();
})();
  • continuer le Countdown

Mardi

/*

- apply(ctx, [args])
- call(ctx, args ...)

*/

$('b').on(eventName, this.start.bind(this));

var self = this;

Mercredi

  • Code Review du Countdown
    • Si une variable contient une quantité, précisez l'untité
      • le mieux : directement dans le temps : timeSeconds
      • sinon en commentaires : time: null // seconds
    • Indentez votre code
  • Bonus du CountDown
    • Mesurer le temps que mets le chronomètre pour écouler 5 minutes. Idem pour 10 minutes.
    • Faire en sorte que la différence entre le temps écoulé et le temps du chronomètre soit < 1s (cf objet Date)
  • Créer un nouveau projet Pomodoro avec les mêmes bases
  • Publier le tout sur GithubPages
  • Date MDN

Rappel sur les branches

Relire le chapitre 3 de la doc officielle

# je vérifie sur quelle branche je suis.
git status
# Ici, je démarre sur master

# Je créer une nouvelle branche et je vais dessus
git checkout -b maNouvelleBranche

# Si ma branche est déjà créée, je me déplace (sans l'option -b)
git checkout maNouvelleBranche

# Je vérifie que je suis bien sur maNouvelleBranche
git status

# Je merge le contenu de la branche master sur ma branche courant
git merge master
# Je règle les conflits s'il y en a

# je pousse sur github
git push origin codeReview

# Et je retourne sur master pour continuer à bosser
git checkout master

Devinette du jour :

"Return Largest Numbers in Arrays" challenge

/*
	Return an array consisting of the largest number from each provided sub-array.
	For simplicity, the provided array will contain exactly 4 sub-arrays.
*/
function largestOfFour(arr) {
  // You can do this!
	var resultArray = null;
  return resultArray;
}

largestOfFour([4, 5, 1, 3], [13, 27, 18, 26], [32, 35, 37, 39], [1000, 1001, 857, 1](/SimplonTlse02/programme-dev-web/wiki/4,-5,-1,-3],-[13,-27,-18,-26],-[32,-35,-37,-39],-[1000,-1001,-857,-1));// returns : [5, 27, 38, 1001]

Jeudi

Les couleurs en CSS

  • Doc MDN
  • Quack Kit
    • plusieurs moyens pour les couleurs :
      • keyword : 'red', 'skyblue', ...
      • notation héxadécimal : #12QF03
      • rgb()
      • hsl()
      • rgba()
      • hsla()
.ma-div {
	/* Les lignes suivantes sont équivalentes */

	color : green; /* keyword */

	color : #00FF00; /* hexadécimal */
	color : #0F0; /* hexadécimal bis */
	
	color : rgb(0, 255, 0); 
	
	color : rgb(0%, 100%, 0%);/* pas trop utilisé */
	
	color : hsl(120, 100%, 50%);

	color : rgba(0, 255, 0, 1);
	
	color : hsla(120, 100%, 50%, 1);
}

Gestion des dépendances (NPM)

# NE JAMAIS AJOUTER nodes_modules A GIT
# JAMAIS
# JAMAIS

# ===== Cas 1 =====
# création d'un projet
touch index.html app.js

# Initialisation du repo git
git init
git add index.html app.js

# Initialisation de npm et génération du fichier package.json
npm init
git add package.json

# puis vous codez ...
# ...
# et vous ajoutez une (ou plusieurs) dépendance(s)
npm install --save jquery moment

# Le fichier package.json est mis à jour
# node_modules/ apparaît comme 'untracked' par git. On le rajoute au fichier .gitignore
echo "node_modules/" >> .gitignore

git add .gitignore

# ...

# ===== Cas 2 =====
# Récupération d'un projet existant

git clone [email protected]/MonSuperPseudo/MonBeauProjet/.git

# A priori, le code contient déjà : 
# - package.json
# Il ne reste donc qu'à installer les dépendances

npm install

# Si ce n'est pas déjà fait, ajouter 'node_modules/' à .gitignore
echo "node_modules/" >> .gitignore

# ...

Mise en application

  • moment.js définir le jour de la semaine en fonction d'une date fournie par l'utilisateur,
  • showdown markdown to html live converter

Intro rapide à markdown

Vendredi

  • $.ajax
  • showdown & faker créer un mini-moteur de blog markdown->html,

Exploration

Des liens ou des sujets à explorer