HTML5 for Beginners – Simple Interactivity with DOM, CSS, JavaScript & jQuery

This article is a fifth post to the series of introducing HTML to beginners. This post outlines three different approaches for changing a background color of a Hello World page on a button click. All of the examples are valid ways of achieving the same result.

HTML document contains the following elements/functions from the sample HTML:

  • Display the text ‘Hello, World!’.
  • Display the buttons ‘Make Night’ and ‘Make Day’.
  • When ‘Make Night’ is clicked, the background colour turns black.
  • When ‘Make Day’ is clicked, the background colour turns white.

 

Plunker Code

Entire project using all 3 approaches is available online on Plunker: https://embed.plnkr.co/jrs4Fttigjx6HNPjuiWl/

 

Example 1: The Document Object Method

When an HTML document is initialized in a browser, it becomes a document object. ‘The document object is the root node of the HTML document and the “owner” of all other nodes: (element nodes, text nodes, attribute nodes, and comment nodes)’ (Document Object, 2016). For this exercise, I’ve decided to use document.Body method on style.Background property, which allows me to set the document’s body (<body>) element’s background color.

Project Structure

I’ve first created the simple project structure that includes a single HTML file and a single cascading style sheet.

HTML & JavaScript

First, I’ve created a simple JavaScript functions called changeBackgroundColor which is (as can be seen from the image below) called from an input using JavaScript onclick event (Onclick Event, 2016):

I’ve implemented changeBackgroundColor JavaScript function to change of the background-color property of the body (<body>) element. This function is contained in the meta section of the HTML document (in between the <script></script> tags) as illustrated in the code screenshot.

The color code is passed into the document.body.style.Background property as a variable on click event from a button input type. The ‘Make Night’ button is passing black color to the changeBackgroundColor function, whereas the ‘Make Day’ button passes white color to function. Function itself in turn sets the body element’s background color property to one of the colors passed to it on an onclick event.

Cascading Style Sheet

Cascading Style Sheet is contained in style.css file, and is kept to a minimum code:

As you can see, I’ve set the primary body background color of the document to white color (this could have been omitted because that the default color), but for the consistency of the approach, I’ve decided to define it.

H1 tag, on the other hand, is just set to a particular font (Verdana in this case) and defaulting to ‘serif’ if Verdana font isn’t present. The color of H1 element is set to red, as per the requirement.

Example 2: getElementById Method

Project Structure & Cascading Style Sheet is unchanged from the Example 1. However, in this case, I’ve decided to use an HTML DOM getElementById() method to accomplish the result. I’ve re-used the name changeBackgroundColor as my JavaScript function, but instead of directly accessing a body element by using the document.Body style, I’ve used a getElementById method to find the tag by it’s ID. ‘The getElementById() method returns the element that has the ID attribute with the specified value. This method is one of the most common methods in the HTML DOM, and is used almost every time you want to manipulate, or get info from, an element on your document.’ (Get Element By Id, 2016).

Example 3: jQuery

Project Structure & Cascading Style Sheet

This is unchanged from the Example 1

HTML & JavaScript

There are many ways to accomplish the task of changing background. Just for the illustration, I’ve decided to use yet one more technique to accomplish the same result. And that is by using a jQuery. For this project, it’s an overkill, but I just wanted to show yet another way of achieving the same result.

What is jQuery? ‘jQuery was developed on top of JavaScript, so jQuery can be safely termed a JavaScript framework. But unlike the lengthy coding style inherent in JavaScript, jQuery was designed to be simple. The lengthy JavaScript code can be easily replaced by the compact code of JQuery.’ (Chaudhary, M., and Kumar, A., 2015)

In jQuery, it’s possible to access the DOM element body tags by name and inject the CSS right to them. This is what the solution would look like in jQuery: $(body’).css(‘background’, ‘white’);

This is what the code implementation looks like. Jquery is listening to click event on two of the buttons and depending on which ID of the button is clicked; it’ll switch the background to a predefined color. In my example, I’ve left .first() method in the tag, but that’s only for the reference, when we may have more tags using the same ID (note: that won’t happen in case of BODY tag)

Please note the head meta section, where I am loading jQuery from one of the currently available content delivery networks. The list is available as reference: (jQuery, 2016). That is how I’ve initialized minified version of the jQuery, albeit I could have included its JS files and link it into the document, both methods work for the purposes of this assignment.

I’ve implemented changeBackgroundColor JavaScript function to change of the color of the DOM element <body>. This function is contained in the meta section of the HTML document (in between the <script></script> tags).

 

Example 4: Event Listener

I’ve decided to give it a try and implemented entire functionality by using Event Listener, that simply listens to a click event I put on the button.

JAVASCRIPT

This is the JavaScript for the solution:

1

As you can see, I’ve wrapped the click event listeners into  window.onload=function, without this code would not execute before the DOM is fully loaded.

HTML

And in HTML it was as easy as simply insert two buttons, I didn’t even have to insert them as input buttons, they could have been just simple <button> tags.

2

In any case, I’ve updated my Plunker at: https://embed.plnkr.co/jrs4Fttigjx6HNPjuiWl/

The code supports 4 different and unique methods to achieve the same goal now:

3

References

Chaudhary, M. and Kumar, A. (2015) Practical jQuery. University of Liverpool: Springer Science + Business Media.

Onclick Event (2016) Available at: http://www.w3schools.com/jsref/event_onclick.asp (Accessed: 19 November 2016).

Foundation, jQuery (2016) JQuery CDN – latest stable versions. Available at: https://code.jquery.com/ (Accessed: 19 November 2016).

Get Element By Id (2016) Available at: http://www.w3schools.com/jsref/met_document_getelementbyid.asp (Accessed: 19 November 2016).

Document Object (2016) Available at: http://www.w3schools.com/jsref/dom_obj_document.asp (Accessed: 19 November 2016).

(Visited 15 times in last 30 days)

Comments

comments