Your SlideShare is downloading. ×
Lesson 10
Upcoming SlideShare
Loading in...5

Thanks for flagging this SlideShare!

Oops! An error has occurred.

Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Lesson 10


Published on

Published in: Technology, Art & Photos

  • Be the first to comment

  • Be the first to like this

No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

No notes for slide


  • 1. Front-End Web Development Lesson 10 Arrays
  • 2. Agenda ● Review Divided Times ● Collection of Data ● Manipulating Collections ● Lab ● Introduction to Final Project
  • 3. Divided Times Homework Class examples The GA solution
  • 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”;
  • 6. Collections of Data
  • 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
  • 8. Declaring Arrays First Option: Declaring an empty array using the array constructor. var myArr = new Array();
  • 9. Declaring Arrays Second Option: Declaring an empty array using literal notation. var myArr = [ ];
  • 10. Declaring Arrays myArr = [‘Hello’, 54.3, true]; ● Arrays are filled with elements ● Elements can be strings, numbers or booleans
  • 11. Declaring Arrays myArr = [ ‘Sunday’, ‘Monday’, ‘Tuesday’, ‘Wednesday’, ‘Thursday’, ‘Friday’, ‘Saturday’ ];
  • 12. Declaring Arrays If you leave a blank spot in an array it creates a blank shelf space, an undefined placeholder.
  • 13. Array Indexing
  • 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
  • 15. Code Along arrays.html
  • 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 (or other collection of stuff) and print them to the page. Examples: NHL Eastern Conference Standings NBA Atlantic Standings MLB American League East Standings
  • 22. Lab (proposed) 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 (proposed) 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 (proposed) 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 (proposed) 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 (proposed) 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. Lab (alternate) Access the jQuery Plugin Registry Access the slider tag Select Anything Slider Get AnythingSlider working independently Incorporate AnythingSlider into Divided Times Continued in Lesson 11 (Lab)