Your SlideShare is downloading. ×
0
Front-End
Web Development
Lesson 10
Arrays
Agenda
●
●
●
●
●
●

Pizza
Review Divided Times
Collection of Data
Manipulating Collections
Lab
Introduction to Final Proje...
Divided Times
Class examples
The GA solution
Collections of Data
What if we had a collection of images that we
wanted to display to the screen, one at a time?
How coul...
Collections of Data
var image_1 = “images/image_1.jpg”;
var image_2 = “images/image_2.jpg”;
var image_3 = “images/image_3....
Collections of Data
Arrays
An array provides a simple organized way to
track a list of related items.
Think of a array like a …
● toaster
● sh...
Declaring Arrays
First Option:
Declaring an empty array using the array
constructor.
var myArr = new Array();
Declaring Arrays
Second Option:
Declaring an empty array using literal notation.
var myArr = [ ];
Declaring Arrays
myArr = [‘Hello’, 54.3, true];
●
●

Arrays are filled with elements
Elements can be strings, numbers or
b...
Declaring Arrays
myArr = [ ‘Sunday’,
‘Monday’,
‘Tuesday’,
‘Wednesday’,
‘Thursday’,
‘Friday’,
‘Saturday’
];
Declaring Arrays
If you leave a blank spot in an array it creates a
blank shelf space, an undefined placeholder.
Array Indexing
Array Indexing
Array elements can be fetched by their index
number (starts from 0).
Elements can be viewed in the JavaScri...
Code Along
arrays.html
Array Indexing
We can insert new values into any space in the
array using the positions index.
myArr[4] = ‘Humpday’;
Array Indexing
We can overwrite all the elements of an array
simply by giving the array new values or by
setting an array ...
Array Indexing
var fruits = ['Apples', 'Oranges', 'Pears', 'Grapes'];
myArr = fruits;
console.log(myArr); // prints Apples...
Array Length
What if you would like to know how long the
array is (how many elements)?
console.log(myArr.length); // print...
Manipulating Collections
How to iterate over an array:
fruits.forEach(function(element,index){
console.log(element,index);...
Assignment
Create an array of sports teams and print them
to the page.
Examples:
AFC East Standings
NBA Atlantic Standings...
Lab
Description: Students create a basic image
carousel using arrays and .each jQuery
function.
Hint: Go to the API docume...
Lab
Notes:
● Students can decide to use the provided
photos of food or animals or pull photos from
another location.
● Stu...
Lab
Instructions:
● The first part of this exercise is timed!
●
●

Create the HTML for the page (15 minutes)
Add CSS to st...
Lab
After 30 minutes, provide students with
HTML/CSS starter code.
The remainder of the time should be used to
implement t...
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...
Introduction to Final Project
Description:
● Design and build a website of your choice
Introduction to Final Project
Objectives:
● Demonstrate understanding of all topics
● Apply knowledge to build a website f...
Introduction to Final Project
Remaining Topics:
● Responsive design
● HTML forms
● jQuery animation
Introduction to Final Project
Core Requirements (HTML5):
● HTML5 structural elements
○ header, footer, nav, etc.
●
●

Incl...
Introduction to Final Project
Core Requirements (CSS):
● Demonstrate fonts and color
● Demonstrate floats and the box mode...
Introduction to Final Project
Core Requirements (Interactive):
● Use JavaScript / jQuery events to add
interactivity
● Ext...
Introduction to Final Project
Deliverables:
● Project folder with HTML, CSS,
JavaScript/jQuery and assets
● Hosted on GA s...
Introduction to Final Project
Best Practices:
● Clean and readable code
● Search Engine Optimization (SEO)
● Avoid depreca...
Introduction to Final Project
Grading:
● A project is considered satisfactory if it
meets all core requirements and
milest...
Introduction to Final Project
Milestones:
1. Project Proposal / Wireframes
○ Week 5 -- Monday, December 16, 2013
2.

Pseud...
Introduction to Final Project
Target Dates:
1. Session 19 | Project Lab
○ Monday, February 3, 2014
2.

Session 20 | Presen...
Upcoming SlideShare
Loading in...5
×

Lesson 10

220

Published on

Published in: Technology, Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

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

No notes for slide

Transcript of "Lesson 10"

  1. 1. Front-End Web Development Lesson 10 Arrays
  2. 2. Agenda ● ● ● ● ● ● Pizza Review Divided Times Collection of Data Manipulating Collections Lab Introduction to Final Project
  3. 3. Divided Times Class examples The GA solution
  4. 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. 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. 6. Collections of Data
  7. 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. 8. Declaring Arrays First Option: Declaring an empty array using the array constructor. var myArr = new Array();
  9. 9. Declaring Arrays Second Option: Declaring an empty array using literal notation. var myArr = [ ];
  10. 10. Declaring Arrays myArr = [‘Hello’, 54.3, true]; ● ● Arrays are filled with elements Elements can be strings, numbers or booleans
  11. 11. Declaring Arrays myArr = [ ‘Sunday’, ‘Monday’, ‘Tuesday’, ‘Wednesday’, ‘Thursday’, ‘Friday’, ‘Saturday’ ];
  12. 12. Declaring Arrays If you leave a blank spot in an array it creates a blank shelf space, an undefined placeholder.
  13. 13. Array Indexing
  14. 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. 15. Code Along arrays.html
  16. 16. Array Indexing We can insert new values into any space in the array using the positions index. myArr[4] = ‘Humpday’;
  17. 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. 18. Array Indexing var fruits = ['Apples', 'Oranges', 'Pears', 'Grapes']; myArr = fruits; console.log(myArr); // prints Apples, Oranges, Pears, Grapes
  19. 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. 20. Manipulating Collections How to iterate over an array: fruits.forEach(function(element,index){ console.log(element,index); });
  21. 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. 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. 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. 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. 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. 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. 27. Introduction to Final Project Description: ● Design and build a website of your choice
  28. 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. 29. Introduction to Final Project Remaining Topics: ● Responsive design ● HTML forms ● jQuery animation
  30. 30. Introduction to Final Project Core Requirements (HTML5): ● HTML5 structural elements ○ header, footer, nav, etc. ● ● Include classes and IDs Additional tags, as appropriate
  31. 31. Introduction to Final Project Core Requirements (CSS): ● Demonstrate fonts and color ● Demonstrate floats and the box model ● External CSS
  32. 32. Introduction to Final Project Core Requirements (Interactive): ● Use JavaScript / jQuery events to add interactivity ● External scripts
  33. 33. Introduction to Final Project Deliverables: ● Project folder with HTML, CSS, JavaScript/jQuery and assets ● Hosted on GA server
  34. 34. Introduction to Final Project Best Practices: ● Clean and readable code ● Search Engine Optimization (SEO) ● Avoid deprecated tags
  35. 35. Introduction to Final Project Grading: ● A project is considered satisfactory if it meets all core requirements and milestones
  36. 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. 37. Introduction to Final Project Target Dates: 1. Session 19 | Project Lab ○ Monday, February 3, 2014 2. Session 20 | Presentations ○ Wednesday, February 5, 2014
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×