Basics of programming #2

This is a continuation to Basics of programming. By reading this series you will learn JavaScript programming.

Today we will:

  • Run our first JavaScript code
  • Setup our developer environment for programming with JavaScript
  • Write and execute some code

Displaying “Hello World” using JavaScript

If you are reading this in your web browser the simplest way you can execute JS is to type it in the browser’s address bar. You have to type it by hand – copying and pasting will probably not work.

JavaScript: alert(“Hello World!”);

The code above displays tiny alert window with the message written between quotation marks.

runjs

There are other and ways of running JS code, but before we explore them,

We will install some programs for writing JavaScript code

Visual Studio Code (‘VS code’ or ‘code’ for short) is great for beginners, because they won’t be overloaded with a ton of buttons, options, windows and popups and it is great for advanced programmers because it is customisable and has a lot of useful extensions.

Download VS Code

After we install it and run it, we could write some code right away, but we better install a linter or hinter first. What is it? JShint for example highlights your simple mistakes. Every time you write something that is not allowed in JS, JShint will underline the error so you know about it right away and not only after running your code.

Extension panel can be opened by clicking the square icon on the left panel or by clicking Ctrl+Shift+X. Then you can type extension name in search bar to find it in the Marketplace.

extensions.png

The second extension we will install is Code Runner, an extension that allows executing JS without leaving VS Code.

runner.png

But for that to work, we need to install NodeJS first. We will talk more about NodeJS in other post, for now you need to know only, that NodeJS can run JavaScript on your PC. Get a download for your OS here.

ndoejs

Ok, we got everything installed. Restart VS Code so everything refreshes properly.

Let’s create a script.js file and write some code.

In JavaScript there is something called a console object and we can use it to log or print text with it. After running it with run button on the top right (if you don’t have that button you didn’t install code runner, or didn’t reload the window), a console shows up and tells us, what our code logged to the console.

consolelog.PNG

Now, we will do some calculations with js:

console.log( 1-2+3+4*5+6 );

Ok. I am tired from all this arithmetic. Let’s make some variables. What are variables?

Variables are things that change.

A good example is player’s health points in a game. You can have 0…100 health and it changes constantly when you fight your foes and pick up medical kits. It is important to keep track of players’ health so you can change their states when their hp changes.

Some variables examples:

  • Current page address in a browser. Each time you click a link, it changes.
  • Your bank account balance. Each transaction changes the balance.
  • Player’s position in a game,
  • Time on a video player

var playerHealth = 100;
var playerPositionX = 20;
var payerPositionY = 40;

var url = “https://tymski.wordpress.com”;

var accountBalance = 2000.17;

var timeElapsedText = “12:10”;

To create a variable we use a var keyword. Then we write variable name, then assignment symbol (which in javascript is represented by an equals sign), then we write the value. We finish the statement with a semicolon, but it is optional so it can be omitted. A variable name can’t have any spaces, but most of the symbols are allowed, for example you can use Greek alpha for an angle (var α = 30) or π for 3.14… A variable name can’t start with a number though.

Now, lets write account balance to the console:

var accountBalance = 2000.17;
console.log(“You have $” + accountBalance);
We added text to a number. No problem here. It worked as expected giving You have $2000.17 in the console.
Before we change account balance, let’s look on some comments.
A comment is just a note to the programmer, so it isn’t executed by computer

// this is a comment that won’t be executed

/*
*  This is a multiline comment
*
*  something important here
*/

Let’s now change account balance. We can add to a variable with +=, we can change the value with =, we can use other variables, like interestRate or basicIncome.

var accountBalance = 50; // we create variable accountBalance
accountBalance = 2000.17; // we change the value of accountBalance
accountBalance = accountBalance + 20; // we set our balance to be bigger by 20
accountBalance += 20; // we add 20 to our accountBalance
accountBalance *= 1.05; // we got 5% interest capitalization
console.log(“You have $” + accountBalance); // 2142.1785

Today we installed some software and played with some variables. We will explore more about variables in the next post. If you have any questions you can leave them in the comments. Cheers 🙂

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s