boat

Javascript

interactive web design

prompt

 

Wouldn't it be great if we could ask users to input some information into our web document?

Javascript could process the information...

And then output the information to the web document.

This unit will look at how to get information from the user and process it.

We will still use the console to help us see what is happening.

We will learn how to put information onto the web document in the next unit.

User Input

Today we will study how to:

  1. get data from the user using prompt
  2. assign the data to a variable so that we can store it in our program
  3. process the data and output the result to the console

Watch this video to see how to prompt the user for information, assign to a variable, process it and then output to the console.

TASK 1

 
Create a project folder called JFocus2 inside your Javascript folder.
 
Using a text editor, save a new web document called JFocus-2.html in your project folder.
 
Inside JFocus-2.html,set up the <html>, <body> and <script> tags.
 

A vet needs a webpage to store data on animals.

The variables required in the program are:

  • var numAnimals;
  • var numCats;
  • var numDogs;
  • var numOthers;

Set up these variables in the <script> section of your webpage.

TASK 2

 

Using prompt, ask the vet to enter the number of animals. Store the data in the variable numAnimals

 

Repeat this for numCats and numDogs.

 

Make 3 sentences using console.log to make sure everything is working ok eg:

There are 12 animals.

There are 3 cats.

There are 2 dogs.

TASK 3

For the variable numOthers, create a calculation to do this. The formula is:

= numAnimals - (numCats + numDogs)

Output a sentence to the console with your result.

Hint! You will have to understand how and when to use parseInt to do this. Watch the video again, talk to your classmates or do some research if you are not sure about this. It is a bit tricky!

TALK to your classmates and share your ideas!!

SUBMISSION

Submit your solution as instructed by your tutor.


Tags

browser file tags body save h1 html h4 h2 structure refresh h3 be organised! console parseInt variable input