Forum de Graphisme - Best of Graph'
Les inscriptions au forum sont maintenant fermée, en effet, nous ne trouvons pas juste de faire s'inscrire des membres pour rien, vu que le forum en dans un état actuellement passif.
Merci, bien à vous!
BOG.

Remarque : la partie publique du forum, tutoriels, ... restent actifs.

Vous n'êtes pas connecté. Connectez-vous ou enregistrez-vous


Voir le sujet précédent Voir le sujet suivant Aller en bas  Message [Page 1 sur 1]

Grimpow

avatar
Membre
Bien, comme Arkantos m'avait demandé comment créer une génération aléatoire d'images, je vais donc exposer un p'tit tuto ici Smile
Il suppose que vous connaissiez un minimum le langage HTML et ses principes.

Les balises HTML seront écrites sous la forme [BALISE] pour une question de lisibilité (surtout que tout le troulala HTML part à l’affichage et à l’édit è_é).

En quoi ça consiste ? le résultat final est ceci : http://pgorjux1.free.fr/Tuto%20BoG.html
(Ne vous occupez pas de la mise en forme, c'est un petit add-on de ma part)
Évidemment, il s'agit là d'une génération dynamique d'un code HTML, et, le HTML et le CSS ayant des propriétés presque fixes, pas d'autre choix que de passer par JavaScript !
Bon, je vous rassure, ce n'est pas la mort Wink

Comme tout script JavaScript, il y aura deux parties : la fonction qui sera insérée dans les balises [HEAD], et un bloc qui appellera la fonction, situé dans les balises [BODY]. A vous de placer ce bloc là où il vous plait, et la fonction JavaScript s'activera dans ce bloc ^^

Bon, le squelette du script, dans une page HTML épurée est celui-ci :
Code:
<html>
    <head>
        <script type="text/javascript">
        function ImgRandom()
            {
            var Img = new Array();
                Img[0] = 'Première Image';
                Img[1] = 'Deuxième Image';
                Img[2] = 'Troisième Image';
            ImgNb = Math.round(Math.random() * (Img.length-1));
            document.write(Img[ImgNb]);
        }
        </script>
    </head>
    <body>
        <script type="text/javascript">
        ImgRandom();
        </script>
    </body>
</html>
Bon, on va commencer par le plus facile \o/
Un code JavaScript directement inséré dans du HTML ne fonctionnera pas. Pour cela, il faut faire comprendre au navigateur que les lignes qu’on lui présentera sont codées en JavaScript et pas en autre chose. Rien de plus simple, les balises HTML [SCRIPT][/SCRIPT] permettent d’indiquer au navigateur que l’on insère un script à l’intérieur des balises, qui sera codé dans un autre langage que le HTML. Par défaut, la navigateur va tenter de deviner le langage, mais mieux vaut lui indiquer de quel langage il s’agit, non ? ^^ Il suffira d’écrire les balises de la sorte : [SCRIPT type="text/javascript"][/SCRIPT]
Bon, on passe au bloc le plus simple, le deuxième, celui qui est inséré dans les balises [BODY] :
Code:
<script type="text/javascript">
    ImgRandom();
</script>
Ici, c’est pas trop dur, il n’y a qu’une seule ligne Very Happy
Cette ligne appelle la fonction ImgRandom(), qui a été définie dans le premier bloc. Une fonction s’écrit toujours sous le forme NomDeFonction(Arg1, Arg2, …). Ici, pas besoin d’arguments à communiquer à la fonction, donc on laisse vide entre les parenthèses (la fonction pourrait par exemple renvoyer le carré d’un nombre. Pour cela, il faudrait lui fournir le nombre en argument, mais cela ne nous intéresse pas ici.)
On passe au premier bloc :
Code:
 <script type="text/javascript">
function ImgRandom()
    {
    var Img = new Array();
        Img[0] = 'Première Image';
        Img[1] = 'Deuxième Image';
        Img[2] = 'Troisième Image';
    ImgNb = Math.round(Math.random() * (Img.length-1));
    document.write(Img[ImgNb]);
}
</script>
La première ligne function ImgRandom() indique qu’une fonction (qui sera appelée plus tard) est définie. La définition de la fonction sera ouverte par une accolade ouvrante { qui est ici à la deuxième ligne et une accolade fermante } qui est ici à la neuvième ligne.
A l’intérieur des accolades, on insérera les ordres à exécuter quand la fonction sera appelée. On va donc regarder ce qui se cache dans le moteur de cette fonction :O
Code:
var Img=new Array();
    Img[0] = 'Première Image';
    Img[1] = 'Deuxième Image';
    Img[2] = 'Troisième Image';
ImgNb = Math.round(Math.random() * (Img.length-1));
document.write(Img[ImgNb]);
La première ligne var Img = new Array(); définit une nouvelle variable Img grâce à l’ordre var (optionnel) qui signifie « crée la variable Img » auquel on assigne un type avec l’instruction new Array(). La variable est ainsi un tableau. Oui, un tableau, comme sous Excel :p. Sauf qu’il n’a que deux lignes…
Indice01234
DonnéesSébastienLaurenceLudovicPaulineGuillaume
Voici ce qu’est un tableau en JavaScript. En fait, il renvoie une donnée quand on demande son indice, et s’écrit sous la forme NomTableau[Indice]. Si je n’ai pas été assez clair, j’espère qu’un exemple sera plus parlant : Si mon tableau se nomme Prénom, Prénom[1] renverra Laurence, Prénom[4] renverra Guillaume (en fonction du tableau ci-dessus). Un tableau sert à stocker beaucoup de données, à les trier... et à les retrouver en fonction de l'indice, qui est un nombre. Or, un nombre aléatoire, on sait faire en JavaScript ! Vous commencer à voir venir le truc pour générer aléatoirement des images ? Razz
On rentre toutes les images dans un tableau. On génère un nombre aléatoire entre 0 et l’indice maximal du tableau, puis on récupère le contenu du tableau répondant à ce nombre fraichement crée Smile
Bon, pour en revenir à notre code, passons aux lignes suivantes. Les instructions du style Img[0] = 'Première Image'; définissent la donnée répondant à l’indice. Donc, si on tape la variable Img[0], ça nous renvoie Première Image ^^
Pour les flemmards, vous n’êtes pas obligés de mettre un nombre entre crochet, cela vous épargnera le supplice de devoir taper un à deux malheureux chiffres… L’indice sera alors automatiquement incrémenté Wink
On va passer sur les deux lignes suivantes, elles sont pareilles… la définition du tableau, quoi ^^
On lis alors l’instruction ImgNb = Math.round(Math.random() * (Img.length-1));[/imb]. Certains me diront que c’est du chinois, et moi je leur réponds que c’est tout simplement du JavaScript Very Happy Ca se lit comme une équation mathématiques Razz
Bon, quelques astuces :
[b]Img.length
renvoie la taille de l’objet Img, donc le nombre d’indices ^^
Math.random() est une fonction qui renvoie un nombre décimal aléatoire compris entre 0 et 1 (ex : 0,12675639)
Math.round(Nombre) arrondit la variable Nombre à l’entier le plus proche ^^
Pour ceux qui ont la flemme de comprendre l’instruction, sachez qu’elle fournit un nombre aléatoire compris entre 0 et l’indice maximal du tableau et l’enregistre dans une variable ImgNb Wink
La dernière ligne est l’écriture de l’image grâce à la fonction document.write() ^^
document.write() ajoute une ligne de code HTML au code source, donc ajoute une ligne de code HTML là où la fonction est appelée. Par contre, évitez d’utiliser cette fonction une fois que le document a été entièrement chargé… cela supprimerais tout le code source pour écrire à la place…
On écrit donc la variable Img[ImgNb]… qui est donc définie aléatoirement.
Et walaaaa
… Ben vous savez écrire un texte choisi aléatoirement dans votre tableau Razz
Il ne reste plus qu’à écrire vos images en code HTML dans le tableau :
Code:
Img[] =’<img src=’’’’ alt=’’’’ />;

2 Re : Gérer aléatoirement d... le 25/1/2011, 08:17

Arkantos22

avatar
Administrateur
Un très grand merci à toi.
Un autre exemple c'est sur l'acceuil de Best of Graph' dans "Tutoriel au Hasard".

Ce tutoriel est très pratique, moi je vous l'assure.

_____________


[center]

Fondateur & Administrateur de Best of Graph'
»Ma galerie sur BoG«

bestofgraph@gmail.com - Envoyer un message privé
Grimpow

avatar
Membre
De rien voyons Wink
Grimpow

avatar
Membre
Oups...Arkantos... Tout a été perdu :/
Y a pas moyen d'empêcher que tout saute ?
Arkantos22

avatar
Administrateur
Je ne vois pas de quoi tu parles... Tu fonctionnes super bien.
Les codes sont placés directement dans mon acceuil.

_____________


[center]

Fondateur & Administrateur de Best of Graph'
»Ma galerie sur BoG«

bestofgraph@gmail.com - Envoyer un message privé
Grimpow

avatar
Membre
Non, le tuto a été mangé (en haut du topic) :/
Bon j'édite et je réecris tout...

Mais dès que je rédite je perds tout...
Arkantos22

avatar
Administrateur
Plus de problème, j'ai sauvé le tuto : http://bestofgraph.graphforum.com/h1-generateur-alea-d-image

_____________


[center]

Fondateur & Administrateur de Best of Graph'
»Ma galerie sur BoG«

bestofgraph@gmail.com - Envoyer un message privé
K-Surf

avatar
Membre
Merci c'est très intéressant.
http://serialdesigner.forumactif.fr/
Grimpow

avatar
Membre
Y a pas de quoi ^^
Contenu sponsorisé


Voir le sujet précédent Voir le sujet suivant Revenir en haut  Message [Page 1 sur 1]


Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum

 

Optimisé pour Mozilla Firefox et Google Chrome
Tous droits reservés - Copyright 2011-2013