Un aperçu global
Voici une carte mentale qui permet de regrouper les notions élémentaires indispensables à la construction d'un algorithme ou d'un programme,
Ci-dessous les points abordés dans ce tutoriel.
- La notion de variable.
- Un peu de vocabulaire spécifique à l'informatique.
- Les tests, les opérateurs logiques et les boucles.
- La notion de sous programme.
La prise en main
Nous consacrerons ce tutoriel à la programmation en javascript.
Javascript est un languague de programmation qui enrichit une page HTML, il la rend inter-active et s'exécute dans votre navigateur,
on dit "côté client",
il n'y a donc aucune installation particulière à réaliser : le navigateur le connait.
Nous utiliserons Firefox comme navigateur.
Js se distingue des languages "côté serveur" comme le PHP, qui s'exécutent dans le serveur et permettent par exemple de comptabiliser le nombre de visites d'un site
Pour éditer le code, il faudra installer notepad++
Création d'un programme
Pour créer un programme, une fonction ou une procédure, il faudra toujours commencer par créer une page HTML,
et dans cette page il faudra indiquer que l'on va utiliser le javascript.
Voici maintenant du javascript, qui permet l'affichage de texte.
Vous trouverez ici un pack de départ compressé.
Pour pouvoir l'utiliser et le modifier, il faut :
- décompresser le pack
- enregistrer le dossier décompressé sur votre espace personnel de travail
- éditer dans notepad++ le fichier .html
- éditer dans notepad++ le fichier .js
- éditer dans notepad++ le fichier .css, si besoin
Les variables
Les variables sont des emplacements réservés dans la mémoire des ordinateurs, elles ont un nom, un type, une valeur et une portée.
En javascript, on ne déclare pas le type des variables, et une même variable peut changer de type lors de l'exécution du programme.
Il faudra donc être particulièrement attention au type dont on aura besoin, notamment lors de la saisie.
Voici un exemple d'utilisation de variables.
Pour exécuter ce code, il suffit "launch in firefox" la page HTML associé au fichier javascript.
Réaliser la trace d'un algorithme ou d'un programme permet de suivre l'évolution de chaque valeur de variables, pas à pas.
Exercice : Implémenter ce petit programme et réaliser la trace de ce programme.
Saisies
Saisies en js séquentiel
La saisie d'une valeur d'une variable se fait par l'instruction prompt, mais attention par défaut,
la valeur saisie sera une chaine de caractères, même si un nombre est saisi!
C'est pourquoi, pour saisir un entier, il faudra utiliser la fonction parseInt() et pour un réel : parseFloat().
Test
Le "si ...alors...sinon...fin de si" est omniprésent en algorithmique et programmation.
En Js, la synthaxe est la suivante :
if (proposition logique)
{si la proposition est vraie alors exécuter.ceci...}
else{si la proposition est fausse alors exécuter.cela.....} :
Exercice : demander à l'utilisateur de saisir un réel. Si ce réel appartient à [-2 ; 5] afficher " ... appartient à [-2 ; 5]"
en rappelant la valeur de la variable saisie, sinon afficher " ... n'appartient pas à [-2 ; 5]"
Un exemple de boucle "pour"
La boucle "pour" s'utilise si l'on sait à l'avance combien de fois la boucle devra tourner pour obtenir le résultat attendu.
La syntaxe en js est :
for(var k=0;k<6;k++){instructions à répéter}
Exercice : demander à l'utilisateur de saisir un entier et d'afficher la table de multiplication de cet entier.
exemple pour 5 :
1 x 5 = 5
2 x 5 = 10
.
.
.
10 x 5 = 50
Un exemple de boucle "tant que"
La boucle "tant que" s'utilise si l'on ne sait pas à l'avance combien de fois la boucle devra tourner
pour obtenir le résultat attendu.
La syntaxe en js est:
while(proposition logique){si elle est vraie, instructions à répéter}
Ces instructions permettent d'afficher la plus grande puissance de 2 qui divise le nombre saisi.
Exercice : demander à l'utilisateur de saisir un entier. Afficher sa décomposition en produits de facteurs premiers.
Un exemple sur les chaines de caractères
la chaine vide est: ""
La concaténation se fait à l'aide de +
La saisie d'une chaine se fait à l'aide de : prompt()
Les caractères d'une chaine sont indicés à partir de 0.
La longueur d'une chaine, var ch, s'obtient à l'aide de l'instruction ch.length() et le caractère d'indice k par ch.charAt(k).
Voici un exemple:
Exercice : demander à l'utilisateur de saisir un mot. Tester si ce mot est un palindrome.
Un exemple sur les tableaux
Le tableau vide est: []
Les éléments d'un tableau sont numérotés à partir de 0.
Voici un exemple:
Exercice : demander à l'utilisateur de tirer au sort 10 nombres et de les placer dans un tableau. Déterminer le plus petit.
Un exemple de procédure
Jusqu'à présent nous avons réalisés des programmes principaux.
Un programme principal peut appeler des sous-programmes.
Il existe deux type de sous-programmes: la procédure et la fonction
La procédure ne retourne pas de valeur vers le programme principal.
Dans l'exemple la procédure se contente d'effectuer un affichage.
Ici n est le paramètre de la procédure.
Exercice : demander à l'utilisateur de saisir 3 nombres. Pour chacun, tester s'il s'agit d'un entier naturel par appel de procédure.
Un exemple de fonction
Un programme principal peut appeler des sous-programmes.
Il existe deux type de sous-programmes: la procédure et la fonction
La fonction retourne une valeur vers le programme principal.
Elle se termine donc par l'instruction "return"
.
Dans l'exemple la fonction moy() retournera vers le programme principal la moyenne des deux valeurs de x et de y
Ici cette fonction a deux paramètres x et y.
Exercice : créer une fonction qui retournera le nombre de diviseurs positifs d'un entier naturel.
Puis un programme principal qui demandera à l'utilisateur de saisir un entier naturel
et qui déterminera, après appel de cette fonction, si cet entier est premier ou pas.
Un exemple de fonction récursive
Une fonction récursive est une fonction qui s'appelle elle même.
Sa structure contiendra un "si...alors(condition d'amorçage) sinon (appel de la fonction) fin de si"
L'exemple proposé permet de calculer la somme des nombres de 1 à n.
n étant un entier naturel saisi dans le programme principal.
Exercice : demander à l'utilisateur de saisir un entier n. Créer une fonction récursive permettant de calculer n!
et un programme permettant d'afficher sa valeur.
Graphisme
Nous utiliserons la balise <canvas> pour créer du graphisme.
Découvrez ses premières possibilités
ici.
Exercice : écrire un code permettant de dessiner un échiquier de 64 cases.
