Week 8 Notes

JavaScript Basics

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

We use the <script> tag to connect our HTML page with our JavaScript file as follows:

<script type="text/javascript" src="path/file.js"></script>

JavaScript Console

The Chrome JavaScript Console, accessed via View > Developer > JavaScript Console.

Data Types

There are four primary data types in JavaScript:

string

number

boolean

array

Strings

Used for storing textual information.

Double quotes: "a name means a lot just by itself"

Single quotes: 'freedom is a luxury not a necessity'

Quotes in Strings

Invert quote type:

"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"

Escaping:

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

Numbers

Used to represent numerical data:

Integers: 75

Float: 3.14159

Booleans

Used for representing a binary value (true or false): true or 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

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 myNum = 4;
var altNum = 6;
myNum < altNum
// true


1 > 1
// false

Are Two Things Equal?

10 == 10;
// true


10 == 5;
// false


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

And (&&)

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

Or (||)

var overSixteen = true;
var parentsPresent = false;

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

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.');
}

Basic Math

Addition: 1 + 1 = 2

Subtraction: 3 - 2 = 1

Multiplication: 5 * 3 = 15

Division: 10 / 2 = 5

Increment / Decrement (++ / –)

Increment:

myVar = myVar + 1;

myVar++;

Decrement:

myVar = myVar - 1;

myVar--;

Random Number Generation

Produces a random number between 0 and 1:

Math.random();

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]);
}