- 7 SECTION 2- Using Variables and Storing Information
What you will be learning throughout this course.
This is what we call syntax.
Syntax – the arrangement of words and phrases to create well-formed sentences in a language.
These concepts can then be applied to other programming languages online. This book is an excellent solution to anyone just getting started with learning web development.
By the end of this post, I predict I can have you talking like a seasoned programmer! We will be covering all avenues of programming, for example you now know what syntax means.
With this course, you will also learn the best practices and proven ways to make your programs perform the best that they can.
All right, grab yourself some java, no pun intended, and let’s get started.
First of all, we need to make a new folder on our desktop. I advise you to make one so you will have easy access to all your files when you need them.
What we are going to do is add a bit of syntax for HTML just so that everything works fine. Copy the code you see in the image below:
Now we have the overall syntax of our HTML code in here but don’t worry about it too much. I am going to cover this later on in this guide. I just want to get you set up and programming as soon as possible.
Again, do not stress if this is confusing. We will be covering things like this in more detail later on.
In these two tags, we are going to write our first command and this command is going to be our alert command. Type out the following command inside the two script tags you created earlier.
What this command does is send a notification box to the user and alerts them of whatever message we type in the quotes. If you click within the brackets and add a message, this message will pop up on the screen in a notification box. We have our command entered here and what we need to do now is make sure there are semi columns (;) at the end of our command.
Now to get this program to actually work, we are going to need to save it. Now head over to file and save it as whatever name you want but make sure you use the file extension .HTML. What this does is tell your computer to open up the file as an HTML file or web browser document.
Again, if you go back to the folder now you are going to see a new document and this is going to be a web browser document of whatever you saved your file as. If you have Firefox or Google Chrome or whatever browser you are using for that matter, your newly created file will be opened up with that browser.
Let’s double click on the file we just created and open it up. We can see here there is a message being displayed as a notification box. If you hit ok the program is now finished running.
Let’s open our document back up. In this document, we are going to write another command; this command is going to be slightly different.
So let’s go over this really quickly: this is called the document.write command.
What this command does is write text onto the page that the user is viewing. Again in the brackets here, we can enter some quotations and we want ensure there is a semi column at the end of this command. Don’t worry about what the dot means, follow me for now and we will cover that later on. If we save this file again and then open it, we can see that our first statement that we entered as a notification box pops up.
If we hit OK, the next statement runs and whatever we wrote in the document.write command is inserted onto the page.
This can be a little bit confusing and a little bit sloppy because we are using notepad. However, as you go through this tutorial you are going to learn how to use different coding editors. To close this lesson up what I am going to do now is show you an actual code editor that I use. The one I installed is called Notepad++.
If we go back to our web browser document we created earlier and right click, we now have an option to open it with our Notepad++.
You must have this coding editor installed in able for this to happen.
We can also save here directly, just hit ctrl+s and it is good to go. If we minimize Notepad++ and open up our browser again we can see that any changes are instantly applied. This will save you a lot of time as you edit your code. Try changing around the messages you created earlier and re-run the program.
Did your code display correctly?
What you need to do now is go ahead and download Notepad++. It is completely free to download. I am going to give you a link to notepad++ that I use but you can really use any coding editor that you want. You can spend a little bit of time and look around for some options. There are paid and free solutions out there but just grab anything you want for now. I recommend if you want to follow along with me then try out Notepad++ but it doesn’t really matter that much.
It takes a lot of hard work to build anything that I mentioned here but this book will teach you the basics and provide you with a strong foundation that will ensure you get off to a good start, so don’t sweat it.
This is because our <script> tag comes before anything else.
Let’s grab our document.write command and put it in our new JS file and give it a save.
<script src=”js.js”> </script>
And if we open our file in our web browser this is what we are going to see:
If you insert your js source file in the <head> tag then it will load before your HTML content, but place it in the <footer> tag and it will load after.
In your code here, we can see that I purposely made an error because I want to show you how we can actually use the console to debug our programs. Lastly, I have a console.log command here. This is going to send this string directly to the console.
Now a visitor or any users will not see this console.log string. Instead, it’s there for developers to let us know that our program has completed or we can also use it to store variables or just use messages to help make sure your program has finished running correctly.
Let’s save this and now let’s open up our program.
Let’s see how we can fix it. If we open up our browser here, our code is actually still working but we did forget to add our semicolon at the end of our document.write command. I am going to use Google Chrome and in the top right I am going to bring down the drop down menu, navigate to Developer, and then click on Debugger, and then Console. Then, our developer console will show at the bottom of the webpage.
This is what the console looks like in Chrome:
If you click the error, a new window will pop up and you can see exactly where the error is. It’s a great way to pinpoint exactly where errors are in the program.
You will notice that the string we inserted into our console.log command is being shown as well in the console.
So even despite some errors in our code, our program actually still ran correctly.
The console is used to deal with debugging programs, finding common syntax errors and that type of stuff. There are a lot of features we can use with the console as well. For example we can also type in commands into the console directly. If you type in the following code into the console and then run the code, you will see that the new code will overwrite what we had previously on the page:
document.write(“This will overwrite our old code”);
I hope you are enjoying this guide so far. Now I have a challenge for you to do.
Here is a screenshot of the code I need you to fix:
If you can do that then you pass the test.
Give it a go and let me know how you do! For reference on the next page you will find the correct version of the code:
Solution to the Console Challenge:
SECTION 2- Using Variables and Storing Information
What is a variable?
Enough about that, let’s get to the point. As we play the game, we can see things such as our health, score, lives and damage.
Our health for example is a variable that changes depending on what happens in the game, our score or lives are another example of a variable.
The main point I am trying to make is that a variable is something that represents a certain value in a program and it’s always constantly changing.
We can see that our first keyword called var is short for variable. The next word is going to be the name of your variable, which can be whatever you like.
Next we have an equal sign and a number.
What this statement is saying is our variable lives are equal to three.
When we are creating variables and giving them names we are assigning a value to that variable.
Now let’s do a more hands on approach and let’s create another example of a variable we might use in a program.
Let’s use a variable and add it to our document.write command.
Now that we have a document.write command, let’s add a variable to this program.
Here is what your code should look like.
What this is basically saying is that Example equals “This is a variable “.
If we ever insert the keyword Example, then the text “This is a variable” will be outputted to the file. Basically a variable is just representing something and in this case, Example is representing the string that we declared earlier.
If we save this file and then run the program we can see that the value of Example will be outputted to the page.
The cool thing about variables is that we can change them as much as we like in our programs. Let’s go back and change our variable to do something else.
Since we already declared our variable example we can omit the var keyword.
What we are doing here is declaring our Example variable as a certain string, and then writing it to the document. After that gets written, we are giving it a different value then writing that new value to the document. The first section of code is going to run first then the part on the bottom is going to run after.
Let’s save this and see what happens when you run the program.
There we go! We can see that our variable changes throughout our program and that it has two different values that we write it to the document.
In the next section, we are going to be talking more about syntax and naming your variables. There are a few rules that we need to follow.
For the video version of this lesson click here.
How to assign names to your variables.
For example, you can’t go around naming your variables whatever you like: there are some keywords that we cannot use. For example, Var is one of those keywords. We can’t name a variable var. This is one example among many that we cannot use.
You should check out the external link below as I have included a reference to a list of all the different keywords that would give you a syntax error if you try to use them as a variable name.
Link To Sheet
If you ever get a syntax error when you are creating a variable, and can’t figure out what the problem is, then this might be the likely cause. The next item worth mentioning is that variable is not allowed to start with a number but they can end with a number. On the other hand, all variables must start with a letter.
Here’s an example of what I mean.
1time is an example of a wrong variable. time1 is a correct name for a variable. Variables can also only contain the following characters; letters, numbers, the dollar sign value and Underscores.
To sum this section up, I want to mention that it is important that you make your variable names clear informative and easy to understand.
For example, player one is a better choice for a variable instead of P1. Player one clearly tells us what a variable is about. P1 is kind of confusing if somebody else was to use your code or if it’s been a long time since you have used this piece of code and you just forgot what P1 was referencing to.
Now that you have done some solid work with variables it’s time to move onto strings.
For the video version on this lesson click here.
An introduction to strings and numbers.
Now that you have a good understanding of what variables are, let’s talk a little bit about strings and numbers. When we enter information into a variable we are adding a value to that variable but there are two types of values we can add to a variable. These are strings and numbers; let’s go over numbers first. Numbers are used for simple math equations and calculations.
We will be working with numbers a lot in this course but for now let’s focus on strings.
Strings are used for storing text and words.
Here’s an example of a string being used in a command.
The string in this example is the part of the text that is in the quotations. Here’s another example of a string.
Strings can either be single quoted or double quoted.
So now that you know what numbers and strings are, we can continue on.
How to capture input from a Visitor.
You have learned quite a few commands so far in this guide. You should be slowly getting used to using them by now.
In today’s lesson you are going to learn how to capture a user’s input by using the prompt command.
Let’s look at a live example of a simple program that might use this command.
Can you take a quick guess and figure out what this program might do? First the prompt command will ask the user “what is your age”? Then whatever the user types in will be stored in our variable VisitorsAge. We are then going to write the variable VisitorsAge to the webpage.
Basically whatever the user types in the prompt will be written to the page with this program.
Try this program out and see if you can get it to work correctly, watch this video if you need help with getting the program to work.
Combining strings together.
Now that you know how to collect information from a visitor using the prompt command, we can start to build some programs that have a little bit of interactivity involved with them.
Now you are going to be learning how to combine strings together to create some messages from our visitor’s inputs using the example from our last program. We are going to take our VisitorsAge and add that input to another message.
Let’s start by creating a variable for the prompt command. I am also going to be adding a variable for the users name as well. We are going to have two variables in this program, one for visitor’s age and one for their name.
Now we are going to output this information to the document by using the document.write command. Take a look at the code that we use to combine these to strings together and I will explain how it all works after.
What we are doing is prompting our visitor for their age. We will then prompt them for their name. We are then writing a string, inserting our two variables, and then combining it all together into one string. We combine these strings together with the + symbol just like how you add numbers in math.
Pay special attention to the syntax of this piece of code so that you do not get any errors when you type out your code.
Try this program out yourself and see if you can get it working correctly.
Working with strings in further details.
First let’s look at the Mozilla developer Network.
For example, let’s use the MDN to learn a new command we can use to work with our strings. Let’s take a look at the link command on this page.
We can see all the information about this command as well as examples we can use to try it out ourselves.
We have a variable for hotText that stores the string ‘MDN’. Next, we have a variable for URL that stores a link to the Mozilla Developer Network homepage.
Finally, we have a document.write that will write our string plus our link to the MDN homepage. Our variable hotText is the anchor text for this link. When people click on the anchor text they are directed to the MDN.
This might be a little bit complicated especially when you are using commands you have never seen before. Don’t worry: practice will make you better.
Once again, like usual, try to build this on your own and if you need further help check out the video for this lesson here.
In the next lesson, you are going to use the information you have learned so far to create a web page that welcomes visitors and greets them.
The variable coding challenge.
I hope you are ready to do some programming because in this section what I need you to do is build me a program. What we are going to do is pretend as if I am a client and you are working for me. I need a program and I need you to give it the following features.
Welcome the user to the webpage with an alert command.
Ask the visitor for their name and store it in a variable.
Ask the visitor for their favourite color and store it in a variable.
Use a document.write command to output a string that tells the user what their name and favourite color is.
Create a console.log command that lets us know that our program has
We are going to do this step by step and like usual you can follow along by clicking here, but I want you to try and do it on your own first.
If you have any problems you can watch me in the next video where I will come up with my own solution to the program.
On the next page, you will find how the final piece of code will look for this challenge. Yours does not have to be the same as mine as long as your program does what I asked earlier.
Solution to the Variable Coding Challenge
What Are Numbers
So far we have talked in depth about both strings and variables.
Our score in a video game, adding the total of purchases, or seeing how much money you have are all examples of how numbers are used in programing. First, let’s talk a little bit about integers before we can move on.
A whole number is what we call an integer; here are some examples of what integers will look like…
Seventy- eight (78)
Three Hundred (300)
These are all examples of whole numbers or what we call in programming integers, next up are floating point numbers.
Floating-point numbers are the same as integers except that they have a decimal place in them,
These are all examples of floating point numbers.
Lastly we have scientific notation.
Later on in this course you will learn how to convert a string to a number but for now I want you to focus on the difference between the two and how we assign them to variables.
Strings we use quotations, numbers we just type the number in and leave out the quotations.
That’s the main thing and that’s what’s important for now. Once that makes sense to you we can move on to the next section as we are going to be working more with numbers.
Variables and Strings:
Variables and Numbers:
Check out the video version of this lesson here.
If we wanted to subtract 3 from 9 we would simply use the minus sign.
If we wanted to divide two numbers we would use the slash sign shown like this, to multiply two numbers we would use the asterix symbol.
How do you write that in code? Before we can do that we need to talk a little bit more about doing calculations with variables.
Let’s say, for example, we were creating a game where a plumber had to save the princess from a giant turtle in his castle.
Every time a player would grab a mushroom, they would gain one life.
We could write something like this… variable lives equals three. Lives equal lives plus one.
What this line of code is saying is our variable lives are first equal to three. We would then insert the second part of the code whenever a player collected a mushroom.
It’s basically saying Lives equals the current value of lives then add +1 to that number. The final number will be stored back in the variable of Lives. At the end of this program Lives would be equal to 4. If we ran it again Lives would be 5.
You can use either version you like just pick the one that makes sense to you. We’re going to stick with the basic version for now just so you understand what it means.
Now let’s start building our program we talked about earlier.
The first thing that we’re going to need to do is figure out what the visitor’s age is. We’re going to have to prompt the user about their age. Let’s make a variable called visitors age and then write the prompt command along the lines of asking them for their age.
Once we have that all figured out, we could then create another variable. We’re going to call this year’s alive. Basically, what this variable is going to do is take that string (VisitorsAge) that they entered in earlier and convert it to a number and parseInt does exactly that.
We’re going to take our visitor’s age here and insert it in the bracket for parseInt. Basically, what this is doing is taking a visitors age, taking the string from it and converting that string to a number and then saving in the variable YearsAlive.
So now that our string is saved as a number we can actually do some multiplication with it. The next line of code will need to take the visitors YearsAlive and multiply it by how many days there are in the year, which is 365.
Now we’re going to do our math. After that, we take the final answer and combine it with a string and write it to our document. Here is what the final code will look like.
If you need help with this lesson check out the video by clicking here.
Working with the Math object
In case you have forgotten, strings and numbers are two different types of objects and these objects have properties. For example, a string can have a length property, which outputs how many characters are in the string.
In this lesson, however, we are going to focus on the math object. Let’s talk about that for a second. With the math object we can do all kinds of advanced mathematical calculation. If we go to the MDN we can see that there is a math property for the math object that lets us calculate the square root of a number or get the number of pie, which we can use to calculate the area of a circle. We can also see all the methods listed on the site here as well.
The main method that we are going to be looking at is the math.random method. Let’s type this and see what happens; I will give this random number a variable as well.
Okay, so if I run the program we can see a random floating-point number between zero and up to but not including one is displayed. If you hit F5 or refresh the page you will notice that every time you are given a different number but never an integer (1). What if we wanted a whole number have let’s say between one and fifty? Well what we could do is we could multiply our result by fifty.
We can see that we are getting a little bit closer to what we want; the problem is we still don’t have an integer yet.
Math.floor will round the number to the lowest integer and Math.ceiling will round the number to the highest. If we wanted to make sure that we hit a number between one and fifty, we would use the math.floor command just in case, so we don’t get a fifty one by accident.
If we look at this statement, the following happens:
First, a random number between zero and up to but not including one is generated. Then, fifty multiplies that random number and the decimal is rounded down to a whole number.
The code might be complicated but the main thing that is important is that you understand what is going on here.
We also add the plus one at the end in case we do get a possible fifty. Since we are rounding down we can only get a max of forty-nine, that’s why we have the plus one there just in case.
We now have a piece of code that will generate a random number for us. Using the knowledge in this lesson let’s move onto to the numbers challenge where you will create a random number generating program.
The numbers challenge
You have been working a lot with numbers and doing a lot of math in this section of the course, don’t worry we are almost done! We just have a challenge left to do!
Create a program that generates a random number between one and what the user inputs. For example, if the user inputs the number twenty your program must then generate a number between one and twenty. Next, write it to the document so the user can see the random number generated like usual.
See if you are able to complete this project on your own. If you get stuck or need help come join me in this video where I will walk you through this solution step by step.
I wish you luck and let me know how you do in this challenge; consult the next page where I will show you the solution to the challenge.
To explain this program in English, prompt the user for a number, store their answer in the variable UserNumber. Take the string from UserNumber and convert it to a number. Generate a random number, and multiple that numbers by UserNumber and store it in a new variable called RNumber. Create an alert box with a string and combine the value of RNumber to the end of the string.
End of program.
If enjoyed this tutorial and would like the full video course then grab this $10 coupon and enroll on Udemy by clicking here!