Please Buy now at Leanpub
Written and illustrated by GetContented.
Published on 2016-05-22.
Welcome back. You’ve seen some simple code, so using a silly little talky program, we’re now going to show you how to write code in files, get input from the user, join text together, do some simple math, and introduce variables, too!
The ChatterBot program’s purpose is to ask a few questions and give a reply.
It may surprise you to find out that computers can only perform four main basic tasks: input, processing, storage and output. Whatever it appears they’re doing from moment to moment, however complex it is, it will just be a combination of these four tasks. We already saw some output, ChatterBot will use the remaining three, too.
We’re going to use a text editor — an application for editing unformatted text — to make our source code. We can’t use a word processor because its saved format is incorrect. Download the one we’ll use so it’ll be ready when we need it from the website https://atom.io — just use the download button on the front page.
Take a look at the code below. It’s a statement with a function call again. This one is named prompt. As before, the semi-colon marks the end of the statement, and the parentheses show that we’re calling the function.
When you hit return, a box comes up with a field, an area to type into. Type
"jelly", and press OK. The console prints your entered string
"jelly" as its response.
"F", and even non-textual ones, like the character for new-line, or the space that appears between words.
prompt function is like
alert: we can call it with or without an argument. If you give it one, it’ll use the argument in the window to prompt for input.
Of course the main difference compared to
alert is that
prompt lets the user input some text. On pressing OK, that input becomes the string value returned. If cancel is pressed instead, a
undefined when the
alert function returned because it didn’t actually return a value at all. Don’t worry too much about this, it will become clearer when we see it more.
Try running this again a few times, pressing cancel or OK, and using different string values in the prompt dialog box.
What about when we call prompt with a string as its argument?
As expected, the string appears in the dialog box above the field. We can see prompt is one way to have the computer collect input from the user into our programs. We’ll see how we can use these responses shortly.
By now Atom should have downloaded, so install and open it.
We’ll use it to create a web page to hold our ChatterBot program because it’ll be larger than just a few lines entered into the browser.
Make a new file, and save it as chatterbot.html in a location you’ll be able to find later.
<html> <body> <script> alert("Hi"); </script> </body> </html>
<html> <body> <script> prompt("What's your name?"); </script> </body> </html>
If you save this, then use reload in the browser, it will load the new program in and run it, and so ask for your name.
When you do that and press OK, what happens to the return value from
We’d like our ChatterBot to produce a greeting alert after asking for the name of the user.
<html> <body> <script> prompt("What's your name?"); alert("Hello, "); </script> </body> </html>
When you run this, it does what we’d expect: asks for a name, and gives you a message
However, we’d really like it to actually put the entered name into the greeting. Let’s put a dummy name in first, then change it out for the actual one. We could just put it into the existing string argument to the alert, but let’s do something else instead:
<html> <body> <script> prompt("What's your name?"); alert("Hello, " + "Penelope"); </script> </body> </html>
We used an operator called
+ here to show how to join our dummy-name
"Penelope" to the greeting. Operators are symbols used with values to form expressions that produce other values. Try this program out.
+ is an expression. Function calls are expressions, too. Operators can be used to help make expressions. All expressions can be used as statements (we call them expression statements when they are), and can also be part of a statement, but not all statements are expressions. This will become clearer when you see more. Don’t worry about it.
So we now know that the
+ operator used with two strings joins them into one. This joining together operation is called concatenation, a word originating from Latin that means “chain on to”.
This doesn’t do what we want yet, though. We want the actual return value from the call to
prompt to be concatenated to the greeting, not just
"Penelope" every time. Let’s see an adjusted program that does this in a simple way.
<html> <body> <script> alert("Hello, " + prompt("What's your name?")); </script> </body> </html>
Ok this is kind of crazy. We’ve embedded the call to
prompt into the call to
alert! We know
prompt returns its field contents as a string, so we just inserted the whole call to
prompt into the
alert function’s argument concatenating it to the end of
"Hello, ". When you run this, you’ll see it does what we want.
alert, that means
prompt is evaluated to get its return value so we can concatenate that to
"Hello, " and then feed that whole string into
prompt happens first, and then
alert displays its window with the greeting string!
This does work, but it’s not very elegant. We programmers tend to prefer when code is clear, and this isn’t very clear.
It would be nicer if we had some kind of temporary named storage location we could put the result of
prompt into, then pass that to the call to
alert so it would be clearer what our intention is, and what sequence things happen in.
Let’s take a step backward and see another program that says hello to someone named Stella, but uses a variable.
<html> <body> <script> var name = "Stella"; alert("Hello, " + name); </script> </body> </html>
Ok the first statement declares and assigns a variable named
name. Declaration is when we use the
var keyword to indicate that we’re going to use the word
name as a variable in our program. Assignment is when you use the
= operator to assign a value to a variable. We’re doing both at once, putting the value
name. Here, we’re using the name
This means later on when we refer to the identifier
On the next line, we have our old friend the
alert function, in a statement that uses the value from the variable, the string concatenation operator
+, and the string
"Hello, " to produce a greeting alert.
Obviously again, we’d prefer if the variable’s contents are the result of prompting the user for their name rather than just
<html> <body> <script> var name = prompt("What's your name?"); alert("Hello, " + name); </script> </body> </html>
Finally, we’ll see a program that also asks for your age and does some simple math on it.
<html> <body> <script> var name = prompt("What's your name?"), age = prompt("What's your age?"); alert("Hello, " + name + ". Half of your age is " + age / 2 + ". Triple your age is " + age * 3); </script> </body> </html>
Notice that we have one single variable assignment statement that is declaring and defining two variables as the result of prompting the user? We can split a statement across lines like this if we need to. Notice the use of the comma to separate out definitions. We could have used two separate statements. Either is fine.
Next, we’ve split the statements with the
alert on it across three lines, and we’re making extensive use of the string concatenation operator to join some response string together into the one alert, and using some math operators on the age value to tell the user some things about their age. We use the
/ operator to divide one number by another, and the
* operator to multiply two numbers.
Now we’ll see a program that does exactly the same thing, but goes about it slightly differently. Use this to compare to the previous one.
<html> <body> <script> var name, age, alert_value; name = prompt("What's your name?"); age = prompt("What's your age?"); alert_value = "Hello, " + name + ". " + "Half of your age is " + age / 2 ". " + "Triple your age is " + age * 3); alert(alert_value); </script> </body> </html>
We notice that we’re declaring three variables by using the
alert this time instead of putting the expression directly into
alert as an argument.
Your homework is to try adjusting the strings of either of the final programs and seeing what effect this has on the program. Don’t try to do anything tricky, though. We’ll see more things in good time. We don’t want you to get confused or frustrated. Make sure you try inputting each of the programs in this chapter and try them all out at least once.
If you’ve enjoyed reading this, please consider purchasing a copy at Leanpub today
Please follow us, and check out our videos Follow @HappyLearnTutes