Introduction to JavaScript

Separation of Concerns

HTML = organization of webpage content

CSS = definition of content presentation style

JavaScript = how the content interacts and
behaves with the user

Loading JavaScript

<script type=“text/javascript” src=“path/file.js”></script>
The Chrome JavaScript Console, accessed via View &gt; Developer &gt; JavaScript Console.
The Chrome JavaScript Console, accessed via View > Developer > JavaScript Console.

Data Types

  • string
  • number
  • boolean
  • array

Strings

Strings are used for storing textual information. It can be as short as a word or as long as a sentence. To define a string, use double or single quotes:

'a name means a lot just by itself'
"freedom is a luxury not a necessity"

Quotes Within A String

When you need to use quotes as part of the string, wrap the string in the inverse of the style of quotes you need to display:

"Colognes in a blue bottle or with the word 'blue' in their names have proliferated on 
men’s fragrance counters in the last few years"

You can also escape quotes by using \:

"Many economists say that such \"first dollar\" coverage leaves beneficiaries 
insensitive to costs"

True Quotes Using HTML Elements

  • &ldquo; => “
  • &rdquo; => ”
  • &lsquo; => ‘
  • &rsquo; => ’
Mission Asset Fund, which also provides extensive financial counseling and education, 
markets its lending circles around what it calls &ldquo;financial pain points&rdquo;: 
a security deposit to rent an apartment, the $680 citizenship application fee, the $465 
fee for a deportation deferral and a temporary work permit.

Numbers

Used to represent numerical data:

Integers:

75

Float:

3.14159

Booleans

Used for representing a binary value (true or false):

true

false

Arrays

Contain other data types

Mixed types OK

Starts with [, ends with ], elments separated with ,.

Whitespace is ignored

Array Examples

Empty array:

[]

Single element:

["one"]

Multiple elements:

["first", 2, "three"]

Array Indexing

[] + number = index into array

JavaScript is a zero indexed language:

["red", "white", "blue"][0] => “red”

["red", "white", "blue"][1] => “white”

["red", "white", "blue"][2] => “blue”

Array Details

Array length:

["red", "white", "blue"].length => 3

First element at zero, last element at one less than array length

Variables

Declaration:

var blackjack;

Assignment:

blackjack = 21;

Declaration and assignment:

var blackjack = 21;

Reassignment:

var name = "Brendan";

name = "Brendan Griffiths";

Console Logging

console.log("Hello world");

Console log accepts any variable or data type.
Multiple values can be strung together, separated
with a comma:

console.log(myVar, "Hello", 7);

Relational Operators

There are 4 relational operations you can use for numeric values:

  • < Less than
  • > Greater than
  • <= Less than or equal to
  • >= Greater than or equal to

Examples

1 < 2 // true

2 <= 1 // false`

1 <= 1 // true`

var x = 4,
    y = 6;

x < y // true

1 > 1 // false

Are Two Things Equal?

10 == 10; // true

10 == 5; // false

"hi" == "hi"; // true

"Hi" == "hi"; // false

If Statement

if (true) {
  console.log('Condition is true');
}

if (false) {
  console.log('This will never execute.');
}

If/Else

var film = "The Silence of the Lambs";

if (film == "The Silence of the Lambs" || film == "Psycho") {
  console.log('Your film is a thriller.');
} else {
  console.log('Your film probably isn’t a thriller.');
}

Multiple Checks

And (&&)

var name   = "Brendan",
    school = "Parsons";

if (name == "Brendan" && school == "Parsons") {
  console.log('Come on in!');
}

Or (||)

var overSixteen    = true,
    parentsPresent = false;

if (overSixteen || parentsPresent) {
   console.log('Amazing...you can go to an R-rated movie.');
}

Basic Math

Addition

1 + 1 // 2

Subtraction

3 - 2 // 1

Multiplication

5 * 3 // 15

Division

10 / 2 // 5

Increment / Decrement Values (++ / --)

Increment

  • myVar = myVar + 1;
  • myVar++;

Decrement

  • myVar = myVar - 1;
  • myVar--;

For Loop

for (var multiplier = 1; multiplier <= 10; multiplier++) {
  var result = multiplier * 6;
  console.log(result);
}

Array Iteration

var array = [1, 2, 3];

for (var counter = 0; counter < array.length; counter++) {
  console.log(array[counter]);
}

In-class Loop Example