Output
One of the easiest things to do in JavaScript is to output information to the screen. While there are many ways to send information to your web page viewer, we will concentrate on two: document.write and window.alert. These two methods produce very different outputs. document.write is used to output information into the body of a web page, while window.alert produces a pop-up window with a message.
The code written in a document.write method is the equivalent to putting text inside the body tag of your HTML markup. The information will appear wherever it is written in the source code. That being said, we can also use HTML markup inside of a document.write to modify the appearance of the text. Once the page has finished rendering, no more document.write commands can be called. Examples:
<![CDATA[document.write("Welcome to our web page. Enjoy your stay!");
document.write("<em>This is in italics.</em>");
document.write("This is written on <br/> two different lines.");]]>
A window.alert method produces a popup window with information. The window.alert method will be called in order as the page is being rendered, often halting rendering until the user dismisses the popup. Unlike document.write, window.alert can be called to display information after a page has been rendered. Also, window.alert does not respond to HTML tags. Examples:
<![CDATA[window.alert("This site best viewed in Firefox.");
window.alert("This is written on \n two different lines."); //notice the use of \n - an escape sequence that creates a new line
window.alert("This output \t is separated by a tab."); //document.write and HTML typically ignore whitespace like the \t escape sequence. However, it works inside the window.alert method]]>
In both cases, different pieces of output can be put together using the '+' command, often known as
concatenation. Examples:
<![CDATA[document.write("My favorite number is "+ 17);
window.alert("Hello "+"Jim"+" welcome to the program.");]]>
However, you must be cautious of overusing the '+' symbol as errors can occur:
<![CDATA[window.alert(" The sum of 4 and 5 is "+4+5); //results in an output of 'The sum of 4 and 5 is 45]]>
The correct code would be
<![CDATA[window.alert(" The sum of 4 and 5 is "+(4+5));]]>
Variables
Unlike many programming languages, JavaScript does not require the type of variable to be declared. In other words, the interpreter doesn't care if a variable holds an integer, string or boolean value. You need only state that an item is a variable, by using the keyword var, and give it a name. The names of JavaScript variables must start with a letter and can be made up of letters, numbers and underscores. Example:
<![CDATA[var firstName; //used to store a string representing a first name
var gpa; // used to store a decimal number representing a students gpa
var isMale; // used to store a true/false value representing if a person is male
var age; // used to store an integer value representing a persons age
var initial; // used to represent a character value representing a persons middle initial ]]>
The above statements are all variable declarations. All they do is allocate a location in memory for the information to be stored and label that location with the given name.
To give the variables values, we need to initialize them (assign a starting value). Example:
<![CDATA[firstName="Mickey"; //double quotes around the string
gpa=4.0; //no quotes around the decimal number
isMale=true; //no quotes around the word true or false
age=39; //no quotes around an integer number
initial='G'; //single quotes around a character value]]>
* Notice the lack of the keyword var. This is because these variable had already been declared previously in the program.
Often times, variables can be declared AND initialized in the same statement:
<![CDATA[var lastName="Engel";
var birthMonth=9;]]>
Output with Variables
To output statements that contain variables, the variable names must be outside of the quotes in order to show their value. Thus, concatenation must be used. Otherwise, if the variable name is in the quotes, the variable name will be displayed and not its value.
<![CDATA[var name="bob";
document.write("Welcome "+name); //would output Welcome bob
window.alert("Welcome name"); //would output Welcome name]]>