Ahhhh je capte rien au javascript !!!
Fermé
KeyBoss
Messages postés
24
Date d'inscription
samedi 3 février 2001
Statut
Membre
Dernière intervention
4 mars 2001
-
4 févr. 2001 à 21:54
PhP Messages postés 1770 Date d'inscription lundi 11 décembre 2000 Statut Membre Dernière intervention 23 décembre 2009 - 13 févr. 2001 à 22:41
PhP Messages postés 1770 Date d'inscription lundi 11 décembre 2000 Statut Membre Dernière intervention 23 décembre 2009 - 13 févr. 2001 à 22:41
j'ai commencé a lire le guide, au debut tout allait bien, mais au niveau des methodes, des objets, etc... j'ai completement decroché ! il y a des exemples qui explique ce qui faut taper, mais pas ou (dans head, dans un evenement ? ...) !
J'ai juste besoin qu'on me donne un exemple complet de ce que je veux faire, comme ca je pourait l'analyser et comprendre :)
c'est hyper simple : au chargement, je veux que y'est une boite de dialogue qui affiche un nombre aleatoire, multiplié par 10 et arrondi a un entier.
J'ai pigé comment on affiche une boite de dialogue mais apres pour faire les arondi, etc... J'ai marké onLoad="alerte(math.round(math.random()*10))" mais faut definir tout un tas de truc que je sais pas comment on fait !
J'ai juste besoin qu'on me donne un exemple complet de ce que je veux faire, comme ca je pourait l'analyser et comprendre :)
c'est hyper simple : au chargement, je veux que y'est une boite de dialogue qui affiche un nombre aleatoire, multiplié par 10 et arrondi a un entier.
J'ai pigé comment on affiche une boite de dialogue mais apres pour faire les arondi, etc... J'ai marké onLoad="alerte(math.round(math.random()*10))" mais faut definir tout un tas de truc que je sais pas comment on fait !
A voir également:
- Ahhhh je capte rien au javascript !!!
- Telecharger javascript - Télécharger - Langages
- Ma télé ne capte plus aucune chaine - Guide
- Pourquoi je ne capte pas la 5 6 7 9 ? - Forum TNT / Satellite / Réception
- Mon micro capte le son de mon casque ✓ - Forum Audio
- Javascript void 0 c'est quoi ✓ - Forum Réseaux sociaux
13 réponses
PhP
Messages postés
1770
Date d'inscription
lundi 11 décembre 2000
Statut
Membre
Dernière intervention
23 décembre 2009
606
7 févr. 2001 à 23:26
7 févr. 2001 à 23:26
Slt KeyBoss,
Allons, JavaScript c'est pas si dur que ça en a l'air ! Je ne dis pas que c'est tjrs évident surtout si tu ne connais aucun autre langage mais comparé au C ou C++ c'est vraiment beaucoup + simple.
Pas de pointeurs (ou presque), typage dynamique, allocation et désallocation de la mémoire dynamique et automatique (en gros t'a rien à faire),toute fonction est déjà un objet ...
Je suppose qu'il doit exister un cours sur CCM qui t'explique tout sur JS, mais comme je ne sais pas où voici qlques explications qui j'espère t'aiderons à comprendre un petit peu mieux.
Ca risque d'être un peu long , alors let's go !
D'abord quelques notions qui t'éviterons les pièges dans lesquels je suis tombé.
1- Le navigateur analyse et interprète chaque ligne de la page, il la charge complètement en mémoire avant de l'afficher.
2- Si durant cette phase du code JS est rencontré il est exécuté, avant même donc que la page ne soit affichée.
3- L'événement onload qui se rencontre notamment dans le tag <BODY> n'a lieu qu'après le chargement et l'affichage complet de la page, donc après la lecture de la balise </HTML> : il devrait donc s'appeler onafterload voir onloaded mais bon ...
4- La syntaxe JS n'est pas tt à fait la même d'un navigateur à l'autre, notemment entre IE et NS. Le pire c'est que cela n'entraîne pas tjrs une erreur !
Rappels :
_______
En HTML , un commentaire dans un page commence par <!--
et se termine par -->
En JavaScript les commentaires suivent les règles du C, dont il reprend une bonne partie de la syntaxe d'ailleurs.
Pour mettre une ligne en commentaire il suffit de la faire précéder par 2 slashs //
Pour mettre plusieurs lignes en commentaire, il faut commencer par /* et terminer par */
A éviter : les mix entre // et /* ...
Variables locales et globales avec JS :
_______________________________
Les variables globales sont des variables qui sont accessibles partout dans le code JS une fois qu'elles sont définies et qui ne seront effacées de la mémoire qu'après la fermeture de la page HTML
Les variables locales sont des variables qui sont déclarées et accessibles uniquement à l'intérieure d'une fonction. A la sortir de la fonction la variable locale est "supprimée".
Pour définir le fait qu'on puisse accèder ou non à une variable à partir d'une endoit précis d'un prog, on dit souvent qu'une variable à une portée ou encore une visibilité globale ou locale. Tu rencontreras très souvent ces termes.
Comment déclarer une variable locale ?
________________________________
<SCRIPT LANGUAGE="Javascript1.2">
<!--
function ma_fonction()
{
var ma_variable_locale="POUR MOI SEUL";
}
// !-->
</SCRIPT>
La variable locale n'a de sens que dans une fonction et doit OBLIGATOIREMENT être précédée du mot "VAR". Sinon tu créés un variable globale ! Si c'est volontaire no problemo, mais croire qu'on a affaire à une variable locale alors qu'elle est globale peut engendrer des effets de bord plutot gênants. La réciproque par contre n'est pas vrai car une variable locale "masque" une variable globale si elle porte le même nom. En effet la variable locale est tjrs prioritaire dans sa portée (cad la fonction CQFD).
Comment déclarer une variable globale ?
_________________________________
<SCRIPT LANGUAGE="Javascript1.2">
<!--
var ma_variable_globale="POUR TOUS"
ma_variable_globale_2="POUR TOUS 2"
// !-->
</SCRIPT>
On peut faire précéder la variable du mot "VAR" même si ce n'est pas obligatoire.
Autre forme à méditer :
<SCRIPT LANGUAGE="Javascript1.2">
<!--
function ma_fonction()
{
ma_variable_globale="POUR TOUS"
}
// !-->
</SCRIPT>
Hé oui, c'est bien une variable globale !
Mais cette syntaxe est-elle recommandée ? Je n'en sais rien.
En tout cas elle marche et c'est bien pratique pour déclarer des variables globales qui ne peuvent être correctement initialisées qu'après le chargement de la page. Ca évite de les prédéclarer ou pire de les déclarer dans le tag <BODY>, méthode pas vraiment top avec les scripts externes.
J'en conclus donc que sans le préfixe "VAR" = variable globale, poutant les docs sur JS ne semble pas adopter ce principe. Va comprendre ...
Où mettre du code JS dans une page HTML ?
___________________________________
On peut soit le mettre dans le tag <HEAD> (conseillé :-) ) soit dans le tag <BODY> (bof :-( )
Cela dit l'insertion de code directement dans le tag <BODY> marche qd ça veut, surtout avec NetScape ... Méfiance donc !
En fait sauf si tu souhaites modifier dynamiquement le contenu de
certains éléments de la page HTML au chargement, un script n'a à mon avis rien à faire dans le tag <BODY>.
Le code JS proprement dit lui doit être insèré à l'intérieur des balises <SCRIPT ...> et </SCRIPT> comme ceci :
<HTML>
<HEAD>
<SCRIPT LANGUAGE="Javascript">
<!--
// Mettre ici le code JS
// -->
</SCRIPT>
</HEAD>
<BODY>
...
</BODY>
</HTML>
Explications :
Dans la balise <SCRIPT> on indique le type de language utilisé on peut aussi indiquer la version. A priori ça marche aussi sans mais c'est + clair.
On insère ensuite tt le code JS à l'intérieur d'un commentaire du pt de vue html. Il faut bien comprendre que, pour l'instant, c'est encore le module qui traite la partie HTML pure et dure qui à la main, ce qui permet aux navigateurs qui ne prennent pas en chg JS d'ignorer le code purement et simplement.
Si le navigateur supporte JS le code présent ds chaque balise <SCRIPT> (il peut y en avoir plusieurs rien ne l'interdit) la main passe au module qui sait traiter ce type de code.
Rem : je parle de modules pour bien faire la distinction entre JS et HTML , qt à savoir si cela se passe exactement comme çà je n'en sais rien, ce n'est pas moi qui a programmé les browsers, mais ça paraît logique.
A la fin comme JS ne comprendrait pas la séquence --> , que HTML lui reconnaît, on la transforme en un commentaire, d'où les 2 slashs devant. Rusé !
Enfin la balise </SCRIPT> marque la fin du code.
Utilisation d'un script externe
________________________
Tu as écrit un super script et tu aimerais bien qu'il soit actif sur chaque page. Seulement voilà non seulement ton script est long (500 lignes par ex) et en + ton site comporte 20 pages.
Première chose à laquelle on pense c'est de recopier le script sur chaque page. Ouais ... faut voir, en cas de bug ou de modifs t'es bon pour corriger les 20 pages avec tout les risques d'erreur que ça comporte. En + à chaque fois qu'un internaute va charger une de tes pages il va recharger ces fichues 500 lignes.
Bref c'est pas viable, il doit bien exister un autre moyen ! Evidemment ... et c'est le script externe.
Un script externe est simplement un fichier dans lequel tu recopie tout le code JS que tu as placé entre les balises <SCRIPT> et </SCRIPT> sans le commentaires pour html et dont l'extension est par convention JS. Ce dernier est ensuite intégré dans la page HTML à l'aide d'une commande un peu particulière.
Ex :
Fichier mon_code.js :
function ma_fonction()
{
ma_variable_globale="POUR TOUS";
alert(ma_variable_globale);
}
La page HTML avec appel au script externe :
<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript" SCR="mon_code.js"></SCRIPT>
</HEAD>
<BODY onload="ma_fonction()">
...
</BODY>
</HTML>
Et voilà le travail, tu n'as plus qu'un seul script à gérer et en + le fichier n'est téléchargé qu'une seule fois par les internautes.
Naturellement cela ne te dispense pas de faire les adaptations nécessaires dans chaques pages ne serait-ce que pour appeler le script comme dans l'ex avec l'événement onload, mais rien de comparable.
Personnellement j'utilise toujours ce procédé.
Qd le code JS est-il exécuté ?
________________________
Le code JS est exécuté au fur et à mesure de la lecture de la page par le navigateur.
Cependant seul le code qui NE FAIT PAS PARTIE D'UNE FONCTION est exécuté.
Ex :
<HEAD>
<SCRIPT
<!--
var phrase="Hello"
// Cette fct est analysée mais pas exécutée comme ttes les fcts
function test()
{
phrase+= " the word"
}
// Ceci sera exécuté
alert(phrase);
// -->
</SCRIPT>
</HEAD>
1) Initialise la variable globale [phrase] avec le contenu "Hello"
2) Stocke qlque part en mémoire (du - je le suppose) la fonction test() SANS L'EXECUTER (çà par contre c'est sûr et certain !)
3) Affiche un petite boîte de dialogue avec le mot "Hello" avant même que la page html soit chargée.
Par contre :
<HEAD>
<SCRIPT
<!--
var phrase="Hello"
function test()
{
phrase+= " the word"
}
// Ce qui suit est exécuté
test(); // Exécute un appel de la fonction test()
alert(phrase);
// -->
</SCRIPT>
</HEAD>
1) Initialise la variable globale [phrase] avec le contenu "Hello"
2) Stocke qlque part en mémoire (du moins je le suppose) la fonction test() SANS L'EXECUTER (çà par contre c'est sûr et certain !)
3) Exécute la fonction test() et donc ajoute " the world" à [phrase] qui devient "Hello the world"
3) Affiche un petite boîte de dialogue avec la phrase "Hello the world" avant même que la page html soit chargée.
Conclusion : une fonction est ignorée sauf si elle est explicitement appelée.
Ensuite une fois la page chargé le code est exécuté suivant les événements que tu as programmés (faut bien travailler un peu de tps en tps), ou automatiquement à un intervalle régulier si tu as mis en place un timer. Tu peux par ex afficher l'heure en temps réel sur ta page. Même si ça n'a pas un grand intérêt du point de vue de la page elle-même (l'utilisateur à souvent déjà l'heure qlque part sur son écran) c'est par contre intérressant au niveau de la prog en JS.
Bon, voilà c'est tout pour cette fois-ci, la programmation des objets, les méthodes, les constructeurs, les prototypes, les propriétés (et le pointeur "this' of course ...) et tout ce qui fait que l'informatique semble parfois bien innaccessible au prochain épisode (le texte est déjà presque près). Si bien sûr tu es tjrs interressé car je ne sais pas si tu es au courant mais il m'a fallut qd même pas mal de temps pour taper ce truc !
A+
Philippe
Allons, JavaScript c'est pas si dur que ça en a l'air ! Je ne dis pas que c'est tjrs évident surtout si tu ne connais aucun autre langage mais comparé au C ou C++ c'est vraiment beaucoup + simple.
Pas de pointeurs (ou presque), typage dynamique, allocation et désallocation de la mémoire dynamique et automatique (en gros t'a rien à faire),toute fonction est déjà un objet ...
Je suppose qu'il doit exister un cours sur CCM qui t'explique tout sur JS, mais comme je ne sais pas où voici qlques explications qui j'espère t'aiderons à comprendre un petit peu mieux.
Ca risque d'être un peu long , alors let's go !
D'abord quelques notions qui t'éviterons les pièges dans lesquels je suis tombé.
1- Le navigateur analyse et interprète chaque ligne de la page, il la charge complètement en mémoire avant de l'afficher.
2- Si durant cette phase du code JS est rencontré il est exécuté, avant même donc que la page ne soit affichée.
3- L'événement onload qui se rencontre notamment dans le tag <BODY> n'a lieu qu'après le chargement et l'affichage complet de la page, donc après la lecture de la balise </HTML> : il devrait donc s'appeler onafterload voir onloaded mais bon ...
4- La syntaxe JS n'est pas tt à fait la même d'un navigateur à l'autre, notemment entre IE et NS. Le pire c'est que cela n'entraîne pas tjrs une erreur !
Rappels :
_______
En HTML , un commentaire dans un page commence par <!--
et se termine par -->
En JavaScript les commentaires suivent les règles du C, dont il reprend une bonne partie de la syntaxe d'ailleurs.
Pour mettre une ligne en commentaire il suffit de la faire précéder par 2 slashs //
Pour mettre plusieurs lignes en commentaire, il faut commencer par /* et terminer par */
A éviter : les mix entre // et /* ...
Variables locales et globales avec JS :
_______________________________
Les variables globales sont des variables qui sont accessibles partout dans le code JS une fois qu'elles sont définies et qui ne seront effacées de la mémoire qu'après la fermeture de la page HTML
Les variables locales sont des variables qui sont déclarées et accessibles uniquement à l'intérieure d'une fonction. A la sortir de la fonction la variable locale est "supprimée".
Pour définir le fait qu'on puisse accèder ou non à une variable à partir d'une endoit précis d'un prog, on dit souvent qu'une variable à une portée ou encore une visibilité globale ou locale. Tu rencontreras très souvent ces termes.
Comment déclarer une variable locale ?
________________________________
<SCRIPT LANGUAGE="Javascript1.2">
<!--
function ma_fonction()
{
var ma_variable_locale="POUR MOI SEUL";
}
// !-->
</SCRIPT>
La variable locale n'a de sens que dans une fonction et doit OBLIGATOIREMENT être précédée du mot "VAR". Sinon tu créés un variable globale ! Si c'est volontaire no problemo, mais croire qu'on a affaire à une variable locale alors qu'elle est globale peut engendrer des effets de bord plutot gênants. La réciproque par contre n'est pas vrai car une variable locale "masque" une variable globale si elle porte le même nom. En effet la variable locale est tjrs prioritaire dans sa portée (cad la fonction CQFD).
Comment déclarer une variable globale ?
_________________________________
<SCRIPT LANGUAGE="Javascript1.2">
<!--
var ma_variable_globale="POUR TOUS"
ma_variable_globale_2="POUR TOUS 2"
// !-->
</SCRIPT>
On peut faire précéder la variable du mot "VAR" même si ce n'est pas obligatoire.
Autre forme à méditer :
<SCRIPT LANGUAGE="Javascript1.2">
<!--
function ma_fonction()
{
ma_variable_globale="POUR TOUS"
}
// !-->
</SCRIPT>
Hé oui, c'est bien une variable globale !
Mais cette syntaxe est-elle recommandée ? Je n'en sais rien.
En tout cas elle marche et c'est bien pratique pour déclarer des variables globales qui ne peuvent être correctement initialisées qu'après le chargement de la page. Ca évite de les prédéclarer ou pire de les déclarer dans le tag <BODY>, méthode pas vraiment top avec les scripts externes.
J'en conclus donc que sans le préfixe "VAR" = variable globale, poutant les docs sur JS ne semble pas adopter ce principe. Va comprendre ...
Où mettre du code JS dans une page HTML ?
___________________________________
On peut soit le mettre dans le tag <HEAD> (conseillé :-) ) soit dans le tag <BODY> (bof :-( )
Cela dit l'insertion de code directement dans le tag <BODY> marche qd ça veut, surtout avec NetScape ... Méfiance donc !
En fait sauf si tu souhaites modifier dynamiquement le contenu de
certains éléments de la page HTML au chargement, un script n'a à mon avis rien à faire dans le tag <BODY>.
Le code JS proprement dit lui doit être insèré à l'intérieur des balises <SCRIPT ...> et </SCRIPT> comme ceci :
<HTML>
<HEAD>
<SCRIPT LANGUAGE="Javascript">
<!--
// Mettre ici le code JS
// -->
</SCRIPT>
</HEAD>
<BODY>
...
</BODY>
</HTML>
Explications :
Dans la balise <SCRIPT> on indique le type de language utilisé on peut aussi indiquer la version. A priori ça marche aussi sans mais c'est + clair.
On insère ensuite tt le code JS à l'intérieur d'un commentaire du pt de vue html. Il faut bien comprendre que, pour l'instant, c'est encore le module qui traite la partie HTML pure et dure qui à la main, ce qui permet aux navigateurs qui ne prennent pas en chg JS d'ignorer le code purement et simplement.
Si le navigateur supporte JS le code présent ds chaque balise <SCRIPT> (il peut y en avoir plusieurs rien ne l'interdit) la main passe au module qui sait traiter ce type de code.
Rem : je parle de modules pour bien faire la distinction entre JS et HTML , qt à savoir si cela se passe exactement comme çà je n'en sais rien, ce n'est pas moi qui a programmé les browsers, mais ça paraît logique.
A la fin comme JS ne comprendrait pas la séquence --> , que HTML lui reconnaît, on la transforme en un commentaire, d'où les 2 slashs devant. Rusé !
Enfin la balise </SCRIPT> marque la fin du code.
Utilisation d'un script externe
________________________
Tu as écrit un super script et tu aimerais bien qu'il soit actif sur chaque page. Seulement voilà non seulement ton script est long (500 lignes par ex) et en + ton site comporte 20 pages.
Première chose à laquelle on pense c'est de recopier le script sur chaque page. Ouais ... faut voir, en cas de bug ou de modifs t'es bon pour corriger les 20 pages avec tout les risques d'erreur que ça comporte. En + à chaque fois qu'un internaute va charger une de tes pages il va recharger ces fichues 500 lignes.
Bref c'est pas viable, il doit bien exister un autre moyen ! Evidemment ... et c'est le script externe.
Un script externe est simplement un fichier dans lequel tu recopie tout le code JS que tu as placé entre les balises <SCRIPT> et </SCRIPT> sans le commentaires pour html et dont l'extension est par convention JS. Ce dernier est ensuite intégré dans la page HTML à l'aide d'une commande un peu particulière.
Ex :
Fichier mon_code.js :
function ma_fonction()
{
ma_variable_globale="POUR TOUS";
alert(ma_variable_globale);
}
La page HTML avec appel au script externe :
<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript" SCR="mon_code.js"></SCRIPT>
</HEAD>
<BODY onload="ma_fonction()">
...
</BODY>
</HTML>
Et voilà le travail, tu n'as plus qu'un seul script à gérer et en + le fichier n'est téléchargé qu'une seule fois par les internautes.
Naturellement cela ne te dispense pas de faire les adaptations nécessaires dans chaques pages ne serait-ce que pour appeler le script comme dans l'ex avec l'événement onload, mais rien de comparable.
Personnellement j'utilise toujours ce procédé.
Qd le code JS est-il exécuté ?
________________________
Le code JS est exécuté au fur et à mesure de la lecture de la page par le navigateur.
Cependant seul le code qui NE FAIT PAS PARTIE D'UNE FONCTION est exécuté.
Ex :
<HEAD>
<SCRIPT
<!--
var phrase="Hello"
// Cette fct est analysée mais pas exécutée comme ttes les fcts
function test()
{
phrase+= " the word"
}
// Ceci sera exécuté
alert(phrase);
// -->
</SCRIPT>
</HEAD>
1) Initialise la variable globale [phrase] avec le contenu "Hello"
2) Stocke qlque part en mémoire (du - je le suppose) la fonction test() SANS L'EXECUTER (çà par contre c'est sûr et certain !)
3) Affiche un petite boîte de dialogue avec le mot "Hello" avant même que la page html soit chargée.
Par contre :
<HEAD>
<SCRIPT
<!--
var phrase="Hello"
function test()
{
phrase+= " the word"
}
// Ce qui suit est exécuté
test(); // Exécute un appel de la fonction test()
alert(phrase);
// -->
</SCRIPT>
</HEAD>
1) Initialise la variable globale [phrase] avec le contenu "Hello"
2) Stocke qlque part en mémoire (du moins je le suppose) la fonction test() SANS L'EXECUTER (çà par contre c'est sûr et certain !)
3) Exécute la fonction test() et donc ajoute " the world" à [phrase] qui devient "Hello the world"
3) Affiche un petite boîte de dialogue avec la phrase "Hello the world" avant même que la page html soit chargée.
Conclusion : une fonction est ignorée sauf si elle est explicitement appelée.
Ensuite une fois la page chargé le code est exécuté suivant les événements que tu as programmés (faut bien travailler un peu de tps en tps), ou automatiquement à un intervalle régulier si tu as mis en place un timer. Tu peux par ex afficher l'heure en temps réel sur ta page. Même si ça n'a pas un grand intérêt du point de vue de la page elle-même (l'utilisateur à souvent déjà l'heure qlque part sur son écran) c'est par contre intérressant au niveau de la prog en JS.
Bon, voilà c'est tout pour cette fois-ci, la programmation des objets, les méthodes, les constructeurs, les prototypes, les propriétés (et le pointeur "this' of course ...) et tout ce qui fait que l'informatique semble parfois bien innaccessible au prochain épisode (le texte est déjà presque près). Si bien sûr tu es tjrs interressé car je ne sais pas si tu es au courant mais il m'a fallut qd même pas mal de temps pour taper ce truc !
A+
Philippe
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body bgcolor="#FFFFFF" onLoad='javascript:alert(Math.round(Math.random()*10))'>
</body>
</html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body bgcolor="#FFFFFF" onLoad='javascript:alert(Math.round(Math.random()*10))'>
</body>
</html>
Je connais un site de trucs et astuces sur le Java Script, il y a même des exemples (le lien est sur mon site www.abauffe.fr.st dans la rubrique liens, c'est l'éditeur JavaScript)
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
KeyBoss
Messages postés
24
Date d'inscription
samedi 3 février 2001
Statut
Membre
Dernière intervention
4 mars 2001
2
8 févr. 2001 à 14:39
8 févr. 2001 à 14:39
Merci pour tes longues explications, je trouve que l'article sur le JS de CCM n'est pas tres complet, tu m'a bien aider :), mais pourquoi ne faittu pas un site avec un guide sur le javascript ou mieux, tu l'envoi sur CCM puiske t'a l'air de bien t'y conaitre :).
Ce qui m'enerve c'est les erreurs, ca ne sert jamais a rien ! deja on a du mal a comprendre, en plus chu sur k'elle sont bugé ! defois ca me dit qu'il faut une parenthese alors qu'elles sont toute equilibrés !! ca m'enerve !!!
Pour l'instant j'essaye de faire de petit trucs, ca marche jamais du 1er coup mais a force de reflechir je trouve enfin l'erreur !
Si j'ai un probleme je reposterait dans cette diskus :)
Ps: je conait l'editeur javascript, mais ca n'aprend rien, c'est juste du code a copier/coller, ce qu'il me faudrait, c'est des exemples expliqués en detail...
Ce qui m'enerve c'est les erreurs, ca ne sert jamais a rien ! deja on a du mal a comprendre, en plus chu sur k'elle sont bugé ! defois ca me dit qu'il faut une parenthese alors qu'elles sont toute equilibrés !! ca m'enerve !!!
Pour l'instant j'essaye de faire de petit trucs, ca marche jamais du 1er coup mais a force de reflechir je trouve enfin l'erreur !
Si j'ai un probleme je reposterait dans cette diskus :)
Ps: je conait l'editeur javascript, mais ca n'aprend rien, c'est juste du code a copier/coller, ce qu'il me faudrait, c'est des exemples expliqués en detail...
Jean-François Pillou
Messages postés
19261
Date d'inscription
lundi 15 février 1999
Statut
Webmaster
Dernière intervention
16 février 2023
63 274
8 févr. 2001 à 14:45
8 févr. 2001 à 14:45
Une fois de plus, n'hésitez pas à ajouter des annotations en bas des pages sur le javascript pour enrichir la documentation ...
C'est une nouvelle fonctionnalité de CCM qui date du début de la semaine ... faites en grand usage !!! :)
Il suffit d'aller en bas de chaque article, puis cliquer sur "ajouter un commentaire" ou bien cliquer sur la petite icone dans le menu avec un texte et une petite marque rouge (elle apparait uniquement dans les menus des articles)
C'est une nouvelle fonctionnalité de CCM qui date du début de la semaine ... faites en grand usage !!! :)
Il suffit d'aller en bas de chaque article, puis cliquer sur "ajouter un commentaire" ou bien cliquer sur la petite icone dans le menu avec un texte et une petite marque rouge (elle apparait uniquement dans les menus des articles)
KeyBoss
Messages postés
24
Date d'inscription
samedi 3 février 2001
Statut
Membre
Dernière intervention
4 mars 2001
2
8 févr. 2001 à 19:18
8 févr. 2001 à 19:18
Bon j'ai une nouvelle question : j'ai fait un menu, et je veut que quant on clique sur un bouton, il s'enfonce (en fait il charge une autre image) et qu'au bou de 5 secondes, il revienne a son etat normal, mais je sais pas du tout comment gerer le temps en js.
paske sinon, pour le faire changer d'image, j'ai reussi, j'ai meme reussi a faire que quant on clique sur un autre bouton, le 1er remonte et celui sur lekel on vient de cliker s'enfonce...
paske sinon, pour le faire changer d'image, j'ai reussi, j'ai meme reussi a faire que quant on clique sur un autre bouton, le 1er remonte et celui sur lekel on vient de cliker s'enfonce...
PhP
Messages postés
1770
Date d'inscription
lundi 11 décembre 2000
Statut
Membre
Dernière intervention
23 décembre 2009
606
9 févr. 2001 à 01:27
9 févr. 2001 à 01:27
Slt KeyBoss,
Pour gérer le temps en JS, il existe une fct tte faite que va règler ton pb : setTimeout() bien faire attention à la case !
Tu parles d'un bouton, je suppose qu'il s'agit d'une image à l'intérieur d'un lien hypertext, non ?
Comme tu ne précises pas ce que fait ton bouton, dans mon exemple il ne fait précisement RIEN !
Ca à l'air con mais inclure un lien hypertext qui ne fait rien et qui fonctionnne (j'entends par là que le pointeur de la souris change de forme lorsqu'on le survol) c'est pas forcement évident.
Dans la série, j'ai testé pour vous voici le bouton qui reprend tout seul sa forme initiale ...
Ex :
Supposons que tu as 2 images :
bouton_presse.jpg et bouton_relache.jpg
<html>
<head>
<script>
<!--
// Je paramètre le delai c'est tjrs + propre que de l'écrire en "dur"
//
var delai=5000;
var bt_presse=new Image();
bt_presse.src="bouton_presse.jpg";
var bt_relache=new Image();
bt_relache.src="bouton_relache.jpg";
var timer_id=0;
function presser()
{
bouton.src=bt_relache.src;
}
function presser()
{
//Change l'image du tag <IMG> dont le nom est 'bouton'
bouton.src=bt_presse.src;
// Déclencher la fonction relacher() dans 5000 millisecondes soient
// 5 secondes
timer_id=setTimeout("relacher()",delai);
}
//-->
</script>
</head>
<body>
<a href="javascript:void(0)" onclick="presser();return false;">
<img name="bouton" border="0" src="bouton_relache.jpg"> </a>
</body>
</html>
Explications :
On créé d'abord 2 objets de type Image ou encore 2 instances de l'objet Image grâce à l'opérateur new (y'a pas photo c'est mieux qd on connait les objets) : bt_presse et bt_relache.
Ensuite on affcete à la propriété 'src' le nom du fichier jpg ou gif qu'on souhaite utiliser : ceci entraîne le chargement de l'image en mémoire comme çà on est tranquille.
Nota : si l'image est importante cela retarde d'autant le chargement de la page html.
function relacher() :
change l'image du tag <IMG> dont le nom est "bouton" et la remplace par l'image contenu dans l'objet bt_relache.
Tu noteras que le navigateur créé également ses propres objets images : "bouton" est aussi un objet de type Image sauf qu'il n'a pas été créé explicitement.
function presser() :
change l'image du tag <IMG> dont le nom est "bouton" et la remplace par l'image contenu dans l'objet bt_relache.
utilise setTimeout() pour programmer l'exécution de la fonction relacher() dans 5 secondes. Le délai est modifiable grâce à la variable globale [delai] mais rien ne t'oblige à passer par une variable, tu peux aussi saisir directement 5000 dans setTimeout().
La syntaxe de la fonction setTimeout() :
________________________________
[id_timer=]setTimeout(fonction, délai)
fonction :
nom de la fonction à exécuter. Ce nom doit être placé à l'intérieur d'une chaîne de caractères donc entre guillemets. Ne pas oublier ( ) à la fin.
Je crois qu'il est également possible de passer des paramètres à la fct.
délai :
durée en millisecondes au bout de laquelle la fonction sera appelée.
Valeur retournée
id_timer :
Conservé la valeur retounée est facultatif !
Cette valeur est un identifiant pour le nouveau timer créé.
L'intérêt de conserver cet identifiant est de pouvoir annuler l'exécution du timer avec la fct clearTimeout(id_timer)
Si l'identifiant doit être conservé, il faut le stocker dans un variable globale !
Important : il n'est pas possible de programmer plusieurs timer simultanement !
Nota : il existe une autre fct setInterval(fonction, delai) qui elle répéte indéfiniment l'appelle de la fonction toute les n millisecondes jusqu'à ce que tu appelles la fct clearInterval(id_timer)
Les timers sont automatqiement supprimés qd la page html est fermé même si tu ne fais pas appel à clearInteral() ou clearTimeout() : heureusement !
Enfin dans la page html on utilise l'événement onclick pour appeler la fct presser() qui elle même dc va mettre en place le timer et le tour est joué. Cool :-)
href="javascript:void(0)" : exécute une fonction javascript lorsqu'on clique sur le lien au lieu d'appeler une autre page html par ex.
void(expression) évalue l'expression sans retourner de valeur.
void(0) évalue 0 ce qui n'a pas d'effet en JS.
Le reste est classique, il faut qd même penser à donner un nom (avec name="...") à l'image dans le tag <IMG> sinon ça ne marche pas !
Et voilà !
En + ca marche avec IE et NS, elle est pas belle la vie :-)
Tu sais maintenant comment certains sites font pour surcharger ton écran de pubs en ouvrant une nouvelle fenêtre toutes les minutes sans que tu cliques nulle part : ils utilisent les timers !
Qt à mon site perso sur nexen, je suis en train de le développer avec pleins d'objet JS comme tu les aimes mais il va falloir patienter encore un peu surtout que je n'ai aucune idée du look que je vais lui donner et c'est le + long.
A+
Pour gérer le temps en JS, il existe une fct tte faite que va règler ton pb : setTimeout() bien faire attention à la case !
Tu parles d'un bouton, je suppose qu'il s'agit d'une image à l'intérieur d'un lien hypertext, non ?
Comme tu ne précises pas ce que fait ton bouton, dans mon exemple il ne fait précisement RIEN !
Ca à l'air con mais inclure un lien hypertext qui ne fait rien et qui fonctionnne (j'entends par là que le pointeur de la souris change de forme lorsqu'on le survol) c'est pas forcement évident.
Dans la série, j'ai testé pour vous voici le bouton qui reprend tout seul sa forme initiale ...
Ex :
Supposons que tu as 2 images :
bouton_presse.jpg et bouton_relache.jpg
<html>
<head>
<script>
<!--
// Je paramètre le delai c'est tjrs + propre que de l'écrire en "dur"
//
var delai=5000;
var bt_presse=new Image();
bt_presse.src="bouton_presse.jpg";
var bt_relache=new Image();
bt_relache.src="bouton_relache.jpg";
var timer_id=0;
function presser()
{
bouton.src=bt_relache.src;
}
function presser()
{
//Change l'image du tag <IMG> dont le nom est 'bouton'
bouton.src=bt_presse.src;
// Déclencher la fonction relacher() dans 5000 millisecondes soient
// 5 secondes
timer_id=setTimeout("relacher()",delai);
}
//-->
</script>
</head>
<body>
<a href="javascript:void(0)" onclick="presser();return false;">
<img name="bouton" border="0" src="bouton_relache.jpg"> </a>
</body>
</html>
Explications :
On créé d'abord 2 objets de type Image ou encore 2 instances de l'objet Image grâce à l'opérateur new (y'a pas photo c'est mieux qd on connait les objets) : bt_presse et bt_relache.
Ensuite on affcete à la propriété 'src' le nom du fichier jpg ou gif qu'on souhaite utiliser : ceci entraîne le chargement de l'image en mémoire comme çà on est tranquille.
Nota : si l'image est importante cela retarde d'autant le chargement de la page html.
function relacher() :
change l'image du tag <IMG> dont le nom est "bouton" et la remplace par l'image contenu dans l'objet bt_relache.
Tu noteras que le navigateur créé également ses propres objets images : "bouton" est aussi un objet de type Image sauf qu'il n'a pas été créé explicitement.
function presser() :
change l'image du tag <IMG> dont le nom est "bouton" et la remplace par l'image contenu dans l'objet bt_relache.
utilise setTimeout() pour programmer l'exécution de la fonction relacher() dans 5 secondes. Le délai est modifiable grâce à la variable globale [delai] mais rien ne t'oblige à passer par une variable, tu peux aussi saisir directement 5000 dans setTimeout().
La syntaxe de la fonction setTimeout() :
________________________________
[id_timer=]setTimeout(fonction, délai)
fonction :
nom de la fonction à exécuter. Ce nom doit être placé à l'intérieur d'une chaîne de caractères donc entre guillemets. Ne pas oublier ( ) à la fin.
Je crois qu'il est également possible de passer des paramètres à la fct.
délai :
durée en millisecondes au bout de laquelle la fonction sera appelée.
Valeur retournée
id_timer :
Conservé la valeur retounée est facultatif !
Cette valeur est un identifiant pour le nouveau timer créé.
L'intérêt de conserver cet identifiant est de pouvoir annuler l'exécution du timer avec la fct clearTimeout(id_timer)
Si l'identifiant doit être conservé, il faut le stocker dans un variable globale !
Important : il n'est pas possible de programmer plusieurs timer simultanement !
Nota : il existe une autre fct setInterval(fonction, delai) qui elle répéte indéfiniment l'appelle de la fonction toute les n millisecondes jusqu'à ce que tu appelles la fct clearInterval(id_timer)
Les timers sont automatqiement supprimés qd la page html est fermé même si tu ne fais pas appel à clearInteral() ou clearTimeout() : heureusement !
Enfin dans la page html on utilise l'événement onclick pour appeler la fct presser() qui elle même dc va mettre en place le timer et le tour est joué. Cool :-)
href="javascript:void(0)" : exécute une fonction javascript lorsqu'on clique sur le lien au lieu d'appeler une autre page html par ex.
void(expression) évalue l'expression sans retourner de valeur.
void(0) évalue 0 ce qui n'a pas d'effet en JS.
Le reste est classique, il faut qd même penser à donner un nom (avec name="...") à l'image dans le tag <IMG> sinon ça ne marche pas !
Et voilà !
En + ca marche avec IE et NS, elle est pas belle la vie :-)
Tu sais maintenant comment certains sites font pour surcharger ton écran de pubs en ouvrant une nouvelle fenêtre toutes les minutes sans que tu cliques nulle part : ils utilisent les timers !
Qt à mon site perso sur nexen, je suis en train de le développer avec pleins d'objet JS comme tu les aimes mais il va falloir patienter encore un peu surtout que je n'ai aucune idée du look que je vais lui donner et c'est le + long.
A+
PhP
Messages postés
1770
Date d'inscription
lundi 11 décembre 2000
Statut
Membre
Dernière intervention
23 décembre 2009
606
9 févr. 2001 à 01:31
9 févr. 2001 à 01:31
Oups !!!
A la place de
function presser()
{
bouton.src=bt_relache.src;
}
il fallait naturellement lire :
function relacher()
{
bouton.src=bt_relache.src;
}
Mais tu auras corrigé de toi même ...
Bye
A la place de
function presser()
{
bouton.src=bt_relache.src;
}
il fallait naturellement lire :
function relacher()
{
bouton.src=bt_relache.src;
}
Mais tu auras corrigé de toi même ...
Bye
KeyBoss
Messages postés
24
Date d'inscription
samedi 3 février 2001
Statut
Membre
Dernière intervention
4 mars 2001
2
9 févr. 2001 à 18:52
9 févr. 2001 à 18:52
Merci tu m'a bien expliké :)
Y'a juste kelkes trucs que j'ai pas compris :
- Pourquoi faut-il metre les evenements dans les liens ? Moi je les ai mi dans les images ca marche tres bien :)
- a koi ca sert de metre javascript:void(0) ? je met simplement # et ca ne fait rien quant on clique...
- j'ai pas compris cette fonction void, void(expression), ca veut dire koi evaluer sans retourner de valeur ??? depuis le debut, on me dit dit retourner tel valeur, etc... mais ca veut dire koi retourner une valeur ? la prendre et la metre dans l'aut sens ? "expression" c une variable ? ou c un genre de fonction ou autres ?
- je comprend pas pourkoi IE me dit que la constante de chaine est non terminé, pourtant j'ai bien alterné les " et les ' :
onClick="ecrire=5; enfonce(); setTimeout('alert(" sqdfs ")', 5000)"
- a oui, timer-id est fait pour retourner une valeur, ca veut dire koi ca ??? je crois comprendre que en fait ca donne un nom a la fonction qui enclenche le compte a rebour pour k'on puisse l'arreter...
- ensuite onClick="presser(); return false" encore ce retournement de valeur !!!! keski fait la ???
- avec la fonction setTimeout(), est-ce qu'on peut metre autre chose qu'une fonction a executé ? j'aimerait juste changer la valeur d'une variable, c plus long de créer une nouvelle fonction juste pour ca.
Bon c tout pour l'instant :)
A part que j'arrive toujours pas a faire ce que je voulais a cause de cette constante de chaine non terminé (ou alors, on peut peut pas y passer de parametres a la fonction setTimeout() )
Enfin... avec tout ces conseils j'ai reussi a faire mon menu, si vous voulez aller y faire un tour pour voir, c a cette adresse : http://www.forge-aok.com
il reste juste le bouton M'ecrire qui doit s'enfoncer et se relever 2 secondes apres :)
Y'a juste kelkes trucs que j'ai pas compris :
- Pourquoi faut-il metre les evenements dans les liens ? Moi je les ai mi dans les images ca marche tres bien :)
- a koi ca sert de metre javascript:void(0) ? je met simplement # et ca ne fait rien quant on clique...
- j'ai pas compris cette fonction void, void(expression), ca veut dire koi evaluer sans retourner de valeur ??? depuis le debut, on me dit dit retourner tel valeur, etc... mais ca veut dire koi retourner une valeur ? la prendre et la metre dans l'aut sens ? "expression" c une variable ? ou c un genre de fonction ou autres ?
- je comprend pas pourkoi IE me dit que la constante de chaine est non terminé, pourtant j'ai bien alterné les " et les ' :
onClick="ecrire=5; enfonce(); setTimeout('alert(" sqdfs ")', 5000)"
- a oui, timer-id est fait pour retourner une valeur, ca veut dire koi ca ??? je crois comprendre que en fait ca donne un nom a la fonction qui enclenche le compte a rebour pour k'on puisse l'arreter...
- ensuite onClick="presser(); return false" encore ce retournement de valeur !!!! keski fait la ???
- avec la fonction setTimeout(), est-ce qu'on peut metre autre chose qu'une fonction a executé ? j'aimerait juste changer la valeur d'une variable, c plus long de créer une nouvelle fonction juste pour ca.
Bon c tout pour l'instant :)
A part que j'arrive toujours pas a faire ce que je voulais a cause de cette constante de chaine non terminé (ou alors, on peut peut pas y passer de parametres a la fonction setTimeout() )
Enfin... avec tout ces conseils j'ai reussi a faire mon menu, si vous voulez aller y faire un tour pour voir, c a cette adresse : http://www.forge-aok.com
il reste juste le bouton M'ecrire qui doit s'enfoncer et se relever 2 secondes apres :)
KeyBoss
Messages postés
24
Date d'inscription
samedi 3 février 2001
Statut
Membre
Dernière intervention
4 mars 2001
2
10 févr. 2001 à 21:31
10 févr. 2001 à 21:31
ben non ! je veux pas ke mon message passe dans l'aut page, avant k'on m'ai repondu !
PhP
Messages postés
1770
Date d'inscription
lundi 11 décembre 2000
Statut
Membre
Dernière intervention
23 décembre 2009
606
11 févr. 2001 à 11:47
11 févr. 2001 à 11:47
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+
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+
KeyBoss
Messages postés
24
Date d'inscription
samedi 3 février 2001
Statut
Membre
Dernière intervention
4 mars 2001
2
11 févr. 2001 à 14:33
11 févr. 2001 à 14:33
J'ai tout compris :))))
juste ke :
- # c du simple html, c pour un faire un lien interne a la page, et comme aucun lien n'est precisé, ca fait rien :)
- pour l'erreur de constante de chaine, je croyait k'il falait mettre un \ uniquement devant les ' ou les " qui fesait parti du texte, pas ceux qui etait utilisé par le JS... :)
la prochaine fois ke g un probleme je repost :)
juste ke :
- # c du simple html, c pour un faire un lien interne a la page, et comme aucun lien n'est precisé, ca fait rien :)
- pour l'erreur de constante de chaine, je croyait k'il falait mettre un \ uniquement devant les ' ou les " qui fesait parti du texte, pas ceux qui etait utilisé par le JS... :)
la prochaine fois ke g un probleme je repost :)
KeyBoss
Messages postés
24
Date d'inscription
samedi 3 février 2001
Statut
Membre
Dernière intervention
4 mars 2001
2
11 févr. 2001 à 15:09
11 févr. 2001 à 15:09
voila mon autre kestion : comment optimiser ce script ? paske g 10 boutons comme ca alors ca me fait pas mal de code a marké... j'ai beau reflechir je vois pas keskeje pourait faire de plus pour le rendre plus simple.
<html><head>
<SCRIPT language="javascript">
<!--
var page=0;
function enfonce(){
if(page==1){document.a.src="images/o_articles2.gif"};
if(page!=1){document.a.src="images/o_articles.gif"};
if(page==2){document.b.src="images/o_campagnes2.gif"};
if(page!=2){document.b.src="images/o_campagnes.gif"};
}
// -->
</SCRIPT>
</head>
<body>
<a href="#" onClick="page=1; enfonce()">
<img src="images/o_articles.gif" width="109" height="22" border="0" name="a">
</a>
<a href="#" onClick="page=2; enfonce()">
<img src="images/o_campagnes.gif" width="109" height="22" border="0" name="b">
</a>
</body></html>
<html><head>
<SCRIPT language="javascript">
<!--
var page=0;
function enfonce(){
if(page==1){document.a.src="images/o_articles2.gif"};
if(page!=1){document.a.src="images/o_articles.gif"};
if(page==2){document.b.src="images/o_campagnes2.gif"};
if(page!=2){document.b.src="images/o_campagnes.gif"};
}
// -->
</SCRIPT>
</head>
<body>
<a href="#" onClick="page=1; enfonce()">
<img src="images/o_articles.gif" width="109" height="22" border="0" name="a">
</a>
<a href="#" onClick="page=2; enfonce()">
<img src="images/o_campagnes.gif" width="109" height="22" border="0" name="b">
</a>
</body></html>
KeyBoss
Messages postés
24
Date d'inscription
samedi 3 février 2001
Statut
Membre
Dernière intervention
4 mars 2001
2
11 févr. 2001 à 15:14
11 févr. 2001 à 15:14
je precise ke o_articles.gif est l'image du bouton normal et o_articles2.gif est l'image du bouton apuyer, et pareil pour l'autre image.
PhP
Messages postés
1770
Date d'inscription
lundi 11 décembre 2000
Statut
Membre
Dernière intervention
23 décembre 2009
606
13 févr. 2001 à 22:41
13 févr. 2001 à 22:41
Slt KeyBoss,
L'optimisation ... pb délicat s'il en est.
L'optimisation du code source s'attache avant tout à généraliser au maximum le code, et notamment sa réutilisation ainsi qu'à minimiser sa taille.
L'optimisation des performances, elle, passe la plus souvent par une longue phase de test. C'est souvent au niveau des boucles ou des appels de fonction imbriqués ou même de l'ordre des appels qu'on peut éventuellement faire qlque chose.Je n'en parlerais pas ici ...
Voici donc qlques trucs pour améliorer ton code :
1) Faire appel aux paramètres :
Je t'ai déjà parlé des paramètres : utilise les !
Rappel : les paramètres se comportent comme des variables locales à la différence près que tu définis leur valeur iniale lors de l'appel de la fonction et pas directement dans la fonction, même si tu es libre de les modifier à nouveau dans la fct.
2) Rendre générique les noms des images et des tag <img>
Donner un nom différent à chaque image est très parlant mais ne se prête que très peu à une quelconque optimisation
Par contre si tu nommes toutes tes images "image_"+no_image+".jpg" (image_1.jpg, image_1.jpg etc ...) tu vas permettre de généraliser beaucoup + ton code même si tu y perds en clarté.
Idem avec l'attribut "name" de tous tes tags <IMG> : dans ce cas tu peux les appeler "img_"+no_image.
Ainsi si tu nommes tous tes boutons relâchés :
"bt_relache_"+no+".gif"
tous tes boutons enfoncés :
"bt_enfonce_"+no+".gif"
et les tags <img> associés :
"img_"+no
ta fonction enfonce() devient :
var page=0
function enfonce(nr)
{
// On relache le bouton précédemment enfoncé donc encore
// stocké dans page
var elt=eval("document.img_"+page);
elt.src= "images/bt_relache_"+page+".gif";
// page prend la valeur du nouveau bouton
page=nr
// On enfonce le nouveau bouton pressé
elt=eval("document.img_"+page);
elt.src= "images/bt_enfonce_"+page+".gif";
};
Le top de l'optimisation ! :-) Enfin presque ... voir + loin
Et l'appel :
Dans la balise <body> tu as :
<a href="#" onClick=" enfonce(1)">
<img src="images/bt_relache_1.gif" width="109" height="22" border="0" name="img_1">
</a>
<a href="#" onClick=" enfonce(2)">
<img src="images/bt_relache_2.gif" width="109" height="22" border="0" name="img_2">
</a>
Evidemment pour le code html lui même on ne peut rien faire, sauf si tu modifies tes pages dynamiquement directement sur le serveur avec un langage tel que Php par ex. Donc tu es quitte pour taper les 20 boutons.
Qlques explications :
La variable globale [page] va maintenant servir à stocker le dernier bouton pressé.
La fct eval() :
___________
Cette fonction attend comme paramètre une chaîne de caractères représentant une expression JS valide et l'évalue c'est-à-dire l'exécute.
C'est un moyen de modifier dynamiquement le code à exécuter.
Groso modo tout ce que tu mets dans la chaîne devient du code comme si tu l'avais taper directement.
Cool et surtout pratique !
Exemples :
eval("2+2") renvoie 4
var n=eval("2+2") après évaluation n=4 (rappel les assignations sont évaluées de droite à gauche)
var txt1="mon texte1"
var txt2="mon texte 2"
var index=2
alert(eval("txt"+i)) affichera "mon texte 2"
En fait tout se passe comme si tu avais : alert(txt2)
alors que si tu tapes directement alert("txt2") tu obtients l'affichage du mot "txt2", nuance !
Dans enfonce() :
elt=eval("document.img_"+page);
si page vaut 1 alors cela équivaut à :
elt=document.img_1;
elt contient alors l'objet image dont le nom est "img_1" : comme je te l'ai déjà dit les navigateurs créés leurs propres objets.
Une fois que tu pointes sur un objet tu peux accèder très facilement à ses propriétes (une propriété est une variable qui ne peut être accèder qu'au travers d'un objet : pour accèder à une propriété, celle-ci doit être précédée du nom de l'objet suivi d'un point ), ou encore utiliser ses méthodes (cad les fonctions liées à l'objet : tt comme la propriété, le nom de la méthode doit être précédé du nom de l'objet suivi d'un point).
Et donc à partir de [elt] on peut modifier la propriété src de l'image.
3) Utilisation des tableaux :
Maintenant comme faire si tu tiens absolument aux noms de tes images (pour les tag <img> par contre je te conseille de faire comme ci-dessus). C'est vrai que si tu as par ex 200 images les nommés toutes image_999.gif ça peut devenit compliquer pour s'y retrouver !
La solution : utiliser un tableau pour stocker le nom de tes images.
Les tableaux :
___________
Un tableau regroupe un ensemble ou encore une liste de variables, souvent de même type bien que cela ne soit pas une obligation avec JS .
Chaque variable du tableau s'appelle un élément et est identifiée par un indice c'est-à-dire un chiffre qui DEMARRE TOUJOURS A APRTIR DE ZERO et qui correspond à sa position dans le tableau.
Ainsi si tu as un tableau avec 2 éléments, le 1er aura l'indice 0 et le second l'indice 1.
Déclaration d'un tableau :
_____________________
var mon_tableau=new Array()
ou dans sa forme abrégée :
var mon_tableau=[] // Tu vas tt de suite comprendre pourquoi les[]
Ajout d'un élément dans un tableau :
______________________________
mon_tableau[0]="mon premier élément";
mon_tableau[1]="mon deuxième élément";
etc...
Accès aux éléments d'un tableau :
____________________________
Pour acceder à chaque élément on utilise la syntaxe suivante:
nom_tableau[indice]
Ex
mon_tableau[0] ou mon_tableau[1] etc ...
L'intérêt est qu'à partir d'un seul et même nom de tableau on peut accèder à une multitude de variables.
Le tableau prend tout son sens lorsqu'il s'agit de parcourir les éléments qu'il contient car il se prête particulièrement bien à la généralisation et dc qlque part à l'optimisation (du code source s'entend encore une fois).
Parcours d'un tableau :
___________________
Par ex ici j'affiche une boîte de dialogue avec le contenu de chaque élément, le code est très compacte :
for (i=0; i<mon_tableau.length; i++)
{
alert(mon_tableau[i]);
}
Que le tableau comporte 0, 1 ou 1000 éléments le code reste le même ! C'est pas beau çà ? :-)
Quelques explications :
mon_tableau est un objet de type Array (on dit aussi une instance de la classe Array, mais c'est surtout vrai en C++).
Array est un des types d'objet prédéfini en JS. Il sert justement à créer des tableaux.
L'objet Array possède entres autres la propriété "length" qui renvoie le nombre d'éléments contenu dans le tableau.
Ici mon_tableau.length vaut 2
Donc le code qui s'exécute peut s'énoncer en langage clair :
"pour i variant de 0 jusqu'à i < à nombre d'éléments du tableau mon_tableau (soit 2) par pas de 1 ( le i++) afficher l'élément qui se trouve à l'indice i du tableau mon_tableau".
On aurait aussi pu écrire :
alert(mon_tableau[0]);
alert(mon_tableau[1]);
Tu te rends bien compte que + il va y avoir d'éléments + cela va devinir long à écrire. Et en + cela t'oblige à connaître à l'avance le nbr d'éléments ce qui n'est pas tjrs le cas.
La solution précédente est bien meilleure !
Et voici le code modifié pour tenir compte des tableaux :
// Voici 1 façon de déclarer et d'initialiser (ou remplir) un tableau
var t_enfonce=new Array
t_enfonce[0]="images/o_articles2.gif";
t_enfonce[1]="images/o_compagnes2.gif";
... tu déclares ici toutes tes images
// En voici 1 autre : on déclare et on initialise en même tps ...
var t_relache=new Array("images/o_articles.gif", ...
"images/o_compagnes.gif");
... tu ajoutes avant la dernière parenthése tes autres images
// A toi de choisir
var page=0
function enfonce(nr)
{
// On relache le bouton précédemment enfoncé donc encore
// stocké dans page
var elt=eval("document.img_"+page);
elt.src=t_relache[page];
// page prend la valeur du nouveau bouton
page=nr
// On enfonce le nouveau bouton pressé
elt=eval("document.img_"+page);
elt.src= t_enfonce[page];
};
Le fait qu'il n'y ait plus aucun élément en "dur" et notamment les chaînes de caractères, ni de code redondant est souvent un signe de bonne optimisation. Evidemment ceci ne s'applique pas aux déclarations des variables !
Bon voilà !
@+
L'optimisation ... pb délicat s'il en est.
L'optimisation du code source s'attache avant tout à généraliser au maximum le code, et notamment sa réutilisation ainsi qu'à minimiser sa taille.
L'optimisation des performances, elle, passe la plus souvent par une longue phase de test. C'est souvent au niveau des boucles ou des appels de fonction imbriqués ou même de l'ordre des appels qu'on peut éventuellement faire qlque chose.Je n'en parlerais pas ici ...
Voici donc qlques trucs pour améliorer ton code :
1) Faire appel aux paramètres :
Je t'ai déjà parlé des paramètres : utilise les !
Rappel : les paramètres se comportent comme des variables locales à la différence près que tu définis leur valeur iniale lors de l'appel de la fonction et pas directement dans la fonction, même si tu es libre de les modifier à nouveau dans la fct.
2) Rendre générique les noms des images et des tag <img>
Donner un nom différent à chaque image est très parlant mais ne se prête que très peu à une quelconque optimisation
Par contre si tu nommes toutes tes images "image_"+no_image+".jpg" (image_1.jpg, image_1.jpg etc ...) tu vas permettre de généraliser beaucoup + ton code même si tu y perds en clarté.
Idem avec l'attribut "name" de tous tes tags <IMG> : dans ce cas tu peux les appeler "img_"+no_image.
Ainsi si tu nommes tous tes boutons relâchés :
"bt_relache_"+no+".gif"
tous tes boutons enfoncés :
"bt_enfonce_"+no+".gif"
et les tags <img> associés :
"img_"+no
ta fonction enfonce() devient :
var page=0
function enfonce(nr)
{
// On relache le bouton précédemment enfoncé donc encore
// stocké dans page
var elt=eval("document.img_"+page);
elt.src= "images/bt_relache_"+page+".gif";
// page prend la valeur du nouveau bouton
page=nr
// On enfonce le nouveau bouton pressé
elt=eval("document.img_"+page);
elt.src= "images/bt_enfonce_"+page+".gif";
};
Le top de l'optimisation ! :-) Enfin presque ... voir + loin
Et l'appel :
Dans la balise <body> tu as :
<a href="#" onClick=" enfonce(1)">
<img src="images/bt_relache_1.gif" width="109" height="22" border="0" name="img_1">
</a>
<a href="#" onClick=" enfonce(2)">
<img src="images/bt_relache_2.gif" width="109" height="22" border="0" name="img_2">
</a>
Evidemment pour le code html lui même on ne peut rien faire, sauf si tu modifies tes pages dynamiquement directement sur le serveur avec un langage tel que Php par ex. Donc tu es quitte pour taper les 20 boutons.
Qlques explications :
La variable globale [page] va maintenant servir à stocker le dernier bouton pressé.
La fct eval() :
___________
Cette fonction attend comme paramètre une chaîne de caractères représentant une expression JS valide et l'évalue c'est-à-dire l'exécute.
C'est un moyen de modifier dynamiquement le code à exécuter.
Groso modo tout ce que tu mets dans la chaîne devient du code comme si tu l'avais taper directement.
Cool et surtout pratique !
Exemples :
eval("2+2") renvoie 4
var n=eval("2+2") après évaluation n=4 (rappel les assignations sont évaluées de droite à gauche)
var txt1="mon texte1"
var txt2="mon texte 2"
var index=2
alert(eval("txt"+i)) affichera "mon texte 2"
En fait tout se passe comme si tu avais : alert(txt2)
alors que si tu tapes directement alert("txt2") tu obtients l'affichage du mot "txt2", nuance !
Dans enfonce() :
elt=eval("document.img_"+page);
si page vaut 1 alors cela équivaut à :
elt=document.img_1;
elt contient alors l'objet image dont le nom est "img_1" : comme je te l'ai déjà dit les navigateurs créés leurs propres objets.
Une fois que tu pointes sur un objet tu peux accèder très facilement à ses propriétes (une propriété est une variable qui ne peut être accèder qu'au travers d'un objet : pour accèder à une propriété, celle-ci doit être précédée du nom de l'objet suivi d'un point ), ou encore utiliser ses méthodes (cad les fonctions liées à l'objet : tt comme la propriété, le nom de la méthode doit être précédé du nom de l'objet suivi d'un point).
Et donc à partir de [elt] on peut modifier la propriété src de l'image.
3) Utilisation des tableaux :
Maintenant comme faire si tu tiens absolument aux noms de tes images (pour les tag <img> par contre je te conseille de faire comme ci-dessus). C'est vrai que si tu as par ex 200 images les nommés toutes image_999.gif ça peut devenit compliquer pour s'y retrouver !
La solution : utiliser un tableau pour stocker le nom de tes images.
Les tableaux :
___________
Un tableau regroupe un ensemble ou encore une liste de variables, souvent de même type bien que cela ne soit pas une obligation avec JS .
Chaque variable du tableau s'appelle un élément et est identifiée par un indice c'est-à-dire un chiffre qui DEMARRE TOUJOURS A APRTIR DE ZERO et qui correspond à sa position dans le tableau.
Ainsi si tu as un tableau avec 2 éléments, le 1er aura l'indice 0 et le second l'indice 1.
Déclaration d'un tableau :
_____________________
var mon_tableau=new Array()
ou dans sa forme abrégée :
var mon_tableau=[] // Tu vas tt de suite comprendre pourquoi les[]
Ajout d'un élément dans un tableau :
______________________________
mon_tableau[0]="mon premier élément";
mon_tableau[1]="mon deuxième élément";
etc...
Accès aux éléments d'un tableau :
____________________________
Pour acceder à chaque élément on utilise la syntaxe suivante:
nom_tableau[indice]
Ex
mon_tableau[0] ou mon_tableau[1] etc ...
L'intérêt est qu'à partir d'un seul et même nom de tableau on peut accèder à une multitude de variables.
Le tableau prend tout son sens lorsqu'il s'agit de parcourir les éléments qu'il contient car il se prête particulièrement bien à la généralisation et dc qlque part à l'optimisation (du code source s'entend encore une fois).
Parcours d'un tableau :
___________________
Par ex ici j'affiche une boîte de dialogue avec le contenu de chaque élément, le code est très compacte :
for (i=0; i<mon_tableau.length; i++)
{
alert(mon_tableau[i]);
}
Que le tableau comporte 0, 1 ou 1000 éléments le code reste le même ! C'est pas beau çà ? :-)
Quelques explications :
mon_tableau est un objet de type Array (on dit aussi une instance de la classe Array, mais c'est surtout vrai en C++).
Array est un des types d'objet prédéfini en JS. Il sert justement à créer des tableaux.
L'objet Array possède entres autres la propriété "length" qui renvoie le nombre d'éléments contenu dans le tableau.
Ici mon_tableau.length vaut 2
Donc le code qui s'exécute peut s'énoncer en langage clair :
"pour i variant de 0 jusqu'à i < à nombre d'éléments du tableau mon_tableau (soit 2) par pas de 1 ( le i++) afficher l'élément qui se trouve à l'indice i du tableau mon_tableau".
On aurait aussi pu écrire :
alert(mon_tableau[0]);
alert(mon_tableau[1]);
Tu te rends bien compte que + il va y avoir d'éléments + cela va devinir long à écrire. Et en + cela t'oblige à connaître à l'avance le nbr d'éléments ce qui n'est pas tjrs le cas.
La solution précédente est bien meilleure !
Et voici le code modifié pour tenir compte des tableaux :
// Voici 1 façon de déclarer et d'initialiser (ou remplir) un tableau
var t_enfonce=new Array
t_enfonce[0]="images/o_articles2.gif";
t_enfonce[1]="images/o_compagnes2.gif";
... tu déclares ici toutes tes images
// En voici 1 autre : on déclare et on initialise en même tps ...
var t_relache=new Array("images/o_articles.gif", ...
"images/o_compagnes.gif");
... tu ajoutes avant la dernière parenthése tes autres images
// A toi de choisir
var page=0
function enfonce(nr)
{
// On relache le bouton précédemment enfoncé donc encore
// stocké dans page
var elt=eval("document.img_"+page);
elt.src=t_relache[page];
// page prend la valeur du nouveau bouton
page=nr
// On enfonce le nouveau bouton pressé
elt=eval("document.img_"+page);
elt.src= t_enfonce[page];
};
Le fait qu'il n'y ait plus aucun élément en "dur" et notamment les chaînes de caractères, ni de code redondant est souvent un signe de bonne optimisation. Evidemment ceci ne s'applique pas aux déclarations des variables !
Bon voilà !
@+