The Hour of Code Workshop by LeanBase Made possible by the SBS- SEC
The Hour of CodeWorkshop by LeanBase
Made possible by the SBS-SEC
05/02/2023 www.leanbase.eu 2
• 35 min pour découvrir le JavaScript• 30 min pour découvrir une architecture web• Questions / Réponses• Résultats live du workshop
Sommaire
05/02/2023 www.leanbase.eu 3
« Great coders are today’s Rockstars »
https://www.youtube.com/watch?v=qYZF6oIZtfc
Découverte de la programmation
05/02/2023 www.leanbase.eu 4
http://www.leanbase.eu/editor/
C’est parti !
05/02/2023 www.leanbase.eu 5
• Exemples"Je m’appelle Pierre-Yves""42"
• La propriété length"Pierre-Yves".length 11
• Exercices1. Créer un String avec votre prénom2. Afficher son nombre de caractères
Les chaînes de caractères (String)
05/02/2023 6
• Exemplesay( 55 + 45 ); 100
• Opérations possibles+ - * / % (modulo)
• Exercice1. Multipliez deux nombres2. 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.
Les nombres (Integers)
www.leanbase.eu
05/02/2023 www.leanbase.eu 7
Les booléens (Booleans)
05/02/2023 www.leanbase.eu 8
• Exemple15 > 7 true100 == 101 false
• Opérateurs possibles> , < , >= , <= , == , !=
• Exercice1. Vérifier si votre nom contient plus de 8
caractères
Les booléens (Booleans)
05/02/2023 www.leanbase.eu 9
Les variables
05/02/2023 www.leanbase.eu 10
• Un moyen de stocker une valeurvar nomDeLaVariable = VALEUR;
var amIAlive = true;var myAge = 24;say(myAge); 24
• Exercice1. Stocker votre prénom et son nombre de
caractères dans 2 variables distinctes.2. Afficher la valeur de ces deux variables.
Les variables
05/02/2023 www.leanbase.eu 11
Les conditions
05/02/2023 www.leanbase.eu 12
var myAge = 24;if(myAge > 18) {watchPorn();
} else {eatIceCream();
}
• Exercice1. Stocker le ROI dans une variable et, si il est positif,
afficher des félicitations. Si pas, afficher une remarque.
Les conditions
Initial = 100Final = 96Div1 = 3Div2 = 4
05/02/2023 www.leanbase.eu 13
Les fonctions
05/02/2023 www.leanbase.eu 14
• Une procédure qui prend quelque chose en entrée et "fait quelque chose avec".nomDeLaFonction(param1, param2, …);
say("Pierre-Yves");
• Exercice1. Ajouter un paramètre "blue" à la fonction say
Les fonctions
05/02/2023 www.leanbase.eu 15
function nomDeLaFonction (param1, param2, …) {// CONTENU DE LA FONCTION// Exemple:say(param1);
}
• Exercice1. 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).
Créer sa propre fonction
05/02/2023 www.leanbase.eu 16
var nomDeMaVariable = prompt("Ma question");
• Exercice1. Demander à l'utilisateur les valeurs initiale et finale ainsi
que les deux dividendes pour, ensuite, appeler la fonction computeROI avec ces valeurs.
Demander une information
05/02/2023 www.leanbase.eu 17
• Différents types de données– String, nombres, booléens
• Variables• Conditions• Fonctions• La fonction prompt()
Pour résumer
05/02/2023 www.leanbase.eu 18
• 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 !
Aller plus loin ?
05/02/2023 www.leanbase.eu 19
var tableau = ["Bob","Alice"];
say(tableau[1]); Alicetableau.push("Oscar"); ["Bob","Alice","Oscar"]
Bonus: les tableaux
05/02/2023 www.leanbase.eu 20
var tableau = ["Bob","Alice"];
say(tableau[1]); Alice
tableau.push("Oscar"); ["Bob","Alice","Oscar"]
• Exercice1. 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.
Bonus: les tableaux
05/02/2023 www.leanbase.eu 21
var counter = 10;while( counter >= 0 ) {say(counter);counter = counter - 1;
}
• Exercice1. 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.
Bonus: les boucles
05/02/2023 www.leanbase.eu 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.
05/02/2023 www.leanbase.eu 23
Bonus: exercice final
• Tips1. 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.
05/02/2023 www.leanbase.eu 24
Architecture web
Ordinateur local Serveur distant
Client FTP
Browser
05/02/2023 www.leanbase.eu 25
Rôle du client FTP
Ordinateur local Serveur distant
Client FTP
05/02/2023 www.leanbase.eu 26
Client FTP
Ordinateur localBrowser
Client FTP
05/02/2023 www.leanbase.eu 27
Machine locale VS serveur distant
Serveur distant
05/02/2023 www.leanbase.eu 28
Machine locale VS serveur distant
Serveur distant
05/02/2023 www.leanbase.eu 29
Contenu du serveur distant
Site statique
BDD
Dossiers
Serveur distant
Site dynamique
05/02/2023 www.leanbase.eu 30
Site statique: fichiers principaux
05/02/2023 www.leanbase.eu 31
Site statique: fichiers principaux
05/02/2023 www.leanbase.eu 32
Site statique: fichiers principaux
05/02/2023 www.leanbase.eu 33
Site statique: fichiers principaux
05/02/2023 www.leanbase.eu 34
Rôle du browser
Ordinateur local Serveur distantBrowser
05/02/2023 www.leanbase.eu 35
Nom de domaine et DNSDossiers / sites
Serveur distant
OrdiLocal Serveur
DNS
Belgacom.be
Leanbase.eu
Chocolat.com
IP Nom de Domaine
192.168.1.1 Belgacom.be
192.167.8.9 Leanbase.eu
178.980.2.3 Chocolat.com
05/02/2023 www.leanbase.eu 36
Serveur local
• Rôle: émuler un serveur• Site statique et dynamique• Rapidité de développement• Ex:
– MAMP (MAC)– XAMP (PC)
05/02/2023 www.leanbase.eu 37
Quelques outils utiles
• Wordpress, et autres CMS• Bootstrap• Jquery• JsFiddle.net• http://openclassrooms.com/
05/02/2023 www.leanbase.eu 38