lesson 10
TRANSCRIPT
![Page 1: Lesson 10](https://reader033.vdocuments.site/reader033/viewer/2022060109/5553b49eb4c905d9448b4c99/html5/thumbnails/1.jpg)
Front-EndWeb Development
Lesson 10Arrays
![Page 2: Lesson 10](https://reader033.vdocuments.site/reader033/viewer/2022060109/5553b49eb4c905d9448b4c99/html5/thumbnails/2.jpg)
Agenda
● Pizza● Review Divided Times● Collection of Data● Manipulating Collections● Lab● Introduction to Final Project
![Page 3: Lesson 10](https://reader033.vdocuments.site/reader033/viewer/2022060109/5553b49eb4c905d9448b4c99/html5/thumbnails/3.jpg)
Divided Times
Class examples
The GA solution
![Page 4: Lesson 10](https://reader033.vdocuments.site/reader033/viewer/2022060109/5553b49eb4c905d9448b4c99/html5/thumbnails/4.jpg)
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?
![Page 5: Lesson 10](https://reader033.vdocuments.site/reader033/viewer/2022060109/5553b49eb4c905d9448b4c99/html5/thumbnails/5.jpg)
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”;
![Page 6: Lesson 10](https://reader033.vdocuments.site/reader033/viewer/2022060109/5553b49eb4c905d9448b4c99/html5/thumbnails/6.jpg)
Collections of Data
![Page 7: Lesson 10](https://reader033.vdocuments.site/reader033/viewer/2022060109/5553b49eb4c905d9448b4c99/html5/thumbnails/7.jpg)
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
![Page 8: Lesson 10](https://reader033.vdocuments.site/reader033/viewer/2022060109/5553b49eb4c905d9448b4c99/html5/thumbnails/8.jpg)
Declaring Arrays
First Option:
Declaring an empty array using the array constructor.
var myArr = new Array();
![Page 9: Lesson 10](https://reader033.vdocuments.site/reader033/viewer/2022060109/5553b49eb4c905d9448b4c99/html5/thumbnails/9.jpg)
Declaring Arrays
Second Option:
Declaring an empty array using literal notation.
var myArr = [ ];
![Page 10: Lesson 10](https://reader033.vdocuments.site/reader033/viewer/2022060109/5553b49eb4c905d9448b4c99/html5/thumbnails/10.jpg)
Declaring Arrays
myArr = [‘Hello’, 54.3, true];
● Arrays are filled with elements● Elements can be strings, numbers or
booleans
![Page 11: Lesson 10](https://reader033.vdocuments.site/reader033/viewer/2022060109/5553b49eb4c905d9448b4c99/html5/thumbnails/11.jpg)
Declaring ArraysmyArr = [ ‘Sunday’,
‘Monday’,‘Tuesday’,‘Wednesday’,‘Thursday’,‘Friday’,‘Saturday’
];
![Page 12: Lesson 10](https://reader033.vdocuments.site/reader033/viewer/2022060109/5553b49eb4c905d9448b4c99/html5/thumbnails/12.jpg)
Declaring Arrays
If you leave a blank spot in an array it creates a blank shelf space, an undefined placeholder.
![Page 13: Lesson 10](https://reader033.vdocuments.site/reader033/viewer/2022060109/5553b49eb4c905d9448b4c99/html5/thumbnails/13.jpg)
Array Indexing
![Page 14: Lesson 10](https://reader033.vdocuments.site/reader033/viewer/2022060109/5553b49eb4c905d9448b4c99/html5/thumbnails/14.jpg)
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
![Page 15: Lesson 10](https://reader033.vdocuments.site/reader033/viewer/2022060109/5553b49eb4c905d9448b4c99/html5/thumbnails/15.jpg)
Code Along
arrays.html
![Page 16: Lesson 10](https://reader033.vdocuments.site/reader033/viewer/2022060109/5553b49eb4c905d9448b4c99/html5/thumbnails/16.jpg)
Array Indexing
We can insert new values into any space in the array using the positions index.
myArr[4] = ‘Humpday’;
![Page 17: Lesson 10](https://reader033.vdocuments.site/reader033/viewer/2022060109/5553b49eb4c905d9448b4c99/html5/thumbnails/17.jpg)
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.
![Page 18: Lesson 10](https://reader033.vdocuments.site/reader033/viewer/2022060109/5553b49eb4c905d9448b4c99/html5/thumbnails/18.jpg)
Array Indexing
var fruits = ['Apples', 'Oranges', 'Pears', 'Grapes'];myArr = fruits;
console.log(myArr); // prints Apples, Oranges, Pears, Grapes
![Page 19: Lesson 10](https://reader033.vdocuments.site/reader033/viewer/2022060109/5553b49eb4c905d9448b4c99/html5/thumbnails/19.jpg)
Array Length
What if you would like to know how long the array is (how many elements)?
console.log(myArr.length); // prints 4
![Page 20: Lesson 10](https://reader033.vdocuments.site/reader033/viewer/2022060109/5553b49eb4c905d9448b4c99/html5/thumbnails/20.jpg)
Manipulating Collections
How to iterate over an array:
fruits.forEach(function(element,index){console.log(element,index);
});
![Page 21: Lesson 10](https://reader033.vdocuments.site/reader033/viewer/2022060109/5553b49eb4c905d9448b4c99/html5/thumbnails/21.jpg)
Assignment
Create an array of sports teams and print them to the page.
Examples:AFC East StandingsNBA Atlantic StandingsMLB American League East Standings
![Page 22: Lesson 10](https://reader033.vdocuments.site/reader033/viewer/2022060109/5553b49eb4c905d9448b4c99/html5/thumbnails/22.jpg)
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.
![Page 23: Lesson 10](https://reader033.vdocuments.site/reader033/viewer/2022060109/5553b49eb4c905d9448b4c99/html5/thumbnails/23.jpg)
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.
![Page 24: Lesson 10](https://reader033.vdocuments.site/reader033/viewer/2022060109/5553b49eb4c905d9448b4c99/html5/thumbnails/24.jpg)
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)
![Page 25: Lesson 10](https://reader033.vdocuments.site/reader033/viewer/2022060109/5553b49eb4c905d9448b4c99/html5/thumbnails/25.jpg)
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.
![Page 26: Lesson 10](https://reader033.vdocuments.site/reader033/viewer/2022060109/5553b49eb4c905d9448b4c99/html5/thumbnails/26.jpg)
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.
![Page 27: Lesson 10](https://reader033.vdocuments.site/reader033/viewer/2022060109/5553b49eb4c905d9448b4c99/html5/thumbnails/27.jpg)
Introduction to Final Project
Description:● Design and build a website of your choice
![Page 28: Lesson 10](https://reader033.vdocuments.site/reader033/viewer/2022060109/5553b49eb4c905d9448b4c99/html5/thumbnails/28.jpg)
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
![Page 29: Lesson 10](https://reader033.vdocuments.site/reader033/viewer/2022060109/5553b49eb4c905d9448b4c99/html5/thumbnails/29.jpg)
Introduction to Final Project
Remaining Topics:● Responsive design● HTML forms● jQuery animation
![Page 30: Lesson 10](https://reader033.vdocuments.site/reader033/viewer/2022060109/5553b49eb4c905d9448b4c99/html5/thumbnails/30.jpg)
Introduction to Final Project
Core Requirements (HTML5):● HTML5 structural elements
○ header, footer, nav, etc.● Include classes and IDs● Additional tags, as appropriate
![Page 31: Lesson 10](https://reader033.vdocuments.site/reader033/viewer/2022060109/5553b49eb4c905d9448b4c99/html5/thumbnails/31.jpg)
Introduction to Final Project
Core Requirements (CSS):● Demonstrate fonts and color● Demonstrate floats and the box model● External CSS
![Page 32: Lesson 10](https://reader033.vdocuments.site/reader033/viewer/2022060109/5553b49eb4c905d9448b4c99/html5/thumbnails/32.jpg)
Introduction to Final Project
Core Requirements (Interactive):● Use JavaScript / jQuery events to add
interactivity● External scripts
![Page 33: Lesson 10](https://reader033.vdocuments.site/reader033/viewer/2022060109/5553b49eb4c905d9448b4c99/html5/thumbnails/33.jpg)
Introduction to Final Project
Deliverables:● Project folder with HTML, CSS,
JavaScript/jQuery and assets● Hosted on GA server
![Page 34: Lesson 10](https://reader033.vdocuments.site/reader033/viewer/2022060109/5553b49eb4c905d9448b4c99/html5/thumbnails/34.jpg)
Introduction to Final Project
Best Practices:● Clean and readable code● Search Engine Optimization (SEO)● Avoid deprecated tags
![Page 35: Lesson 10](https://reader033.vdocuments.site/reader033/viewer/2022060109/5553b49eb4c905d9448b4c99/html5/thumbnails/35.jpg)
Introduction to Final Project
Grading:● A project is considered satisfactory if it
meets all core requirements and milestones
![Page 36: Lesson 10](https://reader033.vdocuments.site/reader033/viewer/2022060109/5553b49eb4c905d9448b4c99/html5/thumbnails/36.jpg)
Introduction to Final Project
Milestones:1. Project Proposal / Wireframes
○ Week 5 -- Monday, December 16, 20132. Pseudo Code
○ Week 7 -- Monday, January 13, 20143. First Draft
○ Week 8 -- Wednesday, January 22, 2014
![Page 37: Lesson 10](https://reader033.vdocuments.site/reader033/viewer/2022060109/5553b49eb4c905d9448b4c99/html5/thumbnails/37.jpg)
Introduction to Final Project
Target Dates:1. Session 19 | Project Lab
○ Monday, February 3, 20142. Session 20 | Presentations
○ Wednesday, February 5, 2014