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 ha...
ARRAY
An array is a data-type that holds an ordered list
of values, of any type:
The length property reports the size of t...
ARRAYS -- RETURNING
VALUES
You can access items with "bracket notation".
The number inside the brackets is called an
"inde...
ARRAYS -- UPDATING
VALUES
You can also use bracket notation to change the
item in an array:
Or to add to an array:
You can...
LOOPS
Sometimes you want to go through a piece of
code multiple times
Why?
Showing a timer count down.
Display the results...
THE WHILE LOOP
The while loop tells JS to repeat statements while
a condition is true:
Review: '++' means increment by 1!
...
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 (i...
LOOPS AND ARRAYS
Use a for loop to easily look at each item in an
array:
var rainbowColors = ['Red', 'Orange', 'Yellow', '...
LET'S DEVELOP IT
Add a new button to the exercise from last
week.
Add an onclick to the button for a function
called favor...
LET'S ANSWER IT<button type="button" onclick="favoriteThings()"> See my favorite things</button>
function favoriteThings()...
LET'S ANSWER IT (BONUS)function favoriteThings(){
var favoriteThings = ['Rabbits', 'Orange', 'Yogurt', 'Brussel Sprouts', ...
OBJECTS
Objects are a data type that let us store a
collection of properties and methods.
var objectName = {
propertyName:...
OBJECTS -- RETURNING
VALUES
Access values of "properties" using "dot
notation":
var charlie = {
age: 8,
name: "Charlie Bro...
OBJECTS -- RETURNING
VALUES
Or using "bracket notation" (like arrays):
Non-existent properties will return undefined:
var ...
OBJECTS -- CHANGING
VALUES
Use dot or bracket notation with the assignment
operator to change objects.
Change existing pro...
ARRAYS OF OBJECTS
Arrays can hold objects too!
That means we can use a for loop!
var peanuts = [
{name: "Charlie Brown",
p...
OBJECTS IN FUNCTIONS
You can pass an object into a function as a
parameter
var peanut ={
name: "Charlie Brown",
pet: "Snoo...
METHODS
Methods are functions that are associated with
an object
The affect or return a value for a specific object
Used w...
METHODS
Methods can be added to objects in two ways.
Declared with the object.
Attached using dot notation.
var charlie = ...
THIS
Inside methods, properties are accessed using
the this keyword.
this refers to the "owner" of the property.
var charl...
LET'S DEVELOP IT
Add another button that calls the function
myFriends() on click.
Add a new function called myFriends to t...
LET'S ANSWER IT<button href = "#" onclick="myFriends()">My friends</button>
function myFriends(){
var friends = [
{name: '...
LET'S ANSWER IT (BONUS)function myFriends(){
var friends = [
{name: 'Santa Claus',
hair: 'red'},
{name: 'Easter Bunny',
ha...
QUESTIONS?
?
GDI Seattle - Intro to JavaScript Class 2
GDI Seattle - Intro to JavaScript Class 2
Upcoming SlideShare
Loading in …5
×

GDI Seattle - Intro to JavaScript Class 2

281 views
229 views

Published on

Instructor: Dallas Tester

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
281
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
3
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

GDI Seattle - Intro to JavaScript Class 2

  1. 1. BEGINNING JAVASCRIPT CLASS 2Javascript ~ Girl Develop It ~
  2. 2. 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
  3. 3. 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);
  4. 4. 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];
  5. 5. 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');
  6. 6. 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.
  7. 7. 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++; }
  8. 8. 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); }
  9. 9. 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]); }
  10. 10. 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
  11. 11. 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); }
  12. 12. 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); }
  13. 13. 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" };
  14. 14. 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;
  15. 15. OBJECTS -- RETURNING VALUES Or using "bracket notation" (like arrays): Non-existent properties will return undefined: var name = charlie['name']; var gender = charlie.gender
  16. 16. 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;
  17. 17. 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 + '.'); }
  18. 18. 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);
  19. 19. 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!");
  20. 20. 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();
  21. 21. 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.
  22. 22. 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
  23. 23. 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. "); } }
  24. 24. 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. "; }
  25. 25. QUESTIONS? ?

×