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
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:
var nombreEntreZeroEtUn = Math.random();
var nombreEntreZeroEtSix = nombreEntreZeroEtUn * 6;
var lancer = Math.ceil(nombreEntreZeroEtSix);
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.
Pour commencer:
programmation
(Clic-droit -> Créer un dossier) sur votre bureau
helloworld.html
(Clic-droit -> Créer un document -> document vide)
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<script>
alert("Hello world");
</script>
</body>
</html>
helloworld.html
avec un navigateur
On remarque qu'une pop up s'affiche avec inscrit 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
<script>
et </script>
.
Good Bye
Lundi
, Mardi
, Mercredi
Laurent dit: "Bonjour"
\"
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 :
variable
.
nom
de cette variable (dans notre cas, annee).
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.
helloworld.html
et le nommer variable.html
<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 + " !");
Une pop up demandant le prénom puis une autre qui affiche Bonjour + ce prénom.
Dans le code:
prenom
et pour valeur la chaine de caractère TON PRENOM
.
var
//
+
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]);
Dans la plupart des langages de programmation, le premier élément d'un tableau commence par 0 et non pas par 1.
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);
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 ==, <=, >, <, !=.
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.");
Créez un programme qui tire un nombre au hasard entre 1 et 20, puis indique si il est inférieur à 10
Créer un programme 421 qui simule le lancer de 3 dés et affiche gagné si il y a 421
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');
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);
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");
La fonction prendra donc 2 arguments
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
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);
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>