Valid XHTML 1.0 Transitional CSS Valide !

1 Algorithme/programmation orientée Internet : aspect client

1-1 Introduction

Ce nouveau chapitre est consacré à l’algorithmique et au javascript.

Avant de commencer le javascript, nous allons commencer par nous concentrer sur le fond du problème, à savoir, comment résoudre une question par une approche automatique.

Si nous sommes en mesure de décomposer sur papier un problème en étapes simples menant des données du problème au résultat, il sera alors facile d’en déduire un programme informatique. Nous allons essayer d’acquérir cette démarche algorithmique.

Ce chapitre est organisé en trois points.

Dans un premier temps, nous allons nous concentrer sur la notion d’algorithme afin de définir un peu le langage algorithmique.

Nous introduirons ensuite les informations élémentaires qui peuvent être manipuler dans un algorithme.

Pour conclure, nous nous intéresserons aux actions élémentaires : affectation, structures conditionnelles et itératives..

1-2 Définitions d'un algorithme

1-2-1 Pourquoi un algorithme?

Notre objectif est de réaliser des tâches par un ordinateur, c'est à dire une machine capable d'éxécuter automatiquement une série d’opérations simples qu’on lui a demandé.

L’intérêt de l’ordinateur est sa capacité à manipuler rapidement, et sans erreur, un grand nombre d’informations.

Pour résoudre un problème à l’aide d’un ordinateur, il faut, tout d'abord, analyser ce problème, puis, déterminer les méthodes de résolution, c'est à dire la suite des opérations à effectuer (l’algorithme)..

Pour obtenir la solution, il faut traduire l’algorithme dans un langage de programmation adapté.

Au cours de ce chapitre, nous allons principalement nous consacrer à l’étude des deux premiers points.

La traduction de l’algorithme dans un langage informatique, le javascript, fera l’objet des prochains chapitres.

Nous pouvons résumer ainsi le travail de l’informaticien. À partir de l’algorithme qu’il a conçu, il fournit à l’ordinateur la liste des actions à exécuter :

– cette description doit être faite de manière non ambigüe.

– elles seront exécutées de manière purement mécanique.

– les opérations élémentaires que peut exécuter un ordinateur sont en nombre restreint.

1-2-2 Les définitions l'algorithme

Il nous faut décrire la suite des actions élémentaires qui constitueront notre futur programme. Cette suite d’actions doit produire les résultats attendus à partir des données fournies. Cette marche à suivre porte le nom d’algorithme.

Définition 1 : Art de décomposer un problème en évènements simples.

Définition 2 : Suite finie de règles à appliquer dans un ordre déterminé à un nombre fini de données pour arriver, en un nombre fini d’étapes, à un certain résultat, et cela indépendamment des données.

Le rôle de l’algorithme est fondamental. Sans algorithme, il n’y aurait pas de programme car il n’est que sa traduction dans un langage compréhensible par l’ordinateur.

Les algorithmes sont indépendants à la fois de l’ordinateur qui les exécute et des langages dans lequel ils sont énoncés et traduits.

1-3 Environnement d'un algorithme

Les informations élémentaires manipulées par un algorithme permettent la définition d’un environnement de travail composé des données et des résultats.

Les informations élémentaires sont désignées par un nom, un type, et une valeur.

Le nom associé à une information nous permet tout simplement d’y accéder pour consulter ou modifier la valeur représentée.

Le type d’une information permet son interprétation. Par exemple : entier, réel, caractère.

1-3-1 Le type d'une information

L’ordinateur ne connaît que deux valeurs : 0 et 1. Un ordinateur ne compte qu’en binaire car chaque information est représentée par la présence (1) ou l’absence (0) d’un courant électrique dans un de ses circuits électroniques.

L'être humain compte en base dix et est en mesure de manipuler plusieurs type de valeurs, par exemple, des lettres de l'alphabet, des couleurs, des notes de musique, ...etc

L'ordinateur doit pour sa part associer une suite de chiffres binaires à toute information.

Exemple déjà étudié : les couleurs en HTML. En réalité, le type associé à une information permet à l’ordinateur de nous la restituer dans une forme plus compréhensible plus l'utilisateur. Par exemple la suite composée de 8 bits à 1, suivie de 16 bits à 0 (111111110000000000000000 soit FF0000 en hexadécimal) correspond à la couleur rouge dans le modèle RGB utilisé par HTML et à la valeur entière 16711680 (255*16*16*16*16).

Donc, en plus de la valeur binaire, il nous faut mémoriser son type pour être en mesure de réaliser une interprétation correcte de l’information. Heureusement pour nous, c’est l’ordinateur qui se chargera de faire toutes les conversions utiles.

1-3-2 Les variables

Une variable est une information élémentaire définie par :

– son nom est invariable ;

– son type est invariable ;

– sa valeur varie au cours de l’exécution de l’algorithme.

Par exemple, nous pouvons définir une variable nommée coul de type couleur. Cette variable existera tout au long de l’exécution de l’algorithme. Son nom et son type ne peuvent être modifiés pendant l’exécution, par contre sa valeur peut évoluer. Par exemple, la variable coul peut contenir la valeur "bleu" au début, puis prendre la valeur "blanc" et enfin la valeur "vert".

1-3-3 Les constantes

Une constante est une information élémentaire dont le nom, le type et la valeur sont invariables. Par exemple, nous pouvons définir une constante nommée euro de type nombre réel dont la valeur est 6,55957. A la différence d’une variable, la valeur de la constante euro ne pourra être modifiée au cours de l’exécution de l’algorithme.

1-3-4 Notation

Toutes les informations élémentaires nécessaires (variables et constantes) doivent être définies au début de l’algorithme dans une section déclaration. La syntaxe, ou notation, d'une déclaration d'une constante pi dont la valeur (réelle) est 3,14 et deux variables nommées A et B de type entier, est la suivante :

Notation

déclaration

constante : pi=3,14

variable : A, B : entier

1-4 Les actions élémentaires

La première action élémentaire que nous allons introduire va permettre la modification de la valeur associée à une variable définie par un algorithme.

1-4-1 Affectations

Définition : opération qui affecte à une variable une valeur donnée, dont la notation est :

Notation

variable ← valeur


Exemple : une variable A de type entier dont la valeur est 2 une variable B de type caractère dont la valeur est ’a’. NB : une lettre entre apostrophe permet de distinguer le caractère ’a’ de la variable a.
La notation correspondante est donc :

Notation

déclaration

variable : A : entier ; B : caractère

A ← 2

B ← ’a’

Très souvent, les débutants confondent la notion d’affectation avec l’égalité au sens mathématique. Pour éviter cette confusion, le symbole choisi ici (←) n’est pas le symbole de l’égalité mathématique (=). L’égalité mathématique compare deux valeurs entre elles, alors que l’affectation modifie la valeur associée à une variable : il n’y a dans ce cas aucune notion de comparaison.

1-4-1-1 Remarques
  1. La valeur et la variable doivent être de même type. On ne peut affecter une valeur de type couleur à une variable de type entier par exemple.
  2. Après une affectation, l’ancienne valeur de la variable est perdue.
    Exemple :
    A ← 2
    A ← 4
    Après la deuxième affectation, il est impossible pour l’ordinateur de se souvenir que l’ancienne valeur de A est 2.
  3. La valeur peut être le résultat d’une expression.
    Exemple :
    A ← 2
    B ← 2+A
    Dans ce cas, B aura la valeur 4 car 2 + 2 (la valeur de A) est égal à 4.
  4. Attention aux variables non initialisées : B ← A+E n’est pas une affectation correcte car E est non défini.
  5. On peut vouloir augmenter une variable A de 1. Il suffit alors de réaliser l’affectation : A ← A+1
1-4-1-2 Comment permuter des valeurs entre 2 variables
Soient deux variables entières initialisées A et B dont nous souhaitons échanger les valeurs.
Après une affectation, l’ancienne valeur de cette variable est perdue. On en peut donc pas affecter de la façon suivante :
A ← B
B ← A

La solution? utiliser une variable supplémentaire qui sera chargée de mémoriser l’ancienne valeur de A comme ci-dessous :.
Aux ← A { Sauvegarde de la valeur de A}
A ← B { Recopie de la valeur de B dans A}
B ← Aux { Recopie de l’ancienne valeur de A dans B}

Les informations entre accolades sont des commentaires. A utiliser pour expliquer le but de l'action élémentaire. Ces commentaires sont uniquement destinés au programmeur. Ils seront ignorés par l’ordinateur.

1-4-2 Lecture

Défintion : une opération qui fait entrer une valeur dans une variable par l’intermédiaire d’un périphérique d’entrée (le clavier, la souris, un scanner,...). Elle est indispensable pour autoriser une interaction entre l’ordinateur d’une part et l’utilisateur d’autre part. Pour ce qui nous concerne, ces entrées seront réalisées par l’intermédiaire d’une boite de dialogue ou d’un formulaire au niveau du navigateur, mais n’anticipons pas. Nous répondre à cette question au prochain chapitre.

Notation

lire(variable)

lire(variable 1, variable 2)

Important : avec la lecture, la variable n'a de valeur qu'avec l'intervention de l'utilisateur.

1-4-3 Ecriture

L’opération d’écriture imprime sur un périphérique de sortie (écran, imprimante,...) le contenu d’une variable. C’est l’action complémentaire de la lecture. L’écriture ne modifie pas la valeur de la variable, donc nous pouvons l’utiliser aussi souvent que nécessaire sans craindre la perte de valeurs.

Notation

écrire(variable)

écrire(variable1, variable2, ...)

Un exemple d’utilisation des actions de lecture et d’écriture : l'algorithme demande à l’utilisateur quel est son age (la donnée du problème) et calcule son année de naissance (le résultat du problème) :

déclaration :

variable : Age, Annee : entier

ecrire("quel age avez-vous?")

lire(Age)

Annee ← 2012-Age

ecrire("Vous êtes né en")

ecrire(Annee)

1-4-4 Présentation d'un algorithme

Avant d’introduire de nouvelles actions élémentaires, je vous propose d’adopter les conventions suivantes :
1. Nommer vos algorithmes.
2. Déclarer en début d’algorithme toutes vos variables et constantes.
3. Expliciter les actions principales par des commentaires entre { }.
4. Souligner (ou mettre en gras) les mots clés.
5. Indenter vos algorithmes afin d’en faciliter la lecture.

Un exemple d’algorithme d’échange de deux variables en respectant ces indications :

Algorithme Échange.
déclaration :
variable : A, B, Aux : entier
Début

Aux ← A { Sauvegarde de la valeur de A}

A ← B { Recopie de la valeur de B dans A}

B ← Aux { Recopie de l’ancienne valeur de A dans B}

Fin.

1-4-5 Structure conditionnelle ou de sélection

Nous pouvons réaliser des actions élémentaires comme lire, écrire, et de mémoriser et modifier des informations. Cependant, notre langage algorithmique reste trop pauvre pour nous permettre de résoudre des problèmes réels. Nous allons introduire de nouvelles actions pour pouvoir résoudre un problème : les conditions dont les deux syntaxes vont être décrites ci-dessous.

1-4-5-1 Si... alors ...

Un salarié touche un salaire brut B. Si son temps de travail (T) est supérieur à 100h, il perçoit alors une prime (P).

Notation

Si condition alors

action 1 { Ces actions ne sont exécutées}
...
action n { que si la condition est vraie}

Fsi

Plusieurs remarques s’imposent :

  1. La condition ne doit admettre que deux valeurs possibles : vrai ou faux. Elle est donc de type booléen.
  2. La condition peut prendre la forme d’une comparaison de deux expressions arithmétiques ou valeurs à condition qu'elles soient de même type (exemple : entier).
  3. Une évidence bonne à rappeler : si on donne une valeur qui ne respecte pas la condition (toujours fausse), l'action "conditionnée" n'aura donc jamais lieu. Exemple : x a pour valeur 5 (x ← 5). x ne sera affiché que si x>10 (si x>10 alors ecrire(x) Fsi).
  4. La structure de sélection permet d'engendrer des actions, des comportements différentes en fonction des valeurs des variables. Exemple : l'algorithme de calcul de la valeur absolue d’une donnée saisie par l’utilisateur.

    AlgorithmeValeur absolue
    déclaration :
    variable : x : entier
    Début

    lire(x) {pour donner une valeur à x }

    Si x<0 alors {condition à l'origine d'actions}

    x ← -x {un nombre <0 changera de signe et devient positif}

    Fsi {Fin de la condition}

    ecrire(x) {afficher la nouvelle valeur de x}

    Fin.

1-4-5-1 Si... alors ... sinon ...

Continuons avec notre exemple de salarié qui touche un salaire brut B. Si son temps de travail (T) est supérieur à 100h, il perçoit alors une prime (P). sinon son salaire est augmenté d'une prime de sous-emploi (S).

Notation

Si condition alors

action 1 { Ces actions ne sont exécutées}
...
action n { que si la condition est vraie}

Sinon

action' 1 { actions exécutées dans le cas contraire }
...
action' m

Fsi

Exemple : l'algorithme de calcul du maximum entre deux valeurs saisies par l'utilisateur.


Algorithme Maximum
déclaration :
variable : A, B, Max : entier
Début

lire(A,B) {pour les initialiser }

Si A>=B alors {condition à l'origine d'actions}

Max ← A { si A est le plus grand, on affecte A à Max }

Sinon Max ← B { autrement on affecte B à Max}

Fsi {Fin de la condition}

ecrire(Max) {afficher la valeur la plus grande}

Fin.

Un exemple de conditionnelles généralisées : un tri entre différentes températures.

Algorithme Temperature
déclaration :
variable : t : entier
Début

ecrire("Quelle est la température?")
{ pose la question pour définir la donnée à entrer}

lire(t) {pour entrer une valeur de t}

Si t<0 alors

ecrire("Cette température est froide")

Sinon

Si t<30 alors

ecrire("Cette température est moyenne")

Sinon

ecrire("Cette température est chaude")

Fsi {Fin de la condition}

Fsi {Fin de la condition}

Fin.

1-4-5-2 Structure cas

Quand un ensemble de conditions testent les différentes valeurs possibles d’une même expression ou variable, il est préférable d'utiliser la structure cas parmi. Cette solution est plus facile, léger que l’utilisation de conditionnelles imbriquées

Notation

Cas expression Parmi

valeur 1 : action 1
valeur 2 : action 2
...
valeur n : action n
defaut : action : n+1 {optionnel}

Fcas

L'expression doit être de type entier ou caractère, c'est à dire scalaire.

Exemple : affecter un taux de réduction en fonction de la catégorie du voyageur

Algorithme Réduction
déclaration :
variable : voyageur:caractère; réduc:entier
Début

lire(voyageur)
{ pour entrer la donnée correspondant à la catégorie de voyageur et donc de réduction}

Cas voyageur Parmi

'a' : reduc ← 50
{lorsque voyageur a pour valeur 'a', on affecte 50 à réduc, soit une réduction de 50%}

'e' : reduc ← 100
{lorsque voyageur a pour valeur 'e', on affecte 100 à réduc, soit une réduction de 100%}

'v' : reduc ← 30
{lorsque voyageur a pour valeur 'v', on affecte 30 à réduc, soit une réduction de 30%}

defaut:reduc ← 0
{lorsque voyageur n'a pas de valeur, on affecte 0 à réduc, soit aucune réduction}

Fcas {Fin cas parmi}

ecrire(reduc) {pour connaître le taux de réduction}

Fin.

1-4-6 Schémas itératifs

Les schémas itératifs facilitent la répétition d’une suite d’actions. Le programmeur les définit en une seule fois et précise comment elles doivent être répétées. Par exemple, on peut comparer plus de trois nombres entre eux.

Définition : Une structure itérative permet de répéter une action ou une séquence d’actions plusieurs fois. Les termes structure itérative et boucle sont des synonymes.

Notation

Pour variable de contrôle de valeur1 à valeur2 faire

action 1
action 2
...
action n

Fpour

Exemple un algorithme pour afficher tous les entiers entre 1 et 10.

Algorithme Entier
déclaration :
variable i : entier;
Début

Pour i de 1 à 10 faire

ecrire(i) { pour afficher la valeur de i}

Fpour {Fin pour}

Fin.

1-4-7 Boucle "tant que"
1-4-8 Boucle "répéter"
Cliquer ici pour retourner à la page d'accueil