Du Hello World au Shifumi en JavaScript

Avant d'aller plus loin, pour suivre ce cours, il est nécessaire d'avoir acquis les bases de la manipulation aux claviers et à la sourie.

Un algorithme est une suite d’opérations ou d'instructions permettant de résoudre un problème ou d'obtenir un résultat.

Ci-dessous quelques exemples d'algorithmes:

  • Monter sur mon vélo
    Commencer à pédaler
    Tourner à la première à droite;
    Tant que le feu est rouge
        Attendre
    Avancer jusqu'au 3e carrefour;
    Prendre la 2e à droite;
    ...
    
  • Préchauffez votre four à 180°C (thermostat 6).
    Préparer un saladier
    Préparer une casserole
    Préparer un moule
    Mettre 200g de chocolat dans une casserole
    Mettre 100g beurre dans la casserole
    Allumer le feu (pas trop fort)
    Mettre 100g de sucre dans le saladier
    Mettre 50g de farine dans le saladier
    Casser 3 oeufs dans le saladier
    Tant que le chocolat et le beurre ne sont pas fondu
        Mélanger le saladier pendant 30s
        Mélanger la casserole pendant 10s
    Verser le contenu de la casserole dans le saladier
    Mélanger le saladier
    Beurrer le moule
    Fariner le moule
    Verser le contenu du saladier dans le moule    
    Mettre le moule dans le four
    Attendre 15 minutes
    Tant que le gateau n'est pas cuit
        Attendre 2min
    Sortir le gateau du four
    
  • Algorithme pour tirer un dé 6
    Générer un nombre aléatoire de 0 à 1
    Multiplier ce nombre par 6
    Arrondir au supérieur
    

Un programme informatique (ou script) est un ensemble d'opérations destinées à être exécutées par un ordinateur. Il est donc écrit avec un langage informatique qui comporte un jeu d'instructions que l'ordinateur peut interpréter.

Ci-dessous, quelques exemples de programmes:

  • Programme pour tirer un dé 6
    var nombreEntreZeroEtUn = Math.random();
    var nombreEntreZeroEtSix = nombreEntreZeroEtUn * 6;
    var lancer = Math.ceil(nombreEntreZeroEtSix);
    
  • Programme pour approximer π
    var pi = 1;// pi, initialement
    var x = 3;// 4*(1 - 1/x + ...)
    var iMax = prompt("Combien d'itérations?");// demander à l'utilisateur
    var i;// itérations déjà éxecutées
    var obj = "-";// alternance +/-
    for(i=0;i<=iMax;i++) {
        if(obj == "-") {
            pi -= 1 / x;
            obj = "+";
        } else if(obj == "+") {
            pi += 1 / x;
            obj = "-";
        }
        x += 2;
    }
    pi *= 4;
    alert("Pi vaut approximativement " + pi);
    

Commençons par créer un premier programme qui affichera Hello World. La création d'un hello world est la première chose que fait un⋅e programmeur⋅euse lorsqu'il ou elle souhaite découvrir un nouveau langage de programmation.

Ce programme est écrit avec le langage JavaScript qui a l'avantage de pouvoir s’exécuter à l'intérieur d'une page HTML, il est ainsi très facile de créer des programmes avec un simple éditeur de texte et un navigateur.

Création du fichier qui contient le programme

Pour commencer:

  • créez un dossier programmation (Clic-droit -> Créer un dossier) sur votre bureau
  • allez dans ce dossier
  • créez un fichier helloworld.html (Clic-droit -> Créer un document -> document vide)
  • si vous avez mal nommé votre fichier, renommez-le en cliquant droit dessus ou avec la touche F2
  • ouvrez le fichier avec l'éditeur de texte
  • copiez CTRL+C puis collez dans votre document CTRL+V le code ci-dessous
    <html>
        <head>
            <meta charset="UTF-8">
        </head>
        <body>
        <script>
            alert("Hello world");
        </script>
        </body>
    </html>
    
  • enregistrez (Fichier -> Enregistrer OU CTRL+S)
  • ouvrez helloworld.html avec un navigateur

Qu'observe t'on ?

On remarque qu'une pop up s'affiche avec inscrit Hello World.

Une pop up qui contient les mots Hello World

Analysons le programme javascript inclu dans notre page HTML de plus prêt:

<script>
alert("Hello world");
</script>

Nous avons ici un programme d'une ligne en javascript, on constate que:

  • "Hello world" est une chaine de caractère, c'est à dire un texte. Ce texte est délimité par des guillemets.
  • alert() sert à afficher une pop up avec le texte fourni
  • l'instruction se termine par un point virgule
  • le programme est entouré des balises <script> et </script>.

Exercices

Afficher une pop up contenant le message Good Bye

Afficher 3 pop up avec les messages Lundi, Mardi, Mercredi

Afficher une pop up qui contient le message Laurent dit: "Bonjour"

La théorie

En informatique, les variables sont des symboles qui associent un nom (l'identifiant) à une valeur. Le nom est unique (et si le langage en possède, différents des mots-réservés).

Imaginez plein de boîtes vides : c'est la mémoire de l'ordinateur.
On veut par exemple retenir le nombre 2006, mais on ne peut pas le mettre comme ça dans une boîte vide, car on ne pourra pas le retrouver !
On va donc coller une étiquette sur une boîte, pour la nommer "annee" : on pourra donc la retrouver plus tard.
On va maintenant pouvoir y ranger le nombre 2006 à l'intérieur.

Eh bien en JS, c'est un peu ce principe :

  • la boîte porte le nom de variable.
  • L'étiquette est le nom de cette variable (dans notre cas, annee).
  • Le nombre 2006 est la valeur de cette variable.

Une variable peut contenir un nombre (ex: 2006), une chaine de caractère (ex: "Bonjour"), un booléen (ex: true ou false) ainsi que d'autres choses plus évoluées.

Mise en pratique

  • Copier le programme helloworld.html et le nommer variable.html
  • Remplacer le javascript (qui se trouve entre <script> et </script>)
    alert("Hello world");
    
    Par
    //Déclaration de la variable
    var prenom = "Camille";
    //Affectation du nom de l'utilisateur
    prenom = prompt("Quel est ton prénom ?");
    alert("Bonjour " + prenom + " !");
    
  • Enregistrer et tester dans le navigateur

Qu'observe t'on ?

Une pop up demandant le prénom puis une autre qui affiche Bonjour + ce prénom.

Dans le code:

  • La variable à pour nom prenom et pour valeur la chaine de caractère TON PRENOM.
  • prompt() permet de poser une question à l'utilisateur
  • Une variable doit être déclarée avec le mot var
  • On peut réaffecter une autre valeur à une variable
  • On peut écrire des commentaires qui ne seront pas interprétés par l'ordinateur avec //
  • On peut concaténer deux chaines de caractères en une seule en utilisant l'opérateur +

Exercices

Demander un nombre, le diviser par 5 et l'afficher

Demander 2 nombres, les diviser et afficher le reste

Transformer un nombre décimal en binaire

Transformer un nombre décimal supérieur à 16 et inférieur à 31 en binaire et l'afficher à l'écran. Le nombre à convertir sera demandé à l'utilisateur avec prompt().

Les tableaux en programmation sont des variables qui contiennent plusieurs valeurs, ainsi il n'est pas nécessaire de créer des variables numérotées.

Par exemple, si on a un programme qui liste les prénoms de la classe. On peut créer plusieurs variables

var prenom1 = "Camille";
var prenom2 = "Sam";
var prenom3 = "Fred";

alert("Les élèves sont:" + prenom1 + "," + prenom2 + "," + prenom3);
OU on peut utiliser un tableau
var prenoms = []; //déclaration du tableau
prenoms[0] = "Camille";
prenoms[1] = "Sam";
prenoms[2] = "Fred";
alert("Les élèves sont:" + prenoms);
alert("Le premier de la liste est " + prenoms[0]);

Observation

Dans la plupart des langages de programmation, le premier élément d'un tableau commence par 0 et non pas par 1.

Exercice

Transformer ce programme pour utiliser un tableau

En programmation on souhaite souvent exécuter des instructions uniquement sous certaines conditions, ceci se fait à l'aide des opérateurs de comparaison et des mots if et else.

var age = prompt('Quel âge avez-vous ? (en années)');

var majorite = "";
if (age >= 18) {
    majorite = "majeur";
}
else {
    majorite = "mineur";
}

alert('Vous êtes ' + majorite);

Observation

Selon l'age indiqué le programme déclare si on est majeur ou mineur...

L'opérateur >= (supérieur ou égale) est utilisé il existe aussi ==, <=, >, <, !=.

Combiner des conditions avec les opérateurs logiques

On peut combiner des conditions grâces à des opérateurs logiques NON !, ET &&, OU ||

var symptome = prompt('Quel symptôme avez vous ?  vomissement, fièvre, mal au ventre');
var achat = prompt('Qu\'avez vous acheté aujourd\'hui ? rien, fraise');

if(achat == "fraise" && symptome=="vomissement")
        alert("Avez-vous fait un test de grosse ?");
else
        alert("Ca va passer.");

Exercice

Tirer un nombre aux hasard

Créez un programme qui tire un nombre au hasard entre 1 et 20, puis indique si il est inférieur à 10

Le jeu du 421 (simplifié)

Créer un programme 421 qui simule le lancer de 3 dés et affiche gagné si il y a 421

Le jeu du Shifumi

Créer un programme de mande pierre feuille ou ciseaux à l'utilisateur et qui compare avec un choix au hasard fait par l'ordinateur (aléatoire)

Une fonction est une suite d'instructions ayant un rôle précis (pour ne pas dire une fonction précise...) que l'on pourra utiliser plusieurs fois.

On lui donne (éventuellement) des arguments (également appelés paramètres) entre les parenthèses qui suivent le nom de cette fonction.

Certaines fonctions nous renvoient une valeur, que l'on peut par exemple enregistrer dans une variable.

Un petit exemple :

var message = prompt('Entrez un texte');
  • On appelle la fonction prompt()
  • On lui fournit un seul argument, qui est 'Entrez un texte' (c'est le message d'invite qui sera affiché dans la boîte de dialogue).
  • Cette fonction nous renvoie le texte saisi par l'utilisateur, qu'on enregistre ici dans la variable message.

Vous pouvez créer vos propres fonctions :)

function tirerUnDe(valeurDe) {
    return Math.ceil(Math.random() * valeurDe);
}

var nombreAleatoire = [];
nombreAleatoire[0] = tirerUnDe(6);
nombreAleatoire[1] = tirerUnDe(6);
nombreAleatoire[2] = tirerUnDe(6);
alert(nombreAleatoire);

Pour tirer un dé 20 on aurait fait tirerUnDe(20);

Récursivité

une fonction peut se rappelle elle même

function binaire(nombreDecimal) {
    if (nombreDecimal==0) {
        return [];
    }
    var chiffreBinaire = nombreDecimal % 2; 
        
    return binaire((nombreDecimal - chiffreBinaire) / 2) + [chiffreBinaire]
}
alert("(650)10 = (" + binaire(650) + ")2");

Exercice

Créer une fonction qui calcule l'aire d'un rectangle

Créer une fonction qui calcule l'aire d'un cadre à partir d'une fonction qui calcule l'aire d'un rectangle

Créer une fonction qui affiche N fois un texte dans la même popup

La fonction prendra donc 2 arguments

Jeu des alumettes

Règles du jeu: le joueur joue contre l'ordinateur. il y a 24 alumettes, chacun son tour l'ordinateur et le joueur vont choisir de retirer entre 1 et 3 alummettes celui qui retire la dernière alumette à perdu.

On peut lancer une fonction lorsque l'utilisateur clique sur un élément HTML (un lien, une image, ...)

<a href="#" onclick="alert('click')">Clique ici</a>

Pour tester => Clique ici

Exercice

Afficher "Pourquoi cliquer sur cette image ?" quand on clique sur l'image

Ce code est à réaliser dans un fichier

Même si on peut utiliser la récursivité (une fonction qui s'appelle elle même) pour répéter une action jusqu'à ce qu'une condition soit valide. Il existe en programmation le système de boucle qui facilite cette opération.

function tirerUnDe(valeurDe) {
    return Math.ceil(Math.random() * valeurDe);
}
var nombre = prompt('Combien de dés voulez vous tirer ?');
var nombresAleatoires = [];
//Tirer 20 dés de 6
for (var i=0; i<nombre; i++) {
    nombresAleatoires[i] = tirerUnDe(6);
}

alert(nombresAleatoires);

Exercice

Additionner les nombres contenu dans un tableau

Trouver le maximum

Trier un tableau

Jeu du Pousse Pousse

Créer un tableau à double entrée (un tableau qui contient des tableaux) de 3x3. Y mettre des nombres de 0 à 8. Puis créer une fonction qui déplace le nombre proche du zero selon l'instruction HAUT BAS DROITE GAUCHE de l'utilisateur.

var score=Math.ceil(Math.random() * 6);

document.getElementById("face").src="ateliers/img/"+score+".png";

console.debug(score);
if (score==6) {
    document.getElementById("resultat").innerHTML="Gagné";
}
else {
    document.getElementById("resultat").innerHTML="Perdu";
}
<img id="face">
<div id="resultat"></div>