AccueilDernières imagesRechercherS'enregistrerConnexion

Forum de graphisme, codage et game design proposant des tutoriels, astuces, libres services et commandes dans les domaines de l'infographie amateur, de l'intégration web (HTML et CSS essentiellement) ainsi que dans la conception de RPG sur forum.

Le deal à ne pas rater :
Pokémon EV8.5 : coffret Collection Classeur Évolutions Prismatiques
Voir le deal

    ForumActif, JavaScript et jQuery : les bases générales

    Yui
    Yui
    FémininAge : 35Messages : 334

    Sam 31 Déc 2011 - 18:32



    Bonjour ^^

    Je vous propose dans ce recueil d'explications de comprendre comment vous servir du JavaScript dans ForumActif.

    Entendons-nous bien, ce recueil ne servira pas à vous apprendre le JS, mais plutôt à savoir comment appliquer le JS sur votre site/forum.

    Si votre JS ne fonctionne pas, il se peut que la solution à votre problème se trouve ici. Par contre, ce sont des explications purement générales. Si vous avez besoin de poser des questions générales, vous pouvez ici, mais pour résoudre un cas particulier, il sera préférable d’ouvrir un sujet dans les demandes d’aide (ce sera plus clair ^^). Je mettrai sans doute ce sujet à jour au fur et à mesure des questions que je rencontrerai sur ce forum, d'autant que j'ai dû oublier quelques petites choses que je voulais dire.


    1. JavaScript et jQuery : Mini-présentation

    JavaScript, c'est un langage qui permet bon nombre de manipulations dans le cadre du navigateur internet. Les nouveautés CSS3/HTML5 lui volent petit à petit la vedette, notamment les transitions CSS3 au passage de la souris. Mais le JS reste encore très utilisé, car certaines manipulations sont encore hors de portée des deux autres ^^

    jQuery, quant à lui, est une librairie JS. Autrement dit, jQuery utilise le JS pour créer des fonctions qui vous facilitent la vie. Un exemple est plus parlant :
    En JS "pur", on dit : "je prends un bol dans le placard, le lait dans le frigo, je verse la bonne quantité de lait, je mets au micro-onde, je règle et lance le micro-onde et quand ça sonne, j'ouvre et je prends le bol chaud".
    Avec jQuery, on dit : "je prépare un bol de lait chaud". Et derrière, sans qu'on ait à préciser quoi que ce soit, jQuery se charge pour nous d'ordonner toutes les petites étapes.
    Plus simple, non?
    À noter que jQuery EST du JavaScript à 100%. Ce n'est pas différent. Par ailleurs, jQuery n'est pas l'unique librairie JS disponible, même si la plupart des tutoriels l'utilise. Il y a également PrototypeJS par exemple ^^


    2. Intégrer du JavaScript/jQuery

    Pas mal de personnes sont perdues à ce stade-là. Où faut-il mettre le code?
    En fait, la plupart du temps, on peut le mettre où on veut ^^ (pour les exceptions, j’y viens en 2.3). Par contre, la méthode d'intégration change selon l'endroit.

    2.1. Dans le HTML
    En mettant votre code JavaScript entre les balises script, vous pouvez mettre ça n'importe où dans le HTML. Dans un template, le panneau d'accueil, peu importe.
    Code:
    <script type="text/javascript"> CODE JAVASCRIPT </script>

    Vous pouvez aussi intégrer des feuilles JS hébergées ailleurs, sur un autre site internet, toujours en utilisant la balise script, mais de la façon suivante :
    Code:
    <script type="text/javascript" src="http://www.monscript.fr/javascript.js"></script>
    J'ai mis une adresse bidon, évidemment, à vous de mettre la votre. Sur certains tutoriels, vous risquez de croisez ce type d'exemple, mais avec ce qu'on appelle des liens relatifs (qui commencent par un slash ou un point), comme cela :
    Code:
    <script type="text/javascript" src="../javascript.js"></script>
    <script type="text/javascript" src="/javascript.js"></script>
    Ils ne fonctionneront pas sur votre forum (c'est valable avec n'importe quel type de lien relatif, comme une image, car les liens relatifs pointent sur le serveur du forum, or ces documents sont hébergés sur un autre serveur). Les liens doivent obligatoirement commencer par http.
    Personnellement, je vous conseille plutôt de copier le contenu de ces pages JS (après les avoir ouvertes dans le bloc note ou tout autre éditeur) pour les intégrer dans les pages mises à disposition par FA. Cela vous permettra de ne pas être dépendant d'un site qui peut fermer, d'un document qui peut disparaître ou devenir indisponible pour une raison x ou y.

    2.2 Dans une page JS
    C'est la méthode que je préfère et conseille, car elle permet de bien différencier le JS du reste (tout comme je conseille de mettre le CSS dans la feuille de styles plutôt que dans le HTML). Du coup, si on veut modifier le JS on sait exactement où il se trouve, et si on veut changer quelque chose dans le HTML, on ne risque pas, par inadvertance, de toucher au JS.

    Allez dans le panneau d'administration avancé, dans modules, puis dans gestion des feuilles JavaScript.
    Là, choisissez d'activer la gestion des feuilles JavaScript (n'oubliez pas cette étape! à ne faire que la première fois, bien sûr)
    Ensuite, créez-en une, copiez votre code JS et uniquement lui (pas de balise script).
    Donnez un petit nom à la page pour la reconnaître, choisissez à quel endroit vous voulez que le code apparaisse/fonctionne, et enregistrez.
    Et voilà o/

    Par contre, c'est une modification relativement récente de FA. Si vous avez modifié votre template overall_header avant le 5 juillet 2011, il vous faut procéder à un changement. Dans le template, cherchez :
    Code:
    <!-- BEGIN google_analytics_code -->
    Et ajoutez avant :
    Code:
    {HOSTING_JS}
    Les pages JS, comme le template overall_header l’indique, seront donc intégrées au tout début de la page HTML.

    2.3. Bug et Debug
    Selon comment le code JS est fait, il doit parfois être absolument placé dans le HTML après les éléments HTML qu'il manipule. En effet, si le JS doit être exécuté directement au chargement de la page, il ne pourra pas agir sur les éléments HTML qui apparaissent après lui car ils ne sont pas encore chargés, ce qui cause des dysfonctionnements. Mais si le javascript est compris dans la fonction jQuery suivante, peu importe l'endroit :
    Code:
    jQuery(document).ready(function(){
      CODE JS
    });
    Cette fonction permet en effet d'attendre que les éléments HTML (le document) soient tous chargés (donc prêts, donc ready o/) avant de lancer le JavaScript. Vous pouvez éventuellement tenter de mettre votre JS dedans pour éviter d'avoir cette contrainte du positionnement du JS. Normalement, ça fonctionne, sinon il faut voir au cas par cas.

    Toute cette affaire d'intégration du JS est importante. Quand vous avez un problème avec votre code, avant de voir quelle partie du code ne fonctionne pas, il faut être sûr et certain que le JS est correctement chargé, et souvent on n'en est pas sûr avec les pages JS. Le plus simple, c'est de décocher tous les emplacements d'apparition des pages JS que vous avez déjà faites, puis d'en créer une nouvelle qui sera la seule à apparaître et d'y mettre simplement le code suivant :
    Code:
    alert("test");
    Si une fenêtre s'ouvre (et je ne parle pas d'une popup que votre navigateur risque de bloquer, aucun risque pour cela) en affichant le texte entre guillemets, c'est que le JS est bien chargé et que ça vient du code. Sinon, vérifiez votre intégration du JS.

    Cette petite astuce du alert peut avoir d'autres utilités. Par exemple, si vous le mettez au début d'un JS (dans la balise script ou une page JS) et que ça fonctionne, mais que ça ne marche pas placé à la fin du code, il y a de fortes chances pour qu'un point-virgule, une parenthèse, un guillemet ou autre soit manquant. Mais si au contraire ça fonctionne, il vaudrait peut-être mieux chercher du coté du HTML. Une div mal fermée peut aussi causer des problèmes, de même qu'une classe mal nommée ou un id donné plusieurs fois !

    Voilà quelques orientations de debugs pour les plus motivés à apprivoiser le JS (et pour faciliter le travail de ceux qui vous aideront /o/ si vous menez quelques uns de ces tests, précisez-le bien dans votre demande d'aide, la résolution n’en sera que plus rapide).


    3. Utiliser jQuery ou un plugin jQuery

    ForumActif intègre à l'heure actuelle la version 1.3.2 de jQuery. Vous n'aurez donc pas besoin de vous préoccuper de l'intégration de la librairie au forum. Par contre, la version la plus récente de jQuery est la 1.7.1 donc il se peut que certaines fonctionnalités avancées soient indisponibles. Cependant, l'essentiel est là. On peut supposer que FA préfère garder la version 1.3.2 à cause de sa stabilité et de sa sécurité.

    3.1. Le mode "noconflict" de jQuery
    Comme je l'ai expliqué plus haut, jQuery est une librairie de fonctions JavaScript. Pour faire appel à ces fonctions, on utilise le signe $. Partout où vous verrez le dollar, cela signifiera qu'on fait appel à une fonction JQuery. Malheureusement, jQuery n'est pas le seul à utiliser ce caractère. PrototypeJS l'utilise également. Et si on installe les deux librairies, le navigateur, en voyant le $, serait incapable de savoir à quelle librairie on fait référence. C'est pourquoi jQuery propose un mode "noconflict" qui utilise le mot-clé jQuery à la place du $. Et ce mode, pour plus de facilité, est directement activé sur ForumActif.
    De ce fait, quand vous suivez des tutoriels jQuery pas forcément adaptés pour FA, il faut que vous veilliez à remplacer correctement le caractère $.
    Exemple :
    Code:
    $('#monid').hide();
    devient
    Code:
    jQuery('#monid').hide();

    3.2. Intégrer un plugin jQuery
    Un plugin, c'est en quelques sortes une mini librairie pour jQuery. Il sert à simplifier encore plus votre code. Vous vous souvenez de l'exemple avec le bol de lait? Eh bien, si on imagine que jQuery simplifie le JavaScript avec une fonction qui prépare le bol de lait, une autre qui fait les tartines de Nutella, et une autre qui prépare le plateau et le transporte, le plugin lui, va utiliser ces fonctions pour vous permettre de demander simplement un petit déjeuner au lit. Par contre, généralement, ce sont de petits programmes très spécifiques à une tâche particulière, donc limité bien que paramétrable. Dans notre exemple, vous pourrez paramétrer de prendre plutôt un thé et de mettre de la confiture à la place du nutella, mais vous ne pourrez pas décider d’ajouter subitement un verre de jus d’orange sur le plateau.

    Ceci étant dit, un plugin est donc avant tout un script JS. Vous pourrez éventuellement trouver un lien à intégrer dans le HTML, mais souvent il est en téléchargement, dans un dossier zip ou seul. Vous trouverez un fichier qui porte généralement ce nom:
    Code:
    nomDuPlugin.min.js
    Si vous ne pouvez pas/souhaitez pas l'intégrer dans un lien mais plutôt dans une page JS, c'est ce document qu'il faudra copier dans la page JS que vous créerez sur FA (voire le chapitre précédent).

    Une fois cela fait, votre plugin est installé, et il ne reste plus qu'à l'utiliser. En général, des exemples sont mis à votre disposition, dans le dossier téléchargé ou sur le site web du plugin : testez-les en premier lieu avant de partir à l’aventuer =D

    Il vous faudra parfois mettre du CSS, que vous pourrez modifier dans une certaine mesure, mais soyez prudents avec les modifications, certaines pouvant être critiques (et mettez le CSS dans panneau d'administration>affichage>couleurs>feuille de style CSS). Bon, en général, la couleur pose pas de souci, hein ^^

    En tout cas, vous aurez forcément du JS et du HTML à intégrer. Ce code JavaScript se servira des fonctions du plugin installé pour exécuter ce que vous voudrez. C’est lui que vous pourrez modifier et paramétrer. Pour le JavaScript, créez simplement une nouvelle page JS et copiez votre code comme dit plus haut, en suivant attentivement les explications données avec et en n'oubliant pas de remplacer convenablement les $.

    En général, il faut que vous respectiez certaines conventions dans votre HTML (utiliser une certaine structure, certaines classes, etc). Comme il ne s'agit que de HTML, vous pouvez le mettre à peu près n'importe où, dans un template ou un panneau d'accueil. Par contre, si les exemples vous présentent une page complète (avec les balises html, head, et body), ne prenez compte que du HTML présent entre les balises body (dans ce genre de cas, il se peut qu’entre les balises head, il y ait du CSS et/ou du JS… vous savez où les mettre, désormais : le css à sa place dans les feuilles de style, et le JS où vous voulez, le tout sans tenir compte du HTML qui se trouve autour dans la balise head). Il faut par contre bien veiller à respecter le modèle qui vous sera donné et bien sûr, s’assurer que le JS du plugin et le JS à paramétrer apparaissent.


    Et voilà, ce sera tout pour l'instant =)
    En espérant avoir été suffisamment claire pour vous aider... Et n'hésitez pas à poster pour voir et pour poser davantage de questions ^^ (ou même des précisions/rectifications, je suis loin de tout connaître =D)


    Dernière édition par Yui le Sam 31 Déc 2011 - 18:39, édité 1 fois



    ~ Yui ~
    Okami
    Okami
    FémininAge : 30Messages : 620

    Sam 31 Déc 2011 - 18:39

    Et hop, merci pour cette aide, Yui ;3



    ForumActif, JavaScript et jQuery : les bases générales Tumblr_m0lmf0oYqf1qbghoko1_500
    x°Okami°x
    crée par => Okami
    Falcon
    Falcon
    MasculinAge : 29Messages : 106

    Sam 31 Déc 2011 - 18:47

    Ça me sera très utile , merci.
    Taktiik
    Taktiik
    MasculinAge : 30Messages : 2292

    Sam 31 Déc 2011 - 18:52

    Omagad !!

    Merci :3 !
    Taktiik.

    avatar
    DiAnOs
    MasculinAge : 24Messages : 390

    Sam 31 Déc 2011 - 18:55

    Merci du partage. Very Happy



    ForumActif, JavaScript et jQuery : les bases générales Comman27
    Waza
    Waza
    FémininAge : 104Messages : 177

    Sam 31 Déc 2011 - 22:03

    Merci à toi :)
    Miss Volchok
    Miss Volchok
    FémininAge : 37Messages : 139

    Dim 1 Jan 2012 - 2:07

    Merci :)
    Milkiniz
    Milkiniz
    FémininAge : 31Messages : 72

    Dim 1 Jan 2012 - 2:35

    Bon bah je sens que j'ai bien besoin de ton aide xDDD
    Merci ! <3
    Vador
    Vador
    MasculinAge : 24Messages : 64

    Dim 1 Jan 2012 - 12:18

    merci
    Graph
    Graph"X"
    MasculinAge : 39Messages : 268

    Sam 7 Jan 2012 - 14:00

    merci



    ForumActif, JavaScript et jQuery : les bases générales 906554signaturegraphXAnonymous
    ForumActif, JavaScript et jQuery : les bases générales 3150065406_1_2_RyY9oMWP
    ForumActif, JavaScript et jQuery : les bases générales 3150229838_1_2_05FjnHrV
    Mon forum Reptile:

    Beaummont
    Beaummont
    FémininAge : 38Messages : 19

    Dim 22 Jan 2012 - 4:00

    Merci!



    ForumActif, JavaScript et jQuery : les bases générales Irisfff1
    Sparrow-style
    Sparrow-style
    FémininAge : 39Messages : 32055

    Dim 22 Jan 2012 - 10:54

    Merci pour ces infos qui en aideront surement plus d'un ! Wink



    sign
    Lie_MADcircus
    Lie_MADcircus
    MasculinAge : 32Messages : 37

    Mer 25 Jan 2012 - 6:53

    Merci!
    Ziktaon
    Ziktaon
    MasculinAge : 32Messages : 843

    Sam 28 Jan 2012 - 1:47

    Merci je vais voir ca :)



    ForumActif, JavaScript et jQuery : les bases générales 719846zikisigna



    ‘ Le codage est la logique, Le graphisme est le savoir faire ‘

    Shuu-Shuu
    Shuu-Shuu
    FémininAge : 28Messages : 199

    Sam 28 Jan 2012 - 9:36

    Thank =)
    ZasshuNeko
    ZasshuNeko
    MasculinAge : 37Messages : 11

    Jeu 9 Fév 2012 - 16:18

    Merci
    warning.sign
    warning.sign
    FémininAge : 34Messages : 58

    Jeu 9 Fév 2012 - 16:27

    Merci :3
    Swiff
    Swiff
    FémininAge : 30Messages : 24

    Mer 22 Fév 2012 - 13:53


      Depuis le temps que je cherchais ce genre de tutoriel, je galère tellement à comprendre le javascript malgré les explications données x)
      Merci beaucoup !
    giannismoll7
    giannismoll7
    MasculinAge : 30Messages : 62

    Jeu 23 Fév 2012 - 13:52

    merci :)
    kimel'
    kimel'
    FémininAge : 28Messages : 13

    Jeu 23 Fév 2012 - 18:01

    Merci pour ce tutoriel ! (:
    CapriceK
    CapriceK
    FémininAge : 33Messages : 254

    Ven 24 Fév 2012 - 16:17

    Merci pour l'aide!
    Ayael
    Ayael
    FémininAge : 29Messages : 598

    Sam 25 Fév 2012 - 10:56

    oh interessant^^
    LB670
    LB670
    MasculinAge : 47Messages : 22

    Sam 25 Fév 2012 - 15:08

    Merci cela m'intéresse beaucoup.



    ForumActif, JavaScript et jQuery : les bases générales Sans_t11
    Vintage Phonic
    Vintage Phonic
    FémininAge : 34Messages : 21

    Mer 29 Fév 2012 - 16:09

    Merci à toi !!!
    Riû-hi
    Riû-hi
    MasculinAge : 24Messages : 5

    Jeu 1 Mar 2012 - 15:35

    merci Very Happy
    Contenu sponsorisé


      La date/heure actuelle est Jeu 12 Déc 2024 - 9:27