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>
[/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

More To Explore

computer, laptop, work place-2982270.jpg
Code

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.

lighthouse, beacon, atlantic-8578318.jpg
Code

Understanding the Beacon API: Simplifying Asynchronous Data Transfers

In today’s data-driven world, web applications often need to send data back to the server. Traditionally, this has been done using AJAX requests or similar methods. However, these techniques can come with a cost, especially when dealing with data that needs to be sent during the unload phase of a document, such as tracking and diagnostic data. This is where the Beacon API shines by allowing developers to send data to a server more reliably and efficiently.

Share This Post

small_c_popup.png

Need help?

Let's have a chat...


Login

Jump Back In!

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

Register

Begin Your Learning Journey Today!

Come back inside to continue your learning journey.