Javascript Basics: Part 05

Preview of the next 3-4 parts

 

As always, read sections parts 1-4  prior to reading this one if you want to avoid complete confusion. 

You have been warned.

 


Notice:   This section will probably be somewhat confusing, as its actually just an example of what we’re going to cover so that you have at least a partial idea of one way to use objects going into Part 6 — You can actually skip this section and come back to it later and still be able to understand everything about objects, arrays, and more.

 

This part of the Javascript Basics series of tutorials will focus mostly on Javascript Objects. I will talk about how to create them, use them,  and a bunch of neat things that objects can be used for.  Later on,  I will also get into how you can use objects with arrays together to make more complicated scripts.

 

 Objects

Javascript treats everything as an object. Objects are what Javascript does best.  There are many ways to create objects, definately more than one. But, for this tutorial we’re going to talk about creating a named-type object.

So, for starters, Objects are really nothing more than Arrays with the ability to be passed by a single name rather than by the entire array.

Make sense?  No?  Thats okay.  It will. 

 

Lets first consider the following basic web page and script (don’t worry, I will explain what everything is)

 

<html><head> <title>  My Javascript Function Test Page  </title>  </head><body>


h1 {
     text-align:center/*  align the main title in the center */
}
/* green navigation bar */
#navigation {
     
     background-color:#CFC;  /* make the background green */
     width70%;             /* make the navigation bar not take up the entire 
     page */
     displayflex;          /* enable auto-spanning */
     flex-directionrow;    /* auto-span horizontal instead of vertical */
     justify-contentspace-around/*  put spacing around each flex item */
     padding-top8px;       /* add some extra padding on top of the navbar */
     padding-right16px;    /* add padding on the right */
     padding-bottom8px;    /* bottom  */
     padding-left0px;      /* left */
     margin-right32px;     /* same as padding but margin instead */
}



<!--  create the site's heading inside of a 70% div  so that it lines up with 
our 70% width navbar -->
<div style="width: 70%"
<h1> My Test Site</h1>
</div>
<!-- -->
<!--  Create the green navigation box -->
<div id="navigation" >


<!--  The three links, each one calling the loadPage javascript function when 
clicked on -->
<a style="order: 0" href="javascript: loadPage(1)" >
Page 1
</a>
<a style="order: 1" href="javascript: loadPage(2)">
Page 2
</a>
<a style="order: 2" href="javascript: loadPage(3)">
Page 3
</a>
<!-- a blank link just to fill in extra space -->
<a style="order: 3">&nbsp;</a>



<!--  end of navigation -->
</div>


<style>
section {
     margin4px
     padding8px
     border-bottom2px solid black;
     displaynone;
}
</style>


<section id="page1">
section -- here's the first section of our 3-section page
</section>


<section id="page2">
section -- here's the second section of our 3-section page
</section>



<section id="page3">
section -- here's the second section of our 3-section page
<br>
Here's more basic information on section 3
</div>




<script type="text/javascript">
function loadPage(sectionNumber) {
     var sectionToLoad document.getElementById("page" sectionNumber);
     
     var all_sections document.getElementsByTagName("section");
     for (var x=0x<all_sections.lengthx++) {
       if (all_sections[x] == sectionToLoad) { 
          sectionToLoad.style.display "block";
       else {
          all_sections[x].style.display "none"
       }
     
     }
}
</script> 

 


</body></html>

 

 

Looks like a lot of stuff, right?  Well, actually this page is surprisingly simple. Below is a actual live rendering of what the the above code does.

 

 

 

Now, how does it work? I will show you.

 

Now, we already know the basics of HTML and this set of tutorials isn’t really focused as much on CSS styling. I just put in the CSS ( thats the code between the <style> and </style>  tags)  so that the different elements would be more visible. What we’re going to actually discuss is the Javascript functionality of this page.

There’s really nothing new that wasn’t in the previous tutorial, but what we’re going to do is add in a few Javascript objects to show you how to quickly and easily add in new elements automatically. 

But first, we need to fully understand whats going on with the code below:

 

function loadPage(sectionNumber) {
     var sectionToLoad document.getElementById("page" sectionNumber);
     
     var all_sections document.getElementsByTagName("section");
     for (var x=0x<all_sections.lengthx++) {
       if (all_sections[x] == sectionToLoad) { 
          sectionToLoad.style.display "block";
       else {
          all_sections[x].style.display "none"
       }
     
     }
}


 

So, for starters we will break down the different concepts which are being used in the above code. As we remember from earlier tutorials,  the var command defines a variable.  

The variable that we named “sectionToLoad” at the top is assigned the value of  document.getElementById(“page” + sectionNumber).    So basically, sectionToLoad will actually be a direct reference to the corrosponding item on the page with the ID   pageX   where X  is whatever is included when the command loadPage(X)  is called.

 

 

 

Leave a Reply

Your email address will not be published. Required fields are marked *