We will start with the big picture of programming, namely, the structure of a program, the flow of data in a program and how different data types work together.
The basic structure of a computer program is:
Input means to get input data from the user, such as presenting a button or a form that the user can click or submit to provide information to the program.
After getting the data, the program goes through a process to turn the input data into useful information.
Output is for presenting the useful information back to the user.
We’re going to create a small program that will illustrate the Input-Process-Output structure and other fundamental programming concepts.
The program will show a popup box that asks the user to enter some text.
When the user submits the text, it will show the number of words in the text. This is basically a very simple word count program.
Make a copy of the hello folder (from the previous chapter) with all the files inside; Rename the folder to chapter-1; Try not to use space for folder and file names.
We’ll use this new folder as the starting point for the new program.
Previously, we’ve seen how to use
alert to display a message to the user, and that will be used for output later. For input, we’re going to use another tool called
prompt to get data from the user.
prompt are called functions. A function is like a command for telling the computer what to do.
prompt will show a popup box in the browser, and the user will be able to type something and submit it.
prompt("Please enter text:");
To use a function, we need a pair of parentheses right after the function name. That’s how the computer recognizes that we’re trying to use a function.
prompt require additional information to do the work. This additional information is called parameter.
↓ Argument is another term for this. Parameter and argument are the different sides of the same coin. In most cases, we can use the two terms interchangeably.
Most functions need parameters. Some functions require one, some require multiple.
The parameter for
prompt will be used as the text message in the popup box.
We need the quotation marks around the text that we want to show the user. The quotation marks won’t appear in the popup, they are just markers to tell the computer where a piece of text starts and ends.
When the user submits the input text,
prompt will give us that input text as a return value. Most functions return a value, but we don’t actually see the value getting returned. It’s invisible.
We have to use a variable to capture the return value so it doesn’t disappear. A variable is like a storage box for storing a value.
↓ We can create a variable using the keyword
var and a name of our choosing.
var userInput = prompt("Please enter text:");
The equal sign is called an assignment operator; It captures the return value from
prompt and puts it in the variable.
A keyword is a special word that has special meaning in the code. In this case,
var is for creating a variable. We’ll see a few more keywords in later chapters.
We can use whatever name we like for a variable. However, there are some rules and restrictions. Here are some of the rules:
- can’t contain space
- can’t begin with a number
- can’t be the same as a keyword
Since we can’t have space in a variable name, we have put two words together like userInput, This is called the camel case, because the cap letter looks like a camel’s hump.
Most importantly, try to use names that are sensible and concise. A name is not for the computer. It’s for you or anyone reading your code.
In summary, we need three things to create a variable:
- the keyword
- a name
- and the assignment operator
The return value from a function would be lost if not stored immediately. So whenever we’re using a function that returns a value, we have to also create a variable.
The goal of
process is to convert the input data into something useful. This is the main part of a program.
The main part of this program is to find out how many words are in the input text.
Values are at the heart of process, so let’s take a look at what exactly a value is.
The text value we provide to
prompt and the text value we get back from
prompt are the same kind of values. They are called string values.
I’m going to use the term string to refer to text from now on. String means a string of characters.
Values can perform useful operations. There are different types of values; Each type can perform different operations. These operations are called methods.
A string value comes with a long list of methods. Here are some of the common string methods:
Methods are similar to functions, but methods are used in the context of a value. That means we don’t have to pass the value to the method as a parameter, although we might still need other parameters for the method.
For this program, we will use the
split method. It’s for breaking up a string value into a list of smaller string values.
var userInput = prompt("Please enter text:"); // NEW ↓ userInput.split(" ");
The dot tells the computer that we want to use a method in the context of a particular value.
split method takes two optional parameters, but we just need the first one for our program. The purpose of the first parameter is for deciding how exactly to split the string. In this case, we want to split by space, so we provide a string value with a space.
split will return a new value. And this new value is going to be an array value.
An array value is a list that contains other values. In this case, the
split method returns an array of multiple string values.
Since a new value will be returned from the method, we need to store it using a new variable. ↓
var userInput = prompt("Please enter text:"); // CHANGE ↓ var words = userInput.split(" ");
Our goal is to get the number of words.
Right now, we have an array value that contains a list of words, and we just need to know how many items are inside this array.
Conveniently, an array value has a
length property; It can give us the number of items in the array.
↓ We can store that number in a new variable.
var userInput = prompt("Please enter text:"); var words = userInput.split(" "); // NEW ↓ var wordCount = words.length;
A property is a piece of information regarding a value. It’s like a person’s weight or height. Method and property are the two main ways to use a value.
lengthproperty is a number type value. There’s a
lengthproperty for string value as well, but that will give us only the number of characters in the string. That’s why we have to convert the string into an array in order to get the number of words.
Finally we can use
alert to display
var userInput = prompt("Please enter text:"); var words = userInput.split(" "); var wordCount = words.length; // NEW ↓ alert(wordCount);
Save the code, and test it out in the browser.
If the program doesn’t work, make sure you have the same code without typos and save the code before running it. These are the two most common issues you might encounter.
As a final touch, we should output a more user-friendly message.
We can put a string and a number together to create an
outputMessage variable. This combining operation is called string concatenation.
... var outputMessage = "The word count is " + wordCount; alert(outputMessage);
And finally output the
// asking for user input var userInput = prompt("Please enter text:"); // process var words = userInput.split(" "); var wordCount = words.length; // display the output var outputMessage = "The word count is " + wordCount; alert(outputMessage);
We get the user input by using
Turn the user input into an array by using the
Get the number of items in the array by using the
Combine a string and the number to get a more user friendly output message.
Finally, display the output message to the user.
↓ The data flows in a zigzag pattern, which is a common pattern you will find in most computer programs.
↓ Everything on the right is where the real work is done. and the left is for naming the values created from the right.
↑ Each piece of code on the right is called an expression. An expression is something that will become a value when the program runs.
We’ve seen three types of values in this chapter: string, array and number. There’s another type called boolean we’ll use in a future chapter. A boolean value represents either true or false.
Try to search online to find out what the other string methods do:
Use a table to record your findings: how many parameters each method takes, how many of these parameters are optional, and which type the return value is.
The type of the return value should be one of the four basic types.
This exercise is not really about string methods. Rather, it’s more about using the internet to find programming information that you need. Online searching is arguably the most important skill for a programmer.
Once you have some idea about a method, you can test it out in the console.
Open the Chrome browser and right click anywhere in the page:
Choose Inspect then choose the console tab:
You can enter the code one line at a time in the console, and see the return value immediately.
The console is a playground where you can experiment with new ideas without creating a code file.