• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Data Types: Arrays And Objects
 

Data Types: Arrays And Objects

on

  • 1,735 views

Introduction to objects and arrays in JavaScript.

Introduction to objects and arrays in JavaScript.

Statistics

Views

Total Views
1,735
Views on SlideShare
1,420
Embed Views
315

Actions

Likes
0
Downloads
44
Comments
0

5 Embeds 315

http://teaching.johnnunemaker.com 305
http://172.18.40.47 4
http://localhost 4
http://www.slideshare.net 1
http://teaching.harmonyapp.com 1

Accessibility

Categories

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.

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

    Data Types: Arrays And Objects Data Types: Arrays And Objects Presentation Transcript

    • Data Types Objects and Arrays Tuesday, September 8, 2009
    • objects collection of properties and methods Tuesday, September 8, 2009
    • creating a new object new Object() Tuesday, September 8, 2009
    • creating a new object (shortcut) {} Tuesday, September 8, 2009
    • different ways to do the same thing var student = new Object(); student.name = 'John Doe'; student.age = 18; var student = {name:'John Doe', age:18}; Tuesday, September 8, 2009
    • keys can be strings var student = {name:'John Doe', age:18}; var student = {'name':'John Doe', 'age':18}; Tuesday, September 8, 2009
    • liberal formatting var student = {name:'John Doe', age:18}; var student = { name:'John Doe', age:18 }; var student = { name : 'John Doe', age : 18 }; Tuesday, September 8, 2009
    • writing properties var student = {}; student.name = 'John Doe'; Tuesday, September 8, 2009
    • write as many as you want var student = {}; student.name = 'John Doe'; student.age = 18; student.gpa = 3.7; Tuesday, September 8, 2009
    • writing properties (shortcut) var student = {name:'John Doe'}; Tuesday, September 8, 2009
    • writing multiple properties var student = {name:'John Doe', age:18, gpa:3.7}; Tuesday, September 8, 2009
    • reading properties var student = {name:'John Doe', age:18}; student.name // "John Doe" student.age // 18 Tuesday, September 8, 2009
    • reading properties (alternative syntax) var student = {name:'John Doe', age:18}; student['name'] // "John Doe" student['age'] // 18 Tuesday, September 8, 2009
    • reading properties that are not set var student = {name:'John Doe', age:18}; student.foobar // undefined Tuesday, September 8, 2009
    • different ways to do the same thing var student = {name:'John Doe', age:18}; student.name // "John Doe" student['name'] // "John Doe" student.age // 18 student['age'] // 18 Tuesday, September 8, 2009
    • methods we’ll cover them later Tuesday, September 8, 2009
    • arrays ordered collection of values Tuesday, September 8, 2009
    • creating an array new Array(); Tuesday, September 8, 2009
    • new Array with no arguments var things = new Array(); things.length; // 0 creates empty array Tuesday, September 8, 2009
    • new Array with one argument var things = new Array(5); things.length; // 5 creates array with number of undefined elements shouldn’t ever need to do this, but be aware Tuesday, September 8, 2009
    • new Array with multiple arguments var things = new Array(1,2,3); things.length; // 3 creates array with each argument as element in array Tuesday, September 8, 2009
    • summary Tuesday, September 8, 2009
    • creating an array (shortcut) [] Tuesday, September 8, 2009
    • much more predictable Tuesday, September 8, 2009
    • array methods Tuesday, September 8, 2009
    • remember how strings are zero indexed? var car = "car"; car[0] // c car[1] // a car[2] // r Tuesday, September 8, 2009
    • arrays are too var car = ['c', 'a', 'r']; car[0] // c car[1] // a car[2] // r Tuesday, September 8, 2009
    • array of numbers var things = [1,2,3,4,5]; things[0] // 1 things[1] // 2 things[2] // 3 things[3] // 4 things[4] // 5 things[5] // undefined Tuesday, September 8, 2009
    • remember how strings know their length? var football = "football"; football.length // 8 Tuesday, September 8, 2009
    • arrays do too var things = [1,2,3,4,5]; things.length // 5 http://www.w3schools.com/jsref/jsref_length_array.asp Tuesday, September 8, 2009
    • remember how strings can get the indexOf stuff? var football = "football"; football.indexOf('f') // 0 football.indexOf('o') // 1 football.indexOf('foot') // 0 football.indexOf('z') // -1 Tuesday, September 8, 2009
    • arrays can too var car = ['c','a','r']; car.indexOf('c'); // 0 car.indexOf('a'); // 1 car.indexOf('r'); // 2 car.indexOf('b'); // -1 Tuesday, September 8, 2009
    • more indexOf examples var strings = ['aa', 'b', 'ccD']; strings.indexOf('aa') // 0 strings.indexOf('ccD') // 2 strings.indexOf('ccd') // -1 Tuesday, September 8, 2009
    • arrays can be multi-dimensional var multi = ['a', 'b', ['z', 'y']]; multi[0] // 'a' multi[1] // 'b' multi[2] // ['z', 'y'] multi[2][0] // 'z' multi[2][1] // 'y' multi[2].length // 2 Tuesday, September 8, 2009
    • concat returns joined arrays but does not alter them http://www.w3schools.com/jsref/jsref_concat_array.asp Tuesday, September 8, 2009
    • concat of a and b var a = [1,2]; var b = [3,4]; var c = a.concat(b); // a is still [1,2] // b is still [3,4] // c is now [1,2,3,4] Tuesday, September 8, 2009
    • concat of b and a var a = [1,2]; var b = [3,4]; var c = b.concat(a); // a is still [1,2] // b is still [3,4] // c is now [3,4,1,2] Tuesday, September 8, 2009
    • concat with multi-dimensional var multi = ['a', 'b', ['z', 'y']]; multi.concat([1, 2]) // ['a', 'b', ['z','y'], '1', '2'] Tuesday, September 8, 2009
    • join joins the elements of an array into a string separated by a delimiter http://www.w3schools.com/jsref/jsref_join.asp Tuesday, September 8, 2009
    • join var car_letters = ['c', 'a', 'r']; car_letters.join(''); // "car" Tuesday, September 8, 2009
    • join with delimiter var car_letters = ['c', 'a', 'r']; car_letters.join(','); // "c,a,r" Tuesday, September 8, 2009
    • delimiter can be any string var car_letters = ['c', 'a', 'r']; car_letters.join('WIN'); // "cWINaWINr" Tuesday, September 8, 2009
    • date example var date = [9, 8, 2009] date.join('/'); // "9/8/2009" Tuesday, September 8, 2009
    • string has the opposite of join called split var date = "9/8/2009" date.split('/') // [‘9’,‘8’,‘2009’] Tuesday, September 8, 2009
    • split/join allow for switching back and forth var date = "9/8/2009"; var date_array = date.split('/') // [‘9’,‘8’,‘2009’] var date_string = date_array.join('/'); // “9/8/2009” Tuesday, September 8, 2009
    • reverse reverses the order of an array http://www.w3schools.com/jsref/jsref_reverse.asp Tuesday, September 8, 2009
    • reverse var car = ['r', 'a', 'c']; car.reverse(); // ['c', 'a', 'r'] Tuesday, September 8, 2009
    • sort sorts the elements of an array http://www.w3schools.com/jsref/jsref_sort.asp Tuesday, September 8, 2009
    • sorting numbers var numbers = [5,3,99,77,2]; numbers.sort(); // [2,3,5,77,99] Tuesday, September 8, 2009
    • sorting strings var names = ['John', 'Steph', 'Steve', 'Carrie']; names.sort(); // ['Carrie','John','Steph','Steve'] Tuesday, September 8, 2009
    • upper case before lower case var letters = ['a', 'B', 'c', 'D']; letters.sort(); // ['B','D','a','c'] Tuesday, September 8, 2009
    • pop removes and returns the last element of an array (opposite of shift) http://www.w3schools.com/jsref/jsref_pop.asp Tuesday, September 8, 2009
    • pop var car = ['c', 'a', 'r']; var last = car.pop(); last // 'r' car // ['c','a'] Tuesday, September 8, 2009
    • pop var car = ['c', 'a', 'r']; car.pop(); // 'r' car.pop(); // 'a' car.pop(); // 'c' car.pop(); // undefined car.length // 0 Tuesday, September 8, 2009
    • shift removes and returns the first element of an array (opposite of pop) http://www.w3schools.com/jsref/jsref_shift.asp Tuesday, September 8, 2009
    • shift var car = ['c', 'a', 'r']; var first = car.shift(); first // 'c' car // ['a','r'] Tuesday, September 8, 2009
    • shift var car = ['c', 'a', 'r']; car.shift(); // 'c' car.shift(); // 'a' car.shift(); // 'r' car.shift(); // undefined car.length // 0 Tuesday, September 8, 2009
    • push adds one or more elements to the end of an array and returns the new length (opposite of unshift) http://www.w3schools.com/jsref/jsref_push.asp Tuesday, September 8, 2009
    • push single element var car = ['c','a','r']; car.push('d'); // 4 car // ['c','a','r','d'] Tuesday, September 8, 2009
    • push multiple elements var car = ['c','a','r']; car.push('d', 'e', 'd'); // 6 car // ['c','a','r','d', 'e', 'd'] Tuesday, September 8, 2009
    • unshift adds one or more elements to the beginning of the array and returns the new length (opposite of push) http://www.w3schools.com/jsref/jsref_unshift.asp Tuesday, September 8, 2009
    • unshift single element var car = ['c','a','r']; car.unshift('s'); // 4 car // ['s','c','a','r'] Tuesday, September 8, 2009
    • unshift multiple elements var car = ['c','a','r']; car.unshift('o', 's'); // 5 car // ['o','s','c','a','r'] Tuesday, September 8, 2009
    • shift/unshift pop/push beginning of array end of array Tuesday, September 8, 2009
    • slice slices elements out of an array without changing array Tuesday, September 8, 2009
    • slice parameters array.slice(starting position, index after last position) Tuesday, September 8, 2009
    • slice with one argument var numbers = [1,2,3,4]; numbers.slice(2); // [3, 4] numbers // [1,2,3,4] slices from index to end of array Tuesday, September 8, 2009
    • slice with two arguments var numbers = [1,2,3,4]; numbers.slice(0, 2); // [1, 2] numbers // [1,2,3,4] slices from beginning index to index before second argument Tuesday, September 8, 2009
    • slice with negative second argument var numbers = [1,2,3,4]; numbers.slice(1, -1); // [2, 3] numbers.slice(1, -2); // [2] numbers // [1,2,3,4] negative starts from end and goes backwards Tuesday, September 8, 2009
    • splice adds and removes elements from an array http://www.w3schools.com/jsref/jsref_splice.asp Tuesday, September 8, 2009
    • splice parameters array.splice(index, how many to remove, elements to add) index and how many to remove are required Tuesday, September 8, 2009
    • removing an element from an array var letters = ['a', 'c', 'd']; letters.splice(1, 1); // 'c' letters // ['a','d'] in english: at index 1, remove 1 element Tuesday, September 8, 2009
    • removing multiple elements from an array var letters = ['a', 'c', 'd']; letters.splice(1, 2); // ['c','d'] letters // ['a'] in english: at index 1, remove 2 elements Tuesday, September 8, 2009
    • adding an element to an array var letters = ['a', 'c', 'd']; letters.splice(1, 0, 'b'); // ['a', 'b', 'c', 'd'] in english: at index 1, remove 0 elements, add ‘b’ Tuesday, September 8, 2009
    • adding multiple elements to an array var letters = ['a', 'c', 'd']; letters.splice(1, 0, 'b', 'c'); letters // ['a','b','c','c','d'] in english: at index 1, remove 0 elements, add ‘b’ and ‘c’ Tuesday, September 8, 2009
    • replacing elements in an array var car = ['c', 'a', 'r']; car.splice(0, 1, 'b'); // 'c' car // ['b','a','r'] Tuesday, September 8, 2009
    • var person = {name:'John Doe'}; person.name Tuesday, September 8, 2009
    • var person = {name:'John Doe'}; person.name 'John Doe' Tuesday, September 8, 2009
    • var person = {name:'John Doe'}; person.name = 'Jane Doe'; person.name Tuesday, September 8, 2009
    • var person = {name:'John Doe'}; person.name = 'Jane Doe'; person.name 'Jane Doe' Tuesday, September 8, 2009
    • var person = {name:'John Doe'}; person['name'] Tuesday, September 8, 2009
    • var person = {name:'John Doe'}; person['name'] 'John Doe' Tuesday, September 8, 2009
    • [12, 23, 36].length Tuesday, September 8, 2009
    • [12, 23, 36].length 3 Tuesday, September 8, 2009
    • [12, 23, 36].indexOf(12) Tuesday, September 8, 2009
    • [12, 23, 36].indexOf(12) 0 Tuesday, September 8, 2009
    • [12, 23, 36].indexOf(35) Tuesday, September 8, 2009
    • [12, 23, 36].indexOf(35) -1 Tuesday, September 8, 2009
    • ['b','a','t'].join('') Tuesday, September 8, 2009
    • ['b','a','t'].join('') 'bat' Tuesday, September 8, 2009
    • '9/8/2009'.split('/') Tuesday, September 8, 2009
    • '9/8/2009'.split('/') ['9', '8', '2009'] Tuesday, September 8, 2009
    • var numbers = [1,2,3]; numbers.push(4) numbers Tuesday, September 8, 2009
    • var numbers = [1,2,3]; numbers.push(4) numbers [1,2,3,4] Tuesday, September 8, 2009
    • var numbers = [1,2,3,4]; numbers.shift(); numbers Tuesday, September 8, 2009
    • var numbers = [1,2,3,4]; numbers.shift(); numbers [2,3,4] Tuesday, September 8, 2009
    • var numbers = [2,3,4]; numbers.unshift(1); numbers Tuesday, September 8, 2009
    • var numbers = [2,3,4]; numbers.unshift(1); numbers [1,2,3,4] Tuesday, September 8, 2009
    • var numbers = [2,3,4]; numbers.pop(); numbers Tuesday, September 8, 2009
    • var numbers = [2,3,4]; numbers.pop(); numbers [2,3] Tuesday, September 8, 2009
    • var numbers = [2,3,4]; numbers.splice(1, 0, 1); numbers Tuesday, September 8, 2009
    • var numbers = [2,3,4]; numbers.splice(1, 0, 1); numbers [2,1,3,4] Tuesday, September 8, 2009
    • var numbers = [2,3,4]; numbers.splice(0, 1, 1); numbers Tuesday, September 8, 2009
    • var numbers = [2,3,4]; numbers.splice(0, 1, 1); numbers [1,3,4] Tuesday, September 8, 2009