We’re going to start by opening up our code editor. Let’s create a new document and save it as index.html. Now, let’s open this index.html file in our web browser. I’ll be using Chromium which is the open source version of Google Chrome. You can use any web browser that you want for this course. As long as it’s a current web browser.
What happens if a had another folder here, for instance, called js and this script file was inside of that folder? How can we include it in that case? All you have to do is add the path to the location of that file in here. The folder’s called js. So I will type in js and then forward slash, and the name of the file.
So I’m gonna create another variable called b and be using an equal sign, you can give it a value, so b will be equal to 10. You can also assign a value to an existing variable, in which case you don’t have to use the var keyword anymore because that’s only for the declaration part. We’ll give this one a value of 100. Let’s show these variables on our web page. So I’m gonna type in alert, which allows me to show a message box and the name of the variable. This case will be a and I’m gonna close this with a semicolon.
When the page loads, it shows the value of 100, which is the value of the variable called a. You can also enter text in a variable. So let’s call this variable, let’s call it text. And I’m gonna enter some text in here. So to enter text you need to use either single or double quotes. And we can show this on a message box using alert.
So let me reload the page. And we’ll see that it first, firstly it shows me 100, and then I click okay, and then it shows me your name here, the value of this one. Variable names are case sensitive, so a variable called lower case a, is not the same as a variable called upper case A. A common way to name variables is when you need to call them with more than one word, for example, person name, is something that’s called camel case. So you type in different words, in this case personName, and the second word starts and the follow up words start with an upper case or with a capital letter. So this is called a camel case notation. It’s just a convention. That’s just how people normally call their variables.
Another thing for you to know is that the name of the variables, it’s only made for us humans to understand. So the computer doesn’t care if you call your variable name, if you call it sky, if you call it letter x, that’s just for humans to have a sense of what’s going on in our code.
I’m gonna create a variable called a, which will have a value of 1,000. And I want to know the result of the variable a plus 200, and I’m gonna store that in another variable called b. To assign a variable, as we’ve learned, you will use the equals sign. And if we want to do an addition, we will type in a plus the number. That will give us a result which we can easily show on a message box. As you can see, that gives us the correct result. I don’t want to have this shown each time as we move on, so I’m gonna comment this line out.
To comment code out, it means to convert a line of code into a comment so that it stays around but it’s not executed, it’s treated as text. Let’s look now into subtraction. Let’s create a new variable, and this one will have the value of, let’s say, 100 minus 50. And we can easily show that on a message box. Multiplication. Let’s call it m, and let’s say that this will be c times 10. This one here gave us 50 as a result, and 50 times 10 should give us, let’s reload this page, and you can see the 500 in there.
Division works in a similar way. All we need to do is use the forward-slash sign. Let’s divide 500 by two. Let’s comment that one out so we don’t see it each time. 250, half of the value of that number. Call this one combo, and it’ll be, say, 100 plus 50 divided by two times 10. What happens here is that multiplications and divisions executed first, so this part is the first thing that’s gonna be executed, and then the rest will be added.
Whatever you put inside the brackets gets executed first. In this case, this will be executed first. And now to finish this up, I’m gonna implement a simple calculator that will convert from Celsius degrees to Fahrenheit degrees. And let’s end this by showing it on an alert box.