Lesson 10
Upcoming SlideShare
Loading in...5

Like this? Share it with your network


Lesson 10






Total Views
Views on SlideShare
Embed Views



0 Embeds 0

No embeds



Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment

Lesson 10 Presentation Transcript

  • 1. Front-End Web Development Lesson 10 Arrays
  • 2. Agenda ● ● ● ● ● ● Pizza Review Divided Times Collection of Data Manipulating Collections Lab Introduction to Final Project
  • 3. Divided Times 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 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