Class with JavaScript

JavaScript is (kind of weak) object oriented programming language. We can create our own classes, and use them to improve the readability of our code.

Here we'll write a simple blog manager based on a custom class, BlogEntry.

We will use it in an HTML page simple like this:

<h3>Welcome to My Blog</h3>
<div id="blog"></div>
<input id="btnShowAll" type="button" value="Show all entries" />

Just a div section, where we'll put our blog posts, and a button to show them all.

In the script section we specify the window onload behavior in this way:

window.onload = function(evt) {
  showBlog(2);

  document.getElementById("btnShowAll").onclick = function() {showBlog(blog.length);}
}

As the page is loaded, we call the showBlog() function to show a couple of items. And we associate to the button onclick property a call to the same showBlog() function, asking to show all the items in the blog. Before defining the function, and the blog itself, we need to define the BlogEntry class.

To define a JavaScript class we simply have to write its constructor, that carries the definition of the class properties and methods. So, here is our class, having title and body for a blog post, and a couple of methods to make them available as plain text, or in a fancy HTML format:

function BlogEntry(title, body) {
  this.title = title;
  this.body = body;

  this.toString = function() {
    return this.title + ": " + this.body;
  }

  this.toHTML = function() {
    return "<b>" + this.title + "</b><br />" + this.body;
  }
}

Given that, we define an array of a few blog entries:

var blog = [ new BlogEntry("Welcome", "Welcome to my new blog"),
new BlogEntry("Post 2", "Another <u>thrilling</u> post"),
new BlogEntry("Again me!", "Many things to say"),
new BlogEntry("Last one", "I am so busy with this blog!") ];

Now make sense writing the showBlog() function:

function showBlog(nr) {
  const len = (nr < blog.length) ? nr : blog.length;
  var element = document.getElementById("blog");

  while(element.firstChild)
    element.removeChild(element.firstChild);

  for(var i = 0; i < len; ++i) {
    showPost(element, i);
  }
}

We don't trust the caller of our function so, instead of using the parameter nr, we use len, that is not bigger than the number of items in the blog array.

We get the blog element from the HTML page, we remove all its children (to avoid double insertions) and then we call the showPost() to put in all the required items:

function showPost(element, i) {
  var newNode = document.createElement("p");
  newNode.appendChild(document.createTextNode(""));
  newNode.innerHTML = blog[i].toHTML();
  if(i%2 == 0)
    newNode.setAttribute("style", "background-color: yellow");
  element.appendChild(newNode);
}

We append as a child to the passed element a new node, a "p" element in which we put as innerHTML the string returned by toHTML() called on the i element of the array blog. If we were not interested in fancy HTML formatting, we could have avoided using innerHTML (so practical but non-standard) and putting the result from a call to BlogEntry.toString() directly in the createTextNode() call.

To embellish a bit our page, we se the background color for alternate items in the blog, making it more readable.

More information on the JavaScript Object Oriented features in chapter nine of Head First JavaScript. The code here is heavily based on an example you can find in this fun and useful book.