JavaScript par Pierre / Yannick l’après-midi
Le matin, apprentissage des fonctions avec arguments – puis exercice sur l’utilisation de ces fonctions pour changer un thème couleur, et correction collective. L’après-midi, on apprend à utiliser des variables, et à manipuler des champs de texte en Javascript. Ensuite exercice libre sur l’inscription aux listes électorales, en atelier par groupe de trois, animé par Yannick et Pierre.
une citation approximative d’une apprenante durant le spectacle
c’est marrant, on a fait 5 projets différent, et en fait, chacun fonctionne. Ça signifie qu’il n’y a pas qu’une seule façon de faire.
Y’a pas de petit apprentissage :)
Énoncé et solution possible : dark-theme-2
JavaScript par Pierre
Le matin, on continue à travailler sur les exercices données la veille en binômes / trinômes, pendant 1/2h. Chaque groupe travaille sur l’exercice de son choix. Puis restitution générale des exercices, avec une démo au groupe par type d’exercice.
Ensuite cours puis exercices sur la valeur de retour des fonctions. L’application est un convertisseur livre/euros. Au milieu des exercices, on refait un rappel sur la portée des variables.
JavaScript par Pierre
Le matin ateliers d’exercices en groupes : un groupe par exercice (convertisseur de devises, dates, openclassroom et fizzbuzz), en répartition libre. On fait une restitution par groupe ensuite. L’après-midi, introduction aux tableaux (forEach, querySelector).
JavaScript par Pierre
Le matin travail sur les exercices de la veille, puis sur des exemples de manipulation de tableaux (sort, find, filter, etc) et de HTML (querySelectorAll). En fin de journée, introduction aux objets (avec des litterals pour l’instant).
Agilité / révision par Yannick
Le matin selon leur souhait, j’évoque des aspects théorique de JS, et plus largement en parlant de ma théorie à propos de la programmation. Ensuite, je réalisé un exercice déjà effectué, en le commentant, et en s’arrêtant pour répondre à toutes les questions au moment où elles arrivent. L’après midi commence par une discussion sur SAP, puis sur les formats et trucs qu’elles aiment bien sur la formation. L’idée pour elle, c’est communiquer là dessus pour faire en sorte que TOUT les cours qui viendront ensuite s’appuie sur ce genre de structure. Nous explorons ensuite les animations en CSS, c’est pas une grande réussite, mais ça me permet de leur dire que là, elle touche un truc assez poussé, et de les féliciter sur le chemin parcourur. Ensuite, on tente GIT, mais avec trop peu de temps. On reporte à mardi, en parallèle de la journée JS.
JavaScript par Pierre
Affichage d’éléments dynamiques dans une page web avec innerHTML. Le matin, démo de comment innerHTML fonctionne, puis exercices d’affichage d’un tableau Javascript dans des balises HTML. L’après-midi, séance de trois exercices en parallèle : manipulation des tableaux avec une Todo-list, manipulation d’objets dans des tableaux avec un tableau de données électorales, et recherche sur les énumérations en Javascript.
JavaScript par Yannick
Exercice de conversion de nombre romain en nombre arabe. Excuse pour travailler avec Git en faisant des commits à chaque fois qu’on peut.
J’ai montré comment j’utilise git, via Atom pour que ce soit dans les même conditions qu’elles. J’ai fait un fizzbuzz (histoire de pas faire exactement le même exercice), et j’ai comité dans atom. Après, je les aient laissé faire de leur mieux. L’après midi, on a introduit le fait de pousser sur github et certaines sont allé explorer github pages.
Nous avons, en début d’après-midi, pris le temps de décortiquer le code que l’une d’entre elle avait trouvé sur internet pour faire l’exercice. Puis, j’ai évoqué github, et github pages. Elles ont avancé un peu en autonomie. Certaines m’ont demandé de refaire l’explication de texte sur un autre bout de code, on a utilisé un autre bout de code qui résout aussi le romanToNumber, mais d’une autre façon. C’est une sorte d’atelier de lecture de code.
Il y a eu quelques discussions sur le stage et l’avenir : c’est quoi travailler en tant que Front ? Est-ce qu’on peut le faire sans faire de JS ?
JavaScript par Pierre
Le matin, introduction aux classes pour créer des objets. Comme exercice, on convertit la liste des candidats aux municipales pour utiliser des classes (plutôt que des objets ad-hoc). Résumé L’après-midi, introduction aux requêtes d’API. On prend l’exemple d’un site qui affiche la météo, et on regarde comment créer une clef d’API, lire la documentation, et appeler l’API depuis notre code.
JavaScript par Pierre & Yannick
Le matin, nous avons voulu faire des exercices avec les API, pas de bol, nous avons buté sur des soucis de comptes à créer, de CORS et de limitation d’accès (nombre de requêtes par minutes). C’était malgré tout l’occasion de parler de la structure de communication par email et API, de sécurité, de vie privée (RGPD).
L’après midi, nous avons parlé Git et github, organisation d’équipe et de projet.
Révision (responsive et JavaScript) par Yannick
Ce matin, nous avons essayé un peu de Responsive. À partir d’un site réalisé par Sarah, nous avons parlé de ce qu’est le responsive, et des outils souvent utilisé dans ce cas. Un peu avant 11h, elles se sont (re)mises à leur site ne responsive. L’après midi, nous avons eu une grande discussion, où Mich nous a rejoint, sur la façon de s’organiser pour les jours qui viennent. Ensuite, nous avons corrigé publiquement un exercice JavaScript que Charlotte voulait faire.
Découpage d’image avec Alix
SOS ! Comment mettre une image détourée sur fond de couleur svp ?
Seul les formats PNG et GIF (à vérifier pour ce dernier) permettent d’avoir un fond transparent. PNG est un bon format pour le web.
Pour en savoir un peu plus un article sur les différents format d’image
À propos de la construction d’un autocomplete en JavaScript
exercice issu du cours JavaScript d’OpenClassRoom
Nous avons fait une visioconférence, et produit du code example et deux vidéo.
1ere vidéo de mise en place 2eme vidéo de réalisation avec revue de code à la fin
Style de fonction avec Laura
Suivi d’une discussion avec Nathan (un mentor) sur la porté du this dans les différents cas. Recommandation d’utiliser la forme
function maFunction() {
}
Ce matin, avec 3 descodeuses, nous avons parlé de fichier TODO et de comment on s’organise pour travailler. On a parlé de la séquence de travail habituelle :
git pull --rebase par exemple)git commit en général)git push)C’est le meilleur moyen de ne pas avoir de conflit
Elles travaillent sur windows avec l’outil github desktop pour tout ce qui est
push et pull (qui fait plutôt du fetch si j’ai bien saisi). Et les
commits sur atom.
Thimy (mentor) réponds à des questions à propos de SVG.
Salut à toutes/tous! Quelqu’un serait-il calé en utilisation de SVG? Je m’essaye au dessin vectoriel et j’ai réussi à le transférer correctement sur une page html mais j’ai du mal à comprendre comment lui appliquer les propriétés css, notamment avec hover et pour la colorisation.
Cette page explique plutôt bien (en anglais) comment tu peux utiliser le svg
Dans les grandes lignes, si tu charges ton svg en tant qu’image avec <img src="img.svg" />, tu ne pourras pas appliquer de style en css dessus.
Pour pouvoir mettre du style, il faut que ton svg soit défini directement dans ton html (si tu ouvres ton svg dans ton éditeur tu verras que c’est du code dedans).
SVG(Scalable Vector Graphics) a quoi sert? C’est pour les images ? pour les carrés ?
c’est un format d’image composé de formes géométriques, ce qui permet d’avoir des images qu’on peut redimensionner sans perdre de qualité
Il y a des icônes en SVG disponible sur feathericons.com
Le soir, Laura à partagé un bout de code JavaScript assez poussé pour quelqu’un qui se forme depuis 6 semaines seulement :)
async function func1() {
return 3;
}
async function func2() {
return 4;
}
var promiseRes =
Promise
.all([func1(), func2()])
.then(function(results) {
return results.reduce(function(acc, res) {
return acc * res;
}, 2);
})
.then(function(time) {
return setTimeout(callback, time * 1000);
});
Elle en comprend pas très bien ce qu’il se passe dedans. Je suppose que c’est les histoires d’asynchronisme ?
Suite aux discussions avec Souad et Mich ces derniers jours, on essaie de se retrouver toutes à 9h30 pour démarrer la journée. La semaine dernière, nous avions convenue de nous retrouver à 10h pour faire un point de situation.
Il y avait assez peu de monde à 9h30, et personne de plus à 10h.
Nous avons présenté une ébauche de l’organisation pour la suite. En particulier, l’intrduction des journaux.
Point avec Céline qui à du mal avec le positionnement de sont ≤header>. On parle du flow d’affichage en HTML, et du positionnement en CSS. Faire du négatif, c’est plutôt rare, special, à éviter.
Vers 12h, Lynda demande un peu d’aide. Également une histoire de placement et d’affichage de sont menu hamburger. Elle a essayé plusieurs choses, mais ça ne semble pas fonctionner. Beaucoup de chose dans tout les sens sur le HTML et le CSS, c’est pas facile de garder un code propre et lisible, et pourtant, c’est souvent ce qui aide à mieux comprendre ce qu’il se passe.
Dans une point l’après midi, elle semble avoir réussi quelque chose, mais trouve ça pas jolie.
En fin de journée, je refait un check avec Céline qui me montre ce qu’elle a réussi à faire avec son <header>. Elle me demande mon avis, je fait quelques retours.
Retour sur le JavaScript que Laura a posté hier soir tard. J’essaie de déméler ce qu’elle ne comprend pas. Il y a dans le code l’aspect asynchrone de JavaScript (avec async et les promesses), et en fait c’est sur reduce qu’elle souhaite des explications. Je partage mon écran pour dérouler des bouts de code dans la console.
Nous avons parlé de map, et donc de la structure mapReduce. C’est un pied dans la programmation fonctionnelle
Quelques échanges avec Silvia pour l’encourager à programmer, quitte à le faire avec ces enfants sur Scratch et Leekwars.
Le soir, discussion avec Delphine sur des soucis de taille d’image. Je lui partage l’article de Raphaël Goetter sur les images responsives