In today’s post, I want to discuss separation…of code that is. In web applications, you typically deal with what I call the ‘three-legged stool’ of HTML (content), CSS (layout/style) and JavaScript (functionality). In the ‘old days’, these were comingled. This made it very difficult to update. Allow me to give a simple example…
In one of my previous roles, I managed a web site for a computer company in Northern California. This site contained over 72,000 pages. Now, I know what you are thinking, “Why in the world were there that many pages?!?” That would be for another post, but hange with me on my example. We went through several mergers and acquisitions while I was there. Sometimes this entailed marketing and branding changes on the web site. So, imagine if we changed our h1 font color from blue to red. Now imagine we had that style change embedded in each of the 72,000 pages. This simple change would become very complex and very expensive. Yes, there are search and replace techniques, but still not ideal. The ideal technique is to separate.
In JavaScript, this means to not have code embedded within your HTML. Now if you are learning something with JavaScript, sometimes it is more convenient to deal with it within one page, but never put production code within an HTML page. So, simply put your JavaScript code within its own file. This makes maintenance much easier. Now how do we get the code into out HTML file? The answer is the script tag…
[code lang=”html”]
<script src=“someJavaScript.js”></script>
[/code]
So all you have to do is fill in the src attribute appropriately based upon the location of the JavaScript file and you are good to go!
One thing…keep in mind that HTML files load from top to bottom. So you need to be purposeful as to where you put your JavaScript code. While you can put it anywhere in the HTML file, the most common places are either in the the head of the document or at the bottom of the HTML file. There are pros and cons to each of those. Bottom line is this, if you are referring to a section of your DOM, such as grabbing a div element, and your script tag is in the head of your document, you might run into an undefined error. This is because you are trying to work with the div tag before it is created by the renderer. There are techniques in dealing with this and I will post on them later, but just keep that in mind. What I do is if I see I am getting an undefined error in my console log, one of the first things I look at is order of element creation.
Happy Coding!
Clay Hess
