Introducing JavaScript - Web Development School

In the last module we mocked up a plan for what our main content area should look like and how it should behave:

In this section we are going to implement that plan with a combination of some more Bootstrap and an introduction to JavaScript.

You can download the completed version of fredscars.html for this module with the completed HTML here.

Download

And see it work here.

Table Of Contents

Set up the Content's Real-estate
- The Bootstrap Grid System
Add the category buttons
- Bootstrap color schemes
Lay out search result placeholders
Dynamic Results with JavaScript
The DOM Described
What's Next

Set up the Content’s Real-estate

For the next step we need to set up two columns in our main content area. One to hold category buttons on the left, and one to hold results on the right.

The Bootstrap Grid System

We are going to use another Bootstrap feature called the Gri d System.

Modify the code in fredscars.html as shown below, save your file and refresh your browser:

C:\Development\FredsCars\HTML\Chapter01Mod6\FredsCars.html

<!-- ... -->
<div class="container-fluid my-4 text-center">
   <h1>Welcome to Fred's Cars!</h1>
   Where you'll always find the right car, truck, or jeep.
   Thank you for visiting our site!

   <div class="container-fluid mx-0 row"
        style="margin-top: 20px;">
      <div class="col" style="border-right: 2px solid black">
         <h3>Categories</h3>
      </div>
      <div class="col">
         <h3>Results</h3>
      </div>
   </div>
</div>
<!-- ... -->

Your browser should look similar to the following image:

Let’s look at what we did here. In the code above we nested a new div container inside of the main content container and gave it the Bootstrap row class. We also gave the new div container some inline styling with a top margin of 20 pixels to give some space from the top welcome message:

<div class="container-fluid mx-0 row"
		    style="margin-top: 20px;">

The bootstrap row class sets up a div to be a row in a Bootstrap Grid.

Next we nested two divs in the row with Bootstrap col classes.

<div class="col" style="border-right: 2px solid black">
   <h3>Categories</h3>
</div>
<div class="col">
   <h3>Results</h3>
</div>

We also used inline styling to set the right border of the categories column to 2 pixels solid black to separate the category column from the results column.

The end affect is that we have now set up a Bootstrap Grid system to hold our category choices on the left and the results on the right with a nice visual separator inbetween.

[By The Way]
The Bootstrap Grid system provides a way to layout your content structure without using tables. Web developers and designers used to use HTML Tables to create the structure of a webpage. But tables should really only be used to hold actual data. If you are defining the actual structure of your html page you should use the div tag and other elements like header, footer, article, and section to create that structure. Bootstrap Grid classes help make this process much easier.

So far the Categories and Results portion of the screen are each taking up the same amount of space; 50% each. The category buttons probably will not need that much space and the actual results will definately need more space then that. So let’s make a little tweak. The Bootstrap Grid system let’s you use up to 12 columns accross the screen. Let’s make the categories only take up 4 out of those 12 columns. Make the following modification to the categories div in fredscars.html, save your file and refresh your browser:

<!-- ... -->
<div class="col-4" style="border-right: 2px solid black">
   <h3>Categories</h3>
</div>
<!-- ... -->

Your browser should look similar to the following:

And the following figure shows how the grid system has been applied to our categories and columns.

We have replaced the Bootstrap col class with a col-4 class telling the categories div to only take up four out of the twelve possible columns in a grid row. The results div will automatically adjust to take up the remaining eight columns.

Add the category buttons

Next let’s create the category buttons for the selections in our mockup.

Modify the contents of fredscars.html with the following code, save your file, and refresh your browser:

<!-- ... -->
      .spacer {
         flex: 1;
      }
      
      .buttonContainer {
         margin-top: 20px;
      }

      .button {
        width: 100px;
       }
   </style>
</head>
<body>
   <header>
      Fred's Cars, Trucks & Jeeps
   </header>

   <div class="container-fluid my-4 text-center">
	<h1>Welcome to Fred's Cars!</h1>
	Where you'll always find the right car, truck, or jeep.
	Thank you for visiting our site!

	<div class="container-fluid mx-0 row"
		    style="margin-top: 20px;">
	   <div class="col-4" style="border-right: 2px solid black">
	       <div class="buttonContainer">
                  <button class="btn btn-outline-primary button"><b>ALL</b></button>
               </div>
	       <div class="buttonContainer">
                  <button class="btn btn-primary button"><b>CARS</b></button>
               </div>
	       <div class="buttonContainer">
                  <button class="btn btn-primary button"><b>TRUCKS</b></button>
               </div>
	       <div class="buttonContainer">
                  <button class="btn btn-primary button"><b>JEEPS</b></button>
               </div>
	   </div>
	   <div class="col">
	      <h3>Results</h3>
	   </div>
	</div>
   <!-- ... ->

At this point your browser should look similar to the following:

Let’s inspect the new code above:

Here we have replaced the Categories placeholder with four HTML Button elements:

<button>Text Value</button>

Each button element has text describing what the user wants to view in the results when they click the button; All vehicles, Cars, Trucks, or Jeeps.

<div class="buttonContainer">
   <button class="btn btn-primary button"><b>CARS</b>
</button>

We have also introduced some new Bootstrap classes on the button elements from Bootstrap’s button classes. For the Cars, Trucks, and Jeeps buttons we applied the “btn”, and “btn-primaray” Bootstrap classes. The “btn” class let’s Bootstrap know you want to apply Bootstrap button styling like “btn-primary”.

Bootstrap color schemes

“btn-primary” has the affect of making your button blue. Bootstrap refers to this color as “Primary”. Bootstrap defines eight colors in it’s default color scheme; Primary, Secondary, Success, Danger, Warning, Info, Light, and Dark. You can see what these colors look like for your self in the Variants section of the buttons portion of the Bootstrap documentation.

NOTE: Bootstrap 5.3 added a ninth variant called Link.

For the “ALL” button, we applied the Bootstrap “btn-outline-primary” class. This class also used the primary color varient on the button but gives a slightly different look. It provides the button with an outline and renders blue text on a white background instead of the other way around with white text on a blue background like the other three buttons.

We also nested each button element inside of a div element. This will render our buttons vertically instead of horizontally across the screen and also let’s us apply some css margin styling. In the style tag we declared a new class called “buttonContainer” and defined it to have a top margin of 20 pixels. Then we added the new buttonContainer class to the buttons’ parent div elements. This creates some nice vertical spacing between buttons.

Finally, we declared another new css class called “button” that we can apply to our actual button elements. We have defined the button class to have a width of 100 pixels. Now all of our buttons are the same width across. Otherwise the buttons would all be different widths depending on how long the inner text is and that wouldn’t look very good. Why don’t you remove the button class from one of the buttons and see for yourself?

Note: When using css classes, you define the class within the style tag with a period ‘ . ‘ char in front of the class. When you go to use the class on an actual element, do not preceed the class with the ‘ . ‘ char.

Lay out search result placeholders

Next, let’s set up some placeholders for the areas that will display for each category button that the user clicks.

Modify the contents of fredscars.html with the following code, save your file, and refresh your browser:

<!-- ... -->
<div class="container-fluid mx-0 row"
            style="margin-top: 20px;">
   <div class="col-4" style="border-right: 2px solid black">
      <div class="buttonContainer">
         <button class="btn btn-outline-primary button"><b>ALL</b></button>
      </div>
      <div class="buttonContainer">
         <button class="btn btn-primary button"><b>CARS</b></button>
      </div>
      <div class="buttonContainer">
         <button class="btn btn-primary button"><b>TRUCKS</b></button>
      </div>
      <div class="buttonContainer"><button class="btn btn-primary button"><b>JEEPS</b></button>
      </div>
   </div>
   <div class="col">
      <div id="cars" style="display: block;">
         <h3>CARS</h3>
      </div>
      <div id="trucks" style="display: block;">
         <h3>TRUCKS</h3>
      </div>
      <div id="jeeps" style="display: block;">
         <h3>JEEPS</h3>
      </div>
   </div>
</div>
<!-- ... -->

Your browser should now look like the following:

In the code above we replaced the results heading placeholder with three div element placeholders inside of the row container’s second column. One to hold the results of cars, one for trucks and one for jeeps. Each results placeholder div has an “id” attribute defined. One for cars, one for trucks, and one for jeeps.

<div id="cars" style="display: block;">

This will let us access the specific category of results we want in the next few steps from the DOM (Document Object Model), which I talked about earlier in the chapter, with JavaScript. We have also added a new CSS property to each category placeholder called “display” and set their values to “block”. This has the affect of making the divs visible which they already were by default. But we need to initialize the display value in order to toggle each result div’s visibility using JavaScript as needed for each category’s search result.

Dynamic Results with JavaScript

Finally, as promised we’ll start to sprinkle in a little JavaScript.

Now, let’s make each category’s placeholder content display dynamically according to which category button the user clicks.

Modify the contents of fredscars.html with the following code, save your file and refresh your browser:

<!-- ... -->
   </style>

   <script>
      window.onload = function () {
         // all
            document.getElementById("btnAll").onclick = function () {
            document.getElementById("cars").style.display = "block";
            document.getElementById("trucks").style.display = "block";
            document.getElementById("jeeps").style.display = "block";
            document.getElementById("resultsType").innerHTML = "ALL";
         }
         // cars
         document.getElementById("btnCars").onclick = function () {
            document.getElementById("cars").style.display = "block";
            document.getElementById("trucks").style.display = "none";
            document.getElementById("jeeps").style.display = "none";
            document.getElementById("resultsType").innerHTML = "CARS";
         }
         // trucks
         document.getElementById("btnTrucks").onclick = function () {
            document.getElementById("cars").style.display = "none";
            document.getElementById("trucks").style.display = "block";
            document.getElementById("jeeps").style.display = "none";
            document.getElementById("resultsType").innerHTML = "TRUCKS";
         }
         // jeeps
         document.getElementById("btnJeeps").onclick = function () {
            document.getElementById("cars").style.display = "none";
            document.getElementById("trucks").style.display = "none";
            document.getElementById("jeeps").style.display = "block";
            document.getElementById("resultsType").innerHTML = "JEEPS";
        }
     };
   </script>
</head>
<body>
   <header>
	Fred's Cars, Trucks & Jeeps
   </header>

   <div class="container-fluid my-4 text-center">
      <h1>Welcome to Fred's Cars!</h1>
      Where you'll always find the right car, truck, or jeep.
      Thank you for visiting our site!

      <div class="container-fluid mx-0 row"
	          style="margin-top: 20px;">
         <!-- Categories -->
         <div class="col-4" style="border-right: 2px solid black">
	    <div id="btnAll" class="buttonContainer"><button class="btn btn-outline-primary button"><b>ALL</b></button>
            </div>
	    <div id="btnCars" class="buttonContainer"><button class="btn btn-primary button"><b>CARS</b></button>
            </div>
	    <div id="btnTrucks" class="buttonContainer"><button class="btn btn-primary button"><b>TRUCKS</b></button>
            </div>
	    <div id="btnJeeps" class="buttonContainer"><button class="btn btn-primary button"><b>JEEPS</b></button>
            </div>
	 </div>

         <!-- Results -->
	 <div class="col">
           <h5 class="bg-dark text-success"
		      style="padding: 5px;">
              Results for <span id="resultsType">ALL</span>
           </h5>
	   <div id="cars" style="display: block;">
	      <h3>CARS</h3>
	   </div>
	   <div id="trucks" style="display: block;">
	      <h3>TRUCKS</h3>
	   </div>
	   <div id="jeeps" style="display: block;">
	      <h3>JEEPS</h3>
	   </div>
	 </div>
      </div>

   </div>

   <div class="spacer"></div>
<!-- ... -->

Your browser should now look similar to the following screen shots.

Results of clicking the “ALL” Button. This is the initial state of the browser upon loading.

Ok, let’s inspect the new JavaScript and HTML code. This is not as daunting as it first looks. I promise.

First we’ll look into the changes of the HTML.

We had already added ids to the results elements so that we can toggle their visibility. Now we have also added ids to the category buttons so that we can access them from JavaScript and react to a user clicking on them.

<div id="btnCars" class="buttonContainer"><button class="btn btn-primary button"><b>CARS</b></button>

I’ve also added some more HTML Comments since the html code file is starting to get a little longer now. I added a comment before the Categories column:

 <!-- Categories -->

and one before the Results column:

<!-- Results -->

I start to add these in when the files start to grow a bit. It helps me go right to the point in the code I want to modify and work on quickly and I think it adds more structure to the layout of the page.

I also added a heading at the top of the results column:

<h5 class="bg-dark text-success"
 style="padding: 5px;">
   Results for <span id="resultsType">ALL</span>
</h5>

We use the heading to give the user some feedback about which category button they have clicked:

We’ve given the header a couple of Bootstrap classes to make the background of the header dark,

bg-dark

and to give the text the Bootstrap success (green) color:

text-success

And we added some padding:

style="padding: 5px;"

Inside of the results header we have the static text: “Results for” followed by a span element. The <span> element is an inline element as opposed to the div block type element. It does not make space above itself or create a new line below itself. It just flows inline with the rest of the content. We gave the span element an id of “resultsType” so that when the user clicks on a new category button we can access the span element from JavaScript and have it’s text reflect the new result set.

Now let’s turn our attention to the new JavaScript we’ve added in.

We nested a new element called the <script> element within our html head element. The script tag is where we can start to put in some programming.
We have used JavaScript. But you could also use other scripting languages such as VBScript. If you wanted to use VBScript you could add the language attribute to the script tag like this:

<script language="VBScript">

The default scripting language is JavaScript so I have left out the language attribute in our code file.

Note: The difference between a scripting language such as JavaScript and a programming language such as C# is that a scripting language is interpreted and a programming language is compiled. For interpreted languages like JavaScript, the browser reads and interprets the code line by line and executes the lines one by one as it reads them. A compiled language compiles down the code into machine code the computer can understand as an executable and has it ready to go when needed. We will see plenty of examples of a compiled language called C# in later chapters.

Inside of the script tag is where we have wired up our buttons. I added JavaScript Comments for each category button the user can click:

// all
      CODE FOR THE ALL BUTTON
// cars
      CODE FOR THE CARS BUTTON
// trucks
      CODE FOR THE TRUCKS BUTTON
// jeeps
      CODE FOR THE JEEPS BUTTON

Just like HTML Comments, JavaScript Comments can help you add structure to the code so you can come back later and find the section you want to work on like cars or jeeps more quickly.

The DOM Described

Within each section we are again utilizing the properties and methods of the DOM (Document Object Model). The DOM holds all of our HTML Tags and translates them into corresponding JavaScript Element Objects. So a <button> tag is added to the DOM as a Button Element Object. Every html tag in our html page is stored in the DOM as an element, which we can think of as kind of a tree. Think of the html elements as branches and leaves on the DOM tree.

Let’s have a closer look at the cars section in the JavaScript as an example:

// cars
document.getElementById("btnCars").onclick = function () {
   document.getElementById("cars").style.display = "block";
   document.getElementById("trucks").style.display = "none";
   document.getElementById("jeeps").style.display = "none";
   document.getElementById("resultsType").innerHTML = "CARS";
}

This code starts by accessing the browser’s Document Object from the browser and calls its getElementById() method. As you can see in the DOM Tree figure above, when an HTML Document is loaded into the browser, it becomes a document object and the document object becomes the root node of the HTML document. Root node here refers to the fact that the document object is the top parent of the entire document. (Elements are sometimes referred to as node by languages like JavaScript and XML).

Note: A method or function is a place where you can define a single statement or group of statements once and call again and again as much as you need that behavior to happen.

The getElementById(id) method takes the id of the element you want to get from the DOM Tree as a parameter, in this case the id we assigned to the CARS button element:

document.getElementById("btnCars")

Functions and method sometimes take parameters to further specify what they should do. In this case we are specifying to document.getElementById(id) to get the Cars button for us.

Once we access the Cars Button using document.getElementById("btnCars"), we can access its onclick property and assign it a function, or the behavior that should happen when the user clicks that button.

// cars
document.getElementById("btnCars").onclick = function () {
   document.getElementById("cars").style.display = "block";
   document.getElementById("trucks").style.display = "none";
   document.getElementById("jeeps").style.display = "none";
   document.getElementById("resultsType").innerHTML = "CARS";
}

In the above code we are simply toggling the visibility of the result div sections and changing the text of the result header. We change the text of the resultTypes span in our results header by using the span element’s innerHTML property.

Note: Properties are settings in objects that allow you to set attributes of the object, further describe behavior or visual appearance of the object, and maintain state of that object. Here we use the innerHTML property of the span element object to set the text to “CARS”.

What’s Next

At this point in the chapter I’ve described how to lay out the structure of the html page, layout our static data results, and dynamically change which part of the results the user sees with JavaScript.

In the next section we will make a couple of tweaks to the JavaScript to improve the code.

< Prev

Next >