This comes after functions in the whirlwind introduction.
- hello world
- Variables 1
- types - strings
- operations of numbers
- operations on strings
- finding the built in methods(of numbers, strings etc.).
- Getting User Input
- for... in loops
- functional operators?
Some other programming languages give you a simple way to interact with a "user" of the program - by printing out text and allowing the user to type text in.
We could add such a thing to Node js - if you just accepted the 'magic' of it, it might make it possible to write some fun little programs. But realistically, you're going to be the only person who ever runs those programs.
Let's look how we can make an adding app for a webpage.
Here is a web page
<html>... <text input> <calculate>
As you can see, there are two text input fields where the user can enter two numbers and a button. When the button is clicked we want to calculate the sum and display the result in a box labelled "Result".
The way we do this is by using a method from the 'document' API.
let number1 = document.getElementById('number-1');
let calculateButton = document.getElementById('button')
The first one of these that we want to use is the button. We want to attach a method to the button to tell it what to do when it gets clicked.
calculateButton.onclick = calculate()
here we're telling it that when it gets clicked, it should call the calculate function.
What we want the calculate function to do is read the values from the two text inputs, add them together, and produce a result.
We can get the content of the two text boxes like so
But we need to be careful here, because these values are both strings.
Look what happens when we try to add them together.
Instead, we need to convert them to numbers before we add them together.
We can do this like so...
let numberOne = Number(inputOne.