Cartographie des apprentissage Programmation web 1
Algorithmique et programmation
Cette page référence l'ensemble de concepts vue en algorithmique et programmation à l'UCO-BS en master informatique- communication numérique et conception multimédia.
Algorithme
Un algorithme est un ensemble d'instructions permettant de résoudre un problème donné. L'algorithme est un objet abstrait, il est indépendant du langage utilisé. Un algorithme a vocation d'avoir toujours un résultat à la fin et de toujours se terminer.
Programme
Un programme est un ensemble d'instructions dans un langage donné. Les langages de programmation sont compréhensible et executable par une machine correctement configurée. Un programme est un objet concret (par exemple, un fichier) et n'a pas forcément vocation de résoudre un et un seul problème, de fournir un résultat ou d'avoir un fin. Un programme peut être la représentation ou l'implémentation d'un ou de plusieurs algorithmes.
Fonctions
Une fonction, dans un programme, rassemble un ensemble d'instructions qui vont être exécutées à chaque fois qu'on utilise cette fonction.
Une fonction peut avoir besoin d'éléments pour fonctionner, que l'on doit lui fournir quand on l'utiliser: on appelle cela des attributs, et quelque fois des paramètres. En mathématique, pour f(x), x est l'attribut.
On définit comment fonctionne et ce que fait la fonction, sans l'utiliser: c'est ce que l'on appelle la déclaration d'une fonction.
La fonction peut renvoyer un résultat, c'est une valeur de retour (return).
Enfin, on veut utiliser la fonction à différents moments, c'est l'appel de la fonction.
Instruction
Une instruction est une action ou une opération à réaliser. Dans un algorithme (par exemple représenté en pseudo code) ou dans un programme, on trouve souvent une instruction par ligne.
Souvent, on réalise un programme qui ne fait qu'une chose à la fois, c'est à dire une instruction à la fois.
Les instuctions peuvent être organisées en bloc d'instructions. Ces blocs peuvent être exécutés ou être ignorés selon les cas (conditions et boucles).
Commentaire
Les commentaires sont des informations, souvent du texte, à destination des personnes qui lisent un programme. Les commentaires ne sont jamais utilisés par la machine, car ils sont ignorés.
Variable
Une variable est un élément qui permet de faire référence à une donnée ou une valeur, même si elle change. Par exemple, dans un compte à rebours, la variable tempsRestant pourra faire référence au temps qu'il reste, peut importe la valeur que prend cet élément.
En informatique, une variable est souvent un emplacement dans la mémoire de l'ordinateur auquel on peut accéder par un nom (l'adresse en mémoire en quelque sorte). On peut faire référence à l'information stockée en mémoire à cet endroit en utilisant le nom de la variable.
let, const et var
En Javascript, il y a trois manières de créér des variables: let, var ou const. Cela dépend de la manière de les utiliser.
Il est possible de définir des variables pour lesquelles je n'aurais pas besoin de modifier l'emplacement mémoire ni sa valeur au cours du programme: une fois créée, cela ne changera plus (const). Au contraire, il est possible de créer des varibales qui pourront changer (var).
Nous avons parlé de bloc d'instructions et de fonctions. Il est possible de définir des varibales auxquelles on pourra faire référence partout, seulement à l'interieur d'un bloc d'instruction (const et let), ou seulement à l'interieur d'une fonction (var, const, et let).
Selon les données que l'on a, on peut en faire des choses différentes: texte, nombres, date etc. Les types servent à cela: utiliser des actions appropriées, et gérer les actions quand cela concerne des types différents (par exemple ajouter du texte à une date n'est pas possible). Vous trouverez plus de détails sur la page Types
Intuition & Typage dynamique
Naturellement, vous penser que 24 est un nombre, que Bonjour le monde est du texte, que 29.10.2020 est une date etc. JavaScript fait exactement la même chose en déduisant le type des données en fonction de la manière dont on lui présente: c'est le typage dynamique.
Les opérations que l'on va pouvoir faire dépendent du type: on peut savoir la lettre à une position donnée pour du texte, on peut multiplier des nombres, on peut coller deux morceaux de texte ensemble, on peut connaitre le nombre de jours de différence entre deux dates.
Le texte: chaines de caractères/ String
On appelle String, ou chaine de caractères, le type qui correspond au texte. En JavaScript, Il faut entourer une String de guillemets ou apostrophes.
Par exemple, le texte Bonjour s'écrira :
"Bonjour"
ou
'Bonjour'
en Javascript.
Une conséquence est que l'on doit faire attention en utilisant des guillemets dans une String en Javascript.
Pour écrire Elle dit "C'est super!", il faudra remplacer " par \", et remplacer ' par \'. On écrira donc :
"Elle dit \" C\'est super! \" "
Les nombres: réels/Number, grands entiers/Bigint,
En programmation, on fait souvent la différence entre les entiers (pas de chiffre après la virgule) et les réels (nombre à virgules).
En JavaScript, les réels sont des Number et s'écrivent simplement comme des nombres. On écrira 45678:
45789
et on écrira 17,329:
17.329
Note: si on écrit "4356.5", on fera référence à un texte qui utilise ces caractères-ci, mais pas au nombre 4356.5
En javascript, les entiers sont des BigInt et s'écrivent en ajoutant un n à la fin. On écrira 45789:
45789n
et 1:
1n
Note: si on écrit "43565n", on fera référence à un texte qui utilise ces caractères-ci, mais pas au nombre 43565n
Les valeurs vrai ou faux: les booléens/Boolean
Un booléen est une valeur particulière qui peut valoir vrai (true) ou faux (false).
Une variable peut être directement true ou false.
Une expression peut prendre une valeur true ou false. Par exemple, b<c va être true si b est effectivement inférieur à c, et false si b est superieur à c.
Enfin, des opérateurs spécifiques existent comme ET ou OU:
b ET c va valoir true si b et c sont true,
b OU c va valoir true si b est true, c est true ou b et c sont tous les deux true
Le temps: les variables temporelles/ Date
Javascript a un type Date qui gère les données temporelles.
Les ensembles: tableaux, listes, dictionnaires
JavaScript permet de gérer des collections d'objets, de les trier, de le répertorier etc.
Les Array sont des tableaux, on récupère les valeurs du tableau grâce à leur indice (i.e. le numéro de la case).
Les Maps permettent d'associer une clef à une valeur, on récupère les valeurs des Maps grâce à leur clef.
Le Set contiennent des ensembles de valeurs, mais toutes les valeurs doivent être différentes. On peut parcourir un Set selon l'ordre dans lequel les valeurs ont été entrées dans le Set.
Conversion explicite
Javascript utilise un typage dynamique, mais on peut explicitement indiquer le type d'une variable si on le souhaite.
Pour cela, on met la valeur entre parenthèses précédé du nom du type voulu. Si maVariable est une variable en JavaScript on utilisera:
Number(maVariable) pour convertir explicitement maVariable en Number
BigInt(maVariable) pour convertir explicitement maVariable en BigInt
String(maVariable) pour convertir explicitement maVariable en String
Par exemple:
Number(3n) donnera 3
Number("3") donnera 3
Number("Bonjour") donner NaN (Not a Number)
BigInt(3) donnera 3n
BigInt("3") donnera 3
BigInt("Bonjour") donner une erreur (invalid synthax)
String(3n) donner "3"
String(3) donner "3"
Les opérateurs sont des signes qui permettent de faire des actions données. On y trouve le +, le =, le - etc. Vous trouverez plus de détails sur la page dédiée Opérateurs.
Donner une valeur: affectation
Une variable prend des valeurs. On attribue ces valeurs avec l'opérateur "=".
on écrira:
let maVariable=3;
-> ici, maVariable sera égal à 3
maVariable=mavariable+5;
-> ici, maVariable sera égal à 8
Verification de l'égalité
Deux valeurs sont-elles semblables?
Deux valeurs sont-elles semblables?
Comme "=" est utilisé pour l'affectation, nous utilisons "==" pour vérifier un égalité. Ainsi:
3==4;
-> cette expression vaudra false
3==3;
-> cette expression vaudra true
let maVariable="3";
maVariable==3;
-> cette expression vaudra true même si le type n'est pas le même (String pour maVariable et Number pour le nombre 3). Cela vient du fonctionnement de "==". L'opérateur "===" permet de vérifier si le type est le même. Ainsi:
let maVariable="3";
maVariable===3;
-> cette expression vaudra false
Verification de la différence
Deux valeurs sont-elles dissemblables?
Deux valeurs sont-elles dissemblables?
Nous utilisons "!=" pour vérifier une inégalité. Ainsi:
3!=4;
-> cette expression vaudra true
3==3;
-> cette expression vaudra false
let maVariable="3";
maVariable!=3;
-> cette expression vaudra false même si le type n'est pas le même (String pour maVariable et Number pour le nombre 3). Cela vient du fonctionnement de "!=". L'opérateur "!==" permet de vérifier si le type est le même. Ainsi:
let maVariable="3";
maVariable!==3;
-> cette expression vaudra true
ET logique
b ET c va valoir true si b et c sont true. En JavaScript l'operateur est "&&":
true && true
-> cette expression vaut true
false && true
true && false
false && false
-> ces expressions valent false
OU logique
En JavaScript l'operateur est "||":
true || true
false || true
true || false
-> ces expressions valent true
false || false
-> cette expression vaut false
b OU c va valoir true si b est true, c est true ou b et c sont tous les deux true
Inférieur, inférieur ou égal
L'opérateur "<" permet de verifier si un nombre est inférieur à un autre, ou si une chaine de caratère est avant une autre au regard de l'ordre alphabétique .
3<4
-> cette expression vaudra true
4<3
4<4
-> ces expressions vaudront false
"bonjour"<"le monde"
-> cette expression vaudra true
"le monde"<"bonjour"
"bonjour"<"bonjour"
-> ces expressions vaudront false
On peut utiliser l'operateur inférieur ou égal "<=" qui sera également vrai quand les deux parties sont égales.
Addition (nombres)
L'opérateur "+" permet de faire des additions sur les nombres (types Number et BigInt)
Soustration
L'opérateur "-" permet de faire des soustractions sur les nombres (types Number et BigInt)
Multiplication
L'opérateur "*" permet de faire des multiplications sur les nombres (types Number et BigInt)
Division
L'opérateur "/" permet de faire des divisions sur les nombres (types Number et BigInt)
Reste de la division (Modulo)
L'opérateur "%" permet de récuperer le reste de la division entière (types Number et BigInt)
Concaténation (accoller deux bouts de texte)
L'opérateur "+" pour les String permet d'accoler deux chaines de caractères ensemble. Ainsi:
"Bon"+"jour";
-> cette expression vaudra "Bonjour"
"Bonjour"+ " "+ "le monde";
-> cette expression vaudra "Bonjour le monde"
let maChaine="Bonjour";
let maString=" le monde";
maChaine+maString
-> cette expression vaudra "Bonjour le monde"
Incrémentation (ajout à la valeur actuelle)
L'opérateur "+=" permet d'ajouter une valeur à une variable. Ainsi:
b+=c;
Equivaut à b=b+c;
Par ailleurs, l'opérateur "++" permet d'ajouter 1 à une variable. Ainsi:
b++;
Equivaut à b=b+1;
Décrémentation (soustraction à la valeur actuelle)
L'opérateur "-=" permet de supprimer une valeur à une variable. Ainsi:
b-=c;
Equivaut à b=b-c;
Par ailleurs, l'opérateur "--" permet de supprimer 1 à une variable. Ainsi:
b--;
Equivaut à b=b-1;
Démultiplication (multiplication de la valeur actuelle)
L'opérateur "*=" permet d'ajoude multiplier une valeur à une variable. Ainsi:
b*=c;
Equivaut à b=b*c;
Subdivision (division de la valeur actuelle)
L'opérateur "/=" permet d'ajoude multiplier une valeur à une variable. Ainsi:
b/=c;
Equivaut à b=b/c;
Supérieur, supérieur ou égal
L'opérateur "<" permet de verifier si un nombre est inférieur à un autre, ou si une chaine de caratère est avant une autre au regard de l'ordre alphabétique .
3<4
-> cette expression vaudra true
4<3
4<4
-> ces expressions vaudront false
"bonjour"<"le monde"
-> cette expression vaudra true
"le monde"<"bonjour"
"bonjour"<"bonjour"
-> ces expressions vaudront false
On peut utiliser l'operateur inférieur ou égal "<=" qui sera également vrai quand les deux parties sont égales.
Les instructions et blocs d'instructions permettent de définir un ensemble d'actions et de les assembler par blocs. Les blocs peuvent être exécuter ou non sous certaines conditions.
Afficher un message à l'utilisateur en javascript: alert
On peut afficher un message dans une pop up en javascript en utilisant:
alert("Message de la pop-up");
Demander à l'utilisateur OK ou pas en javascript: confirm
On peut demander à un utilisateur de cliquer sur OK ou sur Annuler à une question dans une pop-up en utilisant:
confirm("Question de la pop-up");
Demander à l'utilisateur d'écrire une réponse en javascript: prompt
On peut demander à un utilisateur de taper une réponse en une fenêtre de dialogue en utilisant:
prompt("Instructions de la pop-up");
on clic
// à venir
Afficher ou faire disparaitre un texte
//à venir
Les conditions Si-alors: If
Les conditions if permettent d'executer les instructions du bloc d'instructions quand la condition est true:
if (condition)
{
//instructions réalisées si condition est true
}
Les conditions Si-alors-sinon: If-Else
Les conditions if-else permettent d'executer les instructions du premier bloc d'instructions quand la condition est true, et le deuxième bloc dans tous les autres cas:
if (condition)
{ //instructions réalisées si condition est true
} else {
//instructions réalisées dans tous les autres cas
}
Les conditions Si-alors-Sinon Si: If-Else if
Les conditions if-else permettent d'executer les instructions du premier bloc d'instructions quand la première condition est true, et sinon le deuxième bloc si la deuxième condition est true:
if (condition1)
{ //instructions réalisées si condition 1est true
} else if (condition2) {
//instructions réalisées si la condition1 est false mais la condition2 est true
}
Les conditions Selon le cas-Faire: Switch-Case
Les conditions switch permettent de vérifier si une expression est égale à une autre avec le choix entre plusieurs cas.
switch (expression)
{ case cas1:
//instructions cas1;
break;
case cas2:
//instructions cas2;
break;
}
Lien Javascript et HTML
Voir la page Programmation et Algorithmie JavaScript et HTML
Les boucles Tant-que: While
Les boucles while permettent de répéter une fois de plus les instructions du bloc d'instructions quand la condition est true:
while(condition) {
//instructions si condition est true
}
Les boucles Pour: For
Les boucles for permettent de répéter une fois de plus les instructions du bloc d'instructions quand la condition est true:
for(initialisation; condition; expression) {
//instructions si condition est true
}
Les doubles boucles
// à venir
Les fonctions en javascript: déclaration, appel, attributs, return, récursivité
Les fonctions en JavaScript sont déclarées comme suit:
function nomFonction( attributOptionnel1, attributOptionnel2, ...){
//instructions de la fonction
return returnOptionnel;
}
pour appeler une fonction:
nomFonction( attributOptionnel1, attributOptionnel2, ...);
Compétences
Les compétences générales vues en cours sont les suivantes:
Représenter un algorithme ou un programme: Organigramme et pseudo code
Associer une instruction et le code correspondant
Annoncer le resultat d'un algorithme et les valeurs prises successivement par les variables
Savoir trouver un algorithme
Quelques algorithmes célébres
Projet Evolutif: Le site dont vous êtes le héros
La page du projet est ici: Projet Programmation