Joomla! Documentation - User contributions [en]

J3.x:Adding JavaScript and CSS to the page

2013-08-12T06:57:17Z

Chivitli: /* Inserting from within a PHP file */

{{version/tutor|2.5,3.x}}{{review||Code is no longer 2.5/3.x applicable}}

== Inserting from a File ==
To have a well-formed XHTML document, you must put all references to Javascript and CSS files within the <code><head></code> portion. Since Joomla! generates all the HTML that makes up a page before output, it is possible to add these references within the <head> tags from your extension. The simplest way to do this is to make use of the functionality built in to Joomla!. In Joomla 2.5 you can still use the following, but it's marked as deprecated and changed in 3.x:
<source lang="php">
// Add a reference to a Javascript file
// The default path is 'media/system/js/'
JHtml::script($filename, $path, $mootools);

// Add a reference to a CSS file
// The default path is 'media/system/css/'
JHtml::stylesheet($filename, $path);
</source>

API has changed in 3.x, so the second parameter cannot be a string. If you really need to use these methods, you must include the absolute link to your files:

<source lang="php">
<?php
JHtml::script(Juri::base() . 'templates/custom/js/sample.js', $mootools);
JHtml::stylesheet(Juri::base() . 'templates/custom/css/style.js');
?>
</source>

Using these functions, Joomla! will take care of any additional requirements. For example, if your Javascript requires Mootools, setting <code>$mootools = true</code> will automatically ensure that Mootools is loaded, if it has not already been done.

However, the above functions will not be flexible enough for every scenario, and so it is possible to tap into the underlying functionality instead. Of course, you will also need to manually code some of the steps that would be done automatically using the functions above.

First, get a reference to the current document object:
<source lang="php">
$document = JFactory::getDocument();
</source>
For a stylesheet, use this code:
<source lang="php">
$document->addStyleSheet($url);
</source>

To add a Javascript file, use this code:
<source lang="php">
$document->addScript($url);
</source>
Note this will **NOT** include Mootools or jQuery. If your script requires Mootools or jQuery see [[Javascript_Frameworks]] for full details on how to include them (note jQuery can only be included natively on Joomla 3.0+).

== Inserting from within a PHP file ==

If your Javascript or CSS are generated using PHP, you can add the script or stylesheet directly into the head of your document:
<source lang="php">
$document = JFactory::getDocument();

// Add Javascript
$document->addScriptDeclaration('
window.event("domready", function() {
alert("An inline JavaScript Declaration");
});
');

// Add styles
$style = 'body {'
. 'background: #00ff00;'
. 'color: rgb(0,0,255);'
. '}';
$document->addStyleDeclaration($style);
</source>

== Javascript Examples ==

For example, the following code is used to define a custom tool tip that takes advantage of mootools.
<source lang="php">
function getToolTipJS($toolTipVarName, $toolTipClassName){
$javascript = 'window.addEvent(\"domready\", function(){' ."\n";
$javascript .= "\t" .'var $toolTipVarName = new Tips($$("' . $toolTipVarName .'"), {' ."\n";
$javascript .= "\t\t" .'className: "' .$toolTipClassName .'",' ."\n";
$javascript .= "\t\t" .'initialize: function(){' ."\n";
$javascript .= "\t\t\t" .'this.fx = new Fx.Style(this.toolTip, "opacity", {duration: 500, wait: false}).set(0);' ."\n";
$javascript .= "\t\t" .'},' ."\n";
$javascript .= "\t\t" .'onShow: function(toolTip){' ."\n";
$javascript .= "\t\t\t" .'this.fx.start(1);' ."\n";
$javascript .= "\t\t" .'},' ."\n";
$javascript .= "\t\t" .'onHide: function(toolTip) {' ."\n";
$javascript .= "\t\t\t" .'this.fx.start(0);' ."\n";
$javascript .= "\t\t" .'}' ."\n";
$javascript .= "\t" .'});' ."\n";
$javascript .= '});' ."\n\n";
return $javascript;
}

$document = JFactory::getDocument();
$document->addStyleSheet("/joomla/components/com_mycustomcomponent/css/mytooltip.css",'text/css',"screen");
$document->addScriptDeclaration(getToolTipJS("mytool","MyToolTip"));
</source>
Note that in order for this Javascript to be functionally useful, it would be necessary to include the appropriate class name in the HTML, as well as providing the <code>mytooltip.css</code> file. Both are outside the scope of this article.

== CSS Examples ==

This is also useful if your inserting a parameter/form field of CSS into your code. For example in a module, you might want a user to choose to call the colour of the border. After calling the parameter/form field and assigning it a variable $bordercolor in mod_example.php. Then in tmpl/default.php you can include the following
<source lang="php">
$document = JFactory::getDocument();
$document->addStyleSheet(JURI::base() . 'modules/mod_example/css/mod_example.css');
$style = '#example {
border-color:#' . $bordercolor . ';
}';
$document->addStyleDeclaration( $style );
</source>
Here mod_example.css contains the CSS file of any non-parameter based styles. Then the bordercolor parameter/form field is added in separately

==Add Custom Tag==

There will be some occasions where even these functions are not flexible enough, as they are limited to writing the contents of <code><script /></code> or <code><style /></code> tags, and cannot add anything outside those tags. One example would be the inclusion of a stylesheet link within conditional comments, so that it is picked up only by Internet Explorer 6 and earlier. To do this, use <code>$document->addCustomTag</code>:
<source lang="php">
$stylelink = '' ."\n";

$document = JFactory::getDocument();
$document->addCustomTag($stylelink);
</source>

<noinclude>[[Category:Development]] [[Category:Tutorials]][[Category:Component Development]][[Category:Module Development]]
[[Category:JavaScript]]
[[Category:CSS]]
</noinclude>

J3.x:Adding JavaScript and CSS to the page

2013-08-12T06:56:43Z

Chivitli: /* Inserting from within a PHP file */

{{version/tutor|2.5,3.x}}{{review||Code is no longer 2.5/3.x applicable}}

== Inserting from a File ==
To have a well-formed XHTML document, you must put all references to Javascript and CSS files within the <code><head></code> portion. Since Joomla! generates all the HTML that makes up a page before output, it is possible to add these references within the <head> tags from your extension. The simplest way to do this is to make use of the functionality built in to Joomla!. In Joomla 2.5 you can still use the following, but it's marked as deprecated and changed in 3.x:
<source lang="php">
// Add a reference to a Javascript file
// The default path is 'media/system/js/'
JHtml::script($filename, $path, $mootools);

// Add a reference to a CSS file
// The default path is 'media/system/css/'
JHtml::stylesheet($filename, $path);
</source>

API has changed in 3.x, so the second parameter cannot be a string. If you really need to use these methods, you must include the absolute link to your files:

<source lang="php">
<?php
JHtml::script(Juri::base() . 'templates/custom/js/sample.js', $mootools);
JHtml::stylesheet(Juri::base() . 'templates/custom/css/style.js');
?>
</source>

Using these functions, Joomla! will take care of any additional requirements. For example, if your Javascript requires Mootools, setting <code>$mootools = true</code> will automatically ensure that Mootools is loaded, if it has not already been done.

However, the above functions will not be flexible enough for every scenario, and so it is possible to tap into the underlying functionality instead. Of course, you will also need to manually code some of the steps that would be done automatically using the functions above.

First, get a reference to the current document object:
<source lang="php">
$document = JFactory::getDocument();
</source>
For a stylesheet, use this code:
<source lang="php">
$document->addStyleSheet($url);
</source>

To add a Javascript file, use this code:
<source lang="php">
$document->addScript($url);
</source>
Note this will **NOT** include Mootools or jQuery. If your script requires Mootools or jQuery see [[Javascript_Frameworks]] for full details on how to include them (note jQuery can only be included natively on Joomla 3.0+).

== Inserting from within a PHP file ==

If your Javascript or CSS are generated using PHP, you can add the script or stylesheet directly into the head of your document:
<source lang="php">
$document = JFactory::getDocument();
// Add Javascript
$document->addScriptDeclaration('
window.event("domready", function() {
alert("An inline JavaScript Declaration");
});
');

// Add styles
$style = 'body {'
. 'background: #00ff00;'
. 'color: rgb(0,0,255);'
. '}';
$doc->addStyleDeclaration($style);
</source>

== Javascript Examples ==

For example, the following code is used to define a custom tool tip that takes advantage of mootools.
<source lang="php">
function getToolTipJS($toolTipVarName, $toolTipClassName){
$javascript = 'window.addEvent(\"domready\", function(){' ."\n";
$javascript .= "\t" .'var $toolTipVarName = new Tips($$("' . $toolTipVarName .'"), {' ."\n";
$javascript .= "\t\t" .'className: "' .$toolTipClassName .'",' ."\n";
$javascript .= "\t\t" .'initialize: function(){' ."\n";
$javascript .= "\t\t\t" .'this.fx = new Fx.Style(this.toolTip, "opacity", {duration: 500, wait: false}).set(0);' ."\n";
$javascript .= "\t\t" .'},' ."\n";
$javascript .= "\t\t" .'onShow: function(toolTip){' ."\n";
$javascript .= "\t\t\t" .'this.fx.start(1);' ."\n";
$javascript .= "\t\t" .'},' ."\n";
$javascript .= "\t\t" .'onHide: function(toolTip) {' ."\n";
$javascript .= "\t\t\t" .'this.fx.start(0);' ."\n";
$javascript .= "\t\t" .'}' ."\n";
$javascript .= "\t" .'});' ."\n";
$javascript .= '});' ."\n\n";
return $javascript;
}

$document = JFactory::getDocument();
$document->addStyleSheet("/joomla/components/com_mycustomcomponent/css/mytooltip.css",'text/css',"screen");
$document->addScriptDeclaration(getToolTipJS("mytool","MyToolTip"));
</source>
Note that in order for this Javascript to be functionally useful, it would be necessary to include the appropriate class name in the HTML, as well as providing the <code>mytooltip.css</code> file. Both are outside the scope of this article.

== CSS Examples ==

This is also useful if your inserting a parameter/form field of CSS into your code. For example in a module, you might want a user to choose to call the colour of the border. After calling the parameter/form field and assigning it a variable $bordercolor in mod_example.php. Then in tmpl/default.php you can include the following
<source lang="php">
$document = JFactory::getDocument();
$document->addStyleSheet(JURI::base() . 'modules/mod_example/css/mod_example.css');
$style = '#example {
border-color:#' . $bordercolor . ';
}';
$document->addStyleDeclaration( $style );
</source>
Here mod_example.css contains the CSS file of any non-parameter based styles. Then the bordercolor parameter/form field is added in separately

==Add Custom Tag==

There will be some occasions where even these functions are not flexible enough, as they are limited to writing the contents of <code><script /></code> or <code><style /></code> tags, and cannot add anything outside those tags. One example would be the inclusion of a stylesheet link within conditional comments, so that it is picked up only by Internet Explorer 6 and earlier. To do this, use <code>$document->addCustomTag</code>:
<source lang="php">
$stylelink = '' ."\n";

$document = JFactory::getDocument();
$document->addCustomTag($stylelink);
</source>

<noinclude>[[Category:Development]] [[Category:Tutorials]][[Category:Component Development]][[Category:Module Development]]
[[Category:JavaScript]]
[[Category:CSS]]
</noinclude>

J3.x:Adding JavaScript and CSS to the page

2013-08-12T06:49:19Z

Chivitli: /* Inserting from a File */

{{version/tutor|2.5,3.x}}{{review||Code is no longer 2.5/3.x applicable}}

== Inserting from a File ==
To have a well-formed XHTML document, you must put all references to Javascript and CSS files within the <code><head></code> portion. Since Joomla! generates all the HTML that makes up a page before output, it is possible to add these references within the <head> tags from your extension. The simplest way to do this is to make use of the functionality built in to Joomla!. In Joomla 2.5 you can still use the following, but it's marked as deprecated and changed in 3.x:
<source lang="php">
// Add a reference to a Javascript file
// The default path is 'media/system/js/'
JHtml::script($filename, $path, $mootools);

// Add a reference to a CSS file
// The default path is 'media/system/css/'
JHtml::stylesheet($filename, $path);
</source>

API has changed in 3.x, so the second parameter cannot be a string. If you really need to use these methods, you must include the absolute link to your files:

<source lang="php">
<?php
JHtml::script(Juri::base() . 'templates/custom/js/sample.js', $mootools);
JHtml::stylesheet(Juri::base() . 'templates/custom/css/style.js');
?>
</source>

Using these functions, Joomla! will take care of any additional requirements. For example, if your Javascript requires Mootools, setting <code>$mootools = true</code> will automatically ensure that Mootools is loaded, if it has not already been done.

However, the above functions will not be flexible enough for every scenario, and so it is possible to tap into the underlying functionality instead. Of course, you will also need to manually code some of the steps that would be done automatically using the functions above.

First, get a reference to the current document object:
<source lang="php">
$document = JFactory::getDocument();
</source>
For a stylesheet, use this code:
<source lang="php">
$document->addStyleSheet($url);
</source>

To add a Javascript file, use this code:
<source lang="php">
$document->addScript($url);
</source>
Note this will **NOT** include Mootools or jQuery. If your script requires Mootools or jQuery see [[Javascript_Frameworks]] for full details on how to include them (note jQuery can only be included natively on Joomla 3.0+).

== Inserting from within a PHP file ==

However, your Javascript or CSS might not be located in a separate file—you might want to generate them using PHP. In this case you can write the script or stylesheet directly into the head of your document:
<source lang="php">
$document = JFactory::getDocument();
// Add Javascript
$document->addScriptDeclaration($javascript, $type);

// Add styles
$document->addStyleDeclaration($styles, $type);
</source>

== Javascript Examples ==

For example, the following code is used to define a custom tool tip that takes advantage of mootools.
<source lang="php">
function getToolTipJS($toolTipVarName, $toolTipClassName){
$javascript = 'window.addEvent(\"domready\", function(){' ."\n";
$javascript .= "\t" .'var $toolTipVarName = new Tips($$("' . $toolTipVarName .'"), {' ."\n";
$javascript .= "\t\t" .'className: "' .$toolTipClassName .'",' ."\n";
$javascript .= "\t\t" .'initialize: function(){' ."\n";
$javascript .= "\t\t\t" .'this.fx = new Fx.Style(this.toolTip, "opacity", {duration: 500, wait: false}).set(0);' ."\n";
$javascript .= "\t\t" .'},' ."\n";
$javascript .= "\t\t" .'onShow: function(toolTip){' ."\n";
$javascript .= "\t\t\t" .'this.fx.start(1);' ."\n";
$javascript .= "\t\t" .'},' ."\n";
$javascript .= "\t\t" .'onHide: function(toolTip) {' ."\n";
$javascript .= "\t\t\t" .'this.fx.start(0);' ."\n";
$javascript .= "\t\t" .'}' ."\n";
$javascript .= "\t" .'});' ."\n";
$javascript .= '});' ."\n\n";
return $javascript;
}

$document = JFactory::getDocument();
$document->addStyleSheet("/joomla/components/com_mycustomcomponent/css/mytooltip.css",'text/css',"screen");
$document->addScriptDeclaration(getToolTipJS("mytool","MyToolTip"));
</source>
Note that in order for this Javascript to be functionally useful, it would be necessary to include the appropriate class name in the HTML, as well as providing the <code>mytooltip.css</code> file. Both are outside the scope of this article.

== CSS Examples ==

This is also useful if your inserting a parameter/form field of CSS into your code. For example in a module, you might want a user to choose to call the colour of the border. After calling the parameter/form field and assigning it a variable $bordercolor in mod_example.php. Then in tmpl/default.php you can include the following
<source lang="php">
$document = JFactory::getDocument();
$document->addStyleSheet(JURI::base() . 'modules/mod_example/css/mod_example.css');
$style = '#example {
border-color:#' . $bordercolor . ';
}';
$document->addStyleDeclaration( $style );
</source>
Here mod_example.css contains the CSS file of any non-parameter based styles. Then the bordercolor parameter/form field is added in separately

==Add Custom Tag==

There will be some occasions where even these functions are not flexible enough, as they are limited to writing the contents of <code><script /></code> or <code><style /></code> tags, and cannot add anything outside those tags. One example would be the inclusion of a stylesheet link within conditional comments, so that it is picked up only by Internet Explorer 6 and earlier. To do this, use <code>$document->addCustomTag</code>:
<source lang="php">
$stylelink = '' ."\n";

$document = JFactory::getDocument();
$document->addCustomTag($stylelink);
</source>

<noinclude>[[Category:Development]] [[Category:Tutorials]][[Category:Component Development]][[Category:Module Development]]
[[Category:JavaScript]]
[[Category:CSS]]
</noinclude>

J3.x:Adding JavaScript and CSS to the page

2013-08-12T06:48:04Z

Chivitli: /* Inserting from a File */

{{version/tutor|2.5,3.x}}{{review||Code is no longer 2.5/3.x applicable}}

== Inserting from a File ==
To have a well-formed XHTML document, you must put all references to Javascript and CSS files within the <code><head></code> portion. Since Joomla! generates all the HTML that makes up a page before output, it is possible to add these references within the <head> tags from your extension. The simplest way to do this is to make use of the functionality built in to Joomla!. In Joomla 2.5 you can still use the following, but it's marked as deprecated and changed in 3.x:
<source lang="php">
// Add a reference to a Javascript file
// The default path is 'media/system/js/'
JHtml::script($filename, $path, $mootools);

// Add a reference to a CSS file
// The default path is 'media/system/css/'
JHtml::stylesheet($filename, $path);
</source>
Using these functions, Joomla! will take care of any additional requirements. For example, if your Javascript requires Mootools, setting <code>$mootools = true</code> will automatically ensure that Mootools is loaded, if it has not already been done.

API has changed in 3.x, so the second parameter cannot be a string. If you really need to use these methods, you must include the absolute link to your files:

<source lang="php">
<?php
JHtml::script(Juri::base() . 'templates/custom/js/sample.js', $mootools);
JHtml::stylesheet(Juri::base() . 'templates/custom/css/style.js');
?>
</source>

However, the above functions will not be flexible enough for every scenario, and so it is possible to tap into the underlying functionality instead. Of course, you will also need to manually code some of the steps that would be done automatically using the functions above.

First, get a reference to the current document object:
<source lang="php">
$document = JFactory::getDocument();
</source>
For a stylesheet, use this code:
<source lang="php">
$document->addStyleSheet($url);
</source>

To add a Javascript file, use this code:
<source lang="php">
$document->addScript($url);
</source>
Note this will **NOT** include Mootools or jQuery. If your script requires Mootools or jQuery see [[Javascript_Frameworks]] for full details on how to include them (note jQuery can only be included natively on Joomla 3.0+).

== Inserting from within a PHP file ==

However, your Javascript or CSS might not be located in a separate file—you might want to generate them using PHP. In this case you can write the script or stylesheet directly into the head of your document:
<source lang="php">
$document = JFactory::getDocument();
// Add Javascript
$document->addScriptDeclaration($javascript, $type);

// Add styles
$document->addStyleDeclaration($styles, $type);
</source>

== Javascript Examples ==

For example, the following code is used to define a custom tool tip that takes advantage of mootools.
<source lang="php">
function getToolTipJS($toolTipVarName, $toolTipClassName){
$javascript = 'window.addEvent(\"domready\", function(){' ."\n";
$javascript .= "\t" .'var $toolTipVarName = new Tips($$("' . $toolTipVarName .'"), {' ."\n";
$javascript .= "\t\t" .'className: "' .$toolTipClassName .'",' ."\n";
$javascript .= "\t\t" .'initialize: function(){' ."\n";
$javascript .= "\t\t\t" .'this.fx = new Fx.Style(this.toolTip, "opacity", {duration: 500, wait: false}).set(0);' ."\n";
$javascript .= "\t\t" .'},' ."\n";
$javascript .= "\t\t" .'onShow: function(toolTip){' ."\n";
$javascript .= "\t\t\t" .'this.fx.start(1);' ."\n";
$javascript .= "\t\t" .'},' ."\n";
$javascript .= "\t\t" .'onHide: function(toolTip) {' ."\n";
$javascript .= "\t\t\t" .'this.fx.start(0);' ."\n";
$javascript .= "\t\t" .'}' ."\n";
$javascript .= "\t" .'});' ."\n";
$javascript .= '});' ."\n\n";
return $javascript;
}

$document = JFactory::getDocument();
$document->addStyleSheet("/joomla/components/com_mycustomcomponent/css/mytooltip.css",'text/css',"screen");
$document->addScriptDeclaration(getToolTipJS("mytool","MyToolTip"));
</source>
Note that in order for this Javascript to be functionally useful, it would be necessary to include the appropriate class name in the HTML, as well as providing the <code>mytooltip.css</code> file. Both are outside the scope of this article.

== CSS Examples ==

This is also useful if your inserting a parameter/form field of CSS into your code. For example in a module, you might want a user to choose to call the colour of the border. After calling the parameter/form field and assigning it a variable $bordercolor in mod_example.php. Then in tmpl/default.php you can include the following
<source lang="php">
$document = JFactory::getDocument();
$document->addStyleSheet(JURI::base() . 'modules/mod_example/css/mod_example.css');
$style = '#example {
border-color:#' . $bordercolor . ';
}';
$document->addStyleDeclaration( $style );
</source>
Here mod_example.css contains the CSS file of any non-parameter based styles. Then the bordercolor parameter/form field is added in separately

==Add Custom Tag==

There will be some occasions where even these functions are not flexible enough, as they are limited to writing the contents of <code><script /></code> or <code><style /></code> tags, and cannot add anything outside those tags. One example would be the inclusion of a stylesheet link within conditional comments, so that it is picked up only by Internet Explorer 6 and earlier. To do this, use <code>$document->addCustomTag</code>:
<source lang="php">
$stylelink = '' ."\n";

$document = JFactory::getDocument();
$document->addCustomTag($stylelink);
</source>

<noinclude>[[Category:Development]] [[Category:Tutorials]][[Category:Component Development]][[Category:Module Development]]
[[Category:JavaScript]]
[[Category:CSS]]
</noinclude>

Adding JavaScript

2013-08-12T06:36:56Z

Chivitli: /* External JavaScript */

{{version/tutor|1.5,2.5,3.1}}

JavaScript (also known as ECMAScript) is a scripting language primarily used in client-side web site development to extend and enhance an end-user's experience. Joomla provides developers with easy-to-use mechanisms to include JavaScript in their extensions using existing API methods.

There are a number of methods for including JavaScript in your Joomla extensions; some of these are described below.

==Usage==

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 (<yourcomponent>/views/<yourview>/view.html.php) or template script (<yourcomponent>/views/<yourview>/tmpl/<yourtemplate>.php or in the case of a module, in its template script (<yourmodule>/tmpl/<yourtemplate>.php).

===Inline JavaScript===

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:

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

===External JavaScript===

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.

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:

<source lang="php">
<?php
$document = JFactory::getDocument();
$document->addScript('/media/system/js/sample.js');
?>
</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:

<source lang="php">
<?php
// Add the path parameter if the path is different than 'media/system/js/'
JHTML::script('sample.js', 'templates/custom/js/');
?>
</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:

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

==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:

<source lang="html4strict">
<jdoc:include type="head"/>
</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:

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

Calling the class method [http://api.joomla.org/1.5/Joomla-Framework/Document/JDocument.html#addScriptDeclaration JDocument::addScriptDeclaration] would render the following HTML:

<source lang="html4strict">
<head>
...
<script type="text/javaScript">
window.addEvent("domready", function() {
alert("Embedded block of JS here");
});
</script>
...
</head>
</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).

== Using a JavaScript Framework ==

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.

Two [[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.

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.

===Joomla 3.x jQuery ===
Please see the guide on [[Javascript_Frameworks|Javascript Frameworks in Joomla 3.x]] for information about including a framework in Joomla 3.x

=== Joomla 1.5/2.5 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.

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:

FOR JOOMLA 1.5
<source lang="php">
JHTML::_('behavior.mootools');
</source>

FOR JOOMLA 2.5
<source lang="php">
JHtml::_('behavior.framework');
</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.

Then using Mootools is almost identical to jQuery:

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

More information about Mootools is available at http://mootools.net/. For API documentation, visit http://mootools.net/docs/core.

== See Also ==

[[JHtmlBehavior::framework/11.1| JHtmlBehaviour::framework method]] from the Joomla! Framework 11.1 documentation

[[Ajax using MooTools]]

[[Adding Javascript moo.fx to your component]]

== External Links ==
http://api.joomla.org/Joomla-Platform/HTML/JHtmlBehavior.html#methodframework

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

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

http://mootools.net/

http://jquery.com/

[[Category:Templates]]
[[Category:Modules]]
[[Category:Components]]
[[Category:Plugins]]
[[Category:Tutorials]]
[[Category:JavaScript]]

Adding JavaScript

2013-08-12T06:27:49Z

Chivitli: /* External JavaScript */

{{version/tutor|1.5,2.5,3.1}}

JavaScript (also known as ECMAScript) is a scripting language primarily used in client-side web site development to extend and enhance an end-user's experience. Joomla provides developers with easy-to-use mechanisms to include JavaScript in their extensions using existing API methods.

There are a number of methods for including JavaScript in your Joomla extensions; some of these are described below.

==Usage==

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 (<yourcomponent>/views/<yourview>/view.html.php) or template script (<yourcomponent>/views/<yourview>/tmpl/<yourtemplate>.php or in the case of a module, in its template script (<yourmodule>/tmpl/<yourtemplate>.php).

===Inline JavaScript===

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:

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

===External JavaScript===

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.

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:

<source lang="php">
<?php
$document = JFactory::getDocument();
$document->addScript('/media/system/js/sample.js');
?>
</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:

<source lang="php">
<?php
// Add the path parameter if the path is different than 'media/system/js/'
JHTML::script('sample.js', 'templates/custom/js/');
?>
</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 absolute link to your javacript:

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

==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:

<source lang="html4strict">
<jdoc:include type="head"/>
</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:

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

Calling the class method [http://api.joomla.org/1.5/Joomla-Framework/Document/JDocument.html#addScriptDeclaration JDocument::addScriptDeclaration] would render the following HTML:

<source lang="html4strict">
<head>
...
<script type="text/javaScript">
window.addEvent("domready", function() {
alert("Embedded block of JS here");
});
</script>
...
</head>
</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).

== Using a JavaScript Framework ==

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.

Two [[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.

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.

===Joomla 3.x jQuery ===
Please see the guide on [[Javascript_Frameworks|Javascript Frameworks in Joomla 3.x]] for information about including a framework in Joomla 3.x

=== Joomla 1.5/2.5 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.

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:

FOR JOOMLA 1.5
<source lang="php">
JHTML::_('behavior.mootools');
</source>

FOR JOOMLA 2.5
<source lang="php">
JHtml::_('behavior.framework');
</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.

Then using Mootools is almost identical to jQuery:

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

More information about Mootools is available at http://mootools.net/. For API documentation, visit http://mootools.net/docs/core.

== See Also ==

[[JHtmlBehavior::framework/11.1| JHtmlBehaviour::framework method]] from the Joomla! Framework 11.1 documentation

[[Ajax using MooTools]]

[[Adding Javascript moo.fx to your component]]

== External Links ==
http://api.joomla.org/Joomla-Platform/HTML/JHtmlBehavior.html#methodframework

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

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

http://mootools.net/

http://jquery.com/

[[Category:Templates]]
[[Category:Modules]]
[[Category:Components]]
[[Category:Plugins]]
[[Category:Tutorials]]
[[Category:JavaScript]]

Adding JavaScript

2013-08-12T06:26:55Z

Chivitli: /* External JavaScript */

{{version/tutor|1.5,2.5,3.1}}

JavaScript (also known as ECMAScript) is a scripting language primarily used in client-side web site development to extend and enhance an end-user's experience. Joomla provides developers with easy-to-use mechanisms to include JavaScript in their extensions using existing API methods.

There are a number of methods for including JavaScript in your Joomla extensions; some of these are described below.

==Usage==

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 (<yourcomponent>/views/<yourview>/view.html.php) or template script (<yourcomponent>/views/<yourview>/tmpl/<yourtemplate>.php or in the case of a module, in its template script (<yourmodule>/tmpl/<yourtemplate>.php).

===Inline JavaScript===

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:

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

===External JavaScript===

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.

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:

<source lang="php">
<?php
$document = JFactory::getDocument();
$document->addScript('/media/system/js/sample.js');
?>
</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:

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

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 absolute link to your javacript:

JHtml::script(Juri::base() . 'templates/custom/js/sample.js');

?>
</source>

==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:

<source lang="html4strict">
<jdoc:include type="head"/>
</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:

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

Calling the class method [http://api.joomla.org/1.5/Joomla-Framework/Document/JDocument.html#addScriptDeclaration JDocument::addScriptDeclaration] would render the following HTML:

<source lang="html4strict">
<head>
...
<script type="text/javaScript">
window.addEvent("domready", function() {
alert("Embedded block of JS here");
});
</script>
...
</head>
</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).

== Using a JavaScript Framework ==

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.

Two [[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.

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.

===Joomla 3.x jQuery ===
Please see the guide on [[Javascript_Frameworks|Javascript Frameworks in Joomla 3.x]] for information about including a framework in Joomla 3.x

=== Joomla 1.5/2.5 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.

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:

FOR JOOMLA 1.5
<source lang="php">
JHTML::_('behavior.mootools');
</source>

FOR JOOMLA 2.5
<source lang="php">
JHtml::_('behavior.framework');
</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.

Then using Mootools is almost identical to jQuery:

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

More information about Mootools is available at http://mootools.net/. For API documentation, visit http://mootools.net/docs/core.

== See Also ==

[[JHtmlBehavior::framework/11.1| JHtmlBehaviour::framework method]] from the Joomla! Framework 11.1 documentation

[[Ajax using MooTools]]

[[Adding Javascript moo.fx to your component]]

== External Links ==
http://api.joomla.org/Joomla-Platform/HTML/JHtmlBehavior.html#methodframework

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

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

http://mootools.net/

http://jquery.com/

[[Category:Templates]]
[[Category:Modules]]
[[Category:Components]]
[[Category:Plugins]]
[[Category:Tutorials]]
[[Category:JavaScript]]