Javascript Moderately Difficult Concepts — part 07 — Object Definition/Creation

Javascript Moderate Concepts — part 07 — Object Defintion and Creation

Creating Customized Objects

What we have seen so far has been 99% static javascript. What this means is that any code that had is generated from static JavaScript cannot be changed on the fly and will be the same no matter what with the same outcome.

now lets say we decided to make a website that appear differently depending on who is viewing it. One common example of this is once a user logs into a website, then suddenly the entire page changes, opening up new options for the user to access once authenticated. In this particular article we’re not going to cover how to make a secure identification login, since an entire book could be written on the topic, instead we’re going to simply create a simple user input form that will dynamically create new objects with the specified properties each time a user clicks on the create button.

[ demo of dynamic object creation ]

Note: Understanding the concepts that are used to create the above demo will be extremely important if you desire to understand any more advanced Javascript topics.

Object creation is a fundamental building block for creating dynamic javascript environments.

So, lets begin.

You should already be aware of how to create a button that when clicked will execute a javascript function. This is the case, we won’t really dive into it

You got to be aware of how to create an array with various values in it, and how to access the array, as well as how to look through it.

What do you most likely haven’t learned yet is what an object is. An object is basically a way to describe a number of various different objects which share similar properties as a single name rather than as individual items with individual properties etc.

A good example of when this can be used might be a situation where you have a list of menu items that can be chosen from, which are all nearly identical except for maybe the page that each one takes you to when clicked, and the actual text of the item, the rest of the HTML and everything else about the different menu items are completely identical. So, rather than making 50 different identical block of code copying the majority of the code that makes up the items from one item to the next, it is simply easier to define a new object called a menu item which contains the code that is shared amongst all of the different menu items, with the would be bility to specify the name and the page that you are taken to when you click on the item.

The end result will be the same, only one way is much easier to create, and will allow for dynamic creation of menu items.

Take a look at this static Javascript menu, which is more like a list than a menu, but the concept is the same:

<div>

  <ul>

   <li>

    <button onClick="javascript: load("home.html")>Home Page</button>

   </li>

 

   <li>

    <button onClick="javascript: load("about.html")>About Page</button>

   </li>

 

   <li>

     <button onClick="javascript: load("contact.html")>Contact Page</button>

   </li>

 </ul>

</div>

 

<script type="text/javascript">

   function load(page) {

      window.location.href = page;

   }

</script>

Now this is simple enough that its not a big deal, but lets imagine that instead of three buttons, there are 30 buttons, and you want to change all of them from buttons to regular links. This process will be tedius and involve a lot of copy and pasting, which will have to happen every time you wish to make a change. One alternative way to do this very same thing could be done by create an object type called ‘MenuItem’ which takes care of creating and showing all of the HTML markup necessary to display a new Menu Item.

Here’s how you would create a new Object Type called MenuItem which can be reused:

<script>

var MenuItem = function(page, label) {

  this.page = page;

  this.label = label;

  this.display = function() {

      return "<li> <button onClick=\"load(' " + page " ')\">" + label + " </button> </li>";

}

}

</script>

/* create new MenuItem objects  and save them into the array called 'Menu'*/

<script>
var Menu = [];
Menu.push(new MenuItem('home.html', 'Home Page'));
Menu.push(new MenuItem('about.html', 'About Page'));
Menu.push(new MenuItem('contact.html', 'Contact Page'));


</script>