Lesson 10

Front-EndWeb Development

Lesson 10Arrays

Agenda

● Pizza● Review Divided Times● Collection of Data● Manipulating Collections● Lab● Introduction to Final Project

Divided Times

Class examples

The GA solution

Collections of Data

What if we had a collection of images that we wanted to display to the screen, one at a time?

How could we store all the images?

Collections of Data

var image_1 = “images/image_1.jpg”;var image_2 = “images/image_2.jpg”;var image_3 = “images/image_3.jpg”;var image_4 = “images/image_4.jpg”;var image_5 = “images/image_5.jpg”;

Collections of Data

Arrays

An array provides a simple organized way to track a list of related items.

Think of a array like a … ● toaster● shopping list● file cabinet

Declaring Arrays

First Option:

Declaring an empty array using the array constructor.

var myArr = new Array();

Declaring Arrays

Second Option:

Declaring an empty array using literal notation.

var myArr = [ ];

Declaring Arrays

myArr = [‘Hello’, 54.3, true];

● Arrays are filled with elements● Elements can be strings, numbers or

booleans

Declaring ArraysmyArr = [ ‘Sunday’,

‘Monday’,‘Tuesday’,‘Wednesday’,‘Thursday’,‘Friday’,‘Saturday’

];

Declaring Arrays

If you leave a blank spot in an array it creates a blank shelf space, an undefined placeholder.

Array Indexing

Array Indexing

Array elements can be fetched by their index number (starts from 0).

Elements can be viewed in the JavaScript console.

console.log(myArr[0]); // prints Sunday

Code Along

arrays.html

Array Indexing

We can insert new values into any space in the array using the positions index.

myArr[4] = ‘Humpday’;

Array Indexing

We can overwrite all the elements of an array simply by giving the array new values or by setting an array equal to a different array.

Array Indexing

var fruits = ['Apples', 'Oranges', 'Pears', 'Grapes'];myArr = fruits;

console.log(myArr); // prints Apples, Oranges, Pears, Grapes

Array Length

What if you would like to know how long the array is (how many elements)?

console.log(myArr.length); // prints 4

Manipulating Collections

How to iterate over an array:

fruits.forEach(function(element,index){console.log(element,index);

});

Assignment

Create an array of sports teams and print them to the page.

Examples:AFC East StandingsNBA Atlantic StandingsMLB American League East Standings

Lab

Description: Students create a basic image carousel using arrays and .each jQuery function.

Hint: Go to the API documentation at jquery.com to review the documentation and practice examples of the .each() function.

Lab

Notes:● Students can decide to use the provided

photos of food or animals or pull photos from another location.

● Students will use the .click() method to navigate between pictures.

Lab

Instructions:● The first part of this exercise is timed!

● Create the HTML for the page (15 minutes)● Add CSS to style the page (15 minutes)

Lab

After 30 minutes, provide students with HTML/CSS starter code.

The remainder of the time should be used to implement the JavaScript code.

This exercise will carry over into next session.

Lab

Bonus: They will use the change event to give a ranking to the photos between 1 and 5. The user should be forwarded to the next image after voting.

Introduction to Final Project

Description:● Design and build a website of your choice

Introduction to Final Project

Objectives:● Demonstrate understanding of all topics● Apply knowledge to build a website from

the ground up● Create an efficient website compatible

with modern browsers and devices

Introduction to Final Project

Remaining Topics:● Responsive design● HTML forms● jQuery animation

Introduction to Final Project

Core Requirements (HTML5):● HTML5 structural elements

○ header, footer, nav, etc.● Include classes and IDs● Additional tags, as appropriate

Introduction to Final Project

Core Requirements (CSS):● Demonstrate fonts and color● Demonstrate floats and the box model● External CSS

Introduction to Final Project

Core Requirements (Interactive):● Use JavaScript / jQuery events to add

interactivity● External scripts

Introduction to Final Project

Deliverables:● Project folder with HTML, CSS,

JavaScript/jQuery and assets● Hosted on GA server

Introduction to Final Project

Best Practices:● Clean and readable code● Search Engine Optimization (SEO)● Avoid deprecated tags

Introduction to Final Project

Grading:● A project is considered satisfactory if it

meets all core requirements and milestones

Introduction to Final Project

Milestones:1. Project Proposal / Wireframes

○ Week 5 -- Monday, December 16, 20132. Pseudo Code

○ Week 7 -- Monday, January 13, 20143. First Draft

○ Week 8 -- Wednesday, January 22, 2014

Introduction to Final Project

Target Dates:1. Session 19 | Project Lab

○ Monday, February 3, 20142. Session 20 | Presentations

○ Wednesday, February 5, 2014