Faire apparître du texte par Gyaum - page 1

Hello,
le langage utilisé pour ce genre d'interactions dynamiques est le javascript. Pour t'éviter de chercher des cours (ce que je te conseillerais quand même) pendant pas mal de temps, je vais essayer de t'expliquer rapidement.

En javascript, une action est provoquée par un événement. Ici, l'action est de changer le texte d'un bloc donné de la page et l'événement, le clic d'un visiteur.

Javascript ne peut pas reconnaître par lui-même de quel bloc il s'agit dans tout les cas, sauf si on lui donne un nom qui est unique à ce bloc, en l'occurence un id par exemple. On donne donc son id à notre bloc par avance :
<div id="test-javascript"> </div>

On a donc notre bloc div. Maintenant il faut définir l'action que l'on veut réalisé à javascript à l'aide d'une fonction. on la déclare entre les balises <script type="text/javascript"> et </script> que l'on met entre les <head> et </head> de la page.

Quelques explications pour ces lignes de javascript. On a donc inséré du javascript à l'aide des balises <script> et </script> et on a déclaré notre fonction à l'aide de function suivit de nom que l'on veut donner à notre fonction. Il est important de ne pas oublier les deux parentheses qui suivent.

Notre action est elle définie entre les deux accolades { et }.
Une dernière précision, les symboles  normalement utilisés en html pour déclarer un commentaire sont là utiliser pour des navigateurs anciens qui ne savent pas lire le javascript et qui donc, au lieu d'annoncer une erreur, ne feront que lire un texte qu'ils considéreront comme du commentaire. Les navigateurs plus récents, eux, liront le code comme du javascript.

Maintenant, déclarons les actions.
Pour changerle contenu d'un bloc div, sans trop m'étaler, il faut utiliser cela :
document.getElementById("NOM_DU_DIV").innerHTML = 'texte à afficher';

Ne pas oublier le point virgule !

Cette première partie : document.getElementById("NOM_DU_DIV") , sert à définir à javascript à quel div nous voulons porter des modifications. En français, ce la donnerait quelque chose comme, Dans le document, chercher l'élément qui a l'id "NOM_DU_DIV".

.innerHTML sert elle à dire à Javascript que notre modification sera de changer le texte contenu par le bloc défini juste avant.

Voici donc notre fonction :

function changer_texte()
{
document.getElementById("test-javascript").innerHTML = 'Bonjour, comment allez-vous ?';
}

Merveilleux, mais je fait comment pour l'activer quand je veux la fonction ?

Des commandes toutes prêtes sont là pour nous faciliter la tâche

Ces commandes servent à décrire la dernière étape de notre code javascript, l'événement déclencheur. Ici, l'événement est le clic du visiteur, on utilisera onClick. Notre div devient donc :
<div onClick="javascript:changer_texte();" id="test-javascript"> </div>

Quelques points importants : respecter la casse, je pense que si l'on tape onclick, ça ne fonctionnera pas. Il ne faut pas oublier non plus les deux parentheses ici non plus dans la délcaration de l'événement.

Déjà fini ! Et oui, maintenant, quand le visiteur clic sur le div, javascript déclenche la fonction qui va demander le changement du texte contenu par le div défini, en l'occurence ici, celui sur lequel le visiteur a cliqué (on aurait très bien pu choisir n'importe quel autre élément de la page, contenant du texte). Voici notre code :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<title>Test javascript</title>
<script type="text/javascript">

</script>
</head>
<body>

<div onClick="javascript:changer_texte();" id="test-javascript"> </div>

</body>
</html>

Maismais ! Moi je veux que ca fasse comme le sdz, qu'il parte et revienne ! Comment c'est qu'on fait ?

Rien de plus simple en passant par des variables.

Le principe est simple. On définit deux actions différentes (afficher le texte1 ou afficher le texte2) pour le même événement donc la même fonction, c'est à dire leclic du visiteur sur notre bloc div.
Notre variable va jouer le rôle de médiateur et c'est elle qui va faire que javascript choisira d'activer la premiere action ou la seconde.

Pardon ? Je comprends rien là ?

Rien de mieux que du code pour faire rentrer quelque chose dans le crâne

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<title>Test javascript</title>
<script type="text/javascript">

</script>
</head>
<body>

<div onClick="javascript:changer_texte();" id="test-javascript"> </div>

</body>
</html>

Nous y sommes donc ! Toujours pas ? Quelques explications alors :
On annonce une variable par var nom_de_la_variable = valeur_de_la_variable;

Toujours le point virgule

Ici, à l'ouverture de la page, on a donc une variable nommée mediateur de valeur 0.
Selon la valeur de cette variable,la fonction qui suit va changer.
Ainsi, quand mediateur est égal à 0, la fonction passe par la première option et afiche le texte "Bonjour comment allez-vous ?".
Si l'on ne faisait que cela, ca ne servirait pas à grand chose puisque, la valeur de lavariable ne changeant jamais, c'est la même boucle qui se répéterait et la fonction ne changerait jamais.
A l'option 1 donc, on change la valeur de la variable en 1.
Au clic suivant, magie, mediateur n'est plus égal à 0 et va donc passer par l'option 2 qui va demander de ne rien afficher dans le bloc. (Ca disparait en quelque sorte :magicien:

)
L'option 2 va changer la valeur de mediateur à 0 et au tour suivant, javascript repasse à l'option 1 et ainsi de suite.
Voilà, la boucle est bouclée !

Pour plus de renseignements, achète un bon bouqin ou renseigne toi chez ton ami google !

Bonne journée

---------------------------------------------------
Pour être complet, voici une page test : Exemple
---------------------------------------------------

Gyaum

27 février 2006 à 15:34:42

Salut à tous,

Je voulais savoir comment faire appaître du texte en cliquant simplement sur un lien. En faite quelle est la balise utilisée sur le forum pour les messages cachés ?

J'èspère que vous m'avez compris

Merci d'avance pour vos réponses

Hawks

27 février 2006 à 15:47:58

Salut

Analyse directement la zone secrète... Regarde le code, regarde ce que lance la zone secrète, et retrouve le code en JS qui permet d'afficher et cacher le texte...

Sinon cherche avec Google, à show hide, ou des trucs comme ça

27 février 2006 à 15:49:55

n'y a t'il que le javascript qui puisse résoudre mon problème ?

27 février 2006 à 15:59:32

Pour utiliser le même système (cad sans rechargement de la page) oui....

Mais ne t'inquiète pas, ce n'est pas si compliqué....

Regarde le code du SDZ, et je pense que tu devrais comprendre le principe et le fonctionnement....

BkM

27 février 2006 à 16:21:27