INTERACTIVITY
03.01 JavaScript Arrays WITH JAVASCRIPT
JavaScript Arrays
INTERACTIVITY
03.01 JavaScript Arrays WITH JAVASCRIPT
Storing lots of data at once
• The variables I have used to this point
store a single piece of information
• Number, String, Boolean, or Object
• What do you do if you want multiple,
related pieces of information?
• Store them in arrays
INTERACTIVITY
03.01 JavaScript Arrays WITH JAVASCRIPT
Declaring An Array
• Declaring an array
var grades= [80, 87, 94, 82, 62, 98, 81, 81, 74, 91];
var foods = [‘bananas’, ‘apples’, ‘pizza’];
var images= document.getElementsByClassName[‘imgs’];
var listItems = document.getElementsByTagName[‘li’];
INTERACTIVITY
03.01 JavaScript Arrays WITH JAVASCRIPT
Arrays
element
• An array is a collection of values
grades 80 87 94 82 62 98 81 81 74 91
0 1 2 3 4 5 6 7 8 9
array name
Each element has a numeric index
INTERACTIVITY
03.01 JavaScript Arrays WITH JAVASCRIPT
Accessing An Array
80 87 94 82 62 98 81 81 74 91
0 1 2 3 4 5 6 7 8 9
• Each value is called an element
• Elements are referenced by index
grades[0] refers to the value 80 (1st value)
grades[4] refers to the value 62 (5th value)
INTERACTIVITY
03.01 JavaScript Arrays WITH JAVASCRIPT
Arrays
• The elements in the array DON’T have to
be all the same type
var info= [“Colleen’, 1715, “Walnut”, 44004];
INTERACTIVITY
03.01 JavaScript Arrays WITH JAVASCRIPT
JavaScript Arrays are Objects
• They have attributes and methods
• grades.length
• grades.sort()
• grades.push(element)
• grades[grades.length] = element
INTERACTIVITY
03.01 JavaScript Arrays WITH JAVASCRIPT
Review
• Learning to declare and manipulate
arrays will make your code more powerful
• We can now play with new API methods:
• getElementsByTagName(‘t’)
• getElementsByClassName(‘c’);
INTERACTIVITY
03.01 JavaScript Arrays WITH JAVASCRIPT
Acknowledgements/Contributions
These slides are Copyright 2015- Colleen van Lent as part of
http://www.intro-webdesign.com/ and made available under a Creative
Commons Attribution Non-Commercial 4.0 License. Please maintain
this last slide in all copies of the document to comply with the attribution
requirements of the license. If you make a change, feel free to add
your name and organization to the list of contributors on this page as
you republish the materials.
Initial Development: Colleen van Lent , University of Michigan School of
Information
