Upcoming SlideShare
×

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.
Standard text messaging rates apply

Lesson 10

58
views

Published on

Published in: Technology, Art & Photos

0 Likes
Statistics
Notes
• Full Name
Comment goes here.

Are you sure you want to Yes No
• Be the first to comment

• Be the first to like this

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

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)