Javascript sur Forumactif

Voir le sujet précédent Voir le sujet suivant Aller en bas

  • 0

Astuce Javascript sur Forumactif

Message par Ea le Mer 30 Mar 2011 - 14:55

Javascript sur Forumactif



Le javascript est un langage qui
permet d'agir dynamiquement sur le
contenu d'une page internet, il permet
donc d'ajouter des fonctions qui ne
seraient pas disponibles sans lui.


Que peut-on faire avec du javascript ?


    On peut faire un peu de tout, voici quelques exemples :

    • Poster un formulaire.
    • Charger le contenu de page.
    • Ajouter n'importe quel élément dans la page ( image, fichier flash, ... ).
    • Dessiner des dessins.
    • Modifier du texte.
    • Lire et ajouter des cookies.

    Toutes ces fonctions ainsi que d'autres entraînent que toutes les zones ( message, message privé, titre du sujet, chatbox, ... ) où des utilisateurs normaux auraient pu mettre du javascript ont été bloquées afin que ce ne soit plus réalisable.


Que ne peut-on pas faire avec du javascript ?


    On ne peut pas :

    • Charger le contenu d'une page d'un autre domaine ( sauf charger un script ).
    • Lire ou sauver des fichiers du disque dur.
    • Accéder au contenu d'une page d'un autre domaine.



Quels sont les méthodes pour en incorporer à une page ?


    Il y a trois possibilités :


    • Le code javascript est directement mis dans l'attribut d'une balise html :

      Voici un exemple avec l'attribut onClick, le javascript qu'on met dedans sera exécuté au clic ( gauche ) sur l'élément :

      Code:
      <img src="http://illiweb.com/bl/logo.png" title="Logo Forumactif" alt="bonhomme" onClick="alert('Bonjour =]');" />
      ( ici on a juste mis une fonction appelée alert qui affiche une boîte de dialogue
      et on a spécifié que le texte dans cette boîte devait être "Bonjour =]" )

    • Le code javascript est mis dans la page à l'intérieur d'une balise script :

      Voici un exemple dans lequel on demande à l'utilisateur son prénom, si il a appuyé sur annuler ou qu'il a laissé un vide dans la case on dit que son prénom est inconnu et ensuite on lui dit bonjour :

      Code:
      <script type="text/javascript">
         
         var prenom= prompt("Quel est votre prénom ?");
         
         if(prenom==null || prenom=="") prenom= "inconnu";
         
         alert("Bonjour "+prenom+" =]");
         
      </script>

    • Le code javascript est mis dans une feuille javascript qui est liée à la page :

      Voici un exemple d'un script qui lie une feuille d'un script qui permet d'afficher la chatbox en bas à gauche de chaque page sur laquelle le script est lié :

      Code:
      <script type="text/javascript" src="http://tinyurl.com/chatbox-fa-v2"></script>
      ( comme vous pouvez le voir c'est pareil qu'avec le code à l'intérieur d'une
      balise script mais il n'y a rien à l'intérieur de la balise et il y a un attribut
      src en plus qui a comme valeur l'adresse de la feuille javascript à lier )

    Le javascript qu'on inclut par la première méthode n'aura d'action qu'à l'exécution de l'évènement ( clic, survol, double-clic, touche enfoncée, ... ) et les deux méthodes qui suivent ont les mêmes effets, mais utiliser une feuille de script peut rendre la navigation plus rapide car grâce à la mémoire cache du navigateur elle ne devra pas être rechargée à chaque fois qu'on ouvre la page.


Où est-ce qu'on peut mettre ce javascript ?


    Comme dit plus haut, le javascript ne fonctionne pas dans les messages, messages privés et dans la signature car ça entraînerait un problème de sécurité Wink

    Mais on peut par contre le mettre dans :

    • Les codes Javascript.
    • Le message sur la page d'accueil.
    • Les descriptions de catégorie, forums, blog.
    • Les pages html.
    • Les annonces.
    • Les widgets.
    • Les templates ( sous phpbb2 et punbb ).
    • La description du site.

    Et on peut également lier des feuilles javascripts au forum par le panneau d'administration.


Quels sont les particularités pour ces différents endroits ?


    Pour les codes Javascript :

    • Localisation : PA > Modules > HTML & JAVASCRIPT > Gestion des codes Javascript.
    • Longueur maximum : beaucoup ( pourra changer ).
    • Le code javascript est "comprimé" pour gagner en vitesse à l'affichage, si le code n'a pas été bien écrit ( surtout par exemple avec des absences de ; à des endroits où il devrait y en avoir ) cela peut poser problème, le closure compiler en mode simple corrige ces erreurs et JSLint vous signale où elles sont.
    • Ce moyen mettra votre code dans une feuille javascript et la liera aux placements que vous avez choisi, il ne faut donc dedans que du javascript sans avoir besoin de l'entourer de <script></script> ^^
    • Affichage : index, portail, sous-forums, sujets, galerie ou partout.

    Pour le message sur la page d'accueil :

    • Localisation : PA > Affichage > Généralités > Message sur la page d'accueil.
    • Longueur maximum : 16 384 caractères ( pourra changer ).
    • Transformation du $ en &#36; ( si vous voulez l'utiliser pour du jquery il faut mettre jQuery à la place du $ ).
    • Le bbcode est transformé en html.
    • Affichage : sur la page d'index du forum.

    Pour les descriptions de catégorie, forums, blog :

    • Localisation : PA > Général > Catégories et forums > le voulu > Description
    • Longueur maximum : 16 384 caractères ( pourra changer ).
    • Transformation du $ en &#36; ( même remarque pour jquery ).
    • Le bbcode est transformé en html.
    • Affichage : où est affiché la description de la section.

    Pour les pages html :

    • Localisation : PA > Modules > Gestion des pages HTML.
    • Longueur maximum : 128 000 caractères ( pourra changer ).
    • Transformation du $ en &#36; à la création de la page ( en enregistrant sur une page déjà créée il n'y a pas ce problème ).
    • Affichage : en ouvrant le lien de la page.

    Pour les annonces :

    • Localisation : PA > Général > Annonces.
    • Longueur maximum : 65 535 caractères ( pourra changer ).
    • Transformation du $ en &#36; ( même remarque pour jquery ).
    • Affichage : suivant le choix sur la page d'accueil, le portail ou toute les pages.

    Pour les widgets :

    • Localisation : PA > Modules > Portail & Widgets.
    • Longueur maximum : 65 535 caractères ( pourra changer ).
    • Transformation du $ en &#36; ( même remarque pour jquery ).
    • Affichage : sur le portail et/ou sur le forum.

    Pour les templates :

    • Localisation : PA > Affichage > Templates.
    • Longueur maximum : 65 535 caractères ( pourra changer ).
    • Disponible pour : phpbb2 et punbb.
    • Suppression des tabulations, des retours à la ligne, des <? et ?>.
    • Affichage : où la template est affichée.

    Pour la description du site :

    • Localisation : PA > Forum | Configuration > Description du site.
    • Longueur maximum : 255 caractères ( pourra changer ).
    • Suppression du caractère ".
    • Sur toute les pages du forum.

    Pour les balises meta :

    • Localisation : PA > Général > Les moteurs de recherche > > Lier un javascript.
    • Longueur maximum : 200 caractères mais juste pour l'adresse de la feuille javascript.
    • Remplacement de " par &quot; et < par &lt; et > par &gt;
    • Sur la page d'index du forum et si il y en a la page de portail et/ou la page html d'accueil.


Qu'est-ce que le jquery ?


    Le jQuery est une libraire javascript comportant des fonctionnalités qui toutes utilisent seulement du javascript mais nous permettent d'écrire plus simplement du code qui fonctionnera sur tout les navigateurs.

    La dernière version ( actuellement 1.7.2 ) est inclue sur toute les pages d'un forum forumactif, donc elle est toujours directement utilisable sans n'avoir à rien rajouter.

    Voici un tout petit exemple qui ajoute "message en gras" en gras à la fin de la page :

    Code:
    /* ajout de "<strong>message en gras</strong>" à la fin de la page */
    jQuery('body').append('<strong>message en gras</strong>');
    Alors qu'en utilisant juste du javascript on aurait du mettre :

    Code:
    /* création de la balise de gras */
    var elementGras = document.createElement("strong");
    /* création de l'élément contenant du texte */
    var elementGrasText = document.createTextNode("message en gras");
    /* ajout de l'élément contenant du texte dans la balise gras */
    elementGras.appendChild(elementGrasText);
    /* ajout de la balise de gras à la fin de la page */
    document.body.appendChild(elementGras);


Où apprendre ?


    Pour le javascript :

    • Selfhtml.org : une bonne documentation des fonctions utilisables.
    • Mozilla.org : documentation de mozilla.
    • Microsoft.com : documentation de microsoft en anglais.
    • Ecma-international.org : le standard du javascript en anglais.
    • Commentcamarche.net : de bons dossiers.

    Pour le jquery :

    • Jquery.com : la documentation en anglais.
    • Developpeur-web2.com : traduction en français.
    • Jarodxxx.com : autre traduction en français.



Ea
Aidactif
Aidactif

Messages : 23429
Inscrit(e) le : 04/04/2008

Ea a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut


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