Beginner’s Guide to Web Development

View All Chapters
Badge making web pages more interactive with javascript

Making Web Pages More Interactive With JavaScript

4 minute read

In the early days of the web, web pages were largely static — meaning that after a site’s HTML documents were downloaded and displayed by the web browser, the content wouldn’t change. To display changes made on a web page, the web browser would have to download a completely new version of the HTML documents from the web server — a slow and inefficient process.

Nowadays, web pages are considered more “dynamic,” since they’re capable of responding to user input in real time. Things like the ability to “favorite” social media posts or update the inventory in a shopping cart in an online shop are examples of dynamic content — they don’t require the browser to re-download the page to display changes.

The language capable of providing much of this interactivity and responsiveness is called JavaScript, and it runs directly inside of the web browser. All modern web browsers are capable of interpreting the JavaScript language.

JavaScript code is written in separate files that are downloaded alongside a site’s HTML documents when the browser visits a website. Both file types are capable of referencing each other’s content.

Creating a Button

To conceptualize some of the things JavaScript is capable of, let’s take a look at a button that changes color every time it’s clicked. Let’s assume we created this purple button using HTML. Using JavaScript code, we’re able to “watch” for when a user clicks our button. After we see a user click, we can use JavaScript to change the button’s color to green.

Without JavaScript responding to user input in real time, our button wouldn’t have the ability to change colors when clicked. Before JavaScript, we would have had to re-download an entirely new HTML document that contained a green button instead of a purple button in order to display the change to the user.

A button changing colors when clicked

Making the Real World More Interactive

Building upon our button example, let’s take a look at JavaScript concepts at work in the “real world” in an online shopping site like Amazon.com. Amazon embraces JavaScript-driven interactivity to make their shopping experience easier.

Hover over a product image for a zoomed preview

The most obvious use of JavaScript on Amazon is on their product pages. Above, we see a product page for pens. Surrounding the primary pen image, a series of smaller images allows shoppers to scroll through different product angles, colors, and styles of the same pen. As you place your cursor over these smaller images, the primary image changes. You can also hover over the main product image to zoom in on the product.

In this instance, JavaScript code is watching where our cursor moves and is responding dynamically without ever having to re-download the page with a new image.

JavaScript has allowed sites like Amazon to provide an enhanced customer experience to shoppers and also reduces the amount of workload their web servers have to do delivering web pages. These features have a direct impact on Amazon’s sales.

Form Validation: Another Type of Interactivity

So far, we’ve been exploring how JavaScript can impact visual elements. JavaScript can also play an important role behind the scenes by performing functions that aren’t even seen by the user. An example of that is form validation, or verifying the information a user enters into a form before it can be submitted.

A website registration form

This form has three unique validation requirements:

  • First, all three fields are mandatory and cannot be empty when the form is submitted. Each new user who registers for an account must provide an email address, a username, and a password.
  • Second, the user’s email address must be real. If the email isn’t real, it would be impossible to contact them.
  • Finally, users need to create a secure password with at least six characters.

Using JavaScript, we are able to verify that all these requirements have been met before allowing the form to be submitted. If information is entered incorrectly, developers must include visual cues to show a user why their form is not yet complete. For example, if a user accidentally leaves out the @ sign from their email address, we can provide an “Invalid email address” error message.

Email address validation

JavaScript Must Be Really Hard to Learn, Right?

Actually, not really. While there are many advanced concepts behind JavaScript, it does not take much to write your first few lines of JavaScript code and get something working.

Our team here at Code School built the JavaScript.com website with this in mind. There you will be able to write your first lines of JavaScript code, as well as find additional resources on how you can go about gaining deeper knowledge of the language.

JavaScript Outside of the Browser

So far, we’ve described JavaScript as a programming language that works within the web browser. While it was originally developed exclusively for this purpose, some members of the JavaScript community found a way to repurpose the language to also be used on web servers in a project called Node.js. The ability to use JavaScript both within the web browser and on a web server reduces the learning curve of building a complete website.