Afficher un message à l'utilisateur en javascript: alert

Pour afficher un fenêtre pop up à l'utilisateur avec un texte "Mon Texte" affiché dans la fenêtre, il faut utiliser alert( ) en JavaScript:

alert("Mon Texte");

Si la variable b contient la chaine de caractère "Mon Texte", on peut utiliser la variable b comme argument de alert( ):

b="Mon Texte";

alert(b);

Demander à l'utilisateur d'écrire une réponse en javascript: prompt

Pour afficher un fenêtre pop up à l'utilisateur demandant de taper une réponse avec un texte "Mon Texte" affiché dans la fenêtre, il faut utiliser prompt( ) en JavaScript:

prompt("Mon Texte");

Si la variable b contient la chaine de caractère "Mon Texte", on peut utiliser la variable b comme argument de prompt( ):

let b="Mon Texte";

prompt(b);

Si l'utilisateur tape un texte et clique sur "OK", prompt ( ) vaudra la chaine de caractères tapée par l'utilisateur dans la fenêtre de dialogue :

let variableStringQueUtilisateurAEcritDansLaBoiteDeDialogue= confirm("Mon Texte");

Les conditions Si-alors-Sinon: If-Else

Les différences avec Si-Alors sont en gras.

Les conditions Si-Alors permettent de n'effectuter un bloc d'instructions que si on est dans le cas demandé (la condition), et de faire autre chose dans tous les autres cas en suivant un deuxième bloc d'instructions.

En JavaScript, une condition Si-Alors se programme par:

• le mot clef if en minuscule

• une parenthèse (

• une condition qui est une expression booléenne : si c'est vrai, on effectuera le premier bloc d'instructions, sinon on effectue l'autre bloc d'instruction)

• une parenthèse )

• une accolade {

• un bloc d'instructions à effectuer si la condition est vraie

• une accolade }

• le mot clef else en minuscule

• une accolade {

• un bloc d'instructions à effectuer si la condition est fausse

• une accolade }

Voici donc le modèle:

if (booleenQuiEstUneCondition)

{

instruction;

instruction;

instruction;

}

else

{

instruction;

instruction;

instruction;

}

Voici l'enchainement temporel:

• On effectue d'abord les instructions dans l'ordre (il peut y avoir des instructions avant le bloc Si-Alors).

• Quand on arrive au bloc Si-Alors-Sinon, on regarde si la condition (la partie booleenQuiEstUneCondition dans le modèle précédent) est true.

  • Cas 1: si c'est true, on effectue les instructions du bloc numéro 1.

  • Cas 2: c'est false, on effectue les instructions du bloc numéro 2.

• Puis on continue les instructions après le bloc s'il y en a.

Voici un exemple:

• qui affiche dans une pop up "Bonjour, nous allons commencer".

• Puis qui demande à l'utilisateur s'il choisit de continuer.

  • Si c'est le cas, le texte "Vous avez choisi de continuer" va s'afficher dans une pop-up.

  • Si ce n'est pas le cas, le texte "Vous avez choisi d'arrêter" va s'afficher dans une pop-up.

• Dans tous les cas, on finit par afficher "Fin" dans une pop-up.

alert("Bonjour, nous allons commencer");

if (confirm("Souhaitez-vous continuer?") )

{

alert("Vous avez choisi de continuer");

}

else

{

alert("Vous avez choisi d'arrêter");

}

alert("Fin");

Les conditions Selon Cas- Faire: Switch-Case

Les conditions Selon cas-Faire permettent de effectuter un bloc d'instructions que si on est dans le cas demandé.

En JavaScript, une condition Selon Cas-Faire se programme par:

• le mot clef switch en minuscule

• une parenthèse (

• une expression à comparer)

• une parenthèse )

• une accolade {

• le mot clef case en minuscule suivi de la valeur verifiée pour le premier cas

  • les instructions à suivre dans ce cas là

  • le mot clef break;

• le mot clef case en minuscule suivi de la valeur verifiée pour le deuxième cas

  • les instructions à suivre dans ce cas là

  • le mot clef break;

• (autant de "case" que nécessaire)

• une accolade }

switch (expression)

{

case valeur1:

instructions;

instruction;

break;

case valeur2:

instructions;

instruction;

break;

case valeur3:

instructions;

instruction;

break;

}

Voici l'enchainement temporel:

• On effectue d'abord les instructions dans l'ordre (il peut y avoir des instructions avant le bloc Selon Cas- Faire).

• Quand on arrive au bloc Selon Cas- Faire, regarde si l'expression (partie expression dans le modèle précédent) vaut

  • la valeur du premier cas (valeur1 dans le modèle précédent)

    • Si c'est le cas, on execute les instructions liées à ce cas

  • la valeur du deuxième cas (valeur2 dans le modèle précédent)

    • Si c'est le cas, on execute les instructions liées à ce cas

  • et ainsi de suite pour tous les cas.

• Puis on continue les instructions après le bloc s'il y en a.

Voici un exemple:

• Qui demande à l'utilisateur de"Donner un nombre entre 1 et 3" dans une fenêtre de dialogue

• Puis qui verifie la valeur de ce qu'a entré l'utilisateur:

  • Si "1", le texte "Vous avez choisi 1" va s'afficher dans une pop-up.

  • Si "2", le texte "Vous avez choisi 2" va s'afficher dans une pop-up.

  • Si "3", le texte "Vous avez choisi 1" va s'afficher dans une pop-up.

• Dans tous les cas, on finit par afficher "Fin" dans une pop-up.

let votreReponse= prompt("Donner un nombre entre 1 et 3");

switch (votreReponse)

{

case "1":

alert("Vous avez choisi 1");

case "2":

alert("Vous avez choisi 2");

case "3":

alert("Vous avez choisi 3");

}

alert("Fin");

Les boucles Pour: For

// à venir

Les boucles Pour tous les éléments: For Each

// à venir

Les double boucles

// à venir

Lien Javascript et HTML

Cours ici: https://sites.google.com/ensc.fr/laurenthevin/teaching/programmation-et-algorithmie-javascript-et-html

Les fonctions en javascript: déclaration, appel, attributs, return, récursivité

Une fonction est une "méta-instruction" qui en regroupe plein d'instructions. En premier lieu, il faut dire à quoi correspond cette "méta-instruction" en décrivant, dans l'ordre, toutes les instructions qui la compose. C'est ce que l'on appelle la déclaration de fonction.

Ensuite, il faut utiliser cette "méta-instruction" à chaque fois qu'on en a besoin. Pour cela, on appelle la fonction: on utilise le nom de la fonction.

Il se peut que, pour faire une série d'actions successives dans une fonction, on ait besoin de fournir plusieurs informations (par exemple le nom de quelqu'un pour afficher Bonjour + LePrenom de la personne). Ces informations à fournir sont ce que l'on appelle les agruments. Ils sont donnés entre parenthèses à la fonction.

Enfin, en plus d'effectuer une série d'action, une fonction peut renvoyer un résultat, dans ce cas on utilise un return qui se chargera de cet aspect.

Les déclarations de fonction en Javascript:

• mot clef function

• le nom de la fonction avec lequel on va pouvoir appeler la fonction pour l'utiliser par la suite

• une parenthèse (

• optionnel: des arguments utilisés dans le corps de la fonction

• une parenthèse )

• une accolade {

• un bloc d'instructions à effectuer lorsqu'on appelle la fonction

• optionnel: mot clef return avec une valeur renvoyée

• une accolade }

Les appels de fonction:

• le nom de la fonction utilisé dans la déclaration

• une parenthèse (

• optionnel: des arguments utilisés dans le corps de la fonction

• une parenthèse )

• un point virgule ;

Déclaration:

function nomDeMaFonction(parametre1, parametre2, …)

{

//instruction de ma fonction

}

Appel:

nomDeMaFonction(unParametreQuiFonctionne1, unParametreQuiFonctionne2,…)

Fonction avec 0 attribut:

Déclaration:

function nomFonction( )

{

//instructions

}

Appel:

nomFonction();

Fonction avec 1 attribut:

Déclaration:

–function nomFonction( parametre1)

{

//instructions

}

Appel:

nomFonction(parametre1FourniDansLeCode);

Fonction avec 2 attributs:

Déclaration:

–function nomFonction( parametre1, paramètre2)

{

//instructions

}

Appel:

nomFonction(parametre1FourniDansLeCode, parametre2FourniDansLeCode);

Fonction avec 3 attributs:

Déclaration:

–function nomFonction( parametre1, paramètre2, parametre3)

{

//instructions

}

Appel:

nomFonction(parametre1FourniDansLeCode, parametre2FourniDansLeCode, parametre3FourniDansLeCode);

On clic

//à venir

Afficher ou faire disparaitre un texte

//à venir