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 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:
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,
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 ={
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",
document.write("My name is " + this.name + ".");
}
};
var lucy = {
name: "Lucy van Pelt",
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

More Related Content

What's hot (18)

Viewers also liked (8)

Similar to GDI Seattle - Intro to JavaScript Class 2 (20)

More from Heather Rock (6)

Recently uploaded (20)

GDI Seattle - Intro to JavaScript Class 2