GDI Seattle - Intro to JavaScript Class 2

BEGINNING JAVASCRIPT CLASS 2Javascript ~ Girl Develop It ~

WELCOME! Girl Develop It is here to provide affordable and accessible programs to learn software through mentorship and hands-on instruction. Some "rules" We are here for you! Every question is important Help each other Have fun

ARRAY An array is a data-type that holds an ordered list of values, of any type: The length property reports the size of the array: var arrayName = [element0, element1, ...]; var rainbowColors = ['Red', 'Orange', 'Yellow', 'Green', 'Blue', 'Indigo', 'Violet']; var favoriteNumbers = [16, 27, 88]; var luckyThings = ['Rainbows', 7, 'Horseshoes']; console.log(rainbowColors.length);

ARRAYS -- RETURNING VALUES You can access items with "bracket notation". The number inside the brackets is called an "index" Arrays in JavaScript are "zero-indexed", which means we start counting from zero. var arrayItem = arrayName[indexNum]; var rainbowColors = ['Red', 'Orange', 'Yellow', 'Green', 'Blue', 'Indigo', 'Violet']; var firstColor = rainbowColors[0]; var lastColor = rainbowColors[6];

ARRAYS -- UPDATING VALUES You can also use bracket notation to change the item in an array: Or to add to an array: You can also use the push method (recommended): var awesomeAnimals = ['Corgis', 'Otters', 'Octopi']; awesomeAnimals[0] = 'Bunnies'; awesomeAnimals[4] = 'Corgis'; awesomeAnimals.push('Ocelots');

LOOPS Sometimes you want to go through a piece of code multiple times Why? Showing a timer count down. Display the results of a search. Sort a list of values.

THE WHILE LOOP The while loop tells JS to repeat statements while a condition is true: Review: '++' means increment by 1! If we forget x++, the loop will never end! while (expression) { // statements to repeat } var x = 0; while (x < 5) { console.log(x); x++; }

THE FOR LOOP The for loop is a safer way of looping Less danger of an infinite loop. All conditions are at the top! for (initialize; condition; update) { // statements to repeat } for (var i = 0; i < 5; i++) { console.log(i); }

LOOPS AND ARRAYS Use a for loop to easily look at each item in an array: var rainbowColors = ['Red', 'Orange', 'Yellow', 'Green', 'Blue', 'Indigo', 'Violet']; for (var i = 0; i < rainbowColors.length; i++) { console.log(rainbowColors[i]); }

LET'S DEVELOP IT Add a new button to the exercise from last week. Add an onclick to the button for a function called favoriteThings(). Create a new function called favoriteThings() in the JavaScript file. In the function, create an array and loop through the results. Write the results to the document like: "My favorite things are: XX, YY, ZZ" Bonus -- add an 'and' in the sentence before the last item

LET'S ANSWER IT<button type="button" onclick="favoriteThings()"> See my favorite things</button> function favoriteThings(){ var favoriteThings = ['Rabbits', 'Orange', 'Yogurt', 'Brussel Sprouts', 'Otters']; var result = 'My favorite things are: '; for (var i = 0; i < favoriteThings.length; i++) { result += favoriteThings[i] + ', '; } document.write(result); }

LET'S ANSWER IT (BONUS)function favoriteThings(){ var favoriteThings = ['Rabbits', 'Orange', 'Yogurt', 'Brussel Sprouts', 'Otters']; var result = 'My favorite things are: '; for (var i = 0; i < favoriteThings.length; i++) { if (i < favoriteThings.length - 1) { result += favoriteThings[i] + ', '; } else { result += "and " + favoriteThings[i] + '.'; } } document.write(result); }

OBJECTS Objects are a data type that let us store a collection of properties and methods. var objectName = { propertyName: propertyValue, propertyName: propertyValue, ... }; var charlie = { age: 8, name: "Charlie Brown", likes: ["baseball", "The little red-haired girl"], pet: "Snoopy" };

OBJECTS -- RETURNING VALUES Access values of "properties" using "dot notation": var charlie = { age: 8, name: "Charlie Brown", likes: ["baseball", "The little red-haired girl"], pet: "Snoopy" }; var pet = charlie.pet;

OBJECTS -- RETURNING VALUES Or using "bracket notation" (like arrays): Non-existent properties will return undefined: var name = charlie['name']; var gender = charlie.gender

OBJECTS -- CHANGING VALUES Use dot or bracket notation with the assignment operator to change objects. Change existing properties: Or add new properties: You can also delete properties: charlie.name = "Chuck"; charlie.gender = "male"; delete charlie.gender;

ARRAYS OF OBJECTS Arrays can hold objects too! That means we can use a for loop! var peanuts = [ {name: "Charlie Brown", pet: "Snoopy"}, {name: "Linus van Pelt", pet: "Blue Blanket"} ]; for (var i = 0; i < peanuts.length; i++) { var peanut = peanuts[i]; console.log(peanut.name + ' has a pet named ' + peanut.pet + '.'); }

OBJECTS IN FUNCTIONS You can pass an object into a function as a parameter var peanut ={ name: "Charlie Brown", pet: "Snoopy" }; function describeCharacter(character){ console.log(character.name + ' has a pet named ' + character.pet + '.'); } describeCharacter(peanut);

METHODS Methods are functions that are associated with an object The affect or return a value for a specific object Used with dot notation Previously seen example: document.write("Hello, world!");

METHODS Methods can be added to objects in two ways. Declared with the object. Attached using dot notation. var charlie = { name: "Charlie", sayHello: function () { document.write("My name is Charlie."); } }; charlie.sayHello(); var charlie = { name: "Charlie"}; function sayName() { document.write("My name is Charlie."); } charlie.sayHello = sayName; charlie.sayHello();

THIS Inside methods, properties are accessed using the this keyword. this refers to the "owner" of the property. var charlie = { name: "Charlie", sayHello: function () { document.write("My name is " + this.name + "."); } }; var lucy = { name: "Lucy van Pelt", sayHello: function () { document.write("My name is " + this.name + "."); } }; charlie.sayHello(); //My name is Charlie. lucy.sayHello(); //My name is Lucy van Pelt.

LET'S DEVELOP IT Add another button that calls the function myFriends() on click. Add a new function called myFriends to the JavaScript. In the function, create an array of friends objects, with their names and hair colors. Use a for loop to go through each friend and describe them. Write the results to the document. Bonus -- make a separate functions that describe the friends

LET'S ANSWER IT<button href = "#" onclick="myFriends()">My friends</button> function myFriends(){ var friends = [ {name: 'Santa Claus', hair: 'red'}, {name: 'Easter Bunny', hair: 'brown'}, {name: 'Tooth Fairy', hair: 'blue'} ]; var results = "My friends: " for(var i = 0; i < friends.length; i++){ document.write("My friend " + friend[i].name + " has " + friend[i].hair + " hair. "); } }

LET'S ANSWER IT (BONUS)function myFriends(){ var friends = [ {name: 'Santa Claus', hair: 'red'}, {name: 'Easter Bunny', hair: 'brown'}, {name: 'Tooth Fairy', hair: 'blue'} ]; var results = "My friends: " for(var i = 0; i < friends.length; i++){ results += describeFriend(friends[i]); } document.write(results) } function describeFriend(friend){ return "My friend " + friend.name + " has " + friend.hair + " hair. "; }

GDI Seattle - Intro to JavaScript Class 2

GDI Seattle - Intro to JavaScript Class 2

More Related Content

What's hot

Viewers also liked

Similar to GDI Seattle - Intro to JavaScript Class 2

More from Heather Rock

Recently uploaded

GDI Seattle - Intro to JavaScript Class 2