The Hour of Code by Leanbase

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


« Great coders are today’s Rockstars »

https://www.youtube.com/watch?v=qYZF6oIZtfc

Découverte de la programmation


http://www.leanbase.eu/editor/

C’est parti !


• 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


Les booléens (Booleans)


• Exemple15 > 7 true100 == 101 false

• Opérateurs possibles> , < , >= , <= , == , !=

• Exercice1. Vérifier si votre nom contient plus de 8

caractères

Les booléens (Booleans)


Les variables


• 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


Les conditions


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


Les fonctions


• 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


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


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


• Différents types de données– String, nombres, booléens

• Variables• Conditions• Fonctions• La fonction prompt()

Pour résumer


• 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 ?


var tableau = ["Bob","Alice"];

say(tableau[1]); Alicetableau.push("Oscar"); ["Bob","Alice","Oscar"]

Bonus: les tableaux


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


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


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.


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.


Architecture web

Ordinateur local Serveur distant

Client FTP

Browser


Rôle du client FTP

Ordinateur local Serveur distant

Client FTP


Client FTP

Ordinateur localBrowser

Client FTP


Machine locale VS serveur distant

Serveur distant


Machine locale VS serveur distant

Serveur distant


Contenu du serveur distant

Site statique

BDD

Dossiers

Serveur distant

Site dynamique


Site statique: fichiers principaux








Rôle du browser

Ordinateur local Serveur distantBrowser


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


Serveur local

• Rôle: émuler un serveur• Site statique et dynamique• Rapidité de développement• Ex:

– MAMP (MAC)– XAMP (PC)


Quelques outils utiles

• Wordpress, et autres CMS• Bootstrap• Jquery• JsFiddle.net• http://openclassrooms.com/


Date post:	05-Apr-2017
Category:	Technology
Upload:	maxlacro
View:	389 times
Download:	0 times

The Hour of Code by Leanbase

Technology