This document covers the topics of arrays in front-end web development. It discusses using arrays to store collections of data like images or menu items. Arrays allow indexing elements by number and manipulating the collection through methods. The lesson demonstrates declaring and populating arrays, accessing elements, and iterating over arrays. It includes an assignment to create sports team standings using arrays. Finally, it introduces a lab to build an image carousel with arrays and a final project to design and build a website.
4. 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?
5. 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”;
7. 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
14. 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
16. Array Indexing
We can insert new values into any space in the
array using the positions index.
myArr[4] = ‘Humpday’;
17. 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.
18. Array Indexing
var fruits = ['Apples', 'Oranges', 'Pears', 'Grapes'];
myArr = fruits;
console.log(myArr); // prints Apples, Oranges,
Pears, Grapes
19. Array Length
What if you would like to know how long the
array is (how many elements)?
console.log(myArr.length); // prints 4
20. Manipulating Collections
How to iterate over an array:
fruits.forEach(function(element,index){
console.log(element,index);
});
21. Assignment
Create an array of sports teams and print them
to the page.
Examples:
AFC East Standings
NBA Atlantic Standings
MLB American League East Standings
22. 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.
23. 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.
24. 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)
25. 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.
26. 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.
27. Introduction to Final Project
Description:
● Design and build a website of your choice
28. 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
29. Introduction to Final Project
Remaining Topics:
● Responsive design
● HTML forms
● jQuery animation
30. Introduction to Final Project
Core Requirements (HTML5):
● HTML5 structural elements
○ header, footer, nav, etc.
●
●
Include classes and IDs
Additional tags, as appropriate
31. Introduction to Final Project
Core Requirements (CSS):
● Demonstrate fonts and color
● Demonstrate floats and the box model
● External CSS
32. Introduction to Final Project
Core Requirements (Interactive):
● Use JavaScript / jQuery events to add
interactivity
● External scripts
33. Introduction to Final Project
Deliverables:
● Project folder with HTML, CSS,
JavaScript/jQuery and assets
● Hosted on GA server
34. Introduction to Final Project
Best Practices:
● Clean and readable code
● Search Engine Optimization (SEO)
● Avoid deprecated tags
35. Introduction to Final Project
Grading:
● A project is considered satisfactory if it
meets all core requirements and
milestones
36. Introduction to Final Project
Milestones:
1. Project Proposal / Wireframes
○ Week 5 -- Monday, December 16, 2013
2.
Pseudo Code
○ Week 7 -- Monday, January 13, 2014
3.
First Draft
○ Week 8 -- Wednesday, January 22, 2014
37. Introduction to Final Project
Target Dates:
1. Session 19 | Project Lab
○ Monday, February 3, 2014
2.
Session 20 | Presentations
○ Wednesday, February 5, 2014