Web Design


Basic JS Concepts

What is Javascript?

Javascript is a language that can be used for tons of different types of products, such as apps, games, and websites.

How do variables work in Javascript?

For an overview of basic programming and variables, please refer to our FTC Java Resources. Variables in Javascript are very easy. The language is type-safe, meaning that we can create any variable just by writing var in front of it.

var firstName = “Greg”;
var number = 47;
var diffNumber = 64.8;

The firstName is called a string, the number is a integer, and the diffNumber is a double, or floating point value.


We will be using Arrays for our data. On your dashboard, create a new file named scripts.js. We will be putting all of Javascript in this file. Arrays are similar to lists, where we can store multiple variables as one, and call them based on a certain number. Arrays start at 0 and can go forever. However, we must initialize them with a value.

First, let’s create a value for the number of posts we want to have. Let’s also give our domain name as a variable.

var posts = 4;
var domain =”stempump”;

Now, we will create a few Arrays.

var titles = new Array(posts); // create an array with 4 items
var dates = new Array(posts);
var summaries = new Array(posts);
var text = new Array(posts);
var links = new Array(posts);
var grads = new Array(posts);

We used the value posts as the number of entries we should have for every Array, so when we change that, it will change the array number.

Giving all our entries data

Now, let’s give our array items data. To call a value from an array, we write the variable name, add [#], with # being the number item we are looking for. Remember, arrays start at 0.

// give data, everything starts at 0
title[0] = "Test 1";
title[1] = "Test 2";
title[2] = "Test 3";
title[3] = "Test 4";
dates[0] = "1/1/19";
dates[1] = "1/2/19";
dates[2] = "1/3/19";
dates[3] = "1/4/19";
summaries[0] = "summary 1";
summaries[1] = "summary 2";
summaries[2] = "summary 3";
summaries[3] = "summary 4";
text[0] = "summary 1";
text[1] = "summary 2";
text[2] = "summary 3";
text[3] = "summary 4";
// works with domain to create URL
links[0] = "1"; // notice this, we will use this in a upcoming lesson
links[1] = "2";
links[2] = "3";
links[3] = "4";
// custom gradients, can be customizable
grads[0] = "#00f260, #0575e6";
grads[1] = "#12c2e9,#c471ed,#f64f59";
grads[2] = "#f12711, #f5af19";
grads[3] = "#8E2DE2, #4A00E0";

What next?

In the upcoming lessons, we will be creating code using these variables that will allow it to automatically update when we add more data.