Stay Outside!

Share This Post

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>

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

More To Explore


Demystifying Scrum User Stories Confirmation: Ensuring Quality and Collaboration

One of the key elements of Scrum is the use of user stories to define the requirements of a system or feature from the perspective of the end user. As teams work through the product backlog, it becomes crucial to confirm the user stories to ensure they meet the desired criteria and are ready for development. In this blog post, we’ll explore the concept of Scrum user stories confirmation and its significance in delivering high-quality products.


The Power of Conversations in Scrum User Stories

At the heart of Scrum lies the concept of user stories, which serve as a means of capturing requirements from the perspective of end-users. However, the true power of user stories lies not just in their written form but also in the conversations that take place around them. In this blog post, we will explore the significance of conversations in Scrum user stories and how they contribute to the success of Agile projects.

Do You Want To Boost Your Business?

drop us a line and keep in touch

Scroll to Top

Need help?

Let's have a chat...


Jump Back In!

Here at Webolution Designs, we love to learn. This includes sharing things we have learned with you. 


Begin Your Learning Journey Today!

Come back inside to continue your learning journey.