The easiest and most instantly gratifying way to produce output is to use popup boxes.
JavaScript has three kinds of popup boxes:
alert: Just tell the user something.
confirm: Ask the user an OK/Cancel question.
prompt: Ask the user to enter some text information.
We will learn how to tell which button the user pressed and how to get the text the user entered a little later.
Each instruction above is a statement—the computer language equivalent of a sentence. In JavaScript statements should have a semicolon (;) at the end.
Output to the console
The console is a text-only area that is normally hidden from the user.
Writing output to the console is usually used only for debugging (fixing problems in the program).
In Firefox or Chrome, you can open the console by right (or option) clicking on a page, then selecting Inspect Element or Inspect, then clicking the Console button or tab.
In Firefox, click on the funnel icon next to Filter Output and make sure CSS, XHR, and Requests are not selceted.
You can send text to the console using the console.log function:
If you don’t see anything when you click “Run”, it’s probably because you didn’t open your browser’s console panel.
Output to an HTML5 page
JavaScript is very often used to write output to an HTML page.
We will not cover how to do this because it’s not useful for our purposes.
Escape sequences
What if you wanted to output something in an alert with more than one line?
To do this, you need to use a special sequence of characters (an escape sequence) that tells JavaScript that you want to start a new line:
JavaScript has many escape sequences including:
\n start a new line
\t horizontal tab
\\ backwards slash
\' single quote
\" double quote
You will see that the escape sequences for single and double quote are pretty useful when we talk more about character strings.
Comments
While comments are not really related to output, we think this is a good place to introduce them.
A comment is essentially a chunk of text in your program that is visible to you or a reader but is not noticed by the JavaScript interpreter.
There are two ways to indicate something is a comment in JavaScript:
single-line comment—everything to the end of the line is a comment.
multi-line comment—everything between /* and */ is a comment. It can span multiple lines. (Sometimes called “C-style” comments.)
Comments are often used to add information about who wrote the code and when it was written as well as to describe what the code is doing if it’s not obvious.
Input
Input from popup boxes
To use the input provided by the user in confirm and prompt popup boxes, you need to store the result of the popup in a variable (discussed more completely later).
In both of the following examples, we create a variable named resp to store the input provided by the user and then show that in a new popup.
confirm:
prompt:
Input from an HTML page
JavaScript can use the data entered into forms and other elements on an HTML page as input.
We will not cover how to do this because it’s not useful for our purposes.
Storage
Variables
A variable is a place with a name in computer memory where you can store values.
In the example below, we create (or declare) a variable named x, then we store the character string 'OMG!' in x and output the value stored in x to the user.
The special term var tells JavaScript to make variables with the name(s) that follow.
Notice how when we wrote the variable name in the alerts, it produced the value stored in the variable, just like you might expect from a mathematical function.
The value stored in a variable can change. That’s why it’s called a variable!
Variable names
In the preceding example, we gave our variable a very simple name, x.
Variable names in JavaScript are usually longer than a single character.
You should try to use variable names that help describe what is stored in the variable. This makes reading a program easier.
You can create as many variables as you need in one go. Separate the variable names with commas.
You can initialize the value of a variable when you declare (create) it.
Whitespace
The topic of whitespace isn’t directly related to variables, but since we are talking about the details of using names, it’s a decent time to bring it up.
Spaces, line breaks, and horizontal tabs are catagorized as whitespace in JavaScript.
The rules of whitespace in JavaScript say that:
There are places where you must use whitespace:
There are places where you may use whitespace:
And there are places where you cannot use any whitespace (e.g., within a name):
Where you may or must use whitespace, you can use as much and of any kind you want.
Data types
In the preceding example, we stored a string of characters in a variable.
Character strings are but one type of data that can be stored in variables.
You can store the following types of values in variables:
strings
numbers
Boolean values
The special values undefined and null.
References to more complex functions, arrays, and objects, which we will talk about later.
Strings
A string (or String or character string) in JavaScript is a series of characters taken as a unit.
In the following example, the variable myString stores a string.
The stuff on the right hand side of the equals sign is a string literal—a string that is not a variable.
String literals are indicated by single or double quotes.
If you need to use a single quote in a string literal, you can wrap it in double quotes or vice-versa.
You can put anything you can type in a string. You may have to use escape sequences for some characters though.
Numbers
You can store both integers and floating point numbers, positive and negative in a JavaScript variable.
Note that var luckyNumber = 32; and var luckyNumber = '32'; are not the same thing. The first is an number, the second is a string.
There are several ways to write numerical literals:
Booleans
A Boolean type can have one of two values: true or false.
Note that var javascriptRocks = true; and var javascriptRocks = 'true'; are not the same thing. The first is a Boolean, the second is a string.
Special values
A variable that has been declared but not set to anything has a value undefined.
You can set a variable to the special value null if you want it to have “no value”.
Dynamic typing
JavaScript variables are dynamically typed. This means that they will store whatever type of data you want to store in them on the fly:
Storage to files and databases
JavaScript can also store data into files and databases.
We will not cover this because it’s not useful for our purposes.