Perdu avec onload [Débutant(e)]

**gambi** · 18/05/2012, 11h57

Bonjour,

Je suis débutant de chez novice en javascript.
J'ai réussi à comprendre le html, les css par contre certaines choses sont floues. Cela histoire de vous situer mon niveau.

A l'aide d'un tuto, je m'essaye donc au javascript.
J'en arrive aux évènements et voila ce que l'on me propose de faire :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<body onload="alert('Message');" onunload="alert('Message');">

Je m'exécute, youpi ! cela marche super avec Firefox (version 12)
Déjà, au lancement Internet Explorer (version 9) me renvoi un message d'erreur
il me dit qu'il faut des quotes
Ah ! c'est vrai, j'ai vu quelque part que l'on pouvait aussi écrire en inversant les guillemets et quotes

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<body onload='alert("Message");' onunload='alert("Message");'>

Du coup, le onload se fait bien

Première question donc
dans quel cas utiliser l'une ou l'autre syntaxe et avantages et inconvénients des deux écritures ?

Maintenant, j'ai un souci avec onunload qui n'affiche rien (toujours sur IE).
J'ai lu un tas de trucs (y compris sur ce forum), mais je comprend rien. On me dit qu'il faut faire une fonction (bon ça j'ai à peu prés compris ce que c'était).
J'entend parler d'Ajax, de callback, je vois 50 solutions différentes (3 jours que je suis planté dessus, j'en peu plus !) mais qui me semble toutes plus tordues les unes que les autres et en tout cas loin de mon tuto de départ.

D'où seconde question, mon tuto est faux, et la solution n'est pas aussi simpliste que ça ?

J'ai essayé une autre solution en haut de la page

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
<script language="javascript" type="text/javascript">
	window.onload=window.alert("toto");
</script>
<script language="javascript" type="text/javascript">
	window.onunload=window.alert("titi");
</script>

Du coup, les messages dans le body sont désactivés, mais window.onload et window.onunload se font tous les deux à l'ouverture de la page (dans les deux navigateurs).

Donc encore une question, pourquoi window.onlad empêche body onload ?
Et une subsidiaire, dans ce cas comment qu'on fait pour que la seconde se réalise bien à la fermeture de la page ?

Là où je fais encore mon boulet !
J'ai mis une zone de texte dans un formulaire pour essayer l'évènement onfocus. Enfin un truc qui marche.
J'ai crée dans ma page au dessus du formulaire un lien pour tester onmouseover. Yes, j'suis trop fort, ça fonctionne !
sauf que quand ma zone de texte est sélectionnée, et que je survol mon lien, et bien l'évènement du focus, se déclenche aprés celui du survol.
C'est normal docteur ?

Voilà beaucoup d'interrogations. Je commence à me dire que Javascript est à utiliser par des gens qui sont déjà développeurs.
Si déjà à la deuxième page d'un tuto d'initiation, je rame autant sur des trucs aussi basique, je me dis qu'il vaut peut-être mieux que je passe mon chemin, et que j'en reste avec un petit site en html.

Merci si certain peuvent m'aider, en essayant de tenir un discours que je puisse comprendre.

**Auteur** · 18/05/2012, 13h02

bonjour,

Envoyé par gambi

Déjà, au lancement Internet Explorer (version 9) me renvoi un message d'erreuril me dit qu'il faut des quotes
Ah ! c'est vrai, j'ai vu quelque part que l'on pouvait aussi écrire en inversant les guillemets et quotes

Déjà, je suis un peu surpris que IE te demande d'inverser les double quotes (") avec les simples quotes ('). Il n'y a aucune différence entre :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<body onload='alert("Message")' >

et

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<body onload="alert('Message')" >

Envoyé par gambi

Première question donc
dans quel cas utiliser l'une ou l'autre syntaxe et avantages et inconvénients des deux écritures ?

aucun avantage ou inconvénient entre les deux écritures, c'est pareil. Après c'est selon les affinités de chacun. En ce qui me concerne, je préfère la seconde syntaxe (utiliser toujours des doubles quotes puis des simples quotes).

Envoyé par gambi

Maintenant, j'ai un souci avec onunload qui n'affiche rien (toujours sur IE).
J'ai lu un tas de trucs (y compris sur ce forum), mais je comprend rien. On me dit qu'il faut faire une fonction (bon ça j'ai à peu prés compris ce que c'était).

J'ai essayé une autre solution en haut de la page

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
<script language="javascript" type="text/javascript">
	window.onload=window.alert("toto");
</script>
<script language="javascript" type="text/javascript">
	window.onunload=window.alert("titi");
</script>

Première remarque : tu peux regrouper plusieurs instructions dans des balises script.
Seconde remarque : l'attribut language est obsolète, supprime le.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
<script type="text/javascript">
	window.onload=window.alert("toto");
	window.onunload=window.alert("titi");
</script>

Envoyé par gambi

Donc encore une question, pourquoi window.onlad empêche body onload ?

Parce que le window.onload est équivalent à <body onload="alert('Message')"> et que window.onload() réattribue à l'événement onload à la fonction que tu as définie dans tes balises script.

Envoyé par gambi

J'entends parler d'Ajax, de callback, je vois 50 solutions différentes (3 jours que je suis planté dessus, j'en peu plus !) mais qui me semble toutes plus tordues les unes que les autres et en tout cas loin de mon tuto de départ.

Tu vas trop vite. Ajax (Asynchronous JavaScript and XML) est utilisé pour développer des pages web au contenu dynamique. Comme tu débutes en javascript mets ceci de côté pour le moment (il y a des notions de client serveur à connaître). Apprends d'abord les bases de Javscript. Quand elles seront bien solides tu pourras de concentrer sur Ajax.

Envoyé par gambi

Là où je fais encore mon boulet !

non, tu apprends, nuance

Envoyé par gambi

J'ai mis une zone de texte dans un formulaire pour essayer l'évènement onfocus. Enfin un truc qui marche.
J'ai crée dans ma page au dessus du formulaire un lien pour tester onmouseover. Yes, j'suis trop fort, ça fonctionne !
sauf que quand ma zone de texte est sélectionnée, et que je survol mon lien, et bien l'évènement du focus, se déclenche aprés celui du survol.
C'est normal docteur ?

Fais voir ton code, je n'ai pas très bien compris tes explications

Envoyé par gambi

Voilà beaucoup d'interrogations. Je commence à me dire que Javascript est à utiliser par des gens qui sont déjà développeurs.
Si déjà à la deuxième page d'un tuto d'initiation, je rame autant sur des trucs aussi basique, je me dis qu'il vaut peut-être mieux que je passe mon chemin, et que j'en reste avec un petit site en html.

Si tu te lances dans la création de site web (même petit), tu utiliseras forcément un peu de javascript, ne serait-ce pour donner un peu de vie (animations) au contenu.

Envoyé par gambi

Merci si certain peuvent m'aider, en essayant de tenir un discours que je puisse comprendre.

Tu es au bon endroit

**Bovino** · 18/05/2012, 15h02

+1 Auteur !

Sinon

sauf que quand ma zone de texte est sélectionnée, et que je survol mon lien, et bien l'évènement du focus, se déclenche aprés celui du survol.

C'est normal si tu fais un alert() pour le survol du lien, dans ce cas, le focus est donné à la boite d'alerte (et donc ton champ le perd), lorsque tu reviens sur ton champ le focus est donc rendu et l'événement lié déclenché.

**sekaijin** · 18/05/2012, 16h02

Envoyé par gambi

Bonjour...

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<body onload="alert('Message');" onunload="alert('Message');">

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<body onload='alert("Message");' onunload='alert("Message");'>

Du coup, le onload se fait bien

Première question donc
dans quel cas utiliser l'une ou l'autre syntaxe et avantages et inconvénients des deux écritures ?

Même reponse que Auteur et j'ajoute que le W3C dans la norme XHML indique que les attribut doivent être écrit avec des " et non des '

les navigateur sont tolérents et acceptent les deux syntaxes. j'utilise toujours la syntaxe normalisée soit donc les "

Envoyé par gambi

...

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
<script language="javascript" type="text/javascript">
	window.onload=window.alert("toto");
</script>
<script language="javascript" type="text/javascript">
	window.onunload=window.alert("titi");
</script>

là par contre je suis très étonné
tu affecte comme handler d'événement le résultat de l'exéution de window.alert("toto");
je pense que ce que tu veux faire c'est

Envoyé par gambi

...

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
<script language="javascript" type="text/javascript">
	window.onload=function() {window.alert('toto');};
	window.onunload=function() {window.alert('titi');};
</script>

quelque soit l'événement sur le DOM click onload etc l'équivalent en javascript est toujours le même.

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<a id="45" href="#" onClick="alert('toto')" >

est équivalent à

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

document.getElementById('45').onclick=function(){alert('toto')};

c'est exactement ce que fait le navigateur il lorsqu'il interprète le html
il crée une nouvelle fonction donc le code est le texte inclus dans l'attribut d'evenement.

A+JYT

**Auteur** · 18/05/2012, 18h02

Envoyé par sekaijin

Tu affectes comme handler d'événement le résultat de l'exéution de window.alert("toto");
je pense que ce que tu veux faire c'est :

bien vu

C'est cette syntaxe qu'il faut adopter. Par contre l'attribut language est en trop.

Envoyé par sekaijin

est équivalent à

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<a id="45" href="#" onClick="alert('toto')" >

onclick. Si je ne me trompe pas, il est recommandé d'écrire les attributs des balises HTML (ici un événement) en minuscules.

**gambi** · 18/05/2012, 20h23

Merci les "forumeurs" pour vos réponses rapides.
Déjà, j'y vois un peu plus clair.
Et je commence à m'amuser

Déjà, je suis un peu surpris que IE te demande d'inverser les double quotes (") avec les simples quotes ('). Il n'y a aucune différence entre

J'avais dû faire une erreur, maintenant ça fonctionne.

Tu vas trop vite. Ajax (Asynchronous JavaScript and XML) est utilisé pour développer des pages web au contenu dynamique. Comme tu débutes en javascript mets ceci de côté pour le moment (il y a des notions de client serveur à connaître). Apprends d'abord les bases de Javscript. Quand elles seront bien solides tu pourras de concentrer sur Ajax.

C'est en faisant mes recherches que je suis tombé sur ces termes. T'es tranquille qu'il y a peu de chance que je m'y lance

Merci sekaijin pour tes explications claires, je teste dés que possible.

C'est normal si tu fais un alert() pour le survol du lien, dans ce cas, le focus est donné à la boite d'alerte (et donc ton champ le perd), lorsque tu reviens sur ton champ le focus est donc rendu et l'événement lié déclenché.

Yes super, j'ai compris. Mais comment faire alors pour éviter ce phénomène ?

Encore merci à tous, et j'espère pouvoir mettre résolu quand j'aurais la réponse à ma dernière question.

**Auteur** · 19/05/2012, 00h04

Envoyé par gambi

Yes super, j'ai compris. Mais comment faire alors pour éviter ce phénomène ?

Encore merci à tous, et j'espère pouvoir mettre résolu quand j'aurais la réponse à ma dernière question.

tu peux poster le code (HTML et Javascript) qui correspond à ce problème ? J'avoue ne pas avoir très bien compris tes explications

**gambi** · 19/05/2012, 00h34

Merci de t'intéresser à mon problème

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
 
<p><a href="#" onmouseover='alert("Survol");'>Survol</a></p>
<form>
<input type="text" value="On focus" onfocus='alert("Focus);'>
</form>

Quand je passe sur le lien, le message est correct.
Quand je rentre dans la zone de texte, le message est correct.
Mais si ensuite je repasse sur le lien, les deux messages s'affichent.
D'abord celui sur le survol ensuite celui sur le onfocus.
Si bien sûr, je sors de la zone de texte et repasse sur le lien, je n'ai que le premier message qui s'affiche.

Sur le pourquoi j'ai bien compris, la réponse de Bovino, et c'est logique.

C'est normal si tu fais un alert() pour le survol du lien, dans ce cas, le focus est donné à la boite d'alerte (et donc ton champ le perd), lorsque tu reviens sur ton champ le focus est donc rendu et l'événement lié déclenché.

Donc je suppose qu'il faudrait pouvoir donner un ordre pour dire de sortir de la zone de texte après affichage du message (peut-être avec une ancre).

Je suppose que c'est trivial comme problème, mais je n'ai rien trouvé. Peut être que je n'arrive pas à bien formuler ma requête dans google.

**Willpower** · 19/05/2012, 00h51

Donc comme le disait Bovino, le alert prend le "focus" au champ input et une fois refermé, il lui rend (donc déclenche l’évènement).

Ce comportement est logique et rarement gênant, car souvent utilisé pour effectuer de petits changements de style comme mettre le champ en cours en surbrillance plutôt qu'un alert. Il est donc normal après avoir refermé notre alerte que notre champ en cours se remette en sur brillant.

En plus des évènements "onfocus" et "onblur"(l'inverse de onfocus, quand on perd le contrôle) il existe les méthodes pour forcer un controle ou pour le perdre :

elem.blur();
elem.focus();

------

Après qqes tests, je me demande comment tu as pu arriver à cette situation, vu que lorsque tu cliques sur ton champs input, il fait un alert donc perd le focus et puis une fois l'alert refermé, il récupère le focus et redéclenche indéfiniment l'alert et tu peux donc pas survoler le lien.

Note aussi que les alert ne sont pas des masses utilisés sur les sites, on préfère faire apparaitre un élément caché avec un message.

----------

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
<p><a href="#" onmouseover='alert("Survol");'>Survol</a></p>
<form>
<input type="text" value="On focus" onfocus='alert("Focus);'>
</form>

nb: Il manque un " dans ton alert("Focus)

Enfin, tu peux récupérer l'élément actif avec document.activeElement, ainsi au survol de ton lien, tu peux faire :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
document.activeElement.blur(); // supprime le focus de celui qui l'avait
alert("machin chose"); // le alert qui normalement emprunte le focus et le rend ensuite, ne le rendra pas puisqu'on l'a supprimé à la ligne d'au dessus et tu n'auras pas ton problème.

**gambi** · 19/05/2012, 01h15

nb: Il manque un " dans ton alert("Focus)

Merci, j'ai corrigé

Après qqes tests, je me demande comment tu as pu arriver à cette situation, vu que lorsque tu cliques sur ton champs input, il fait un alert donc perd le focus et puis une fois l'alert refermé, il récupère le focus et redéclenche indéfiniment l'alert et tu peux donc pas survoler le lien.

J'en sais rien, mais en tout cas, c'est ce que produit le code chez moi.

Terrible le coup du document.activeElement.blur();
Maintenant ça marche.

Merci à toi et à tous ceux qui m'ont répondus.

Perdu avec onload [Débutant(e)]

JavaScript

Discussions similaires

Partager

Partager