GDI Seattle - Intro to JavaScript Class 2
-
Upload
heather-rock -
Category
Technology
-
view
270 -
download
2
description
Transcript of GDI Seattle - Intro to JavaScript Class 2
BEGINNING JAVASCRIPTCLASS 2
Javascript ~ Girl Develop It ~
WELCOME!Girl Develop It is here to provide affordable andaccessible programs to learn software throughmentorship and hands-on instruction.
Some "rules"
We are here for you!Every question is importantHelp each otherHave fun
ARRAYAn 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 -- RETURNINGVALUES
You can access items with "bracket notation".
The number inside the brackets is called an"index"
Arrays in JavaScript are "zero-indexed", whichmeans 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 -- UPDATINGVALUES
You can also use bracket notation to change theitem 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');
LOOPSSometimes 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 LOOPThe 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 LOOPThe for loop is a safer way of looping
Less danger of an infinite loop. All conditions areat the top!
for (initialize; condition; update) { // statements to repeat }
for (var i = 0; i < 5; i++) { console.log(i); }
LOOPS AND ARRAYSUse 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 ITAdd a new button to the exercise from lastweek.Add an onclick to the button for a functioncalled favoriteThings().Create a new function called favoriteThings() inthe JavaScript file.In the function, create an array and loopthrough the results.Write the results to the document like: "Myfavorite things are: XX, YY, ZZ"Bonus -- add an 'and' in the sentence beforethe 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);}
OBJECTSObjects 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 -- RETURNINGVALUES
Access values of "properties" using "dotnotation":
var charlie = { age: 8, name: "Charlie Brown", likes: ["baseball", "The little red-haired girl"], pet: "Snoopy" };
var pet = charlie.pet;
OBJECTS -- RETURNINGVALUES
Or using "bracket notation" (like arrays):
Non-existent properties will return undefined:
var name = charlie['name'];
var gender = charlie.gender
OBJECTS -- CHANGINGVALUES
Use dot or bracket notation with the assignmentoperator 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 OBJECTSArrays 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 FUNCTIONSYou 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);
METHODSMethods are functions that are associated withan objectThe affect or return a value for a specific objectUsed with dot notation
Previously seen example:
document.write("Hello, world!");
METHODSMethods 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();
THISInside methods, properties are accessed usingthe 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 ITAdd another button that calls the functionmyFriends() on click.Add a new function called myFriends to theJavaScript.In the function, create an array of friendsobjects, with their names and hair colors.Use a for loop to go through each friend anddescribe them.Write the results to the document.Bonus -- make a separate functions thatdescribe 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. ";}
QUESTIONS?
?