Where to put a frequently used Java script function.

I have a java script function that I use several times on different web forms on my website. basically I just cut and pasted the java script code to each page. How can I make the function global to the whole website so that I can just place it in one location?
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Rainer JeschorCommented:
simply put this function (and others) into a JavaScript file and reference this on the pages where you need it or on all pages.


Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Paul WilsonCommented:

Completely agree with Rainer, to have a better JavaScript code reusability create a separate .js file and reference this file at every page where you want to import java script code.  
<script src="js/example.js"></script>

Thanks and Regards
MurfurFull Stack DeveloperCommented:
What Paul and Rainer is absolutely right and just to offer some supporting info, I would suggest that it is good practice and that you should consider doing the same for any common assets like stylesheets, images and fonts etc.. Personally, I create a folder called assets in the root and put everything that is shared in there e.g.:

| __ assets
|   |__ css
|   |  |__ my_styles.css
|   |
|   |__ js
|   |  |__ jQuery.js
|   |  |__ my_scripts.js
|   |
|   |__ img
|   |  |__ my_logo.png
|   |  |__ my_avatar.png
|__ index.html
|__ page2.html

and so on.  There are a number of benefits to coding this way:

1. It keeps all your files tidy which makes things easy to find when you come back to the code after several months away on other projects.

2. It makes changes considerably easier. As it stands currently, should you want to make a change to your function, you will have to edit every page containing that function. Apart from being needlessly time consuming, you are dramatically increasing the chances of introducing a human error into the code. When the file is shared from one location, you only have to make once change, and one fix if it doesn't work!

3. It makes package updates simple and safe. If you use 3rd party code like jQuery or bootstrap, then much like #2 a package update can be applied to the one location and all use is then automatically updated

4. It makes replication easier. In time, it is likely that you will encounter a new project where you think you could do similar things to a previous job.  Copy the entire assets folder to the new site and remove the components specific to the other project you won't need like company logos etc. Create a base html file to serve as a template that already has the links to the assets and you are up and running very quickly.

You can take this one stage further and have a whole site template e.g. I have been using the same framework and the same extras on number of projects for a while so I created a template folder as the docroot for any new site. Now I simply copy the folder to the new docroot and with no coding at all a new site is running immediately, albeit very plain! This saves lot of time, collating the assets, writing the code to link them, forgetting something... you get the picture.

Happy coding!

FYI here is my current template
<!DOCTYPE html>
		<meta name="viewport" content="width=device-width, initial-scale=1.0">

<? if(ENVIRONMENT=="production"){ ?>
		<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
		<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css" />
<? } else { ?>
		<link rel="stylesheet" href="<?= asset_url();?>vendor/bootstrap-3.3.5/css/bootstrap.min.css" />
		<link rel="stylesheet" href="<?= asset_url();?>vendor/bootstrap-3.3.5/css/bootstrap-theme.min.css" />
<? } ?>
		<link href="<?= asset_url();?>vendor/bootstrap-3.3.5/css/bootstrap.min.css" rel="stylesheet" />
		<link href="<?= asset_url();?>css/my_styles.css" rel="stylesheet" />

		<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
		<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
		<!--[if lt IE 9]>
			<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
			<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
		<div class="container-fluid">
			<div class="row content" data-role="content">
				<div class="col-md-8 col-md-offset-1">
		<footer data-role="footer">

<? if(ENVIRONMENT=="production"){ ?>
		<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
		<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<? } else { ?>	
		<script src="<?= asset_url();?>js/jquery-1.11.3.min.js"></script>
		<script src="<?= asset_url(); ?>vendor/bootstrap-3.3.5/js/bootstrap.min.js"></script>
<? } ?>

		<script src="<?= asset_url();?>js/common_scripts.js"></script>
		<!-- scripts for this page only -->

Open in new window

It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today

From novice to tech pro — start learning today.