Developers are often seen confused when it comes to adding JavaScript to their Drupal themes or modules. They even goto the extend of adding it straight in the theme file. There are different methods to add your JavaScript.

From theme-name.info file

One way is by defining it in the ‘your_theme.info’ file in theme folder. This method is fine for those scripts which you wanted to be loaded in all pages of the site. A basic example will be like this.

scripts[] = js/myscript.js 

From tempalte.php file

The PHP function drupal_add_js() lets you easily add a JavaScript file, setting or inline code to any page in your theme and it takes 5 parameters (you see  it in the api reference).

The first parameter is always the path to a js file, an array, or a piece of JavaScript code. If the second you are using parameter is a ‘module’ (the default), a  ‘theme’, or the ‘core’, then the first parameter has to be a path and the only difference between these three is their order in which the script tags will be placed relative to other scripts used, i.e. the core scripts first, then module scripts and finally theme scripts.

If the second parameter is ‘setting’, then the first parameter has to be an array of settings. This is very handy for telling JavaScript about the configuration settings for the module you are creating, for example.

Last possibility for the second parameter is “inline” and it means you are passing in a straight JavaScript code as the first parameter, which has to be written directly into your page between script tags, rather than a call to a file.

Refer here for learning more, function’s documentation at api.drupal.org.

Adding JavaScript from within a module

Some time you write jQuery code that targets some of the elements that are outputted by your module or theme. For that you have to save your jQuery code as a JavaScript file with the .js extension and place them in your module or theme’s directory. If it’s for your module, then you need to make the call to drupal_add_js() as mentioned above, from wherever the module is about to output content (e.g. in hook_block or hook_nodeapi), or if the JS is not acting on content that is output by your own module you can call it from hook_menu or hook_init.Below is how you would ensure the file gets added:

<!--?<span class="hiddenSpellError" pre=""-->php
drupal_add_js(drupal_get_path('module', 'mymodule') .'/my_js_file.js');
?>

The jquery.js file is included automatically so you don’t need to worry about adding it.

Adding JavaScript from within a theme With drupal_add_js

To add your .js file from within a theme, then you will need to make a call from within template.php, you have to add the second parameter this time as ‘theme’ so that Drupal knows this script should be loaded after all core and module scripts are loaded:

<!--?php-->
drupal_add_js(drupal_get_path('theme', 'mytheme') .'/my_js_file.js', 'theme');
?>

Using a preprocess_page function

To conditionally add js to the theme, you can use a process_page function:

<?php
function mytheme_preprocess_page(&$vars, $hook) {
if (true) {
drupal_add_js(drupal_get_path('theme', 'mytheme') . '/scriptname.js', 'theme');
$vars['scripts'] = drupal_get_js();
}
}
?>