Javascript

What is Javascript and where is it used

Javascript (JS) is a text-based programming language that is commonly used when building features into a website. When your website does anything more than display content for you, such as a scrolling background, prompts that appear on the screen, interactive 2D/3D models, … etc. It does this by using Javascript.

Think of a website as being constructed out of 3 main parts

• HTML – The main foundation of the page. Dictates what gets displayed to the user.
• CSS – This is the style of the webpage. This dictates what the page looks like, formatting, and even the positioning of certain elements.
• Javascript (JS) – Provides interaction with the users of the webpage. It can respond to input and dynamically display content. (e.g Clicking on an item on a store page to add it to your cart).

Note: Someone who is proficient in all 3 of the above ‘languages’ is called a “Front-end Developer”. They handle the development and design of websites and ensure users have a great experience. They handle the “front-end” of the website (the part that faces the users). A “Back-end Developer” works on the hidden side of websites, usually to do with validation, security and databases. Those that are talented and experienced with both front-end and back-end development are called “full stack developers”.

Almost all modern websites now use Javascript in some way.

Javascript is a Text based programming language. This means it shares a similar structure to other text based programming languages like Python or C#. Here is an example:

 var el = this.el;
 var _intensity = 1;
 var _flickerAmount = 0.025;
 
 setTimeout(ChangeIntensity, getRandomInt(10, 50));
 
 function ChangeIntensity(){
 _intensity += getRandomArbitrary(-_flickerAmount, _flickerAmount);

 el.setAttribute('light', 'intensity', _intensity);

 setTimeout(ChangeIntensity, getRandomInt(10, 50));

 }

If you’re not familiar with any other text-based programming language, then the above example will look quite confusing. But by the end of this week, you will be able to read, and maybe even write the same function as above!

Why learn Javascript?

As mentioned before, javascript is now used in almost all modern web pages. Having an understanding of javascript, even a small one, will allow you to add interactive elements to your website.

Not only that, but learning to program with javascript will also teach you the fundamentals of computational thinking and programming. This is a skill that can be applied to a number of different applications and programming languages, as they all follow a similar structure.

Learning how to use javascript is not essential for using A-Frame, but it will, however, give us the best understanding of how A-Frame works. Learning javascript will also allow us to edit or add certain aspects to our webVR experience.

Key concepts of javascript

Many of these concepts are universal to all programming languages. We will cover a basic overview of them now but will go into more detail with them in later lessons.

 var el = this.el;
 var _intensity = 1;
 var _flickerAmount = 0.025;
 
 setTimeout(ChangeIntensity, getRandomInt(10, 50));
 
 function ChangeIntensity(){
 _intensity += getRandomArbitrary(-_flickerAmount, _flickerAmount);

 el.setAttribute('light', 'intensity', _intensity);

 setTimeout(ChangeIntensity, getRandomInt(10, 50));

 }

Javascript, and all other text-based programming languages, are read top to bottom. It is essential to understand the order in which instructions are executed.

Using the example above, we define the variable _intensity as being = to 1. We do this before we try to use it lower down in the document. If we did not do this first, then when the program tried to use _intensity, it would not know what the value of it was.

Variables

A variable is used to store information. We can then use the information elsewhere in the document by using the variable’s name. An example of this could be purchasing an item through a website using some money you had from a gift card.

 let currentBalance = 100;
 let itemPrice = 20;

 currentBalance = (currentBalance - itemPrice);

Looking at the example above, how much money would the user have left after their purchase? (let the numbers above represent $ Dollars).

100 - 20 = $80 left over

Variables are just a way to store information underneath a unique name, making it easier for us as programmers to remember what they represent.

Variables can also vary as the program is running. Using the same example as above, the currentBalance variable has changed from 100 to 80. If the program continues to run, the next time currentBalance is used, the number 80 will be given instead of 100.

Functions

Functions are a very versatile tool to use when programming. They can range from being simple to being extremely complicated. Let’s focus on the simple side of things for now.

A Function, is a collection of code that gets executed, when the function is called. Let’s change the example from before to use a function:

 let currentBalance = 100;
 let itemPrice = 20;

 function MakePurchase(){
 currentBalance = (currentBalance - itemPrice);
 }

We now have a function called "MakePurchase". Inside of that function (in between the brackets { }), is the code to deduct the item’s price from the user’s current balance. So what’s changed?

Now, whenever we want the user to purchase that specific item, we can simply write:

MakePurchase();

and the program will jump to the function, and execute any of the code located inside of it.

Functions are extremely useful for code that needs to be executed multiple times. Instead of writing the same lines of code over and over again in your document, you would construct a function. You could then call this function whenever you needed that code to execute.

These are simply some terms to help us better understand the following lessons. Don’t worry if you don’t fully grasp these concepts. We’ve only just begun learning and have lessons dedicated to many of the things mentioned above!

Head into the next lesson to have some hands-on with creating some simple interactivity within your web pages!