Lesson 4: Learning the basics of JavaScript

What are we going to build?

Tab 1

Tab 2

Tab 1 Body

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc eu massa libero. Nulla laoreet pharetra lacus. Aliquam porttitor, nibh sed rhoncus rutrum, dolor eros mollis neque, eu semper augue felis pretium tortor. Suspendisse consequat tempor leo in maximus. Fusce eget lectus augue. Ut at tempus turpis. Maecenas arcu enim, tincidunt quis malesuada ut, accumsan ut massa.

Fusce eu congue nibh, sit amet viverra mauris. Phasellus porta nec ex placerat fermentum. Etiam condimentum magna in leo volutpat vulputate. Phasellus accumsan eu tortor eget feugiat. Cras nec odio eget massa maximus sollicitudin vel vitae dui. Vestibulum mattis, dolor sed fringilla volutpat, nisl felis sodales nibh, a faucibus lectus dui id purus. Aenean dignissim venenatis sem. In eros neque, iaculis non luctus in, ultricies nec est. Mauris ut condimentum diam.

Duis in purus suscipit, dapibus neque a, tincidunt nisi. Pellentesque dapibus rhoncus sem, non tempor arcu interdum id. Fusce pellentesque orci ligula, vel luctus massa dictum id. Suspendisse efficitur nibh vel tincidunt commodo. Maecenas a sem pulvinar, iaculis lectus a, scelerisque lorem. Integer dapibus velit at nisl rutrum interdum. Ut dictum tincidunt sem et varius. Pellentesque bibendum lectus ac velit placerat bibendum. Cras et elit congue, porttitor enim sed, eleifend ante. Quisque in lacus nunc. Nullam rhoncus auctor mattis. Quisque porta volutpat pellentesque.

Suspendisse potenti. Cras sollicitudin diam id odio pretium, in rhoncus ligula auctor. In elementum, massa at aliquam sollicitudin, metus tortor euismod lectus, id malesuada augue neque quis ex. Duis rutrum erat lacinia nunc fringilla, at lacinia massa varius. Pellentesque cursus faucibus ultricies. Fusce molestie risus diam. Mauris laoreet libero et neque efficitur dictum. Phasellus egestas dignissim sapien sed vestibulum. Morbi ipsum lacus, luctus id dictum at, vehicula non odio. Mauris sodales auctor tellus, sed bibendum arcu sagittis quis. Nullam porta est vitae risus rhoncus, non ultrices dolor commodo. Aliquam venenatis aliquam nulla vel sodales.

Sed mollis condimentum viverra. Nam ultrices, magna a rutrum maximus, enim dolor fringilla lectus, varius sagittis velit tortor vitae ex. Sed id vulputate eros. Maecenas at nisi elementum nunc scelerisque eleifend ac ac quam. In efficitur magna massa, nec volutpat orci egestas hendrerit. Donec lacinia mauris quis faucibus vestibulum. Quisque cursus placerat diam. Aenean vitae massa purus. Ut maximus porta justo. Nam dignissim molestie neque, non luctus est imperdiet a. Aenean sit amet congue libero. Donec lobortis mauris ex, a tincidunt diam semper bibendum. Sed non odio at nunc semper tempus.

Tab 2 Body

Sed mollis condimentum viverra. Nam ultrices, magna a rutrum maximus, enim dolor fringilla lectus, varius sagittis velit tortor vitae ex. Sed id vulputate eros. Maecenas at nisi elementum nunc scelerisque eleifend ac ac quam. In efficitur magna massa, nec volutpat orci egestas hendrerit. Donec lacinia mauris quis faucibus vestibulum. Quisque cursus placerat diam. Aenean vitae massa purus. Ut maximus porta justo. Nam dignissim molestie neque, non luctus est imperdiet a. Aenean sit amet congue libero. Donec lobortis mauris ex, a tincidunt diam semper bibendum. Sed non odio at nunc semper tempus.

Suspendisse potenti. Cras sollicitudin diam id odio pretium, in rhoncus ligula auctor. In elementum, massa at aliquam sollicitudin, metus tortor euismod lectus, id malesuada augue neque quis ex. Duis rutrum erat lacinia nunc fringilla, at lacinia massa varius. Pellentesque cursus faucibus ultricies. Fusce molestie risus diam. Mauris laoreet libero et neque efficitur dictum. Phasellus egestas dignissim sapien sed vestibulum. Morbi ipsum lacus, luctus id dictum at, vehicula non odio. Mauris sodales auctor tellus, sed bibendum arcu sagittis quis. Nullam porta est vitae risus rhoncus, non ultrices dolor commodo. Aliquam venenatis aliquam nulla vel sodales.

Duis in purus suscipit, dapibus neque a, tincidunt nisi. Pellentesque dapibus rhoncus sem, non tempor arcu interdum id. Fusce pellentesque orci ligula, vel luctus massa dictum id. Suspendisse efficitur nibh vel tincidunt commodo. Maecenas a sem pulvinar, iaculis lectus a, scelerisque lorem. Integer dapibus velit at nisl rutrum interdum. Ut dictum tincidunt sem et varius. Pellentesque bibendum lectus ac velit placerat bibendum. Cras et elit congue, porttitor enim sed, eleifend ante. Quisque in lacus nunc. Nullam rhoncus auctor mattis. Quisque porta volutpat pellentesque.

Fusce eu congue nibh, sit amet viverra mauris. Phasellus porta nec ex placerat fermentum. Etiam condimentum magna in leo volutpat vulputate. Phasellus accumsan eu tortor eget feugiat. Cras nec odio eget massa maximus sollicitudin vel vitae dui. Vestibulum mattis, dolor sed fringilla volutpat, nisl felis sodales nibh, a faucibus lectus dui id purus. Aenean dignissim venenatis sem. In eros neque, iaculis non luctus in, ultricies nec est. Mauris ut condimentum diam.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc eu massa libero. Nulla laoreet pharetra lacus. Aliquam porttitor, nibh sed rhoncus rutrum, dolor eros mollis neque, eu semper augue felis pretium tortor. Suspendisse consequat tempor leo in maximus. Fusce eget lectus augue. Ut at tempus turpis. Maecenas arcu enim, tincidunt quis malesuada ut, accumsan ut massa.

HTML

<div class="lesson-4-container">
    <div class="tab-headings-container">
        <div class="tab-heading active" target-id="tab-body-1">
            Tab 1
        </div>
        <div class="tab-heading" target-id="tab-body-2">
            Tab 2
        </div>
    </div>
    <div class="tab-body-container">
        <div id="tab-body-1" class="tab-body active">
            <p>Tab 1 Body</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc eu massa libero. Nulla laoreet pharetra lacus. Aliquam porttitor, nibh sed rhoncus rutrum, dolor eros mollis neque, eu semper augue felis pretium tortor. Suspendisse consequat tempor leo in maximus. Fusce eget lectus augue. Ut at tempus turpis. Maecenas arcu enim, tincidunt quis malesuada ut, accumsan ut massa.</p>
            <p>Fusce eu congue nibh, sit amet viverra mauris. Phasellus porta nec ex placerat fermentum. Etiam condimentum magna in leo volutpat vulputate. Phasellus accumsan eu tortor eget feugiat. Cras nec odio eget massa maximus sollicitudin vel vitae dui. Vestibulum mattis, dolor sed fringilla volutpat, nisl felis sodales nibh, a faucibus lectus dui id purus. Aenean dignissim venenatis sem. In eros neque, iaculis non luctus in, ultricies nec est. Mauris ut condimentum diam.</p>
            <p>Duis in purus suscipit, dapibus neque a, tincidunt nisi. Pellentesque dapibus rhoncus sem, non tempor arcu interdum id. Fusce pellentesque orci ligula, vel luctus massa dictum id. Suspendisse efficitur nibh vel tincidunt commodo. Maecenas a sem pulvinar, iaculis lectus a, scelerisque lorem. Integer dapibus velit at nisl rutrum interdum. Ut dictum tincidunt sem et varius. Pellentesque bibendum lectus ac velit placerat bibendum. Cras et elit congue, porttitor enim sed, eleifend ante. Quisque in lacus nunc. Nullam rhoncus auctor mattis. Quisque porta volutpat pellentesque.</p>
            <p>Suspendisse potenti. Cras sollicitudin diam id odio pretium, in rhoncus ligula auctor. In elementum, massa at aliquam sollicitudin, metus tortor euismod lectus, id malesuada augue neque quis ex. Duis rutrum erat lacinia nunc fringilla, at lacinia massa varius. Pellentesque cursus faucibus ultricies. Fusce molestie risus diam. Mauris laoreet libero et neque efficitur dictum. Phasellus egestas dignissim sapien sed vestibulum. Morbi ipsum lacus, luctus id dictum at, vehicula non odio. Mauris sodales auctor tellus, sed bibendum arcu sagittis quis. Nullam porta est vitae risus rhoncus, non ultrices dolor commodo. Aliquam venenatis aliquam nulla vel sodales.</p>
            <p>Sed mollis condimentum viverra. Nam ultrices, magna a rutrum maximus, enim dolor fringilla lectus, varius sagittis velit tortor vitae ex. Sed id vulputate eros. Maecenas at nisi elementum nunc scelerisque eleifend ac ac quam. In efficitur magna massa, nec volutpat orci egestas hendrerit. Donec lacinia mauris quis faucibus vestibulum. Quisque cursus placerat diam. Aenean vitae massa purus. Ut maximus porta justo. Nam dignissim molestie neque, non luctus est imperdiet a. Aenean sit amet congue libero. Donec lobortis mauris ex, a tincidunt diam semper bibendum. Sed non odio at nunc semper tempus.</p>
        </div>
        <div id="tab-body-2" class="tab-body">
            <p>Tab 2 Body</p>
            <p>Sed mollis condimentum viverra. Nam ultrices, magna a rutrum maximus, enim dolor fringilla lectus, varius sagittis velit tortor vitae ex. Sed id vulputate eros. Maecenas at nisi elementum nunc scelerisque eleifend ac ac quam. In efficitur magna massa, nec volutpat orci egestas hendrerit. Donec lacinia mauris quis faucibus vestibulum. Quisque cursus placerat diam. Aenean vitae massa purus. Ut maximus porta justo. Nam dignissim molestie neque, non luctus est imperdiet a. Aenean sit amet congue libero. Donec lobortis mauris ex, a tincidunt diam semper bibendum. Sed non odio at nunc semper tempus.</p>
            <p>Suspendisse potenti. Cras sollicitudin diam id odio pretium, in rhoncus ligula auctor. In elementum, massa at aliquam sollicitudin, metus tortor euismod lectus, id malesuada augue neque quis ex. Duis rutrum erat lacinia nunc fringilla, at lacinia massa varius. Pellentesque cursus faucibus ultricies. Fusce molestie risus diam. Mauris laoreet libero et neque efficitur dictum. Phasellus egestas dignissim sapien sed vestibulum. Morbi ipsum lacus, luctus id dictum at, vehicula non odio. Mauris sodales auctor tellus, sed bibendum arcu sagittis quis. Nullam porta est vitae risus rhoncus, non ultrices dolor commodo. Aliquam venenatis aliquam nulla vel sodales.</p>
            <p>Duis in purus suscipit, dapibus neque a, tincidunt nisi. Pellentesque dapibus rhoncus sem, non tempor arcu interdum id. Fusce pellentesque orci ligula, vel luctus massa dictum id. Suspendisse efficitur nibh vel tincidunt commodo. Maecenas a sem pulvinar, iaculis lectus a, scelerisque lorem. Integer dapibus velit at nisl rutrum interdum. Ut dictum tincidunt sem et varius. Pellentesque bibendum lectus ac velit placerat bibendum. Cras et elit congue, porttitor enim sed, eleifend ante. Quisque in lacus nunc. Nullam rhoncus auctor mattis. Quisque porta volutpat pellentesque.</p>
            <p>Fusce eu congue nibh, sit amet viverra mauris. Phasellus porta nec ex placerat fermentum. Etiam condimentum magna in leo volutpat vulputate. Phasellus accumsan eu tortor eget feugiat. Cras nec odio eget massa maximus sollicitudin vel vitae dui. Vestibulum mattis, dolor sed fringilla volutpat, nisl felis sodales nibh, a faucibus lectus dui id purus. Aenean dignissim venenatis sem. In eros neque, iaculis non luctus in, ultricies nec est. Mauris ut condimentum diam.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc eu massa libero. Nulla laoreet pharetra lacus. Aliquam porttitor, nibh sed rhoncus rutrum, dolor eros mollis neque, eu semper augue felis pretium tortor. Suspendisse consequat tempor leo in maximus. Fusce eget lectus augue. Ut at tempus turpis. Maecenas arcu enim, tincidunt quis malesuada ut, accumsan ut massa.</p>
        </div>
    </div>
</div>

CSS

    .lesson-4-container {border: dotted 3px #00ff00; padding: 10px;}
    .lesson-4-container .tab-heading {
        font-size: 30px; 
        display: inline-block;
        width: 100px;
        border-left: solid 1px black;
        border-top: solid 1px black;
        border-right: solid 1px black;
        border-radius: 8px 8px 0 0;
    }
    .lesson-4-container .tab-heading.active {    
        border-left: solid 2px black;
        border-top: solid 2px black;
        border-right: solid 2px black;
    }
    .lesson-4-container .tab-body {display: none;}
    .lesson-4-container .tab-body.active {display:block; width: 100%;}

JavaScript

    function tabHeadingClickEvent(e){
        var elem = e.srcElement || e.target;
        if(elem === null || elem === undefined){return;}
        
        var targetID = elem.getAttribute("target-id");
        if(targetID === "" || targetID === null || targetID === undefined){return;}
        //set the active heading
        var headings = document.getElementsByClassName("tab-heading");
        for(var i = 0; i < headings.length; i++){
            if(headings[i] == elem){
                headings[i].setAttribute("class", "tab-heading active");
            }else{
                headings[i].setAttribute("class", "tab-heading");
            }
        }   
        //set the ative body
        var bodys = document.getElementsByClassName("tab-body");
        for(var i = 0; i < bodys.length; i++){
            if(bodys[i].id == targetID){
                bodys[i].setAttribute("class", "tab-body active");
            }else{
                bodys[i].setAttribute("class", "tab-body");
            }
        }       
    }
    (function(){
        var addEvent = function(element, evnt, funct){
            if (element.attachEvent)
                return element.attachEvent('on'+evnt, funct);
            else
                return element.addEventListener(evnt, funct, false);
        }
        var tabs = document.getElementsByClassName("tab-heading");
        for(var i = 0; i < tabs.length; i++){
            addEvent(tabs[i], "click", tabHeadingClickEvent);
        }
    }())

Syntax

Just like with CSS, JavaScript uses the curly brackets to group commands together in what is called a “code block.”
White space does not matter.
Each command in JavaScript is called a “Statement”, notice how they all end in a semi-colon (;).
A statement can:
- Declare a function or a variable
- Call a function
- Assign a value to a variable
- Return a value from a function
- Evaluate a condition
- Flow Control, which means to control the flow of the script. This is usually done with a type of loop.

Variables

Variables are storage containers in memory, that store a value.
I like to visualize this as the shoe lockers at a fast food play pin. The size of shoe that can fit in storage is based on the size of the shoe locker. Bigger shoes need bigger shoe lockers. In this same way, bigger value types need bigger allocations of memory. For this reason JavaScript defines value types:
- Primitive value types
  - Undefined - the default value of any variable.
  - Null - Like the undefined value type, this value type has only 1 possible value, and it indicates empty
  - Boolean - this value type has 2 possible values, true and false.
  - Number - this value type has a large range of possible values, and can store numerical values. However there is a limit to how large and how small a number can be stored in this value type, however it is a very large range of numbers and unlikely you will ever need to go outside of that range.
  - String - this value type can store a set of textual values. Each member in the set is a single text character called a character or Char for short. A character is actually a numerical number from 0 to 255, that is associated with a value on the ASCII chart.
- Compound value types
  - Object - an object is composed of properties and methods. Objects are outside of the scope of this lesson, we will cover these in greater detail later on.
    - A property is key / value pair, in which the key defines a variable name that stores the value. A property can be of any value type, including another object.
    - A method is a function that belongs to an object. A method is also defined with key value pair, in which the value is either a reference to a function or an anonymous function.

Functions

Notice these lines of JavaScript:

1.) Function Declaration

    function tabHeadingClickEvent(e){
        ... 
    }

2.) Function Expression

    var addEvent = function(element, evnt, funct){
        ...
    }

3.) Immediately Invoked Function Expression I.I.F.E - pronounced if-e

    (function(){
        ...
    }())

A look at our Example

Look at the following code:

    var tabs = document.getElementsByClassName("tab-heading");
    for(var i = 0; i < tabs.length; i++){
      addEvent(tabs[i], "click", tabHeadingClickEvent);
    }