Free Coding Bootcamp

where being self-taught is good for the soul

JavaScript: Introduction

JavaScript along with HTML and CSS is the core web technology used to control the behavior of the various elements used to build web pages. For your site to behave properly, be sure to know what HTML, CSS and JavaScript do:

  • HTML is used to display and organize the content
  • CSS is used to display the content provided by HTML in a stylistic way.
  • JavaScript is used to add behavior to the web page

For now, we will concentrate on learning JavaScript basics that you can then incorporate into your web site.

Variables

To use variables in JavaScript, use the 'var' keyword followed by the name of the variable you wish to use. For example, if you want to assign the letter 'i' to the number 0, you can use the syntax on the right.

Then, to make sure a value is indeed assigned to the variable 'i', run the 'console.log' command with the variable 'i' as a parameter.

Some rules to remember about JavaScript variables. Variables:

  • Are case sensitive
  • Can have letters, numbers, underscores and $ symbols
  • Cannot start with numbers
  • Can be as long and descriptive as you like

Figure 1

                var i = 0;
                console.log(i);
              

View the result on http://repl.it by clicking the 'run' button at the top of the page.

Variable Scope

Variable scopes define how variables are accessible. There are two types of variables: global and local. How can you tell if a given variable is global or local? You have to figure out where they are located inside your program. In general, if a varible is outside of a function, then the variable is considered global. If the variable is inside of a function, then it is considered local.

Figure 2

              var i = 0;
              function add(x, y) {
                var a = x;
                var b = y;
                var total = a + b;
                console.log(total);
              }
              console.log(i);
              add(1,2);
              

View the results on https://repl.it/I599 of variables i and total via the use of a JavaScript function.

Now, what if I wanted to access the contents of the variable 'total' outside of the function? Well, you could access the local variable total located in the 'add' function by removing the 'var' keyword.

Figure 3

              var i = 0;
              function add(x, y) {
                var a = x;
                var b = y;
                total = a + b;
              }
              console.log(i);
              add(1,2);
              console.log(total);
              

View the results on https://repl.it/I59t and notice that we can display the contents of total. Why? Because the moment we removed the 'var' keyword from the total variable that is located in the function, we changed its scope to global.

A general rule of thumb is that as developers, we should strive to limit the number of global variables to zero. In other words, if we want access to a particular result, we should return the required result straight to the user. In this particular case, we would want to console.log the answer.

Figure 4

              function add(x, y) {
                var total = x + y;
                return total;
              }
              console.log(add(1,2));
              
In this last example, I removed the global variable 'i' as well as the other variables ('a' and 'b'), as they were not needed, and simply assigned the local variable 'total' the sum of the two parameters (x, y). Then I returned the value contained in the variable 'total' to the calling function (in this case: add(1,2)). To ensure the user receives an answer, I used console.log to display the result to the user. See Figure 4 via https://repl.it/I5aQ in action.

Please Note: The more practice you have sending information to the console, the more proficient you will be when you send information to an element in your web page. For example, you could have easily sent the answer to a span element with an id="result" like so:

Figure 5

                <!doctype html>
                <html>
                
                <head></head>
                
                <body> 
                  <p>JavaScript add(1,2) function gives <span id="result"></span>.</p>
                  <script>
                    function add(x, y) {
                      var total = x + y;
                      document.getElementById("result").innerHTML = total;
                    }
                    add(1, 2);
                  </script>
                </body>
                
                </html>
              

You are more than welcomed to copy this code and paste into your editor. Save the file with an .html extension and watch your web browser zip through the addition of the two numbers given and diplay it on your screen.

Quiz

Answer the following questions

1. What is used to style the content of an HTML page?

2. Are JavaScript variables case sensitive? Yes No

3. What type of variables should never be used?