Truly unimaginable.

I remember a time when I would try every possible way to avoid having to use JavaScript (JS). This was my first big mistake. When I had no choice but to turn to this ‘nightmare’, I would copy a snippet of JS code and hope that it did the job. I would never bother to make even the slightest change to the code. When it didn’t perform in the way I intended it to, I would revisit the web in search of another snippet of code. This was my second big mistake. If you asked me at that point in time the reasons behind this absurd behaviour, I would admit to the fact that JavaScript simply scares me. It doesn’t usually look like any other languages; but even when it does, it doesn’t behave the same. I was certain that it was not worth my time to familiarise myself with the language. This was my third big mistake.

So what made me change my mind? My situation involved the implementation of a carousel. This was to be done without the use of any JS plugin. Plugins are the little babies that make it easier to solve a JS problem. With this restriction in place the task made me appreciate the finer things in life. You would assume that there was nothing more than coding skills required. False! Your algorithmic capabilities are also challenged. Having said this, I have to admit that I would not have understood the concept of JS without the encouragement of others. For this, I want to take this opportunity to encourage you to do the same.

So what is JS? JS is a programming language that is used to manipulate HTML elements. This allows for a more dynamic and interactive experience. Jump back a step if the paragraph made no sense so far. A website is structured using HTML: Hyper Text Markup Language. The style of the structure is controlled using CSS: Cascading Style Sheets. Without these two components, a browser would not able to support a website. So, where does JS fit in? Having the structure of the content and the visual aspect of the website in check, JS can be used to execute tasks such as validating a form.

Let’s take a closer look at this example. Your website may include the ability to sign up to become a registered user. It is essential to ensure that the details of the form are accurate and valid. A common question on a registration form is the user’s email address. JS can help to make sure that the email entered is a valid email, even if it is not their real email.

Let me explain that in a different way. We all know that an email always includes the @ sign. Or how about a full stop followed by a domain or at least some characters. I would just quickly like to add that validating an email is never pretty. A more common validation rule is to check that the required fields are not empty. We can use JS to throw back error messages if it detects that the those fields are not empty. Whether the input is valid is another validation rule. Are you able to keep up? Good, because JS has a lot more to offer than that.

It is important to understand that if JS is implemented incorrectly, it can be one’s worst nightmare. Pages may not load, the input of users may not be processed correctly, there could be an increase in the risk of malicious attacks. However, there is a way to avoid all this! Don’t write or use bad JS.

Security is involved in many other aspects though. For instance, allowing third parties to inject JS on your website. You may wish to do this for reasons such as Google Analytics. If you haven’t ever heard the words ‘Google Analytics’, look it up! When relying on JS for reasons that might cause concerns in security, it is worth noting that there is a way to avoid this. JS is your friend, just don’t make it angry.

Talking about security hazards is a big jump to be discussing this early in the game. What can possibly be harmful in using those rather annoying pop-ups on your website? No harm at all, except for having annoyed visitors maybe. Look at that though, without JS we would not be dealing with the ever-so-creative idea of pop-ups. Not sure if that is favouring JS, but there you have it.

JS can also be extremely helpful in creating dynamically generated content. An example that I will use is one that almost every website offers and goes almost unnoticed: beautiful menus. How about all those fading, sliding, changing effects of submenus? And let’s not forget my all time favourite example of the potential of JS: a carousel! There is no magic behind all these features, it is simply JS working under the hood.

Are we impressed yet? Okay, let’s take a deep dive into the language then. There are numerous ways of using JS. Requests of the user triggers an action and the server returns a response based on that. Yep, we definitely need an example here:

Figure 1: A diagram demonstrating request-response.

Great websites require to have attention to details. One of these details is to improve the accessibility of your website. There are several components of web accessibility. Make sure to familiarise yourself with the essential ones at least. Fine, an example them. How reasonable is your website when meeting the needs of a visually impaired person? Is the font size big enough? Do the different colours used throughout the website contrast your background? One way to ensure meeting these needs is to know what they can and cannot see. Let them tell you what they want. Giving them control over the obvious elements, such as font size and background colour, can make a big difference. JS can help with this.

I will discuss one approach out of the many possibilities. I have explicitly chosen to discuss this approach because it’s probably one of the least ideal. We can have several Cascading Style Sheets (CSS). Each CSS file has different properties defined. One CSS file may set the base font size to 24 pixels, but it is set to 12 pixels in another CSS file. The website may include buttons. Selecting a button applies a specific CSS file. This sounds a lot more complicated than it is. Perhaps a diagram will help?

Figure 2: A diagram showing how multiple CSS files can be used.

A brief summary of figure 2: based on the option chosen by the user, the applicable CSS file will be loaded. This in turn applies the correct style to the website. There are other, more efficient, ways than the approach explained above. I won’t go into details, but make sure to discuss about the efficiency of the JS used. There are various tools on the web to test this. I do recommend performing these tests and I can assure you that you cannot achieve the best result without the help of JS.

To sum JS up, it is the language that will not only create a great user experience, but allows users to interact with your website. A brilliant book that I recommend is ‘JavaScript: the good parts’ by the JavaScript Guru Douglas Crockford. I have yet to discover my top three bad and good parts, but it’s building up. Especially since responsive websites depend on JS. Maybe next time you will understand what this entails.

Author: Marfat Abdullahi.