JavaScript for Beginners

code-583073_1280

What is JavaScript?

JavaScript is one of the three core components of a website. Along with HTML and CSS, it makes up what is known as the front-end—the part of a website that a user sees and interacts with. And in the case of JavaScript, the keyword is interact. While HTML largely owns what is on a web page and CSS determines what it looks like, JavaScript is what allows the page to be interacted with.

JavaScript can be added to any web page by using a script tag, in one of two main ways. The first is known as Internal, which is when the script tag contains the JavaScript directly. External is the second method, which refers to when your code links to an external JavaScript resource (a text file with a .js extension) via an src attribute.

Let’s take a look at a simple script:

Internal

<script>var name="Galvanize";</script>

External

<script src="main.js"></script>

What Can JavaScript Do?

  • Store data in a variable (Variables)
  • Perform mathematical functions using variables (Math)
  • Compare values using logic equations (Logic)
  • Store blocks of code that can be reused to carry out a specific task (Functions)
  • Store collections of named properties and methods (Objects)
  • Store lists of any kind of data (Arrays)

Variables, Math, Logic, and Loops

Storing data is one of the most important things you can do when writing code. It’s what allows you to save information about, well, anything. Variables can be numbers or strings. This is very useful in JavaScript as you will frequently be receiving information from the user, and you need somewhere to store it. Let’s ask the user for some information:


var question=“What is your name?”;

Congratulations, you’ve created a variable!

In programming, it’s important to be able to compare values in order to make decisions in code. When a comparison is made, the outcome is either true or false—a special kind of data known as a boolean. Performing comparisons like this is known as logic.

Logic can be used to check if two variables are equal or not equal, if one is greater than or less than the other, or a combination of the two. Logic questions like this are used to run conditional statements.

If is the most basic of these questions. If some logic is true, then you run a block of code. If statements can also include an additional block of code to be run if it is not true. These are known as if-else statements.

Let’s take a look.


if ( month == "August") { 
return "This is my favorite month of the year!";
} else {
return "I wish it was August already...";
}

Loops are used when you want to repeat a block of code over and over again. The two most common loops are while loops, which continue to repeat so long as a condition is true, and for loops, which performs a piece of code for each item in a list. While loops and for loops perform basically the same function, and are simply different ways to write the code.


var number=0;

while (number < 10) {
console.log("The number is " + number);
number = number + 1;
}

for (i=0; i < 10; i++) {
console.log("The number is " + i);
}

Functions, Objects, and Arrays

Functions are reusable blocks of code that can be called upon to execute that code whenever you like. When you call a function, you can pass it arguments (that is, give it some specific information to work with), and it may return a value.


function findArea(length, width) {
return length * width;
}

This is an example of a function that will return the area of a rectangle. This specific function takes multiple arguments—the length and width. To ​call​ the function, you would write:


findArea(10, 2)

Using the inputs of 10 and 2, this function would return the answer 20.

An object holds sets of information together in key/value pairs. Within an object, you can have multiple pairs of data, which allows you to extract specific values that you need. Here is an example of an object of food:


var food = {
fruit: “orange”,
vegetable: “broccoli”,
protein: “chicken”
}

An array is a variable that holds more than one item at a time. It is an easy way to define a set of strings or numbers as one variable. For example, we could set a variable called food and instead of creating key/value pairs the way we do in an object, we could create an array like this:


var food = [“orange”, “broccoli”, “chicken”]

For more on these topics and more advanced JavaScript functionality, check out Galvanize’s eight-week evening workshop.

galvanize_logomark_text_4c

Level Up