Lesson.md

Arrays and For Loops ( continued )

=

So far we've learned about Arrays and For Loops ( what are they ? )

=

Arrays can contain strings

var people = ["Sue", "Bill", "Mike", "Laura", "Gregg"];

=

Arrays can contain numbers

var ages = [ 18, 19, 20, 21, 22, 17 ];

=

We can access properties in arrays by using brackets

var people = ["Sue", "Bill", "Mike", "Laura", "Gregg"];
people[2]; // Mike
people[people.length] // Gregg

=

We use for loops to iterate over arrays they look like this

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

// 0 // 1 // 2

See an example of a for loop executing slowly - http://jsbin.com/taduhi/edit?js,console,output

=

Overview Done, NEW: Arrays can contain other Data Structures including other arrays!

var people = [
  ["Sue", 19], 
  ["Bill", 2], 
  ["Jim", 9], 
  ["Mike", 22]
]

=

As developers we often will use FOR Loops and Arrays to build out UI's [Screenshots Examples]

=

Exercise

Today we are going to build a list images and captions you've been given all of the data you'd need and a design. Your Job is to display it on the page, and format it nicely!

Clone the following project:

= APPENDIX

Here are the jquery functions you'll need to manipulate the DOM. You'll first grab the empty div using $(), then .append() HTML to it

var list = $('.list'); // Select a list of elements and create variable
list.append('<div>Content</div>') // Append add and item to the top of the list, inverse is prepend

=

In order to make this work properly you'll also need to CONCATENATE strings to build up valid HTML here are some examples

var newPerson = '<div class="person">' + item[i] + '</div>';

=