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

58
views

Published on

Published in: Technology, Art & Photos

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
58
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
2
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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)