Arts numériques

Les fonctions ont une fonction : l’économie d’échelle. On centralise des portions de code de telle manière àpouvoir les réutiliser plusieurs fois, et donc devoir corriger àun seul endroit si ça merde. C’est un "sous-programme" en soi, qui peut être d’une grande complexité, avec des arguments transmis, etc. Allons-y doucement.

Ça se passe en deux temps : on écrit une fonction, puis on l’invoque.
On écrit la fonction :

<script type="text/javascript">
function mafonction() {
alert("Et hop");
}
</script>

La fonction commence par le nom "function" suivi du nom de la fonction, que vous inventez, terminé par une ouverture et fermeture de parenthèses. Dans ces parenthèses on verra qu’on peut mettre des choses. On ouvre et ferme ensuite des accolades, entre lesquelles on place le code de la fonction. Ce code sera exécuté chaque fois que l’on appelle la fonction comme suit :

<a href="javascript:mafonction();">Clic</a>

Ici, vous voyez que le code javascript remplace le lien dans le code de la page. Mais on peut faire ceci aussi :

<div onClick="mafonction();">waow</div>

Chaque fois que la fonction sera appellée, elle executera le code, ici une boite d’alerte qui contient "Et hop !".

Appeller une fonction avec un argument

Mais une fonction reste statique si elle envoie le même contenu àchaque fois qu’on l’appelle. Il devient intéressant d’utiliser une fonction quand on peut lui envoyer des arguments.

Un exemple simple : un questionnaire àchoix multiples. Trois réponses àune question, une seule des trois est juste.
Dans la page, on mettra ceci :

<h3>Qui est président des USA aujourd'hui</h3>
<ul>
<li><a href="javascript:testereponse('Mais non !');">Abraham Lincoln</a></li>
<li><a href="javascript:testereponse('Ça c'était le précédent');">Bill Clinton</a></li>
<li><a href="javascript:testereponse('malheureusement oui...');">Georges Bush</a></li>
</ul>

Dans le head de la page, on va écrire la fonction.

<script type="text/javascript">
function testereponse(lareponse) {
alert(lareponse);
}
</script>

Vous constaterez que entre les parenthèses se trouvent un mot - lareponse - qui est réutilisé dans la ligne juste après. C’est une variable. Elle reçoit l’information provenant des réponses potentielles par l’appel de fonction "javascript:testereponse("quelquechose") ;" et la stocke pour être réutilisée. Dans notre cas, la fonction affiche simplement ce qui lui est envoyé dans une boite d’alerte.

Plusieurs argument dans la fonction

Notre bout de code est amusant, mais il ne teste par réellement le résultat donné àla réponse : il affiche juste un bout de texte envoyé par l’appel de fonction dans une boite d’alerte...
Pour faire un vrai test, avec un envoi vers une page en cas de réussite, on va ajouter des variables passée par la fonction.

<h3>Qui est président des USA aujourd'hui</h3>
<ul>
<li><a href="javascript:testereponse('Mais non !', false);">Abraham Lincoln</a></li>
<li><a href="javascript:testereponse('Ça c\'était le précédent', false);">Bill Clinton</a></li>
<li><a href="javascript:testereponse('malheureusement oui...', true, 'questionsuivante.html');">Georges Bush</a></li>
</ul>

Trois arguments sont placés dans le script, parfois 2 seulement. Remarquez au passage que les textes àenvoyer sont entourés de simples guillemets : c’est parce que l’appel àla fonction se trouve lui-même dans un double guillemets. La réponse pour "Bill Clinton" a quelque chose en plus : un backslashe (\) devant le caractère de simpe guillemets. Pourquoi ? Parce la réponse est elle-même entre simple guillemets, et donc mettre un simple guillemet dans le texte correspond àindiquer au script que la variable se cloture alors qu’on est au milieu de la phrase. Erreur de script garantie.

Dans le head, on a plus de code pur plus de résultats :

<script type="text/javascript">
function testereponse(lareponse,test,url) {

        // on prépare la fenêtre d'alerte
	if (test) {
	message ="Bonne réponse \n" + lareponse;
	} else {
	message = "Mauvaise reponse \n" + lareponse;
	}
	
	// on envoie la boite d'alerte avec son message
	alert(message);
        
        // si il y a une valeur pour url, on clique vers elle
	if(url) { 
	window.location.href=url; 
	}
}
</script>

Houlala, plein de choses nouvelles :
– On récupère trois valeurs potentielles dans 3 variables. Si "url" ne reçoit rien, le script ne se plaint pas : simplement cette variable reste vide.

On teste la variable "test" : dans le code su lien, elle vaut soit "true" soit "false". True et false ne sont pas des variables, mais des valeur boléennes. True, c’est "oui", 1, quelque chose, et false est "non", 0, rien.
le test if() {} else {} évalue ce qui se trouve entre parenthèses et si le résultat est positif (si x==10 par exemple), alors ce qui se trouve entre les premières accolades est exécuté, et si le résultat est négatif, ce qui se trouve dans les accolades après else sera exécuté.
Dans notre cas, on stocke dans une variable "message" du texte et une variable.

Enfin, si quelque chose se trouve dans la variable url, l’adresse de la page sera changée via la commande window.location.href.