HTML/CSS Review

JavaScript Overview

JavaScript Variables

Advanced Array Functionality

Manipulating HTML Elements

By ID

li { /* all <li> elements */
    property:value;
}

By class

.my-class { /* all elements with class "my-class" */
    property:value;
}

By element type

#my-id { /* element with id "my-id" */
    property:value;
}

<script type="text/javascript" src="js/my-script.js"></script>

Numeric: single quantitative value

var x = 13;

String: characters, in quotes (', or ")

var str = "hello there";

Array: Set of items in a vector (string or numeric)

var timesTwo = function(value) { return value * 2}

Object: Item that holds key-value pairs

var arr = [13, 'fourteen', 15];

var obj = {name:'steve', job:'lobbyist'};

Function: Executable block of code, returns a value

Properties describe a feature of an element

var characters = "This is a string"
characters.length // Returns the length of the variable
var arr = [1,2,3]
arr.length // Returns the number of items in the array

Methods are actions that variables can perform

var chars = "This is a string"
chars.replace("This", "Here") // Replaces "This" with "Here"
var arr = [1,2,3]
arr.push(4)// Pushes 4 into the array as the last element

Only one type of JavaScript number

var num = 1;
typeof(num) // returns 'number'
var num = 1.2;
typeof(num) // returns 'number'
var num = 1e8
typeof(num) // returns 'number'

Mathematical operations can be used

var num = 2*14 // num is 28
var num = 2/4 // num is .5

Advanced Math operations

var num = Math.sqrt(4) // num is 2

Create string variables with single or double quotes

var str = 'using single quotes'
var str = "using double quotes"

Lots and lots and lots of string functions

var name = "Mike"
var greeting = "Hello, my name is " + name // concatenation
var greeting2 = greeting.replace("Hello", "Sup") // replacing

Comma separated items, denoted by square brackets []

var x = [13, 14, 15];
var x = ['one', 'two'];

Access values by index, starting at 0

var x = [13, 14]
x[0] // 13
x[1] // 14

Data items with key-value pairs

var person = {
    firstName:'Anna', 
    lastName:'Smith', 
    height:"5'4", 
}

Access values by referencing the key

person.firstName // Anna
person['firstName'] // Anna

Can be nested

var person = {
    firstName:'Anna', 
    favorites:{
        music:'bluegrass', 
        food:'pizza'
    } 
}
person.favorites.food // 'pizza

Perform blocks of code on parameters

var myFunction = function(a,b) {
    return a*b
}

Execute function using this syntax

var result = myFunction(2,4) // returns 8

Return a single item (object, array, etc.)

Execute statements only if a condition is true (if)

if(a<b) {
    // execute some action
}

Provide a default alternative (else)

if(a<b) {
    // take some action
}
else if(a==b) {
    // another action
}
else {
    // default
}

You have a function that compares values

var comparison = function(a,b) {
	if(a>b) {
            return 'a is greater that b'
	}
	else {
	    return 'b is less than or equal to a'
	}
}

var comparison = function(a,b, callback) {
	if(a>b) {
            callback()
       	    return 'a is greater that b'
	}
}

Pass that action in as a parameter

var arr = [1,2,3]
var timesTwo = function(d) {return d*2}
var doubleArr = arr.map(timeTwo) // returns [2,4,6]

var arr = [1,2,3]
var doubleArr = arr.map(function(d) {
    return d*2
})

var arr = [1,2,3]
var greaterThanTwo = arr.filter(function(d) {
    return d>2
})

Filtering only returns values that meet a given conditionality:

Same format as .map

Get values using JavaScript

document.getElementById('my-input').value

Set properties using JavaScript

document.getElementById("demo").style.fontSize = "25px";

Libraries will make this less cumbersome (jQuery, D3, etc.)

Map-challenge (due before first class next week)