JavaScript Best Practices: where should I include my JavaScript?

Question

I am building a website using PHP and JavaScript, and I feel that I have a good grasp on where to include my JavaScript, but a more specific situation has come up that has me confused. I currently have all of my JavaScript in one external file, which is being included on every PHP page.

Let's say that I have a paragraph with an id='myParagraph' and I need to highlight this paragraph in red with JavaScript on page load. This paragraph is only on ONE PHP page and my website has about 50 different pages. I immediately assumed that I should throw some code into my one external JavaScript file, something like:

$('#myParagraph').css('color', 'red')

and the paragraph would be highlighted when that page loads.

My question is: is this the best way to do it? To my understanding, every time I load a page it will be searched for an element with the id myParagraph, yet 98% of my pages won't even have that id. Is this wasteful? Should I instead include the following code:

function highlightParagraph()
{
    $('#myParagraph').css('color', 'red')
}

in my one JavaScript file and then put some inline JavaScript in the PHP file with the id myParagraph to call the function highlightParagraph() when it's loaded? That way, only the one page with myParagraph will be searched and highlighted.

I feel like option 2 is the best, but I read all the time not to use inline JavaScript.

edit: I realize that for this example you would just use CSS. I'm just using it to get my question across

this may be an opinion thing so not exactly a question. In my case, I leave global things in the global javascript (things that several pages may use, like utility functions, global javascript variables used site-wide, etc), and for things that are page-specific, I just add them as code in the particular page — Rodolfo
– Rodolfo, Commented Jun 14, 2012 at 21:06
If you're going to make a function out of it, make it generic so you can pass in the element you want to highlight so, if the need arises, you can use it in other places too. — sachleen
– sachleen, Commented Jun 14, 2012 at 21:08
@sachleen. The last thing (Actually not really the last, but at the bottom of the list) I would like to see in my code is function color_element(id, color){$('#' + id).css('color', color)} and things like that. It's too generic — gdoron
– gdoron, Commented Jun 14, 2012 at 21:52

gdoron · Accepted Answer · 2012-06-14 21:27:14Z

4

You should have a one "big" js file with the infrastructure functions and all the pages should have a reference to it.

Then each page should reference another js file with the functions related only.
The good things about using external js files are:

The files are cached after the first download => Faster surfing.
Separate of concerns, you keep the presentation tier away from the scripting tier.

Another important note:
The best way to change css is with css... not javascript. I

If you change the element style on DOM ready, just add the element definition

#myParagraph{color: red;}

edited Jun 14, 2012 at 21:27

answered Jun 14, 2012 at 21:08

gdoron

151k59 gold badges302 silver badges376 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

dvir Over a year ago

I believe the CSS change was just an example to present the issue

gdoron Over a year ago

@DvirAzulay. That is the reason it's a note after the answer. And it's important enough and worth saying it.

gdoron Over a year ago

@dqhendricks. No problem... Wrote that because there is no need to create multiple duplicated answers. (Deleted as exact duplicate... :))

Terry Over a year ago

I don't see how it's always best to change CSS with CSS instead of javascript. For example, let's say you have a weight value that needs to be color coded depending on 4 conditions: (1) it's an acceptable weight in pounds, (2) it's an acceptable weight in kilograms, (3) it's an acceptable weight but one that is going to cause consequences elsewhere, and (4) it's an unacceptable weight. Granted my skills are minimal, but how would you do that in just CSS?

dqhendricks Over a year ago

@Terry agree with gdoron. this also allows you to test for the condition much easier, or even make a selector based on the condition. it's also generally more performant.

|

dvir · Accepted Answer · 2012-06-14 21:10:24Z

The problem with inline JavaScript is you might be starting with a few lines now, but in a few weeks or months, it will add up and be a lot of inline JavaScript. That is bad, because inline JavaScript can't be cached by the browser like JavaScript files that you include with <script src="path/to/file.js" />. That's bad because you add a lot of content that will be fetched every single page view by the user, adding load on your server bandwidth and slowing page load for the user.

If it's just a few selectors, don't worry; The time wasted on it won't cause any browser to sweat. Though, if it becomes a lot of code for a different page/module of your site, you might want to split it into a different JavaScript file and include just that file when certain pages are loaded. That way, the browser will cache that file and save that bandwidth for you and the user.

hackartist · Accepted Answer · 2012-06-14 21:08:42Z

0

I wouldn't be too surprised if many people disagree with me (violently even) but I don't have a problem with putting a javascript tag with specific javascript for that page in the header if it will reduce the number of files or overall complexity of the project. Most of the core things that are done everywhere should of course be separated in another file but if it is a one page deal, then I would go for cleanliness.

The same goes for css, if it is specific to that page just put a css tag in the header with the specific changes that differ from the master css file. BTW as everyone is pointing out, this is a case where you want to just use CSS.

answered Jun 14, 2012 at 21:08

hackartist

5,2745 gold badges36 silver badges50 bronze badges

3 Comments

Rodolfo Over a year ago

not me, I do the same. Page specific javascript/jquery in the head of that page (inline or as a separate javascript file, no matter). The global javascript function only for things of global interest

dvir Over a year ago

Hell no. Bandwidth. Cache. Maintainability.

epascarello Over a year ago

downside of it is if the page can not be cached, than you keep fetching that same little chunk of JavaScript time and time again. Probably talking microseconds here with small chunks of code. An external file might be a waste for one line of code. :)

Collectives™ on Stack Overflow

JavaScript Best Practices: where should I include my JavaScript?

3 Answers 3

7 Comments

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

7 Comments

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related