Stay Outside!

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


Exploring the Broadcast Channel API: Inter-Tab Communication

Intercommunication between different contexts (like tabs, iframes or workers) of the same origin has often been a challenge. With the Broadcast Channel API, developers now have a powerful tool to easily communicate between browsing contexts. In this blog post, we’ll dive deep into the capabilities of the Broadcast Channel API, exploring its features, use cases, and how it can be effectively implemented in your projects.

computer, laptop, work place-2982270.jpg

Unlocking Wireless Communication: A Dive into the Bluetooth API

Wireless communication has become an integral part of our daily lives, and Bluetooth technology is at the forefront of this revolution, enabling devices to exchange data over short distances and creating a world more interconnected than ever before. At the heart of this technology lies the Bluetooth Application Programming Interface (API), a powerful tool for developers looking to harness the capabilities of Bluetooth in their applications. In this blog post, we’ll explore what the Bluetooth API is, how it works, and the possibilities it opens up for innovation in wireless communication.

Share This Post


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.