JavaScripting in HTML -  Variables and prompts




Using JavaScript we can create web applications, dynamic content, and much more.

For this guide we are going to go through the very basics of getting information from a user, manipulating that information then returning it to the user.

The goal will be to make a GST Calculator at the end of this tutorial.

Your first JavaScript app

1.) Create an index.html using Visual Code as if you are making a webpage.

2.) Create a heading that says "My First App"

It should look like this:
To begin with we are going to write "inline JS" using HTML script tags right inside our HTML file. These look like this:
<script> </script>

3.) Add this to your HTML file:  <script>

</script>

​4.) type inbetween the script tags
alert("Hello World!");
​
5.) Save it and refresh the page

Congratulations you have made your first "app", Now try and change the message.

Important note: JavaScript commands should end with a ;        (this is called a semicolon)

JavaScript and variables

In programming we use things called "variables" to store data that we want to use. Variables are essentially containers that store different pieces of data:

Three types of data that we commonly use in programming are:

Boolean values:   True/False
Number values:  242321, 34.7, 0.82
Text values: "Hi how are you?"
Note: text values are also known as `strings`


Task: Copy this into your code, see what happens.

let outside = false;
let amount = 22.31;
let text = "Hello World";
    
alert(text);

Task 2: Add 2 more alerts to your code: one which alerts us using the amount variable, and one that alerts us using the outside variable.

To change a variable we write it again:
amount = 3.3;
text = "hi mum";

Task 3: After the 3 alerts, write code to change the data in 2 variables, then display them in more alerts.


When you want to change what is stored in a variable you should NOT include the "let" at the start of it again. If you do you will reset the variable which might have unintended consequences.

JavaScript Operators

"We can use operators to add values/variables together

TASK:
1.) Create a new HTML with script tags that contain the code below.

let a = 5 + 5
let b = `Sam is  ${a} years old`
let c = "5" + "5";
let d = 5 * a;
let e = d / a;
let f = d / b;
alert(a);

2.) Record the result of "alert(a);"  in a word document, then "a" to "b" and record this. Repeat with letters c, d, e, and f
3.) Why do you think the results came up as they did? Write your answer in your document.
​
More about operators

Let's say we have a variable "count" that is keeping a track of how many times we have done something:
let count = 1;

If we wanted to add 1 to count we would go:
count = count + 1;

This will take what was already in the count variable, add 1 to it, then store that result (2) back in count.
To simplify this code, we can use the shorthand operators below:
This means that instead of saying "count = count + 1;" we can just say
​"count += 1;" We can do the same if we are subtracting, multiplying, or dividing.

E.g.:
count = count + 1;
count += 1:
// Both of the above do exactly the same thing!

Brief: Make a GST Calculator

TASK: Show the teacher that you can do the following:
1.) Create a variable called GST
2.) Create a variable called originalAmount and assign a value to it.
3.) Use shorthand to multiply the "originalAmount" with the "GST" to find the "totalAmount"
4.) Use "alert()" to show the new amount.

Hint: GST is 15% so you will use "1.15"

Getting input from the user using the prompt() function

We can prompt the user by using the prompt function

prompt(`what is your name?`);

Try this now!!!

We can then store the name in a variable like so

let firstName = prompt(`what is your first name?`);
alert(`hi ${firstName});

Try this for yourself and see what happens.
Task: Ask for both a first name and last name and then add them together. Alert the user with a greeting such as "Hello Joe Bloggs" depending on what they write as their name.

Using the Number() function

Try This:

let add5 = prompt(`add 5 to what number?`) + 5;
alert(add5);

What happens? Why do you think the number is not 10?

A prompt is text.
A number like 5 is stored as a number.

When JavaScript adds them together it changes the number to text.

In order to use the value as a number in our code we need to tell JS that it is actually a number using the Number() function.

let add5 = Number(prompt("Add 5 to what number?")) + 5;
alert(add5);
Task: Create an app that does the following:
1.) Asks the user for a number
2.) Adds 15 to that number
3.) returns the result in an alert

Brief: Help Mario count up his coins!

Task: Mamma mia! Mario needs to collect coins to save Princess Peach, but Bowser's minions sometimes mix in letters with the numbers to trick him.

Make 2 variables (levelOne and levelTwo) that use prompt(), and use Number() to make sure that what is entered is turned into a number. Show this back in an alert().

JavaScript naming conventions and camel case

 The way that we name our variables matters in JavaScript. For example "sayhi()" and "sayHi()" are recognized as different functions because of the lower case/upper case "H"

let x = 5
let X = 10

Here"x" and "X" are entirely different variables.

In a previous example we found the GST of a certain amount, giving us the total amount. As a variable we wrote this as "totalAmount"
This naming form is called "camel case" because each new word in the variable name starts with a capital letter, making it look a little like humps like on a camel.

Examples: newPrice, sayHi, howIsItGoing

Note: When we create variables it is important to name them descriptively so that you and other people know what they are there for. For example, "x" is a very bad name for a variable because it does not tell us anything about what it is for and what we are going to do with it.

Task: Fix the Bugs

1.) Download the HTML file linked below
2.) Fix the Incorrect capitalisation
3.) Fix the spelling errors
4.) Fix the syntax errors (missing ; { or })
errorslet.zip
File Size: 0 kb
File Type: zip
Download File
Tidy code should look like this:

prompt(`what is your age`);

function sayHi {
  alert(`hi`);
}

Checkpoint: Galactic Emporium Welcome App

Build an app that greets users, asks for their first and last names, and requests the price of a space gadget. Calculate the total price with a 15% Goods and Services Tax (GST) and display it.

Work independently and show your finished app to the teacher.