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?

?