AccueilFAQRechercherMembresGroupesS'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.


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

    Partagez
    avatar
    Yui
    FémininAge : 28Messages : 334

    le Sam 31 Déc 2011 - 18:32

    Rappel du premier message :



    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 ~
    avatar
    pawnee
    FémininAge : 28Messages : 21

    le Jeu 12 Nov 2015 - 21:28

    je me prends la tête depuis des semaines sur le sujet, un petit cours sur le sujet ne pourra que m'aider! merci beaucoup!
    avatar
    Invité

    le Mar 24 Nov 2015 - 10:36

    Les mystères du jquery... merci :)
    avatar
    Databar
    MasculinAge : 23Messages : 142

    le Mer 2 Déc 2015 - 17:46

    ca peut etre utile
    avatar
    suley
    MasculinAge : 20Messages : 13

    le Jeu 10 Déc 2015 - 14:10

    Pas mal !
    avatar
    Emi.
    FémininAge : 26Messages : 58

    le Lun 14 Déc 2015 - 18:37

    merci beaucoup en espérant que cela m'aide :)
    avatar
    Hopefox
    FémininAge : 19Messages : 33

    le Mar 29 Déc 2015 - 22:26

    merci beaucoup ! ça m'a bien aidé ^^
    avatar
    Lilynufare
    FémininAge : 25Messages : 319

    le Dim 31 Jan 2016 - 12:01

    merci :)
    avatar
    Elocha
    FémininAge : 66Messages : 255

    le Dim 31 Jan 2016 - 13:05

    merci !



    eLoChA.
    avatar
    valtena_ethan
    MasculinAge : 26Messages : 410

    le Dim 31 Jan 2016 - 13:34

    merci



    avatar
    elfyqchan
    FémininAge : 20Messages : 48

    le Mar 2 Fév 2016 - 20:36

    merchi ^^



    avatar
    ClaryF
    FémininAge : 27Messages : 133

    le Ven 5 Fév 2016 - 15:50

    Merci !
    avatar
    Tempy
    FémininAge : 19Messages : 76

    le Mar 23 Fév 2016 - 15:45

    Voilà qui va m'être utile ! Merci !
    avatar
    TiGraou
    MasculinAge : 24Messages : 223

    le Mar 1 Mar 2016 - 15:31

    Merci cheers
    avatar
    Aki'
    FémininAge : 21Messages : 254

    le Ven 11 Mar 2016 - 13:34

    Merci
    avatar
    Choubakawa
    MasculinAge : 23Messages : 77

    le Lun 11 Avr 2016 - 0:18

    Merci !



    avatar
    Saphira
    FémininAge : 21Messages : 72

    le Sam 16 Avr 2016 - 19:34

    Merci :)
    avatar
    Kami-Chan
    FémininAge : 17Messages : 12

    le Mer 20 Avr 2016 - 12:07

    Merchi 'u'
    avatar
    gwenM
    FémininAge : 21Messages : 207

    le Mer 1 Juin 2016 - 12:04

    Merci :)
    avatar
    Ylkhana
    FémininAge : 23Messages : 291

    le Ven 3 Juin 2016 - 18:48

    Merci du partage !
    avatar
    Tsukasa
    MasculinAge : 24Messages : 52

    le Sam 11 Juin 2016 - 3:43

    Merci pour ce tuto ! (^-^)
    avatar
    Afterglow.winter
    FémininAge : 22Messages : 137

    le Ven 1 Juil 2016 - 21:13

    Merci :)



    How do you get up from an all time low?
    avatar
    Sakuyyya
    FémininAge : 17Messages : 16

    le Ven 15 Juil 2016 - 0:18

    Merci!
    avatar
    Sapphire
    FémininAge : 20Messages : 48

    le Mer 10 Aoû 2016 - 20:49

    Danke schön c:
    avatar
    Lidia64
    FémininAge : 19Messages : 60

    le Mar 16 Aoû 2016 - 15:19

    merci :)



    avatar
    Jynnea
    FémininAge : 22Messages : 98

    le Lun 22 Aoû 2016 - 17:45

    Merci:)
    Contenu sponsorisé


      La date/heure actuelle est Mer 23 Aoû 2017 - 21:39