Pour mener à bien le projet informatique que vont nous confier les élèves de SL (Sciences de Laboratoire), nous allons devoir programmer un ordinateur. La programmation consiste à écrire des instructions compréhensibles par l'ordinateur pour qu'il réalise les tâches qu'on souhaite lui confier. Pour cela, nous allons lui écrire dans un langage qui est une collection d'instructions de base qu'il peut exécuter.

Il existe beaucoup de langages informatiques (Java, Perl, Python, html, C++, ...). Nous allons apprendre cette année le JavaScript. Ce langage est exécutable dans les navigateurs internet (Firefox, IE, Chrome, ...) et donc utilisable sur toutes les machines supportant ces navigateurs (ordinateurs, tablettes, téléphones, ...).

Pour simplifier l'écriture de nos programmes, nous allons rapidement utiliser une bibliothèque d'instructions appelée P5.js (p5js.org) qui nous permettra de simplifier notre code (notamment pour dessiner à l'écran).

Dans un premier temps, nous utiliserons une plateforme de développement " en ligne" : jsfiddle.net.

Vous allez réaliser les exercices de ce document en autonomie et recopier le code de chaque programme demandé dans un document du dossier ICN de votre drive (utilisez le " copier-coller" !). Pensez à le présenter correctement (comme un devoir) avec obligatoirement les éléments suivants (voir exemple ci-dessous) :

• vos Nom(s) - Prénom(s) - Classe en entête;
• date de réalisation de chaque exercice;
• numérotation des exercices;
• code mis en forme avec la police Courier New;

Enfin, lorsque vous êtes " bloqués", pensez à utiliser internet pour chercher de l'aide avant d'appeler "au secours" le professeur s'il est déjà occupé ! Un exemple de site où sont référencés la plupart des instructions JavaScript : www.w3schools.com/jsref/default.asp

Pour débuter

Affichage

// Ceci est un commentaire (indispensable au correcteur mais non lu par l'ordinateur)
document.write("Bonjour, bienvenue en ICN");

Compléments

En écrivant document.write, JSFiddle nous prévient d'une erreur : " document.write is disallowed in JSFiddle environment and might break your fiddle."

Pour les modestes programmes que nous écrirons, ce n'est pas grave mais pour votre culture, il faut savoir qu'il est préférable d'écrire dans la zone "HTML" le code suivant :

<div id="texte"></div>

document.getElementById('texte').innerHTML = "Bonjour, bienvenue en ICN";

• Inconvénients : il faut créer un " <div>..." par élément à afficher;
• Avantages : ceci permet de modifier les textes affichés en cours d'exécution du programme et surtout ceci permet de mettre les balises de mise en forme du texte à l'extérieur du code JavaScript : c'est plus cohérent.

Variables

Une variable est un espace mémoire dans lequel le programme peut stocker de l'information qui peut être numérique, booléenne (Une variable booléenne ne peut contenir que deux valeurs : TRUE ou FALSE.}), alphanumérique, ... On peut " modéliser" une variable comme étant une boîte qui contient une information qui peut varier (d'où son nom !) au cours de l'exécution du programme.

En JavaScript, pour définir une variable, on commence par lui choisir un nom (qui commence par une lettre) par exemple compteur puis on utilise le mot clé var suivi du nom choisi et enfin on peut l'initialiser :

var compteur;
compteur = 1;

var compteur = 1;

var salaire = 10000;
document.write("salaire");

var compteur = 1;
document.write(compteur + "<br/>");
compteur = 4;
document.write(compteur+ "<br/>");
compteur = compteur + 3;
document.write(compteur + "<br/>" );
document.write("fin");

Saisie au clavier

var nom, prenom, age;
nom = prompt("Quel est votre nom ?");
prenom = prompt("Quel est votre prénom ?");
age = prompt("Quel est votre age ?");
document.write("Bonjour " + prenom + " " + nom + ".");
document.write("Tu as " + age + "ans");

Complément sur les variables : les types

var a="bonjour ", b="Thomas";
var c = a+b;
document.write(c);

Ceci est important pour comprendre l'exercice ci-dessous.

var a = prompt("Saisir un nombre :");
var b = prompt("Saisir un nombre :");
var somme = a + b;
document.write("La somme vaut : " + somme);

var a = "2", b = 2;
var c = (2 < 3);
document.write("a = " + a + " est du type " + typeof(a) + "<br/>");
document.write("b = " + b + " est du type " + typeof(b) + "<br/>");
document.write("c = " + c + " est du type " + typeof(c) + "<br/>");

var a = "2";
var b = 5;
var c = b + parseInt(a);// a est converti en nombre
var d = a + b.toString();
document.write(c + "<br/>");
document.write(d);

Dans chaque cas a et b sont des variables " numériques" et str1, str2, ... des variables " chaînes de caractères".

Tests et boucles

Tests

if(<condition>) {
  <instructions si condition vraie>
} else {
  <instructions sinon>
}

• <condition> est à remplacer par le test qu'on veut effectuer (i < 3 ou i == 5 ou i >= j, ...);
• le bloc <instructions si vrai> peut contenir plusieurs instructions (séparées par des " ;");
• la partie else { ... } est facultative.

var d = Math.floor(Math.random()*6 + 1);
document.write("Résultat : " + d + '');
if(d == 6) {
    document.write("Bravo ! Tu as fait un 6.");
} else {
    document.write("Essaye encore.");
}    

Boucles

• dans le concours Castor-informatique : répéter six fois la séquence d'instructions suivantes...
• dans la rédaction du jeu des grenouilles : tant que c'est possible, déplacer une grenouille rouge, ...

• les boucles qui réalisent un nombre de fois défini une série d'instructions;
• les boucles qui réalisent une série d'instructions tant qu'une condition est remplie.

var table = 4;
var i;
for(i=0; i<=10; i=i+1) {
  document.write(table +" x " + i + " = " + table*i + "<br/>");
}    

var de = Math.floor(Math.random()*6 + 1);
document.write("dé sorti : " + de + "<br/>");
while (de < 6) {
  de = Math.floor(Math.random()*6 + 1);
  document.write("dé sorti : " + de + "<br/>");
}    

Fonctions

var i;
// Définition de la fonction f affine f:x->2x-3
function f(x) {
  var y = 2*x - 3 ;
  return y;
}

// Utilisation de f dans un programme "principal" :
for (i=-3; i<=3; ++i) {
  document.write("l'image de " + i + " est " + f(i) + "<br/>");
}

document.write("y = " + y);

var directeur = "Claude";
courier("Thomas");
courier("Alexandre");
courier(directeur);


function courier(nom) {
  document.write("Bonjour " + nom + "<br/>");
  document.write("Merci de bien vouloir passer dans mon bureau pour...");
  document.write("<br/>");
  document.write("À bientôt " + nom + "");
}

Variables : un peu plus loin...

Tableaux

var eleves = {"Laura", "Enzo", "Lucas", "Artur", "Luca"};

var eleves = ["Laura", "Enzo", "Lucas", "Artur", "Luca"];
var i;
document.write(eleves[0] + " est la première de la liste.");
eleves[3] = "Arthur";// c'est mieux non ?
eleves[4] = eleves[4] + "s";// ajouter un 's' 
for (i=0; i<5; ++i) {
  document.write(eleves[i] + "<br/>");
}

var notes = [];
var i, nbEleves = 3, somme = 0;
for (i=0; i < nbEleves; ++i) {
  notes[i] = prompt("Quelle note pour l'élève " + i + " ?");
  somme = somme + notes[i];
}
var moy = somme / nbEleves;
document.write("La moyenne de classe est " + moy);

Objets

// On crée le type d'objets "Joueur"
Joueur = function() {
  var nom;
  var position;
  var pion;
  var points;
  // Méthode d'initialisation
  this.init = function(nom, pion) {
    this.nom = nom;
    this.pion = pion
    this.position = 0;
    this.points = 100;
  }
  //Méthode pour faire avancer le pion
  this.avance = function(n) {
    this.position = this.position + n;
  }
  // Méthode pour augmenter/diminuer le nombre de points
  this.gagne = function(n) {
    this.points = this.points + n;
  }
  // Méthode pour afficher le bilan du joueur
  this.affiche = function() {
    document.write(this.nom + " a choisi le pion " + this.pion + "; il a " + this.points + " pts et il est sur la case " + this.position);
    document.write("<br/>");
  }

}

// Programme principal : on crée les joueurs et on les initialise
j1 = new Joueur();
j2 = new Joueur();
j1.init("Laura", "voiture");
j2.init("Enzo", "avion");

j1.affiche();
j2.affiche();

j1.gagne(20);
j1.avance(2);
j2.gagne(-10);

j1.affiche();
j2.affiche();

Pour finir...