Difference between revisions of "Adding JavaScript/fr"

From Joomla! Documentation

(Created page with "POUR JOOMLA! 1.5")
(Updating to match new version of source page)
 
(49 intermediate revisions by 3 users not shown)
Line 2: Line 2:
 
<noinclude>{{Joomla version|version=2.5 & 3.x|comment=séries}}</noinclude>
 
<noinclude>{{Joomla version|version=2.5 & 3.x|comment=séries}}</noinclude>
 
{{-}}
 
{{-}}
 +
 +
'''Note that a more up-to-date Joomla document covering this topic can be found at [[Adding JavaScript and CSS to the page]], although it currently doesn't cover the more advanced topics at the bottom of this page.'''
 +
 
Le JavaScript (également connu comme ECMAScript) est un langage de scripts principalement utilisé côté client et développé afin d'étendre et d'améliorer l'expérience utilisateur. Joomla! propose aux développeurs des mécanismes faciles à utiliser pour inclure du JavaScript dans leurs extensions en utilisant les méthodes API.
 
Le JavaScript (également connu comme ECMAScript) est un langage de scripts principalement utilisé côté client et développé afin d'étendre et d'améliorer l'expérience utilisateur. Joomla! propose aux développeurs des mécanismes faciles à utiliser pour inclure du JavaScript dans leurs extensions en utilisant les méthodes API.
 
Il existe différentes méthodes pour intégrer du JavaScript dans vos extensions Joomla! et certaines vont être présentées ci-dessous.
 
Il existe différentes méthodes pour intégrer du JavaScript dans vos extensions Joomla! et certaines vont être présentées ci-dessous.
Line 7: Line 10:
 
==Utilisation==
 
==Utilisation==
  
−
There are three methods for embedding JavaScript into your code using the Joomla API; [http://api.joomla.org/1.5/Joomla-Framework/Document/JDocument.html#addScriptDeclaration JDocument::addScriptDeclaration], [http://api.joomla.org/1.5/Joomla-Framework/Document/JDocument.html#addScript JDocument::addScript] and [http://api.joomla.org/1.5/Joomla-Framework/HTML/JHTML.html#script script]. These methods should be called either in your component's View class <tt><yourcomponent>/views/<yourview>/view.html.php</tt> or template script <tt><yourcomponent>/views/<yourview>/tmpl/<yourtemplate>.php</tt> or in the case of a module, in its template script <tt><yourmodule>/tmpl/<yourtemplate>.php</tt>.  
+
Il existe trois méthodes pour l'intégration de JavaScript dans votre code à l'aide de l'API Joomla : [http://api.joomla.org/1.5/Joomla-Framework/Document/JDocument.html#addScriptDeclaration JDocument::addScriptDeclaration], [http://api.joomla.org/1.5/Joomla-Framework/Document/JDocument.html#addScript JDocument::addScript] et [http://api.joomla.org/1.5/Joomla-Framework/HTML/JHTML.html#script script]. Ces méthodes doivent être appelées soit dans votre classe View de composant <tt><yourcomponent>/views/<yourview>/view.html.php</tt> ou par un script de template <tt><yourcomponent>/views/<yourview>/tmpl/<yourtemplate>.php</tt> ou dans le cas d'un module, dans son script de template <tt><yourmodule>/tmpl/<yourtemplate>.php</tt>.  
  
 
===JavaScript en ligne===
 
===JavaScript en ligne===
  
−
Blocks of JavaScript code can be declared directly within a component or module's display template using the [http://api.joomla.org/1.5/Joomla-Framework/Document/JDocument.html JDocument] class' [http://api.joomla.org/1.5/Joomla-Framework/Document/JDocument.html#addScriptDeclaration addScriptDeclaration] method:
+
Les blocs de code JavaScript peuvent être déclarés directement dans la vue de template pour un composant ou un module par l'utilisation des classes : [http://api.joomla.org/1.5/Joomla-Framework/Document/JDocument.html JDocument] de la méthode [http://api.joomla.org/1.5/Joomla-Framework/Document/JDocument.html#addScriptDeclaration addScriptDeclaration] :
  
 
<source lang="php">
 
<source lang="php">
Line 26: Line 29:
 
===JavaScript externe===
 
===JavaScript externe===
  
−
Alternatively, you may wish to separate your JavaScript into a separate file. Separating your JavaScript into an external file can make your template code easier to read especially if the JavaScript is lengthy or complex.
+
Comme alternative, vous pouvez séparer votre code JavaScript en le plaçant dans un fichier séparé. Séparer votre code JavaScript dans un fichier externe peut rendre le code de votre template plus facile à lire surtout si le JavaScript est longue et complexe.
  
−
There are two ways to include a JavaScript file using the Joomla API. The first involves using the [http://api.joomla.org/1.5/Joomla-Framework/Document/JDocument.html JDocument] class' [http://api.joomla.org/1.5/Joomla-Framework/Document/JDocument.html#addScript addScript] method:
+
Il existe deux façons d'inclure un fichier JavaScript à l'aide de l'API Joomla. La première consiste à utiliser la classe [http://api.joomla.org/1.5/Joomla-Framework/Document/JDocument.html JDocument] de la méthode [http://api.joomla.org/1.5/Joomla-Framework/Document/JDocument.html#addScript addScript] :
  
 
<source lang="php">
 
<source lang="php">
Line 37: Line 40:
 
</source>
 
</source>
  
−
The second uses the [http://api.joomla.org/1.5/Joomla-Framework/HTML/JHTML.html JHTML] class' [http://api.joomla.org/1.5/Joomla-Framework/HTML/JHTML.html#script script] method:
+
La seconde utilise la classe [http://api.joomla.org/1.5/Joomla-Framework/HTML/JHTML.html JHTML] de la méthode [http://api.joomla.org/1.5/Joomla-Framework/HTML/JHTML.html#script script] :  
  
 
<source lang="php">
 
<source lang="php">
Line 46: Line 49:
 
</source>
 
</source>
  
−
API has changed in 3.x, so the second parameter cannot be a string. If you really need to use this method, you must include the absolute link to your javacript file:
+
L'API a changé dans 3.x, de sorte que le deuxième paramètre ne peut pas être une chaîne de caractères. Si vous avez vraiment besoin d'utiliser cette méthode, vous devez inclure le lien absolut vers votre fichier JavaScript :
  
 
<source lang="php">
 
<source lang="php">
 
<?php
 
<?php
 
JHtml::script(Juri::base() . 'templates/custom/js/sample.js');
 
JHtml::script(Juri::base() . 'templates/custom/js/sample.js');
 +
?>
 +
</source>
 +
 +
You can use options in a third parameter. This example shows the options <tt>version </tt> and <tt>relative </tt>. The file example should be saved in the folder <tt>media/com_example/'''js'''/example.min.js</tt>. So you do NOT need to insert the <tt>js</tt> in the path you insert as second parameter.
 +
 +
<source lang="php">
 +
<?php
 +
JHtml::_('script', 'com_example/example.min.js', array('version' => 'auto', 'relative' => true));
 
?>
 
?>
 
</source>
 
</source>
  
 
==Description==
 
==Description==
−
The Joomla API's [http://api.joomla.org/1.5/Joomla-Framework/Document/JDocument.html#addScriptDeclaration JDocument::addScriptDeclaration], [http://api.joomla.org/1.5/Joomla-Framework/Document/JDocument.html#addScript JDocument::addScript] and [http://api.joomla.org/1.5/Joomla-Framework/HTML/JHTML.html#script script] methods embed JavaScript into Joomla's index.php via the jdoc head tag:
+
Les méthodes des API Joomla! [http://api.joomla.org/1.5/Joomla-Framework/Document/JDocument.html#addScriptDeclaration JDocument::addScriptDeclaration], [http://api.joomla.org/1.5/Joomla-Framework/Document/JDocument.html#addScript JDocument::addScript] et [http://api.joomla.org/1.5/Joomla-Framework/HTML/JHTML.html#script script] permettent d'intégrer du JavaScript dans le fichier Joomla! <tt>index.php</tt> via la balise d'en-tête :
  
 
<source lang="html4strict">
 
<source lang="html4strict">
Line 61: Line 72:
 
</source>
 
</source>
  
−
Using the [http://api.joomla.org/1.5/Joomla-Framework/Document/JDocument.html#addScript JDocument::addScript] or [http://api.joomla.org/1.5/Joomla-Framework/HTML/JHTML.html#script script] methods to embed JavaScript includes would result in the index.php rendering the following HTML:
+
Utiliser les méthodes [http://api.joomla.org/1.5/Joomla-Framework/Document/JDocument.html#addScript JDocument::addScript] ou [http://api.joomla.org/1.5/Joomla-Framework/HTML/JHTML.html#script script] pour implémenter JavaScript dans le fichier <tt>index.php</tt> donnera le code HTML suivant :
  
 
<source lang="html4strict">
 
<source lang="html4strict">
Line 71: Line 82:
 
</source>
 
</source>
  
−
Calling the class method [http://api.joomla.org/1.5/Joomla-Framework/Document/JDocument.html#addScriptDeclaration JDocument::addScriptDeclaration] would render the following HTML:
+
L'appel de la méthode de la classe [http://api.joomla.org/1.5/Joomla-Framework/Document/JDocument.html#addScriptDeclaration JDocument::addScriptDeclaration] générera le code HTML suivant :
  
 
<source lang="html4strict">
 
<source lang="html4strict">
Line 85: Line 96:
 
</source>
 
</source>
  
−
Using these methods is highly recommended as it clearly differentiates another scripting language (JavaScript) from the main PHP code, ensures all JavaScript is correctly embedded between the <head></head> tags and, in the case of JDocument::addScript and JHTML::script ensures that a JavaScript file is included only once (I.e. there is no .js file duplication).
+
L'utilisation de ces méthodes est fortement recommandée car elle différencie clairement un autre langage de script (JavaScript) d'avec le langage principal PHP, ce qui garantit que tous les JavaScript seront correctement intégrés entre les balises <head></head>. Dans le de JDocument::addScript et JHTML::script, cela permettra de s'assurer qu'un fichier JavaScript ne sera intégré qu'une seule fois (il n'y aura pas de fichiers .js doublons).
  
 
==À l'aide d'un Framework JavaScript==
 
==À l'aide d'un Framework JavaScript==
  
−
A Javascript framework provides developers with generic functionality for handling various coding tasks in a familiar, consistent and platform-independent way. A framework enables the developer to forget about the intricacies of implementing a certain function in different web browsers and focus on the requirements of the software.
+
Un framework Javascript fournit aux développeurs une fonctionnalité générique pour le traitement des différentes tâches de codage dans un cadre familier, cohérent et indépendant de la plateforme. Un framework permet au développeur d'oublier les subtilités de la mise en œuvre d'une fonction spécifique pour différents navigateurs web et ainsi de rester concentrés sur les exigences du logiciel.
  
−
Two [[S:MyLanguage/Javascript Frameworks|Javascript Frameworks]] are provided as part of Joomla 3.x; jQuery and Mootools. jQuery is a newly introduced framework which integrates with Joomla's new Bootstrap HTML framework; Mootools is Joomla's legacy Javascript library which is now superseded by jQuery and is included for backwards compatibility with 3rd party extensions.
+
Deux [[S:MyLanguage/Javascript Frameworks|Frameworks JavaScript]] sont disponibles dans Joomla! 3.x à savoir jQuery et Mootools. jQuery est un framework nouvellement introduit dans le cadre de l'intégration du nouveau framework HTML Bootstrap. Mootools est une bibliothèque JavaScript héritée qui est désormais remplacée par jQuery et uniquement intégrée pour des questions de rétro-compatibilité avec les extensions tierces.
  
−
In nearly all cases you should use a framework when developing Javascript in your extensions or templates and including one is very simple with Joomla's API.
+
Dans presque tous les cas vous devriez utiliser un framework lorsque vous travailler avec JavaScript dans le cadre du développement de vos extensions ou templates et leur intégration est très simple à mettre en oeuvre avec les API Joomla.
  
−
===Joomla 3.x jQuery ===
+
===Joomla! 3.x et jQuery ===
−
Please see the guide on [[Javascript_Frameworks|Javascript Frameworks in Joomla 3.x]] for information about including a framework in Joomla 3.x
+
Pour plus d'informations sur la façon d'intégrer un framework dans Joomla! 3.x, veuillez consulter le guide sur les [[Javascript_Frameworks|Frameworks JavaScript dans Joomla 3.x]].
  
−
=== Joomla 1.5/2.5 Mootools ===
+
===Joomla! 1.5/2.5 et Mootools===
−
Unless you are maintaining Javascript code which leverages Mootools or you are developing an extension for Joomla 2.5 or earlier it is recommended you use jQuery instead.
+
Sauf si vous devez assurer la maintenance d'un code JavaScript utilisant Mootools ou si vous développez une extension pour des versions 2.5 ou antérieures de Joomla, il est recommandé d'utiliser jQuery à la place.
  
−
Firstly, you will need to include the Mootools code in your extension. To include the Mootools framework in your extension, you add the following code to your view.html.php or tmpl file:
+
Tout d'abord, il vous faudra inclure le code Mootools dans votre extension. Pour inclure le framework Mootools dans votre extension, vous devez ajouter le code suivant à votre fichier <tt>view.html.php</tt> ou <tt>tmpl</tt> :
  
 
POUR JOOMLA! 1.5
 
POUR JOOMLA! 1.5
Line 108: Line 119:
 
</source>
 
</source>
  
−
FOR JOOMLA 2.5
+
POUR JOOMLA! 2.5
 
<source lang="php">
 
<source lang="php">
 
JHtml::_('behavior.framework');
 
JHtml::_('behavior.framework');
 
</source>
 
</source>
  
−
The above code results in the same outcome as the similar jQuery framework statement; that is it ensures Mootools is included correctly and only once.
+
Le code ci-dessus donnera le même résultat que lors d'une déclaration jQuery. Cela permet de s'assurer que Mootools est inclus correctement et une fois uniquement.
  
−
Then using Mootools is almost identical to jQuery:
+
Ensuite, l'utilisation de Mootools est presque identique à celle de jQuery :
  
 
<source lang="php">
 
<source lang="php">
Line 125: Line 136:
 
</source>
 
</source>
  
−
More information about Mootools is available at http://mootools.net/. For API documentation, visit http://mootools.net/docs/core.
+
Vous pouvez consulter plus d'informations à propos de Mootools sur http://mootools.net/. Pour la documentation de l'API, veuillez consulter : http://mootools.net/docs/core.
  
−
== Important notes for 3rd party developers ==
+
==Notes importantes pour les développeurs d’extensions tierces==
  
−
If you are creating a custom template override or extension that needs to add a custom JS file, make sure to add important dependencies such as Jquery or Mootools before your custom JS files. JS framework fiels must always be  loaded before any other files to make sure they get executed first, otherwise other files that load before the frameworks they need are likely to end in JS exceptions.
+
Dans le cadre de la création d'un override de template ou d'une extension qui impose d'ajouter un fichier JS personnalisé, assurez-vous d'ajouter d'importantes dépendances, telles que Jquery ou Mootools avant votre fichier JS personnalisé. Les fichiers de framework JS doivent toujours être chargés avant tout autres fichiers afin de s'assurer qu'ils soient exécutés en premier, sinon d'autres fichiers qui seront chargés avant pourraient apparaître comme des exceptions JS.
  
−
Some templates like Protostar or Beez insert all the dependencies you need using functions like
+
Certains templates comme Protostar ou Beez intègrent toutes les dépendances dont vous avez besoin en utilisant des fonctions comme :
  
 
  JHtml::_('bootstrap.framework');
 
  JHtml::_('bootstrap.framework');
  
−
to load Jquery + Bootstrap, but you should not rely in this fact on your extensions or custom templates overrides. Always make sure your extension or custom override load the dependencies you need before the template does it, I will explain why later:
+
pour charger Jquery + Bootstrap, mais vous ne devriez pas procéder ainsi pour vos extensions ou vos surcharges de templates. Assurez-vous que votre extension ou votre surcharge charge les dépendances dont vous avez besoin, avant que le template ne le fasse, je vous expliquerai pourquoi plus tard :
  
−
For example if you got a custom template override that needs to insert a JS file with some Jquery scripts that does fancy things on all the pages where that template override is being used. In that case you should declare this on the top section of that override file:
+
Par exemple, vous avez une surcharge personnalisée de template qui a besoin de l'intégration de fichier JS avec des scripts Jquery sur toutes les pages de remplacement de votre template. Dans ce cas, vous devez le déclarer au début de la section de votre fichier de surcharge :
  
 
  JHtml::_('jquery.framework');
 
  JHtml::_('jquery.framework');
 
  $doc->addScript('templates/'.$this->template.'/js/fancy-script.js');
 
  $doc->addScript('templates/'.$this->template.'/js/fancy-script.js');
  
−
If you are developing a 3rd party extension that you plan to put on the Joomla! extension directory you should do something like this:
+
Si vous développez une extension tierce que vous souhaiter proposer sur le Joomla! Extensions Directory, vous devrez faire quelque chose comme ceci :
  
 
  if($params->get('add_extension_resources', false))
 
  if($params->get('add_extension_resources', false))
Line 150: Line 161:
 
  }
 
  }
  
−
The conditional clause to decide whether to add or not the extension resources is '''strongly encouraged''' and considered a '''good practice''' because it gives flexibility to 3rd party developers who don't want to use your extension resources and use custom/modified files without having to battle with Joomla! using workarounds and hacks to be able to remove your original extensions resources in order to avoid duplicates and conflicts.
+
La clause conditionnelle pour décider d'ajouter ou non les ressources de l'extension est '''très fortement encouragée''' et cela est considéré comme étant une '''bonne pratique''' car elle permet une flexibilité aux développeurs d'extensions tierces qui ne veulent pas utiliser vos ressources d'extension mais plutôt d'utiliser des fichiers modifiés/personnalisés sans avoir à se battre contre Joomla! en créant des solutions de rechange et des hacks pour être en mesure de retirer les ressources de vos extensions qui seront des doublons ou généreront des conflits.
  
−
==== Explanation ====
+
====Explication====
  
−
If you check the source code of the index.php from the Protostar template, you can see that the statements
+
Si vous regardez le code source de l'<tt>index.php</tt> du template Protostar, vous pouvez voir que les déclarations
  
 
  JHtml::_('bootstrap.framework');
 
  JHtml::_('bootstrap.framework');
  
−
is added way before the statement
+
est ajoutée avant la déclaration
  
 
  <jdoc:include type="head" />
 
  <jdoc:include type="head" />
  
−
this can make you think that the framework files and your 3rd party files using methods like
+
cela peut vous faire penser que les fichiers framework et vos fichiers tierces utilisent les méthodes comme
  
 
  $doc->addScript('templates/'.$this->template.'/js/fancy-script.js');
 
  $doc->addScript('templates/'.$this->template.'/js/fancy-script.js');
 
  $doc->addScript('media/com_fancy/js/fancy-script.js');
 
  $doc->addScript('media/com_fancy/js/fancy-script.js');
  
−
will be added in the right order at the right spot, '''but that is not the case''', because extension files and template override files are processed '''first''' and the index.php file of your current template is processed the '''last'''. This will cause that your custom JS files get inserted first and the framework files inserted from the template get inserted after.  
+
sera ajouté dans le bon ordre, au bon endroit, '''mais ce n'est pas le cas''' car les fichiers d'extension ou les surcharges de template sont exécuté '''en premier''' et le fichier <tt>index.php</tt> de votre template actuel est exécuté en '''dernier'''. Cela fera que vos fichiers JS personnalisés seront insérés en premier et que les fichiers du framework seront insérés après.  
  
−
This happens because the Joomla API (such as $doc->addScript) uses an array to store the JS files paths and they get rendered in the document in the same order they where inserted into that array (FIFO stack), also once a file path is inserted on the array and another API call tries to insert the same file this action is ignored to avid duplicates, it also means that the order of the files is not altered when the same files is attempted to be inserted several times.
+
Ceci se produit parce que l'API Joomla! (tel que $doc->addScript) utilise un tableau array pour stocker les chemins des fichiers JS et ils seront rendus dans le document dans le même ordre qu'ils auront été insérés dans cet array (pile FIFO). Egalement, une fois qu'un chemin d'accès au fichier est inséré dans le tableau et qu'un autre appel d'API tente d'insérer le même fichier, de cette action est ignorée pour éviter les doublons. Cela signifie également que l'ordre des fichiers n'est pas modifié lorsque les mêmes fichiers tenteront d'être insérés plusieurs fois.
  
−
Having said that doing this
+
Après avoir exposé cela, il convient d'ajouter
  
 
  JHtml::_('jquery.framework');
 
  JHtml::_('jquery.framework');
 
  $doc->addScript('templates/'.$this->template.'/js/fancy-script.js');
 
  $doc->addScript('templates/'.$this->template.'/js/fancy-script.js');
  
−
at your custom templates overrides and extension, is '''required''' and does not cause harm or conflict with the call
+
à votre surcharge personnalisée de template ou extension est '''requis''' et ne causera pas de dommages ou conflits avec l'appel :
  
 
  JHtml::_('bootstrap.framework');
 
  JHtml::_('bootstrap.framework');
  
−
at your template index.php file.
+
de votre fichier template <tt>index.php</tt>.
 +
 
 +
==Liens externes==
  
−
== External Links ==
+
{{JVer|2.5}} https://api.joomla.org/cms-2.5/classes/JHtmlBehavior.html#method_framework
  
−
http://api.joomla.org/Joomla-Platform/HTML/JHtmlBehavior.html#methodframework
+
{{JVer|3.x}} https://api.joomla.org/cms-3/classes/JHtmlBehavior.html#method_framework
  
 
http://en.wikipedia.org/wiki/JavaScript
 
http://en.wikipedia.org/wiki/JavaScript
Line 195: Line 208:
  
 
<noinclude>
 
<noinclude>
−
[[Category:Templates]]
+
[[Category:Templates/fr|Templates]]
−
[[Category:Modules]]
+
[[Category:Modules/fr|Modules]]
−
[[Category:Components]]
+
[[Category:Components/fr|Composants]]
−
[[Category:Plugins]]
+
[[Category:Plugins/fr|Plugins]]
−
[[Category:Tutorials]]
+
[[Category:Tutorials/fr|Didacticiels]]
−
[[Category:JavaScript]]
+
[[Category:JavaScript/fr|JavaScript]]
 
</noinclude>
 
</noinclude>

Latest revision as of 21:15, 18 January 2020

Other languages:
Deutsch • ‎English • ‎Nederlands • ‎eesti • ‎español • ‎français • ‎português do Brasil • ‎български • ‎فارسی • ‎हिन्दी • ‎বাংলা • ‎中文（台灣）‎
Joomla! 
2.5 & 3.x
séries

Note that a more up-to-date Joomla document covering this topic can be found at Adding JavaScript and CSS to the page, although it currently doesn't cover the more advanced topics at the bottom of this page.

Le JavaScript (également connu comme ECMAScript) est un langage de scripts principalement utilisé côté client et développé afin d'étendre et d'améliorer l'expérience utilisateur. Joomla! propose aux développeurs des mécanismes faciles à utiliser pour inclure du JavaScript dans leurs extensions en utilisant les méthodes API. Il existe différentes méthodes pour intégrer du JavaScript dans vos extensions Joomla! et certaines vont être présentées ci-dessous.

Utilisation

Il existe trois méthodes pour l'intégration de JavaScript dans votre code à l'aide de l'API Joomla : JDocument::addScriptDeclaration, JDocument::addScript et script. Ces méthodes doivent être appelées soit dans votre classe View de composant <yourcomponent>/views/<yourview>/view.html.php ou par un script de template <yourcomponent>/views/<yourview>/tmpl/<yourtemplate>.php ou dans le cas d'un module, dans son script de template <yourmodule>/tmpl/<yourtemplate>.php.

JavaScript en ligne

Les blocs de code JavaScript peuvent être déclarés directement dans la vue de template pour un composant ou un module par l'utilisation des classes : JDocument de la méthode addScriptDeclaration : 

<?php
$document = JFactory::getDocument();
$document->addScriptDeclaration('
    window.event("domready", function() {
        alert("An inline JavaScript Declaration");
    });
');
?>

JavaScript externe

Comme alternative, vous pouvez séparer votre code JavaScript en le plaçant dans un fichier séparé. Séparer votre code JavaScript dans un fichier externe peut rendre le code de votre template plus facile à lire surtout si le JavaScript est longue et complexe.

Il existe deux façons d'inclure un fichier JavaScript à l'aide de l'API Joomla. La première consiste à utiliser la classe JDocument de la méthode addScript : 

<?php
$document = JFactory::getDocument();
$document->addScript('/media/system/js/sample.js');
?>

La seconde utilise la classe JHTML de la méthode script : 

<?php
// Add the path parameter if the path is different than 'media/system/js/'
JHTML::script('sample.js', 'templates/custom/js/');
?>

L'API a changé dans 3.x, de sorte que le deuxième paramètre ne peut pas être une chaîne de caractères. Si vous avez vraiment besoin d'utiliser cette méthode, vous devez inclure le lien absolut vers votre fichier JavaScript : 

<?php
JHtml::script(Juri::base() . 'templates/custom/js/sample.js');
?>

You can use options in a third parameter. This example shows the options version and relative . The file example should be saved in the folder media/com_example/js/example.min.js. So you do NOT need to insert the js in the path you insert as second parameter. 

<?php
JHtml::_('script', 'com_example/example.min.js', array('version' => 'auto', 'relative' => true));
?>

Description

Les méthodes des API Joomla! JDocument::addScriptDeclaration, JDocument::addScript et script permettent d'intégrer du JavaScript dans le fichier Joomla! index.php via la balise d'en-tête : 

<jdoc:include type="head"/>

Utiliser les méthodes JDocument::addScript ou script pour implémenter JavaScript dans le fichier index.php donnera le code HTML suivant : 

<head>
...
<script type="text/javaScript" src="/media/system/js/sample.js"></script>
...
</head>

L'appel de la méthode de la classe JDocument::addScriptDeclaration générera le code HTML suivant : 

<head>
...
<script type="text/javaScript">
window.addEvent("domready", function() {
    alert("Embedded block of JS here");
});
</script>
...
</head>

L'utilisation de ces méthodes est fortement recommandée car elle différencie clairement un autre langage de script (JavaScript) d'avec le langage principal PHP, ce qui garantit que tous les JavaScript seront correctement intégrés entre les balises <head></head>. Dans le de JDocument::addScript et JHTML::script, cela permettra de s'assurer qu'un fichier JavaScript ne sera intégré qu'une seule fois (il n'y aura pas de fichiers .js doublons).

À l'aide d'un Framework JavaScript

Un framework Javascript fournit aux développeurs une fonctionnalité générique pour le traitement des différentes tâches de codage dans un cadre familier, cohérent et indépendant de la plateforme. Un framework permet au développeur d'oublier les subtilités de la mise en œuvre d'une fonction spécifique pour différents navigateurs web et ainsi de rester concentrés sur les exigences du logiciel.

Deux Frameworks JavaScript sont disponibles dans Joomla! 3.x à savoir jQuery et Mootools. jQuery est un framework nouvellement introduit dans le cadre de l'intégration du nouveau framework HTML Bootstrap. Mootools est une bibliothèque JavaScript héritée qui est désormais remplacée par jQuery et uniquement intégrée pour des questions de rétro-compatibilité avec les extensions tierces.

Dans presque tous les cas vous devriez utiliser un framework lorsque vous travailler avec JavaScript dans le cadre du développement de vos extensions ou templates et leur intégration est très simple à mettre en oeuvre avec les API Joomla.

Joomla! 3.x et jQuery

Pour plus d'informations sur la façon d'intégrer un framework dans Joomla! 3.x, veuillez consulter le guide sur les Frameworks JavaScript dans Joomla 3.x.

Joomla! 1.5/2.5 et Mootools

Sauf si vous devez assurer la maintenance d'un code JavaScript utilisant Mootools ou si vous développez une extension pour des versions 2.5 ou antérieures de Joomla, il est recommandé d'utiliser jQuery à la place.

Tout d'abord, il vous faudra inclure le code Mootools dans votre extension. Pour inclure le framework Mootools dans votre extension, vous devez ajouter le code suivant à votre fichier view.html.php ou tmpl :

POUR JOOMLA! 1.5 

JHTML::_('behavior.mootools');

POUR JOOMLA! 2.5 

JHtml::_('behavior.framework');

Le code ci-dessus donnera le même résultat que lors d'une déclaration jQuery. Cela permet de s'assurer que Mootools est inclus correctement et une fois uniquement.

Ensuite, l'utilisation de Mootools est presque identique à celle de jQuery : 

JFactory::getDocument()->addScriptDeclaration('
window.addEvent("domready", function() {
    alert($("list").getElements("li").length);
});
');

Vous pouvez consulter plus d'informations à propos de Mootools sur http://mootools.net/. Pour la documentation de l'API, veuillez consulter : http://mootools.net/docs/core.

Notes importantes pour les développeurs d’extensions tierces

Dans le cadre de la création d'un override de template ou d'une extension qui impose d'ajouter un fichier JS personnalisé, assurez-vous d'ajouter d'importantes dépendances, telles que Jquery ou Mootools avant votre fichier JS personnalisé. Les fichiers de framework JS doivent toujours être chargés avant tout autres fichiers afin de s'assurer qu'ils soient exécutés en premier, sinon d'autres fichiers qui seront chargés avant pourraient apparaître comme des exceptions JS.

Certains templates comme Protostar ou Beez intègrent toutes les dépendances dont vous avez besoin en utilisant des fonctions comme : 

JHtml::_('bootstrap.framework');

pour charger Jquery + Bootstrap, mais vous ne devriez pas procéder ainsi pour vos extensions ou vos surcharges de templates. Assurez-vous que votre extension ou votre surcharge charge les dépendances dont vous avez besoin, avant que le template ne le fasse, je vous expliquerai pourquoi plus tard :

Par exemple, vous avez une surcharge personnalisée de template qui a besoin de l'intégration de fichier JS avec des scripts Jquery sur toutes les pages de remplacement de votre template. Dans ce cas, vous devez le déclarer au début de la section de votre fichier de surcharge : 

JHtml::_('jquery.framework');
$doc->addScript('templates/'.$this->template.'/js/fancy-script.js');

Si vous développez une extension tierce que vous souhaiter proposer sur le Joomla! Extensions Directory, vous devrez faire quelque chose comme ceci : 

if($params->get('add_extension_resources', false))
{
    JHtml::_('jquery.framework');
    $doc->addScript('media/com_fancy/js/fancy-script.js');
}

La clause conditionnelle pour décider d'ajouter ou non les ressources de l'extension est très fortement encouragée et cela est considéré comme étant une bonne pratique car elle permet une flexibilité aux développeurs d'extensions tierces qui ne veulent pas utiliser vos ressources d'extension mais plutôt d'utiliser des fichiers modifiés/personnalisés sans avoir à se battre contre Joomla! en créant des solutions de rechange et des hacks pour être en mesure de retirer les ressources de vos extensions qui seront des doublons ou généreront des conflits.

Explication

Si vous regardez le code source de l'index.php du template Protostar, vous pouvez voir que les déclarations 

JHtml::_('bootstrap.framework');

est ajoutée avant la déclaration 

<jdoc:include type="head" />

cela peut vous faire penser que les fichiers framework et vos fichiers tierces utilisent les méthodes comme 

$doc->addScript('templates/'.$this->template.'/js/fancy-script.js');
$doc->addScript('media/com_fancy/js/fancy-script.js');

sera ajouté dans le bon ordre, au bon endroit, mais ce n'est pas le cas car les fichiers d'extension ou les surcharges de template sont exécuté en premier et le fichier index.php de votre template actuel est exécuté en dernier. Cela fera que vos fichiers JS personnalisés seront insérés en premier et que les fichiers du framework seront insérés après.

Ceci se produit parce que l'API Joomla! (tel que $doc->addScript) utilise un tableau array pour stocker les chemins des fichiers JS et ils seront rendus dans le document dans le même ordre qu'ils auront été insérés dans cet array (pile FIFO). Egalement, une fois qu'un chemin d'accès au fichier est inséré dans le tableau et qu'un autre appel d'API tente d'insérer le même fichier, de cette action est ignorée pour éviter les doublons. Cela signifie également que l'ordre des fichiers n'est pas modifié lorsque les mêmes fichiers tenteront d'être insérés plusieurs fois.

Après avoir exposé cela, il convient d'ajouter 

JHtml::_('jquery.framework');
$doc->addScript('templates/'.$this->template.'/js/fancy-script.js');

à votre surcharge personnalisée de template ou extension est requis et ne causera pas de dommages ou conflits avec l'appel : 

JHtml::_('bootstrap.framework');

de votre fichier template index.php.

Liens externes

Joomla 2.5 https://api.joomla.org/cms-2.5/classes/JHtmlBehavior.html#method_framework

Joomla 3.x https://api.joomla.org/cms-3/classes/JHtmlBehavior.html#method_framework

http://en.wikipedia.org/wiki/JavaScript

http://www.w3schools.com/js/default.asp

http://mootools.net/

http://jquery.com/

Retrieved from "https://docs.joomla.org/index.php?title=Adding_JavaScript/fr&oldid=645570"