Use JavaScript Basics to Enhance Your Site

What can you do without a deep knowledge of the language?

JavaScript is a massive coding language, with roots going back five years before Y2k. The language has grown right along with technology since then, taking massive strides in usability and capability. Even as a full time developer, it can be challenging to keep up with all the changes in the code. Not to mention the fact that whole other code frameworks are built off the solid JavaScript foundation, one of the biggest of which is jQuery. But even without encyclopedic knowledge, you can use this prominent language to enhance the user experience on your site. Check out some of the fundamentals of JavaScript below!

The basics of using JavaScript

One of the core tenants of JavaScript is functions – a set of instructions to be called whenever they’re needed. Sometimes these functions return a value that can be used elsewhere, or sometimes they simply make changes to something on the page. You can call anything within the HTML page by its ID, or even an array of elements that share a class. Actually writing these functions isn’t too complicated, but there are enough potential variations that we won’t provide a full-fledged tutorial here. Just know that these basic uses aren’t too complicated, as and soon as you’re comfortable defining a variable and then calling an action on it then you’ll be at a solid starting point. All you have to do to get this code on your website is to compile your functions and other bits of JavaScript into a file (named “scripts.js” or something similar) and then add a quick script element in your HTML in the footer or header. Now any of the functions will be available to call or run whenever you need.

 Affect elements on the frontend…

So what can you do with these functions? When you know a lot of HTML and CSS, one of the most useful tools in JavaScript is the ability to add or remove classes. This is often how sliders and similar features work – they add and remove an “active” class or other classes depending on the current circumstances. We’ll cover what can trigger these operations in the next section, but just think about all the capabilities that come with the ability to add or remove a class even after a page has loaded. The entire world of CSS merges into JavaScript with these simple functions, a quick .addClass or .removeClass (using jQuery – this is possible in JavaScript as well, but it’s simpler to do in jQuery).

Or, if you don’t want to add a whole class, or are worried about the styles being overwritten, you could add the CSS attributes right in the script. This will add the CSS right onto the attribute, meaning the only way to get around it is to use the!important qualifier. Or maybe you don’t want to change an element, but an insert an entirely new element that didn’t exist on the page before. You can do that too!

Modifying classes and CSS is one of the most common JavaScript uses for frontend web developers. But that barely scratches the surface of the full capabilities of this language. If you’re looking to dive a little deeper, you can check out some basic JavaScript methods that will boost your skills in just a few minutes.

…using a variety of triggers

Now that you have an idea of what you can do, let’s touch on when you can actually do it! There are all kinds of ways to trigger functions in JavaScript and jQuery. If you want to run something as soon as the page loads, you’ll want to use $(document).ready. As soon as the page is loaded, your script will run. Or do you want to trigger your functions on a specific event? You can wait until a user clicks on a specific item (like a button), scrolls to a certain point on the page, hovers over a certain section of the page, enters a value into a form field, and more. That’s not even touching on events that can happen in the backend, this is just covering user’s interacting with the website. Check out an expansive list of available trigger events here.

A few use cases:

We’ve sprinkled a few examples through the above post, but here are some potential use cases for basic, frontend JavaScript:

• Add a “see more” button that removes a “hidden” class on a span of additional data. After a click, change the button to “see less” that adds the “hidden” class again and switches the button back to “see more.”
• Change the background image of a large section when a user scrolls halfway through it by changing the class of the wrapper.
• Pull some data from URL parameters to automatically populate as many form fields as possible with custom information.
• Add custom validation to a form field by checking the value and comparing it against your own conditions after a user fills in the field (but before they submit!)

These are just a few basic examples – and at Mr. WPress, we’ve been working in JavaScript for years. If you need help with these ideas, or they’ve inspired you to think of something more advanced, don’t hesitate to reach out to us for a free quote. We’d be delighted to work with you to create the perfect website for your needs!