JavaScript Intro

Demo 1: Variables

Type one line into the Console and press Return/Enter. Do not skip any lines.

alert("Hello, World!");
var fruit = "apple";
alert(fruit);
alert("The fruit is " + fruit);

fruit = "orange";
alert("The fruit is " + fruit);

fruit = 42;
alert("The fruit is " + fruit + ".");

Note: Only use the var keyword the FIRST time, when you declare the variable. After that, you are assigning a new value to the variable that already exists.

Demo 2: Data Types

var color;
alert("The color is " + color);

color = null;
alert("The color is " + color);

color = 10 + 5;
color = 10 - 5;
color = 50 * 3;
color = 50 / 5;

Two forward slashes create a comment. A line that begins with // will not be executed.

// not a number
color = 10 / "foo"

// number vs. string
color = 10 + "5";

color = "blue";
alert("The color is " + color);
// concatenation
color = color + color;
alert("The color is " + color);
color = color + color;
alert("The color is " + color);

Some numbers must be strings!

var socialSecurity = "321-89-4567";
var officePhone = "352-392-3261";
var zipCode = "32611";

Demo 3: Booleans and Comparisons

No alert() here -- just type into the Console one line at a time.

var animal1 = "cat";
var animal2 = "dog";
animal1 == animal2;
animal1 != animal2;
var cats = 6;
var dogs = 3;
cats > dogs;
cats < dogs;
var six = "6";

// true
cats == six;
// false
cats === six;

Can you determine the difference between == and ===? It's important.

Demo 4: if/else Statements

var cat = "black";
if (cat == "black") alert("The cat is black!");

// nothing
if (cat != "black") alert("The cat is not black!");

// works
if (cat != "white") alert("The cat is not white!");

cat = "ginger";

Note: To make the following if/else block work, you'll need to copy all five lines and PASTE into the Console.

if ( cat == "black" ) {
	alert("The cat is black!");
} else {
	alert("The cat is not black!");
}

Demo 5: Arrays

var fruits = ["grapes", "apples", "oranges", "cantaloupes"];
alert(fruits);

alert(fruits[1]);
alert(fruits[0]);
alert(fruits[2] + fruits[3]);
alert(fruits[2] + " and " + fruits[3]);

fruits[2] = "lemons";
alert(fruits);

Demo 6: Loops (for Statements)

Note: To make each of the following work, you'll need to copy a whole three-line block and PASTE it into the Console.

for ( var i = 0; i <= 50; i += 10 ) {
	console.log(i);
}

for ( var i = 50; i >= 0; i -= 10 ) {
	console.log(i);
}

Compare the two for statements above to the two below:

for ( var i = 0; i <= 10; i++ ) {
	console.log(i);
}

for ( var i = 10; i >= 0; i-- ) {
	console.log(i);
}

Now use an array:

var fruits = ["grapes", "apples", "oranges", "cantaloupes"];

for ( var i = 0; i < fruits.length; i++ ) {
	alert( fruits[i] );
}

Here is a different format for looping through an array. It produces the same output as the previous example.

for ( var i in fruits ) {
	alert( fruits[i] );
}

Use of i for the variable name is not required. This works exactly the same way as the previous example.

for ( var fruit in fruits ) {
	alert( fruits[fruit] );
}