Today we will:
- Write and execute some code
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.
The code above displays tiny alert window with the message written between quotation marks.
There are other and ways of running JS code, but before we explore them,
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.
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.
The second extension we will install is Code Runner, an extension that allows executing JS without leaving VS Code.
Ok, we got everything installed. Restart VS Code so everything refreshes properly.
Let’s create a script.js file and write some code.
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”;
Now, lets write account balance to the console:
var accountBalance = 2000.17;console.log(“You have $” + accountBalance);
// 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 🙂