Learning Javascript Task 1-3

Last week we focused on learning some basic elements of Javascript. We learnt about variables and their types, and then went on to take a look at control statements such as if and else if. In the following three tasks you will be able to use what we have learnt so far. Just like last time we will be using JSFiddle to run our code.

Task 1 - Variables, Strings, Numbers and If statements

Your first task is to create a program that contains two variables, a name and age. The program will then go on to check whether the person is older than 18, if they are it will print out some text using their name, if not it will print out a different line of text which also includes their name.

Solution:


// Remember that to create a variable all you have to do is type "var" along with the name of the variable 

// For example: 
// var someName = 10

// An important thing to remember here is that strings always begin and end with a quote!
// The following would not work!
// var name = Rafi Khan

var name = "Rafi Khan"	// Your name should be here

// Remember that numbers on the other hand do not have any quotes
var age = 17  // you age should be here

// this checks if age is less than "<" 18
if (age < 18) {
	// Remember that we use console.log to print out text
    // Notice that we use name which is the variable we declared earlier
    // instead of typing my whole name!
	console.log(name + " is not old enough to vote!")
}

else {
	console.log(name + " is a voting citizen!")
}

Task 2 - User input

This time modify your program from the previous task a little bit so that we can take user input. There is a function called prompt(). We won’t worry too much about what functions are for now, but take this example.

var loveSchool = prompt("Do you like school"?)

In the above example we create a variable loveSchool and ask a question to the user “Do you like school?”. The result is that when our program is run a pop up asks the user if they like school. It then records their answer in the variable we gave it.

Your task is to change your program from Task 1 to use a name from prompt("What is your name?". This means that in the if / else statement it should no longer print your name but whatever name the user gives it!

Solution:



var name = prompt("What is your name?")	// THIS IS THE LINE THAT CHANGED


var age = 17  // you age should be here

// this checks if age is less than "<" 18
if (age < 18) {
	console.log(name + " is not old enough to vote!")
}

else {
	console.log(name + " is a voting citizen!")
}

Task 3 - Numbers are not Strings!

In the previous task we used prompt() to get a name from the user, but what about also getting an age? If we do this then that means our program is completely flexible and will work for everyone, not just me or you! Okay but this is a bit tricky. Remember when we learnt about variables and how there are numbers and string types? This is important now. Let’s remember what the difference is.

var string = "This is a string because it is surrounded by quotes"

// This is not a string because it is not surrounded by quotes
var number = 18

// Is this a string or a number?
var notANumber = "18"
// You're right! It's a string because it is surrounded by a string

Hint: A good trick to remember when thinking about types is that they are often different colors when you type them in!

The problem with numbers and strings is that the computer can do different things with them. For example, we can use < as we did before to compare our age to 18. The computer can only do this if it knows that age is a Number if it is a String then we have a problem because imagine figuring out if your name was greater than 18… That would make no sense! Okay so why do we care about all of this?

We got our name last time from the user by using prompt("What is your name?"). Obviously we can just do this, right?

var age = prompt("What is your age?")

Wrong! we can’t do that because then we get our age as a String. And we cant check if a String is greater than 18, duh! So instead we need to figure out how to get a number from this string… Let me introduce a new function called parseInt(string). This is another function, just think about console.log(). The idea is that if you put a string inside it where it says “string” it will take that string which has a number inside it and just give you the number.

For example:

var notANumber = "18" // this is a string
var number = parseInt(notANumber) // this is a number

Your task is to modify your program from Task 3 to also ask for the user’s age using what you have learnt! Good luck and feel free to ask questions at any time.

Solution:


var name = prompt("What is your name?")	// Gets the name

// Remember that numbers on the other hand do not have any quotes
var ageAsString = prompt("What is your age?") // This is a string
var age = parseInt(ageAsString) // This is a number now!

// this checks if age is less than "<" 18
// We can do this because we converted ageAsString to a number
// which we saved in the variable age
if (age < 18) {
	console.log(name + " is not old enough to vote!")
}

else {
	console.log(name + " is a voting citizen!")
}