The Hour of Code 
Workshop by LeanBase 
Made possible by the SBS-SEC
Sommaire 
• 35 min pour découvrir le JavaScript 
• 30 min pour découvrir une architecture web 
• Questions / Réponses 
• R...
Découverte de la programmation 
« Great coders are today’s Rockstars » 
https://www.youtube.com/watch?v=qYZF6oIZtfc 
12/14...
C’est parti ! 
http://www.leanbase.eu/editor/ 
12/14/2014 www.leanbase.eu 4
Les chaînes de caractères (String) 
• Exemples 
"Je m’appelle Pierre-Yves" 
"42" 
• La propriété length 
"Pierre-Yves".len...
• Exemple 
Les nombres (Integers) 
say( 55 + 45 ); 
 100 
• Opérations possibles 
+ - * / % (modulo) 
• Exercice 
1. Mult...
Les booléens (Booleans) 
12/14/2014 www.leanbase.eu 7
• Exemple 
Les booléens (Booleans) 
15 > 7  true 
100 == 101  false 
• Opérateurs possibles 
> , < , >= , <= , == , != 
...
Les variables 
12/14/2014 www.leanbase.eu 9
Les variables 
• Un moyen de stocker une valeur 
var nomDeLaVariable = VALEUR; 
var amIAlive = true; 
var myAge = 24; 
say...
Les conditions 
12/14/2014 www.leanbase.eu 11
Les conditions 
var myAge = 24; 
if(myAge > 18) { 
watchPorn(); 
} else { 
eatIceCream(); 
} 
• Exercice 
1. Stocker le RO...
Les fonctions 
12/14/2014 www.leanbase.eu 13
Les fonctions 
• Une procédure qui prend quelque chose en 
entrée et "fait quelque chose avec". 
nomDeLaFonction(param1, p...
Créer sa propre fonction 
function nomDeLaFonction (param1, param2, …) { 
// CONTENU DE LA FONCTION 
// Exemple: 
say(para...
Demander une information 
var nomDeMaVariable = prompt("Ma question"); 
• Exercice 
1. Demander à l'utilisateur les valeur...
Pour résumer 
• Différents types de données 
– String, nombres, booléens 
• Variables 
• Conditions 
• Fonctions 
• La fon...
Aller plus loin ? 
• Les tableaux 
pour manipuler un ensemble de données 
• Les boucles 
pour effectuer plusieurs fois la ...
Bonus: les tableaux 
var tableau = ["Bob","Alice"]; 
say(tableau[1]);  Alice 
tableau.push("Oscar");  ["Bob","Alice","Os...
Bonus: les tableaux 
var tableau = ["Bob","Alice"]; 
say(tableau[1]);  Alice 
tableau.push("Oscar");  ["Bob","Alice","Os...
Bonus: les boucles 
var counter = 10; 
while( counter >= 0 ) { 
say(counter); 
counter = counter - 1; 
} 
• Exercice 
1. F...
Bonus: exercice final 
Ecrire un programme qui va calculer le ROI en fonction d'une 
somme initiale et d'une somme finale ...
Bonus: exercice final 
• Tips 
1. Pour demander les dividendes, on utilise une boucle avec 
comme condition un booléen éga...
Architecture web 
Ordinateur local Serveur distant 
Browser 
Client FTP 
12/14/2014 www.leanbase.eu 24
Rôle du client FTP 
Ordinateur local Serveur distant 
Client FTP 
12/14/2014 www.leanbase.eu 25
Client FTP 
Ordinateur local 
Browser 
Client FTP 
12/14/2014 www.leanbase.eu 26
Machine locale VS serveur distant 
Serveur distant 
12/14/2014 www.leanbase.eu 27
Machine locale VS serveur distant 
Serveur distant 
12/14/2014 www.leanbase.eu 28
Contenu du serveur distant 
Site statique 
Dossiers 
BDD 
Serveur 
distant 
Site dynamique 
12/14/2014 www.leanbase.eu 29
Site statique: fichiers principaux 
12/14/2014 www.leanbase.eu 30
Site statique: fichiers principaux 
12/14/2014 www.leanbase.eu 31
Site statique: fichiers principaux 
12/14/2014 www.leanbase.eu 32
Site statique: fichiers principaux 
12/14/2014 www.leanbase.eu 33
Rôle du browser 
Ordinateur local Serveur distant 
Browser 
12/14/2014 www.leanbase.eu 34
Nom de domaine et DNS 
Dossiers / sites 
Serveur 
distant 
Ordi 
Local Serveur 
DNS 
Belgacom.be 
Leanbase.eu 
IP Nom de D...
Serveur local 
• Rôle: émuler un serveur 
• Site statique et dynamique 
• Rapidité de développement 
• Ex: 
– MAMP (MAC) 
...
Quelques outils utiles 
• Wordpress, et autres CMS 
• Bootstrap 
• Jquery 
• JsFiddle.net 
• http://openclassrooms.com/ 
1...
12/14/2014 www.leanbase.eu 38
Prochain SlideShare
Chargement dans…5
×

The Hour of Code by Leanbase

376 vues

Publié le

Lors de la semaine des sciences informatiques 2014, dans le monde entier, est organisée une initiative appelée « The Hour of Code » dont le principe est simple: faire découvrir l’informatique et, plus particulièrement, la programmation, en 1 heure de temps, peu importe l’âge ou le niveau du public.

Chez LeanBase, nous avons décidé d’apporter notre pierre à l’édifice en organisant une séance d’introduction à la programmation à Bruxelles, à la Solvay Business School of Economics & Management (ULB), en partenariat avec le SBS-Solvay Entrepreneurs Club. Au final, ce ne sont pas moins de 30 personnes qui ont pu découvrir l’informatique avec, pour commencer, une introduction à la programmation avec JavaScript, donnée par Pierre-Yves. Ensuite, Maxence a repris le flambeau pour jeter les bases du fonctionnement et de l’architecture d’un site web de manière générale.

Publié dans : Technologie
0 commentaire
0 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

  • Soyez le premier à aimer ceci

Aucun téléchargement
Vues
Nombre de vues
376
Sur SlideShare
0
Issues des intégrations
0
Intégrations
198
Actions
Partages
0
Téléchargements
6
Commentaires
0
J’aime
0
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive
  • Ecrire un programme qui va calculer le ROI en fonction d'une somme initiale et d'une somme finale ainsi que d'un nombre variable de dividendes possibles. Ce programme commencera par demander à l'utilisateur les valeurs initiale et finales. Ensuite, il demandera les dividendes. Tant que l'utilisateur ne rentre pas "STOP", le programme continue de lui demander le dividende suivant.
  • Local demande un fichier
    Serveur distant lui envoie
    Question: qqun a t-il déjà eu un probleme lorsqu’il uploade un Torrent à vitesse grand V? ca bloque toute la connexione (les autres PC ne savent plus faire de requetes vers le serveur pour lui demander ‘donne moi mon index.html ’)
  • Création d’un dossier distant « workshop»
  • Création d’un dossier distant « workshop»
  • Création d’un dossier distant « workshop»
  • The Hour of Code by Leanbase

    1. 1. The Hour of Code Workshop by LeanBase Made possible by the SBS-SEC
    2. 2. Sommaire • 35 min pour découvrir le JavaScript • 30 min pour découvrir une architecture web • Questions / Réponses • Résultats live du workshop  12/14/2014 www.leanbase.eu 2
    3. 3. Découverte de la programmation « Great coders are today’s Rockstars » https://www.youtube.com/watch?v=qYZF6oIZtfc 12/14/2014 www.leanbase.eu 3
    4. 4. C’est parti ! http://www.leanbase.eu/editor/ 12/14/2014 www.leanbase.eu 4
    5. 5. Les chaînes de caractères (String) • Exemples "Je m’appelle Pierre-Yves" "42" • La propriété length "Pierre-Yves".length  11 • Exercices 1. Créer un String avec votre prénom 2. Afficher son nombre de caractères 12/14/2014 www.leanbase.eu 5
    6. 6. • Exemple Les nombres (Integers) say( 55 + 45 );  100 • Opérations possibles + - * / % (modulo) • Exercice 1. Multipliez deux nombres 2. Calculez le ROI d’une action dont la valeur initiale est 100, la valeur finale 97, son 1er dividende 3 et son 2ième dividende 4. 12/14/2014 www.leanbase.eu 6
    7. 7. Les booléens (Booleans) 12/14/2014 www.leanbase.eu 7
    8. 8. • Exemple Les booléens (Booleans) 15 > 7  true 100 == 101  false • Opérateurs possibles > , < , >= , <= , == , != • Exercice 1. Vérifier si votre nom contient plus de 8 caractères 12/14/2014 www.leanbase.eu 8
    9. 9. Les variables 12/14/2014 www.leanbase.eu 9
    10. 10. Les variables • Un moyen de stocker une valeur var nomDeLaVariable = VALEUR; var amIAlive = true; var myAge = 24; say(myAge);  24 • Exercice 1. Stocker votre prénom et son nombre de caractères dans 2 variables distinctes. 2. Afficher la valeur de ces deux variables. 12/14/2014 www.leanbase.eu 10
    11. 11. Les conditions 12/14/2014 www.leanbase.eu 11
    12. 12. Les conditions var myAge = 24; if(myAge > 18) { watchPorn(); } else { eatIceCream(); } • Exercice 1. Stocker le ROI dans une variable et, si il est Initial = 100 Final = 96 Div1 = 3 Div2 = 4 positif, afficher des félicitations. Si pas, afficher une remarque. 12/14/2014 www.leanbase.eu 12
    13. 13. Les fonctions 12/14/2014 www.leanbase.eu 13
    14. 14. Les fonctions • Une procédure qui prend quelque chose en entrée et "fait quelque chose avec". nomDeLaFonction(param1, param2, …); say("Pierre-Yves"); • Exercice 1. Ajouter un paramètre "blue" à la fonction say 12/14/2014 www.leanbase.eu 14
    15. 15. Créer sa propre fonction function nomDeLaFonction (param1, param2, …) { // CONTENU DE LA FONCTION // Exemple: say(param1); } • Exercice 1. Ecrire une fonction computeROI qui prend, en entrées, la valeur initial, la valeur finale, le dividende 1 et le dividende 2. Cette fonction calcule le ROI et affiche à l'écran si c'est bon (en vert) ou pas (en rouge). 12/14/2014 www.leanbase.eu 15
    16. 16. Demander une information var nomDeMaVariable = prompt("Ma question"); • Exercice 1. Demander à l'utilisateur les valeurs initiale et finale ainsi que les deux dividendes pour, ensuite, appeler la fonction computeROI avec ces valeurs. 12/14/2014 www.leanbase.eu 16
    17. 17. Pour résumer • Différents types de données – String, nombres, booléens • Variables • Conditions • Fonctions • La fonction prompt() 12/14/2014 www.leanbase.eu 17
    18. 18. Aller plus loin ? • Les tableaux pour manipuler un ensemble de données • Les boucles pour effectuer plusieurs fois la même action et manipuler des tableaux • L'exercice final to be a Rockstar ! 12/14/2014 www.leanbase.eu 18
    19. 19. Bonus: les tableaux var tableau = ["Bob","Alice"]; say(tableau[1]);  Alice tableau.push("Oscar");  ["Bob","Alice","Oscar"] 12/14/2014 www.leanbase.eu 19
    20. 20. Bonus: les tableaux var tableau = ["Bob","Alice"]; say(tableau[1]);  Alice tableau.push("Oscar");  ["Bob","Alice","Oscar"] • Exercice 1. Créer un tableau contenant 6 nombres et afficher le premier, le 3ième et le dernier. 2. Ajouter à ce tableau 2 nouveaux nombres avec la fonction push. 12/14/2014 www.leanbase.eu 20
    21. 21. Bonus: les boucles var counter = 10; while( counter >= 0 ) { say(counter); counter = counter - 1; } • Exercice 1. Faire une boucle qui compte de 0 à 5. 2. Etant donné un tableau: var tab = [23, 25, 27, 29, 39]; afficher chaque élément de ce tableau à l'aide d'une boucle. 12/14/2014 www.leanbase.eu 21
    22. 22. Bonus: exercice final Ecrire un programme qui va calculer le ROI en fonction d'une somme initiale et d'une somme finale ainsi que d'un nombre variable de dividendes possibles. Ce programme commencera par demander à l'utilisateur les valeurs initiale et finales. Ensuite, il demandera les dividendes. Tant que l'utilisateur ne rentre pas "STOP", le programme continue de lui demander le dividende suivant. Enfin, le programme calculera le ROI et affichera à l'écran sa valeur, en vert si c'est positif, en rouge sinon. 12/14/2014 www.leanbase.eu 22
    23. 23. Bonus: exercice final • Tips 1. Pour demander les dividendes, on utilise une boucle avec comme condition un booléen égal à true. Si l'utilisateur entre "STOP", on change la valeur de ce booléen par false. 2. Pour manipuler les dividendes, soit on utilise un tableau dans lequel on ajoute chaque dividende entré (push) et, par la suite, on fera la somme de ce tableau, soit on additionne directement tous les dividendes à mesure que l'utilisateur les ajoute. 12/14/2014 www.leanbase.eu 23
    24. 24. Architecture web Ordinateur local Serveur distant Browser Client FTP 12/14/2014 www.leanbase.eu 24
    25. 25. Rôle du client FTP Ordinateur local Serveur distant Client FTP 12/14/2014 www.leanbase.eu 25
    26. 26. Client FTP Ordinateur local Browser Client FTP 12/14/2014 www.leanbase.eu 26
    27. 27. Machine locale VS serveur distant Serveur distant 12/14/2014 www.leanbase.eu 27
    28. 28. Machine locale VS serveur distant Serveur distant 12/14/2014 www.leanbase.eu 28
    29. 29. Contenu du serveur distant Site statique Dossiers BDD Serveur distant Site dynamique 12/14/2014 www.leanbase.eu 29
    30. 30. Site statique: fichiers principaux 12/14/2014 www.leanbase.eu 30
    31. 31. Site statique: fichiers principaux 12/14/2014 www.leanbase.eu 31
    32. 32. Site statique: fichiers principaux 12/14/2014 www.leanbase.eu 32
    33. 33. Site statique: fichiers principaux 12/14/2014 www.leanbase.eu 33
    34. 34. Rôle du browser Ordinateur local Serveur distant Browser 12/14/2014 www.leanbase.eu 34
    35. 35. Nom de domaine et DNS Dossiers / sites Serveur distant Ordi Local Serveur DNS Belgacom.be Leanbase.eu IP Nom de Domaine 192.168.1.1 Belgacom.be 192.167.8.9 Leanbase.eu 178.980.2.3 Chocolat.com 12/14/2014 www.leanbase.eu Chocolat.3c5om
    36. 36. Serveur local • Rôle: émuler un serveur • Site statique et dynamique • Rapidité de développement • Ex: – MAMP (MAC) – XAMP (PC) 12/14/2014 www.leanbase.eu 36
    37. 37. Quelques outils utiles • Wordpress, et autres CMS • Bootstrap • Jquery • JsFiddle.net • http://openclassrooms.com/ 12/14/2014 www.leanbase.eu 37
    38. 38. 12/14/2014 www.leanbase.eu 38

    ×