Semaine 9 : back to javascript - SimplonSt-Gaudens/programme-web-dev-promo-2 GitHub Wiki

Semaine 9

Objectifs

  • Retour sur javascript mais aussi HTML/CSS
  • Voir les formulaires
  • Le retour d'Ajax

Back

Lundi

Correction des exercices rendus

Restitution de la semaine : Qui? Quoi?

DRY : Don't Repeat Yourself

####Création d'un "template" / boilerplate de dossier pour nouveau projet web####

L'idée est de mettre en pratique le principe du DRY. Il est nécessaire d'essayer de repenser et d'améliorer continuellement ses méthodes, outils, organisation... ( sans non plus y passer tout son temps... :) )

Le développement d'un projet web comporte un certain nombre de tâches répétitives. Il existe de nombreux outils, gratuits et opensource (ou pas) qui peuvent nous aider à gagner du temps. Toutefois, même si l'intégration dans son workflow, d'outils standards/référence, "prêt à l'emploi", est progressivement nécessaire, il peut être utile d'apprendre à se créer ses propres "outils".

  • création d'un dossier avec fichiers de base:

    • style-base.css : définition des régles de styles systèmatiques cf [CSSReset]
    • scripts-base.js : avec des fonctions raccourcies ou utilitaires "à la jQuery" ( ex : des fonctions byId(), byTag()... )
    • index.html intégrant les fichiers css et js

  • initialisation git du dossier, et dépôt sur github

  • pour utiliser le template :

    • cloner le projet depuis github git clone http://github.com/VOUS/PROJET.git
    • supprimez le .git rm -rf dossier_template/.git
    • renommez le dossier chargé mv dossier_template/ nouveauProjet/
    • initialisez git dans le nouveau dossier cd nouveauProjet/ ; git init

L'utilisation de ce template pourra être simplifiée en créant par exemple un alias pour lancer toutes ces instructions en une commande. Cela constitue également un petit préambule à l'utilisation des outils d'automatisation front-end modernes ( NPM, Webpack, Grunt, Gulp, ... ).

Les formulaires

On va trouver plein de types de champs :

  • range
  • color
  • hidden
  • time
  • datetime
  • number
  • search
  • tel
  • url

Quelques liens

Exercice

  • Créez un formulaire d'inscription. Dans celui-ci l'utilisateur est invité à saisir : nom, prénom, login (ne doit pas déjà être utilisé), sexe (bouton radio), mot de passe (au moins huit caractères dont au moins une majuscule, un caractère spécial et un chiffre), date de naissance, ville, mail (valide), url de son site (valide), ses hobbys (max 200 caractères), son numéro de téléphone (XX.XX.XX.XX.XX) ainsi que sa couleur préférée.
  • Bonus : implémenter l'autocomplétion pour la ville.
  • Bonus 2: pas besoin de soumettre le formulaire pour contrôler les champs.
  • Stocker les données récupérées. Ce peut être l'occasion de jeter un oeil au localStorage introduit par HTML5.
  • Créez un formulaire de connexion. L'utilisation saisit un login et un mdp. Si les deux correspondent, on l'autorise à se connecter et on l'accueille avec un message du type : "Bienvenue <prénom> ".

Mardi

Kata

  • Créez une fonction diffBig2() telle que : diffBig2([10, 5, 2]) = 10-5 = 5
  • La fonction, en partant d'une liste de nombres, renvoie la différence entre les deux plus grands.
  • Faites-le sans utiliser sort().

Exercice

  • Retour au blog : développez un mini-moteur de blog permettant de créer et de modifier des articles. La liste des billets et de leurs liens doit être stockées dans un fichier JSON.
  • Implémentez les pages d'inscription et de connexion développées lundi. N'importe qui peut lire les billets mais seul un utilisateur connecté peut créer un nouveau billet.

Mercredi

Switch*

TodoSwitch

Jeudi

Randori : Mastermind

Ecrivez une fonction (mastermind). L'utilisateur va devoir deviner une chaîne de trois lettres générée aléatoirement. Chacune de ces lettres est A, B, C, D ou E. L'utilisateur a droit à trois tentatives. A chaque tentative, on lui renvoie soit :

  • ok (l'utilisateur a bien deviné).
  • ko avec le détail pour chaque lettres (Non si la lettre n'est pas dans la chaîne à trouver, presque si elle y est mais pas à l'emplacement indiqué, oui si la lettre indiquée est la bonne).

Exemple L'utilisateur doit deviner la chaîne ABD.

  • Premier essai : EAD renvoie [Non, presque, oui]
  • Deuxième essai : ACD renvoie [oui, non, oui]
  • Troisième essai : AAD renvoie [oui, presque, oui] et "perdu" (trois tentatives effectuées). Si l'utilisateur avait saisi ABD, il aurait eu comme message "gagné!".

Vendredi

Restitutions

  • Gena : les salons de l'emploi en Haute-Garonne
  • Carole : backbone.js

Les liens de la semaine

https://www.gitbook.com/book/frontendmasters/front-end-handbook-2017/details

Travailler à plusieurs avec git :

⚠️ **GitHub.com Fallback** ⚠️