The Hour of Code by Leanbase

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ésultats live du workshop 
12/14/2014 www.leanbase.eu 2

Découverte de la programmation
« Great coders are today’s Rockstars »
https://www.youtube.com/watch?v=qYZF6oIZtfc

C’est parti !
http://www.leanbase.eu/editor/

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

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

Les booléens (Booleans)

• 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

Les variables

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.

Les conditions

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.

Les fonctions

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

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).

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.

Pour résumer
• Différents types de données
– String, nombres, booléens
• Variables
• Conditions
• Fonctions
• La fonction prompt()

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 !

Bonus: les tableaux
var tableau = ["Bob","Alice"];
say(tableau[1]);  Alice
tableau.push("Oscar");  ["Bob","Alice","Oscar"]

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.

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.

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

Architecture web
Ordinateur local Serveur distant
Browser
Client FTP

Rôle du client FTP
Client FTP

Client FTP
Ordinateur local
Browser
Client FTP

Machine locale VS serveur distant
Serveur distant

Contenu du serveur distant
Site statique
Dossiers
BDD
Serveur
distant
Site dynamique

Site statique: fichiers principaux

Rôle du browser
Browser

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

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/

The Hour of Code by Leanbase

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Andere mochten auch

Andere mochten auch (19)

Ähnlich wie The Hour of Code by Leanbase

Ähnlich wie The Hour of Code by Leanbase (20)

The Hour of Code by Leanbase

Hinweis der Redaktion