L'éditeur JavaScript
Visiteur non-identifié | Identifiez-vous | Devenir membre
Code perdu ? | Combien de visiteurs sur votre site ?
Rechercher :
Page d'accueil
     Home Page

JavaScript
     Tous les scripts
     Proposer un script
     Recherche de script
     AJAX
     Cours de JavaScript
     Liste de discussion
     Forums

Services :
     CountUs
     myCircle
     ClickInText
     XooIt

Trucs et astuces :
     HTML / CSS
     PHP / MySQL
     Réferencement
     Graph / Présentation
     Toutes les astuces
     Ajouter un article

MailingList :
152463 abonnés

Annuaire webmaster :      Hebergement web
     Referencement
     Sites webmasters
     XHTML - CSS2
     PHP
     Affiliation - Pub
     FAI

     Annuaire webmaster

Ressources pour webmasters :
     Kit graphique
     Foire aux questions
     Les membres
     Devenir annonceur
     Faire un lien
     Contact

Partenaire :
     Compteur live
     Créer un forum
     Le PHP facile
     Comscripts
     Liens sponsorisés
     Blog
     Page Rank
     Poésie et cita...
     Gifs animés, f...
     Azote.org - no...
     Easy-script.com
     K i s s design
     Livre-dor.net
     Outils de créa...
     Web creation ...
     Je crée mon site
     Electroniq...
     Les autres
     Votre site ici ?


Changer le contenu d'un bloc



Objectif :

Nous voulons créer un petit bloc de 200x40 pixels, bordure noire et fond bleu, dans lequel 4 textes vont s'alterner toutes les 10 secondes.


Première phase : créer le bloc.

Nous allons donc créer le bloc. Il s'agit en fait d'un <DIV> dans lequel nous allons passer des styles, ainsi qu'un attribut ID qui nou permettra ensuite de nous y referer :
<DIV STYLE="width:200;height:40;background:#7B89A9;color:#FFFFFF;border-style:solid;border-width:1;border-color:#000000;font-family:Arial;font-size:12px" ID=bloc></DIV>

Petite explication sur les style :
width : definit la largeur du bloc
height : définit sa hauteur
background : définit la couleur du fond du bloc
color : définit la couleur du texte

Pour la bordure, vous devez définir 3 styles : le style de celle-ci, son épaisseur et sa couleur :
border-style : définit le style de la bordure (peut prendre les valeurs none, hidden, dotted, dashed, solid, double, groove, ridge, inset et outset. Dans notre cas, nous choisirons solid, pour avoir une bordure pleine, une ligne en fait).
border-width : définit l'épaisseur de la bordure en pixels
border-color : définit la couleur de la bordure

Passons ensuite à la police de notre bloc :
font-family : définit le nom de la font que nous allons utiliser (dans notre cas arial)
font-size : défiinit la hauteur de la police.

Etant un element du corps du HTML, ce morceau de code doit être placé entre <BODY> et </BODY>.

Voici le résultat :



Seconde phase : définir les textes.

Avant toutes chose, toutes les parties qui suivront seront du code JavaScript, et devrons donc être placées entre des balises <script language=JavaScript> et <script>
Nous allons entrer tous les textes dans un tableau JavaScript de cette manière :
texte = new Array;
texte[0] = "Premiere phrase";
texte[1] = "Et de deux !";
texte[2] = "La troisieme !";
texte[3] = "La derniere !";

 Voir aussi : Un bon cours sur la création de tableau JavaScript

Nous allons aussi définir quel message s'affichera en premier :
actual_texte = 0;


Troisième phase : créer la fonction qui affiche les textes.

Que savons nous de cette fonction ?
- Elle doit afficher le texte en cours (celui définit par la variable actual_texte) dans le bloc bloc.
- Elle doit mettre a jour la variable actual_texte pour qu'a son prochain appel, elle affiche le texte suivant.

Voici donc a quoi pourrait ressembler notre fonction, que nous appelerons changeMessage() :
function changeMessage()
    {
    document.getElementById("bloc").innerHTML = texte[actual_texte];
    actual_texte++;
    if(actual_texte >= texte.length)
        actual_texte = 0;    
    }

Revenons sur cette fonction :
document.getElementById("bloc").innerHTML = texte[actual_texte];
Cette ligne permet de mettre à jour le bloc bloc (celui que nous avons créé plus haut) en y affichant le contenu de texte[actual_texte], donc de texte[0] pusique actual_texte = 0.

actual_texte++;
Nous incrémentons la variable actual_texte, qui passe donc dans notre exemple à 1.

if(actual_texte >= texte.length)
        actual_texte = 0;
Nous verifions que actual_texte n'est pas superieure au nombre total de textes enregistrés. Si c'est le cas, nous repassons actual_texte à 0.


Dernière phase : lancer changeMessage() toutes les 5 secondes.

C'est tout simple, il existe une focntion JavaScript qui fait ca toute seule :
if(document.getElementById)
    setInterval("changeMessage()",5000)
La fonction changeMessage() va donc être lancée toutes les 5000 millisecondes, si le navigateur est compatible (s'il reconnait document.getElementById).


Résultat.

Voici le script entier :
<DIV STYLE="width:200;height:40;background:#7B89A9;color:#FFFFFF;border-style:solid;border-width:1;border-color:#000000;font-family:Arial;font-size:12px" ID=bloc></DIV>
<SCRIPT LANGUAGE=JavaScript>
texte = new Array;
texte[0] = "Premiere phrase";
texte[1] = "Et de deux !";
texte[2] = "La troisieme !";
texte[3] = "La derniere !";
actual_texte = 0;
function changeMessage()
    {
    document.getElementById("bloc").innerHTML = texte[actual_texte];
    actual_texte++;
    if(actual_texte >= texte.length)
        actual_texte = 0;
    }
if(document.getElementById)
    setInterval("changeMessage()",5000)
</SCRIPT>

Ce qui donne :

Annotations des visiteurs :

De Gilbert Tordeur - le 23-02-2006

Concerne la page http://www.editeurjavascript.com/cours/cours_03.php
Je vous propose d'ajouter les informations suivantes : la liste des propriétés des objets du navigateur, et plus spécialement la liste des propriétés des objets d'un formulaire. Ou bien sûr un lien vers une page répondant à cette attente. Merci.
De DomJ - le 11-04-2006

je sais pas si ça vas t'aider:
Les évenement Javascript
La page des evenement ;]
De Tsuby - le 27-07-2006

Bonjour,

lorsque l'on a eu listbox :
<select name='list' onChange="Num(this.value)>
<option value="1">NumeroUn</option>
</select>
Je sais que pour récupérer la valeur, on fais "this.value" avec la fonction Num :
function Num(val){
alert(val);
}
Et Comment récupère t'on le "NumeroUn" ?

Merci
De EricM - le 11-09-2006

@ Tsuby : avec la propriété .text =>
this.text

A+
De Ani' - le 04-04-2007

A noter que l'on peut accéder à l'objet document directement, sans passer par l'objet window.

window.document.forms[0].checkbox
et donc équivalent à
document.forms[0].checkbox

:)
De NEO III - le 04-07-2007

Bonjour,

en fait, this.text ne fonctionne pas : il faut utiliser this.innerHTML

A+

>> Poster une annotation sur ce cours


Les autres cours :

|< Faire disparaitre un objet sur une page





compteur gratuit
actuellement en ligne

    PUBLICITE



     ANNUAIRE WEBMAST.
Infomaniak
Un hebergeur Suisse de qualité à partir de 7.50 € / mois.
http://www.infomaniak.fr/
Cat : Hebergement web
Voir l'annuaire webmaster


     LES SCRIPTS :
78 à éditer
68 à copier/coller
246 des membres
2580 sur le web
>> Tous les scripts

     LES MEMBRES :
68387 membres
2626 comptes CountUs
1910 comptes myCircle

     LES FORUMS :
14 forums
40639 topics
192044 messages
>> Les forums

    SONDAGE

Vous avez un blog ou site classique ?
Un blog
Un site classique
Les deux !
La mini-astuce "Divers" du jour par krucial
Pour connaitre les sites qui font des liens vers le votre, rendez-vous sur http://www.google.fr et saisissez dans la boite de recherche : "link:http://www.votresite.com";.
Proposer votre mini-astuce | Archives des mini-astuces
© 1999-2014 EJS - Tous droits réservés | CNIL N° 844440 | 23/07/2014 23:47:10 | Design by | Gen. en 0.004 sec.