What Is JavaScript Used for in Front-end Web Development?

By: Kevin Schroeder and Ken Sugiura  | 07/11/2018


A front-end web developer’s role is to create the code and mark-up that is rendered by a web browser when you visit a site (read: they control what you see when you visit a webpage).

There are three main components when it comes to front-end development: HTML, CSS and JavaScript. Each are critical for making a webpage what it is. HTML is the structure and content of the site, CSS (Cascading Style Sheets) makes it look pretty, and, lastly, JavaScript is what powers its interactivity. Each work hand-in-hand when it comes to building websites, but the focus of this blog post is on JavaScript and how it’s used.

 

Interactivity

JavaScript is a very powerful tool that can do many things for a website. For one, it powers the site’s general interactivity. JavaScript makes it possible to build rich UI components such as image sliders, pop-ups, site navigation mega menus, form validations, tabs, accordions, and much more.

It can also do subtler operations as well. For instance, you may click a checkbox on a form, and, depending on the checkbox selected, it loads a pop-up that asks you another question. It gives the site additional functionality that isn’t otherwise achievable with HTML and CSS alone. JavaScript allows webpages to respond to user activity and dynamically update themselves, and all without requiring a page reload to change its appearance.

 

AJAX

We know what you’re probably thinking, but we’re not talking about the stuff you clean your sink with! AJAX stands for Asynchronous JavaScript and XML. It basically allows a webpage to interact with web server in the background, without a page reload.

Let’s take, for example, a listing of events on a webpage. By default, these events are sorted by month, most recent, and then categorized by type. When changing the ‘ALL’ filter to the ‘General’ one, an operation is triggered in the background, and the page gets partially reloaded with our newly queried items. The page doesn’t flicker as it reloads, and we stay put exactly where we are, which makes for a more pleasing web experience.

This can also be used on forms to send data to the server to be stored; again, to keep the page from reloading. AJAX allows a webpage to send and receive data from a web server without triggering a page refresh, allowing for a seamless user experience between the user and the web application.

 

Cross-Browser Compatibility and Standards Compliance

There are quite a few web browsers out there: Firefox, Chrome, Safari, Opera, Internet Explorer (10, 11, Edge)… and they all run on different operating systems and devices. From time to time, each of these browsers has its own unique bugs and quirks. Nothing is perfect, unfortunately. While W3C compliance standards continue to improve across the board, there still comes a time when a front-end web developer needs to resolve issues by leveraging JavaScript.

For example, you may write a CSS styling rule that works perfectly in all browsers… except for Internet Explorer 10. The issue you’re then faced with is to rewrite the whole section — which you painstakingly made perfect — or target the one browser and write in a workaround for it. However, by using a JavaScript library such as Modernizr, you can help isolate code to that specific browser. By leveraging the script you’ve written, a few new style rules, you’ve resolved the issue.

 

Plugins

There are various plugins and that run off of JavaScript. If you’ve ever visited a site that features banner ads, has chat support, suggests content, has forms, or offers social sharing, there’s a good chance it’s powered by a 3rd party JavaScript plugin. Usually, these plugins have configurable options that need additional set-up to function properly. Understanding the configurable options of these plugins is essential. Plugins are generally intended to be easily dropped into a site with little modification.

 

Frameworks

A JavaScript framework can be a powerful tool you can use to help render the page. These are typically only used when there are complex dynamic interactions that need to occur.

One example of this is if you have a multi-step form-fill. In this case, the form fill process has certain steps that only occur based on previously entered information. Also, certain data gets populated for certain inputs as well as previous inputs. Doing this without a framework can be very difficult task to achieve. Things can get problematic, and this can happen fast.

Using a JavaScript framework helps resolve these issues so you can complete your wonderful form, and make your clients happy. While there are dozens, the most popular ones (as of this writing) are Google’s Angular, Facebook’s React and the open source Vue.js.

 

JavaScript is a very important tool for a front-end web developer. Without it, webpages wouldn’t have become the dynamic web applications they are today. There would be no image carousels. There would be no partial page reloads that keep your spot on the page. There would be ‘no’ on lots of things that we’ve become accustomed to. JavaScript is kind-of like a Swiss Army Knife in a sense, it can do all you need and can prepare for the things you don’t know you need yet.


Share this




Comments
Blog post currently doesn't have any comments.
 Security code
Lets Work Together!

Let's Work Together 
We'd Love to Hear From You!