The Big Picture

Begin Programming with JavaScript The Big Picture

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 use to submit input data.

After getting the data, the program goes through a process to turn the input data into useful information.

Output is to present the useful information back to the user.

The Goal

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.

image

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.

image

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.

hello
chapter-1

We’ll use this new folder as the starting point for the new program.

input

Previously, we saw 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 prompt to get data from the user.

Tools like alert and 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:");

unpack:

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.

Functions like alert and prompt require additional information to do the work. This additional information is called a parameter.

Argument is another term for this. Parameter and argument are the different sides of the same coin. In general, we can use the two terms interchangeably. (We’ll talk more about this in the Custom Function chapter)

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.

image

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.

Variable

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 returned value in the code. 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 with 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:

  1. the keyword var
  2. a name
  3. and the assignment operator

If we don’t store the return value immediately, it would be lost. So whenever we’re using a function that returns a value, we have to store it somewhere.

process

The goal of process is to convert the input data into something useful. This is the main part of a program.

image

The main part of this program is to find out how many words are in the input text.

string

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:

image

Methods are similar to functions, but a method belongs to a value. That means we don’t have to pass the value to the method as a parameter, but we might still need other parameters.

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(" ");

unpack:

The dot tells the computer that we want to use the split method on this string value.

The 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.

Just like prompt, split will return a new value. And this new value is going to be an array value.

array

An array is a value that contains a list of 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 need to know how many items are inside this array.

Fortunately, 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;

unpack:

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.

The length property is a number type value. There’s a length property 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.

output

Finally, we can use alert to display wordCount.

var userInput = prompt("Please enter text:");
var words = userInput.split(" ");
var wordCount = words.length;
// NEW ↓
alert(wordCount);

unpack:

Save the code, and test it in the browser.

If the program doesn’t work, make sure you have the same code without any typo 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.

image

We can put a string and a number together to create an outputMessage variable. This combining operation is called string concatenation.

image

...
var outputMessage = "The word count is " + wordCount;
alert(outputMessage);

And finally, output the outputMessage variable.

recap

// 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);
  1. We get the user input by using prompt.

  2. Turn the user input into an array by using the split method.

  3. Get the number of items in the array by using the length property.

  4. Combine a string and the number to get a more user-friendly output message.

  5. 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.

These are the most common basic data types in JavaScript.

Exercise

Try to search online to find out how to use the other string methods:

image

For example, a search phrase such as “JavaScript string method split” will give you plenty of useful results.

Use a table to record your findings: how many parameters each method takes, how many of these parameters are optional, and the type of the return value.

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 try it out in the console.

Open the Chrome browser and right-click anywhere in the page:

image

Choose Inspect then choose the console tab:

image

You can enter the code one line at a time in the console, and see the return value immediately.

image

The console is a playground where you can experiment with new ideas without creating a code file.