Welcome to Basics of JavaScript
Functions For Loops Arrays

via GIPHY









Basics of JavaScript


There are many different tools inside JavaScript that can be used to help create a webpage. Outlined below are some of the different tools that can be useful when creating with JavaScript.


Functions


Functions allow a webpage to execute a single action, or multiple actions. It is broken down into 3 main parts, the keyword, the name, and the action. Here's an example of a simple function:



            

        function hello(){ 
            console.log ("Hello World!")
        }

  1. Broken down, the FUNCTION keyword notifies the user the following information is a function.
  2. The function has the name HELLO. This is what we will use to call the function later.
  3. "Console.log("Hello World!") is the action that will be executed when the function is called.

So when this action is "called," the result will be "Hello World!" To call the function the code is: 


         hello();



For Loops


For Loops are helpful when pulling multiple blocks of code until a condition is met. A For Loop consists of a variable, a condition, an action, and the call. The easiest way to show this is by using numbers. Below is an example of a For Loop that counts from 0 to 10. 


            

        for (var i = 0; i <= 10; i +=1){
            console.log(i)
        }

  1. "i" is the variable and defined as "0." This causes the equation to start at 0.

  2. The condition is "i" must be less than or equal to 10.

  3. "+=" is the required code for addition. "i += 1" is the action telling the code to add 1 to "i."

  4. "Console.log(i) is the call to pull "i."

When this For Loop is performed, the result will list out 0-10 individually.


Arrays


Arrays are useful in that they allow the user to store multiple valuables within a single variable. An array has a 2 main elements and can be easily identified by the use of square brackets. See the array below: 



            

    var colors = ['red', 'orange', 'yellow', 
                  'blue', 'indigo', 'violet']

  1. The array name is "colors." This is what will be used to call the array.
  2. The value is what is inside the square brackets and tells the user what is inside the array.

An array is nice in that individual values can be pulled from it. Each color in the above array is assigned an index number automatically. The index number of an array always starts at 0, so red is assigned to 0, orange to 1, etc. If I want to pulled specifically indigo listed in the above array, I would use: 



    console.log(colors[4]);