Variables

Variables Video

So, you have been working with variables in all the other languages with which we have worked. Hopefully, these won't feel scary or foreign to you now.

What do they look like in JavaScript?

 var favoriteNumber = 13;
 var favoriteColor = "blue";
 var myAge;
 myAge = 79;
 var red,green,blue;
 red = "#FF0000";
 green = "#00FF00";
 blue = "#0000FF";

As you stated above, there are several different ways in which you can declare and assign values to your variables. They are all valid, and it just depends on when you want to give them a value or if they will be assigned later.

To use them in your HTML page, you can do something like this.

 <html>
    <title>Variables</title>
    <head>
    <script>
        var favoriteColor = "blue";
    </script>
    </head>
    <body>
        <span id="myTag">This is my favorite text</span>
    </body>

    <script>
        document.getElementById("myTag").innerHTML = "Favorite Color " + favoriteColor;
    </script>
 </html>

There are three things to notice here.

I can put the variable in the script tag inside the head tag because it is not trying to access the tag myTag.
When I print out the variable favoriteColor, it has to precisely match the capitalization as it is declared or not work.
To make it show up in the tag, you have to use the + and then put the variable name without the double-quotes ". The double-quotes are required if you want to print out exactly what is inside the double-quotes. In this case, we want to print out the value stored in the variable.

See the Pen JS - Variables by Michael Cassens (@retrog4m3r) on CodePen.