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 */
width: 70%; /* make the navigation bar not take up the entire
page */
display: flex; /* enable auto-spanning */
flex-direction: row; /* auto-span horizontal instead of vertical */
justify-content: space-around; /* put spacing around each flex item */
padding-top: 8px; /* add some extra padding on top of the navbar */
padding-right: 16px; /* add padding on the right */
padding-bottom: 8px; /* bottom */
padding-left: 0px; /* left */
margin-right: 32px; /* 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"> </a>
<!-- end of navigation -->
</div>
<style>
section {
margin: 4px;
padding: 8px;
border-bottom: 2px solid black;
display: none;
}
</style>
<section id="page1">
section 1 -- here's the first section of our 3-section page
</section>
<section id="page2">
section 2 -- here's the second section of our 3-section page
</section>
<section id="page3">
section 3 -- 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=0; x<all_sections.length; x++) {
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=0; x<all_sections.length; x++) {
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.
I’m really enjoying the theme/design of your weblog. Do you ever run into any internet browser compatibility problems?
A number of my blog audience have complained about my
blog not working correctly in Explorer but looks great in Chrome.
Do you have any recommendations to help fix this issue?
You have to use whats called a “Polyfill” for incompatible features. For example: Attempting to use ECMAScript won’t work on older IE browsers, but there is a polyfill that actually implements ES6 using ES5. There are many polyfills available online for many things. It all depends on whats broken.
Wow that was odd. I just wrote an extremely long comment but after
I clicked submit my comment didn’t show up. Grrrr… well I’m not writing all that over again.
Anyhow, just wanted to say fantastic blog!
The comments are moderated on this site to prevent comment spamming
Hello, Neat post. There is an issue with your web site in web explorer, could test this?
IE nonetheless is the marketplace chief and a
big component to other people will miss your wonderful
writing due to this problem.
What is web explorer? You mean Internet Explorer? My site isn’t really targeting visitors who don’t know enough about the Internet to NOT use Internet Explorer. Most information is directed towards people with at least basic understanding of how web sites work
Hi there to all, for the reason that I am actually eager
of reading this blog’s post to be updated daily.
It contains pleasant material.
excellent points altogether, you just gained a new reader.
What may you recommend in regards to your put up that you just made some days ago?
Any positive?
Feel free to surf to my webpage g
Your website seems to be returning 500 error on every page that I clicked on? Is this by design? I think you have a few PHP syntax errors somewhere that need to be looked at. A good place to start would be the ‘error log’ for your http server on your web site’s host machine. 😉
Great post. I was checking continuously this
blog and I’m inspired! Very helpful info specially the remaining part 🙂 I take care of
such info a lot. I used to be seeking this certain information for a very long time.
Thank you and best of luck.