Kamertic - Intégration des TICs dans l'Enseignement

Kamertic - Intégration des TICs dans l'Enseignement

Les fonctions, les boîtes de dialogue

CHAPITRE 1 : PROGRAMMATION EN JAVASCRIPT

Leçon 1 : Les fonctions, les boîtes de dialogue

 

Compétences visées

A la fin de cette leçon l’apprenant doit être capable de :

  • Ecrire et appeler une fonction JavaScript
  • Utiliser des boites de dialogue en javascript

Introduction

Dans le but d’améliorer la lisibilité du code, la notion de fonction sera abordée en JavaScript. En effet une fonction est un sous-programme qui permet d’effectuer un ensemble d’instructions par simple appel dans le corps du programme principal. Nous verrons aussi comment JavaScript utilise des boites de dialogue pour interagir avec l’utilisateur

 

     I. La notion de fonction

1.    La déclaration de la fonction

Pour déclarer une fonction on utilise le mot clé function suivi du nom de la fonction et de liste de ses arguments. La syntaxe de la déclaration d’une fonction est la suivante :

function mafonction(argument1, argu­ment2,…,argumentN) {

instructuction1 ;

instructuction2 ; …

instructuctionn ;

}

  • Les noms des fonctions suivent les mêmes règles que les noms des variables (commencer par une lettre, comporter des chiffres, …)
  • Une fonction sans argument doit tout de même comporter des parenthèses «mafonction( ) » ;
  • Lorsqu’une fonction retourne un résultat le mot clé return est utilisé. Lorsqu’elle n’en retourne pas on parle procédure ;

Exemple: Création de fonction et de procédure

function addition(a,b) {

c=a+b;

return c;

}

function danger( ) {

alert("vous êtes en danger");

}

Remarque :

  • Variable locale/globale : Lorsqu’une variable est déclarée dans une fonction avec le mot clé var alors elle est locale à cette fonction ; dans les autres cas (sans le mot clé var ou au début du script avant toute fonction) elle est globale
  • Il faut déclarer la fonction avant de l’appeler ; ainsi il est préférable de la déclarer dans l’entête (<head></head>).   
2.    Appel de la fonction

Pour appeler une fonction, on utilise simplement le nom de la fonction, suivi de la liste des arguments.

Exemple:

somme = addition(2,3) ;

danger( ) ;

  • Lorsque la fonction renvoie une valeur, on peut l’affecter à une variable. Ici, on affecte le résultat de l’addition de 2 et de 3 dans la variable «somme» ;
  • Si la fonction n’a pas d’arguments, on met tout de même les parenthèses. Le script suivant ouvre la fenêtre d’alerte définie dans la fonction danger ( ).

 II. Les fenêtres de dialogue

Les boites de dialogue sont des fenêtres permettant à l’utilisateur d’interagir avec le système. JavaScript possède trois boites de dialogues : alert(), prompt(), confirm() .

1.    alert

La méthode alert permet d’afficher un message dans une boite de dialogue. Elle possède un bouton « ok »  qui permet de quitter la boite.

 Syntaxe : alert(‘’Message a afficher’’) ;

Exple : alert(‘’Bonjour’’)  ;

Var msg=’’monsieur’’ ;  alert(msg)  ;

 alert(’’Bonjour ’’+msg)  ;

 

Image3.png

 

 

 

 

 

 

 

 

 

 

2.    prompt

Cette boite de dialogue est utilisée lorsqu’on souhaite que l’utilisateur entre une donnée (son nom, un montant, une date, …) on utilise la fonction prompt. Sa syntaxe est la suivante :

 Syntaxe :Prompt ("question", "réponse par dé­faut") ;

Exemple: Utilisation de la fonction prompt en JavaScript

 

mavariable=confirm("Voulez-vous fermer la page ?") ;

 L’exécution de la fonction «prompt» va provoquer l’affichage de la boîte de dialogue suivante ;

Image1.png

L’utilisateur pourra entrer son nom ou laisser le texte « Vo­tre nom » affiché par défaut. S’il clique sur « OK », le texte affiché sera affecté à la variable «mavariable». S’il clique sur « Annuler », la valeur «Null» sera affectée à «mavaria­ble».

3.    confirm

Cette boite est utilisée pour demander la confirmation d’une action (suppression d’élément, fermeture de page, …). Sa syntaxe est :

 Syntaxe : confirm("Demande de confirmation") ;

Exemple: Utilisation de la fonction confirm en JavaScript

 

mavariable=confirm("Voulez-vous fermer la page ?") ;

 L’exécution de la fonction «confirm» va provoquer l’affichage de la boîte de dialogue ci-après ;

Image2.png

Si l’utilisateur clique sur « OK », «mavariable» aura la valeur true. Sinon la valeur false.

 

 

 

Conclusion (en exercice)

 

Travaux pratique à suivre….

<html>

            <head><title>MOn TP Javascript</title>

            <script languague="javascript"> var som = new Number(0);

function moyenne(tabnote){

//for(var i=0; i<=2; i++){som = som + parseInt(tabnote[i];}

som=parseInt(tabnote[0])+parseInt(tabnote[1])+parseInt(tabnote[2]);

moy=som/3;

return moy;

}

</script>

</head>

<body bgcolor="pink" >

<script languague="javascript">

var tab = new Array();

alert("Bienvenue dans ce programme\n Vous allez entrer vos trois notes et je vais vous donner votre moyenne");

nom=prompt ("Entrez d'abord votre nom", "ton nom") ;

for(var j=0; j<=2; j++){

tab[j]=prompt (nom+" veillez entrer votre "+(j+1)+"e note", 10) ;

}

alert(nom+" votre moyenne est egale à: "+moyenne(tab));

rep=confirm("Voulez-vous quitter ce programme ?") ;

if(rep==true){

alert(" Javascript vous dit Merci et Aurevoir!");

}else{alert("Jsuis désolé mais tu dois sauf que partir jsuis fatigué. BYE!!!");}

document.write("<center>Javascript est passé par ici<br> A la prochaine...</center>");

</script>

</body>

</html>



07/01/2016
0 Poster un commentaire

A découvrir aussi


Inscrivez-vous au blog

Soyez prévenu par email des prochaines mises à jour

Rejoignez les 13 autres membres