Slt KeyBoss,
Ravi de voir que tu progresses, mais je constate que je n'ai pas tjrs été suffisemment clair.
Ce n'est pas grave, on efface tout et on reprend depuis le début. Ca tombe bien parce qu'à mon boulot j'ai un gars en contrat que qualification que je dois former donc j'apprends aussi. En fait en ce moment je lui apprends à programmer sous Access ... Mais bon passons aux choses sérieuses.
C'est quoi une fonction ?
____________________
Une fonction est un sous-programme donc un ensemble de lignes de codes chargé d'effectuer une opération bien précise. Par exemple mettre une chaîne de caractères en majuscules.
Qd utiliser une fonction ?
____________________
Dès que dans un programme tu t'apercois que tu tapes souvent plusieurs fois exactement les mêmes lignes de codes tu peux être sûr qu'une fct serait la bienvenue. Ca t'évite la saisie multiple (c'est déjà beaucoup) et c'est plus parlant puisque tu peux donner un nom explicite à la fct plutôt que d'insèrer un commentaire (chose qu'on en fait jamais par faignantise) en plein mileu du code. Ensuite ça facilite la maintenance, le débugage enfin le code source (le code qu'écrit le programmeur s'appel le code source qlque soit le langage) est plus court. Et - on en fait mieux on se porte !
Syntaxe d'une fonction :
____________________
function nom([parametre[, parametre,[...]]])
{
...
[return expression;]
}
function : le mot réservé "function" commence tjrs une déclaration de fonction.
nom : la fonction doit avoir un nom parlant de préférence
tu peux donner n'importe quel nom mais il faut savoir qu'il y a qd même des limites à la longueur du nom ainsi que des règles qd aux caractères autorisés. Je ne sais + trop lesquels mais si tu te cantonnes aux lettres de A à Z et aux chiffres de 0 à 9 plus "_" c'est bon.
Attention : JS fait la distinction entre les majuscules et les minuscules ! Cad ma_fonction() n'est pas la même chose que
Ma_fonction() ni ma_FONCTION() etc ...
parametre : les paramètres sont facultatifs.Chaque parametre doit être séparé de précédent par une virgule. Ex ma_fonction(p1, p2).
Les paramétres servent à transmettre à la fonction tous les élements variables c'est pourquoi les paramètres sont justement des variables et plus précisemment des variables locales à la fct.
expression : une fonction n'est pas obliger de retourner un résultat.
Cependant si elle doit en retourner un, celui-ci doit être précédé du mot réservé "return".
Le terme "retourner un résultat" est à prendre ici dans le sens "renvoyer un résultat" ou "fournir un résultat".
Tout comme tu peux passer un paramètre à une fonction, cette dernière à son tour peut t'en renvoyer 1 MAIS 1 SEUL !!! Et c'est ce qu'on appelle le résultat.
Ce résultat est renvoyé au programme qui a appelé le fct on dit aussi programme appelant. Le programme appelant peut récupérer ou ne pas récupérer le résultat : c'est le programmeur (donc toi en l'occurrence) qui voit s'il en a besoin ou pas.
En effet toute les fonctions qui renvoient un résultat ne renvoie pas forcément un résultat utile.
Parfois (souvent) il ne sert qu'à indiquer si la fct s'est bien exécutée. Dans ce cas le résultat peut être ignoré.
On peut récuperer le résultat d'une fonction de 2 façons dans le programme appelant :
1) en l'affectant à une variable
2) en lieu et place d'un paramètre ou d'une expression
Prenons un exemple :
Cette fonction additione 2 chiffres passés en paramètre et retourne le résultat de cette addition.
function addition(a, b)
{
return (a+b);
}
La fonction porte le nom "addition"
Attend 2 parametres appelés "a" et "b"
Et renvoie comme expression "(a+b)"
Les parenthèses ne sont pas obligatoires mais c'est plus clair.
Une expression peut être directement une valeur, une variable, voir le résultat d'une autre fonction, ou encore une combinaison de tous ces éléments c'est-à-dire une formule.
Ex d'expresions (je mets le mot return mais il faut bien comprendre qu'il ne fait pas partie de l'expression elle-même !) :
return 10;
return ma_variable;
return Math.Random();
return 10+ma_variable*1.25;
return "Javascript c'est facile ...";
return "Javascript "+"c'est "+"facile ...";
return mon_autre_fonction("essai",10);
etc ...
Appel de la fct (je ne retape pas tout le code html) :
<script language="JavaScript1.2">
<!--
function addition(a, b)
{
return (a+b);
}
var valeur_1=10;
var valeur_2=5;
var resultat=addition(valeur_1,valeur_2);
// -->
</script>
Explications :
[valeur_1] et [valeur_2] sont 2 variables globales initialisées (cad qu'on met qlque chose dedans : un nombre, une chaîne de catactères, un objet ...) avec les valeurs respectives 10 et 5.
La variable [resultat] est initialisé avec le résulat de l'addition des variables [valeur_1] et [valeur_2] passées comme paramètres de la fonction addition(). Et resultat contient la valeur 15.
Lors d'une affectation c'est à dire l'utilisation du signe "=" le code est traité de droite à gauche. Dc la fct addition() est d'abord appelée, elle retourne un résultat (15 ici) et ce résultat est copié dans la variable [resultat].
On aurait aussi pu écrire
var resultat=addition(10,5);
var resultat=addition(10,valeur_2);
var resultat=addition(valeur_1,5);
il n'y a pas vraiment de limite
Récupération du résultat d'une fct en lieu et place d'un paramètre.
_____________________________________________________
On complique un petit peut ...
Maintenant il s'agit d'additionner 3 nombres.
A savoir :
var valeur_1=10;
var valeur_2=5;
var valeur_3=20;
A priori on pourrait écrire :
var resultat=addition(valeur_1,valeur_2); // resultat vaut 15
var resultat=addition(resultat,valeur_3); // resultat vaut 35
ce qui est parfaitement juste ...
Mais une forme plus condensée est :
var resultat=addition(addition(valeur_1,valeur_2), valeur_3);
Au-dessus je te disais que dans les affectations, les expressions sont évaluées de droite à gauche : c'est toujours vrai.
Mais en +, chaque expression est analysée en commençant par les éléments (ou ce qu'on pourrait aussi appeler les sous-expressions si tu veux) les plus imbriqués jusqu'aux moins imbriqués. Ce sont les parenthéses qui détermine le dégrés d'imbrication. Et c'est enfantin à calculer. Tu lis l'expression de gauche à droite (ici :
"addition(addition(valeur_1,valeur_2), valeur_3);" ) et tu compte mentalement en partant de zéro : tu ajoutes +1 à chaque fois que tu tombes sur une parenthése ouvrante "(" et inversement tu retires 1 lorsque tu rencontre un parenthése fermante ")". Normalement si tu n'a pas fais d'erreur tu dois retomber sur zéro à la fin. En effet tu dois tjrs avoir le meme nbr de "(" et de ")" sinon tu commets un erreur de syntaxe.
Dans l'exemple le dégrès d'imbrication le plus élévé vaut 2 :
c'est donc d'abord addition(valeur_1,valeur_2) qui est évalué ce qui nous donne 15.
Ensuite on passe au niveau 1 et tout se passe comme si on avait :
addition(15,valeur_3) ce qui donne au final 35 qui est ensuite stocké dans [resultat].
Le résultat du 1er appel à addition() est dc bien utilisé comme paramètre pour le second appel : CQFD
En plus des paranthéses, il existe des priorités liés aux opérateurs mathématiques .
Par ex 10+5x10 donnera 65 : on dit que la multiplication est prioritaire sur l'addition (ca doit te rappeler un certain cours de maths je sais ...)
Par contre (10+5)x10 donnera 150 : les parenthéses sont prioritaires sur la multiplication.
Et y'en a plein d'autres comme çà ! Notamment ts les opérateurs boolen ... Je te laisse découvrir ça par toi même.
Tu peux imbriquer autant que tu veux mais évite qd même d'aller jusqu'à ne + pouvoir relire ton propre code. Décomposer en plusieurs étapes est parfois beaucoup + simple.
Constantes et chaîne de caractères :
______________________________
Comme tous les débutants tu rencontres des problème avec les " et les ' des chaînes de caractères.
Alors j'explique
J'ai une variable avec un texte
Pour délimiter, cad définir là ou commence et là où finit une chaîne
JS t'autorise à utiliser indifféremment aussi bien le guillemet que l'apostrophe. Ce qui signifie que toute chaîne littérale ou constante (cad dont tu tapes directement le contenu dans ton code) doit obligatoirement commencer soit par " soi par '.
Mais attention : si tu choisis de commencer par " tu dois terminer par un ". De même si tu commences ta chaîne avec ' tu dois terminer avec '.
Donc les 2 syntaxes suivantes sont équivalentes et valides :
var txt="mon texte" ; // Avec des guillemets OK
var txt='mon texte'; // Avec des apostrophes OK
Jusque là pas de pb.
Maintenant je change et je met le mot aujourd'hui :
var txt="aujourd'hui" ; // Avec des guillemets OK
Avec des apostrophes Patatra : erreur constante de chaîne non terminée : ca te rappel qlque chose ?
var txt='aujourd'hui';
Et pourquoi cette erreur ?
C'est simple : JS commence tranquillement à analyser la chaîne pour pouvoir la stocker dans la variable [txt]. Il trouve d'abord une apostrophe, c'est tout bon puis les lettres a , u, j, o, u, r, d puis à nouveau un ' donc logiquement il considère que la chaîne est
aujourd tout court ! Mais après ça va plus du tout puisqu'il trouve h, u, i et surtout '. Et là il ne comprend plus : il aurait dû trouver un point virgule ou un saut de ligne après le deuxième '.
Tjrs + fort :
_________
Prenons un ex : je veux utiliser la fonction JS alert() pour afficher
la phrase suivante :
Comment mélanger les ' et les " dans les chaînes.
si j'écris :
alert("Comment mélanger les ' et les " dans les chaînes.")
il va y avoir une erreur de constante de chaîne non terminée à cause du guillemet au milieu.
si j'écris :
alert('Comment mélanger les ' et les " dans les chaînes.')
il va y avoir une erreur de constante de chaîne non terminée à cause de l'apostrophe au milieu.
Et alterner tantôt un coup " et tantôt un coup ' n'y changera rien !
Serions-nous donc condamné à ne pouvoir utiliser que l'un ou l'autre mais pas les 2 ?
Non heureusement et la solution est simple : utiliser les séquences d'échappement.
Oops comme dirait Britney ! Mais qu'est ce qu'une séquence d'échappement ?
_________________________________________________
C'est un moyen élégant qui vient tout droit du langage C dont s'inspire beaucoup JS.
En fait une séquence d'échappement est une suite de 2 caractères
Le premier est toujours le caractères \ (back slash) : c'est lui qui introduit la séquence.
Et voici les combinaisons possibles :
\' pour une apostrophe
\" pour un guillemet
\n pour un saut de ligne
\\ pour le caractère \ lui même (ils pensent vraiment à tout)
\f pour un saut de page
\b pour un retour arrière
Qd JS tombe sur une de ces séquences il la remplace par le caractère correspondant.
Ainsi
var txt='aujourdh\'ui';
est OK. Plus d'erreur car il distingue maintenat parfaitement la fin de la chaîne de la séquence d'échappement \'
Et l'ex ci_dessus devient:
alert("Comment mélanger les ' et les \" dans les chaînes.")
alert('Comment mélanger les \' et les " dans les chaînes.')
Dans le doute tu peux aussi écrire :
alert("Comment mélanger les \' et les \" dans les chaînes.")
ET ô miracle ça marche
Tu peux même afficher le message sur 2 lignes :
alert("Comment mélanger \nles ' et les \" dans les chaînes.")
Ce qui donnera :
Comment mélanger
les ' et les " dans les chaînes.
Et voici la mort de ton pb de constante non terminée :
Comme tu as commencé par un " , il faut mettre un \ devant chaque " contenu dans la chaîne et c'est tout.
onClick="ecrire=5; enfonce(); setTimeout('alert(\" sqdfs \")', 5000)"
Tu vois c'était pas bien sorcier :-)
setTimeout() complémént :
______________________
Tu n'es pas obliger de passer le nom d'une fct , tu peux aussi mettre une expression qui sera évaluée.
Donc
var ma_variable=0;
setTimeout("ma_variable=10",2000)
va faire que ma_variable vaudra 10 au bout de 2 secondes
Lorsque j'écris :
timer_id=setTimeout("ma_fonction()",100)
je pourrais aussi mettre
toto=setTimeout("ma_fonction()",100)
c'est la même chose ne te focalise pas trop sur le nom des variables
Supposes que tu va dans une banque et tu loues un coffre. Et bien le timer joue le rôle du coffre et l'identiant celui de la clé.
A la banque, c'est le banquier qui te donne la clé, en Javascript c'est la fonction setTimeout qui te donne ou te retourne ou te renvoie l'identifiant .
La clé te donne accès au coffre, l'identifiant au timer. Tout comme la clé, l'identifiant est unique et il ne faut surtout pas le perdre.Il ne te donne accès qu'à 1 seul timer, tout comme la clé ne te donne accès qu'à 1 seul coffre.
De l'intérêt de récupérer l'identifiant du timer :
<script language="Javascript">
var timer_id=setTimeout("window.close()",15000);
</script>
<body>
<p>Attention: cette fenêtre va se fermer automatiquement dans les 15 secondes sauf si vous cliquez sur le bouton ci-dessous !!!</p>
<form>
<input type="button" value="Annulation de la procédure de déconnexion automatique" onclick="clearTimeout(timer_id)">
</form>
</body>
</html>
Et voilà à quoi ca peut servir ...
Alors convaincu ?
Les événements dans les liens ou les images ?
_____________________________________
A la lecture de ton message j'en conclus que tu utilise Internet Explorer. Et effectivement avec IE tu peux mettre les événements directement dans les tag <img> et notemment l'événement onclick.
D'ailleurs avec IE tu peux mettre des événements à peut près n'importe où !
Mais pas avec Netscape 4.7 (J'ai pas tester avec NS6) !
En fait avec NS l'événement onclick ne marche que dans les tags
<a> , <input>, <textarea> et <area> Et c'est tout !
Comme je m'emerde (y'a pad d'autre mot) pour faire en sorte que mes pages soient compatibles avec les 2 navigateurs, j'ai pris le reflexe de n'utiliser que le tag <a>.
Voilà la raison...
Le # dans les liens :
________________
Pour le # tu as raison ca semble marcher très bien même avec NS.
J'aurais au moins appris un truc nouveau.
Je ne connais pas tout en JS loin s'en faut ...
Cas du return false :
________________
true et false qui signifie vrai et faux sont 2 constantes prédéfinies
JS qui sont utilisée en association avec les opérateurs de comparaison et booléen.
Expliquer ce que sont les opérateurs booléen serait trop long ici.
Peut-être une autre fois.
Ex d'utilisation de true/false
On appelle variable boleenne une varaible que ne peut prendre que les valeurs vrai ou faux. En JS dans le mesure ou les variables peuvent ne sont pas typées (cad qu'une même variable peut contenir un chiffre par ex puis l'instant d'après un texte) cette notion à été étendue.
ex
function est_negatif(n)
{
if (n < 0)
{
return true;
}
else
{
return false;
}
}
var chiffre=-10
if (est_negatif(chiffre)) alert("Ce chiffre est négatif")
qu'on peut aussi écrire
if (est_negatif(chiffre)==true) alert("Ce chiffre est négatif")
En fait dans la condifion "if" l'expression qui suit est évalué et si elle est vraie alors la clause (ou le code) qui suit immédiatement le "if ()" est éxécutée sinon le clause qui suit le "else" est éxécutée.
Zéro est considéré comme faux ou false
Une chaîne nulle ou vide (cad "" ou '') est considérée comme faux
Une variable ou un paramètre non définie également
Ainsi
var nn=0
if (nn)
{
alert("vrai")
}
else
{
alert("faux")
}
Affiche tjrs "faux" qd nn vaut zéro car l'évaluation de la condition (nn) est fausse.
On test si nn contient zéro : si c'est la cas l'évaluation est fausse.
var nn=0
if (nn==0)
{
alert("vrai")
}
else
{
alert("faux")
}
Affiche tjrs "vrai" car nn vaut bien zéro !
var nn="";
if (nn)
{
alert("vrai")
}
else
{
alert("faux")
}
Affiche "faux" car l'évaluation de la condition (nn) est fausse
On test simplement si nn contient qlque chose ou pas !
Par contre :
var nn="";
if (nn=="")
{
alert("vrai")
}
else
{
alert("faux")
}
Affiche vrai car l'évaluation de (nn=="") est vrai. En effet nn est bien égal à bien une chaîne vide !
Ici il y a une comparaison entre nn et une chaîne vide et c'est le résultat de cette comparaison qui est interprété.
Ne pas confondre donc la comparaison avec le fait qu'une variable contienne telle ou telle valeur !!!
Qt au return false dans l'événement onclick il indique s'implement au programme d'annuler l'événement cad le click lui même.
Si on est sur la page 1 et qu'on a le code suivant :
<a href="page2.htm" onclick="alert('Vous avez cliqué !'); return false;">
Lorsqu'on click sur le lien le message 'Vous avez cliqué !' est affiché par contre la page2.htm elle n'est jamais chargée car on annule l'action juste après le msg.
Par contre si on remplace "return false" par "return true" alors là tout se passe comme d'habitude et la page2.htm est chargée.Idem
si on omet "return false". C'est pour çà qu'en tps normal on ne précise jamais.
Tout les événements ne peuvent pas être annulé !
Tu peux encore aller + loin ainsi :
<script>
var txt="ok"
function test()
{
if (txt=="ok")
{
return true;
}
else
{
return false;
}
}
</script>
...
<a href="page2.htm" onclick="return test();">
Ici on utilise le résultat renvoyé par la fct test() (true/false) pour continuer ou au contraire annuler l'action.
C'est le contenu de la variable [txt] testée ds test() qui est déterminant.
Bien évidemment à la place de la fct test() tu peux directement mettre une variable globale qui contient true ou false
<a href="page2.htm" onclick="return ma_variable;">
Si ma_variable vaut "" ou 0 ou false alors
le click sera systèmatiquement annulé !
a+
Captivate 4 exemple javascript
