4. What’s your goal?
• Do you want to start working in tech?
• Do you have an idea that you want to build?
• Do you want to work better with developers?
5. What’s your programming background?
• First lines of code will be written tonight?
• Been self teaching for 1-3 months?
• Been at this for 3+ months
6. Goals
• Build a functional virtual pet – emphasis on build
• Practice solving problems like real developers
• Learn JavaScript fundamentals as we use them
• Homework!
8. Programming is a process
1. Defining problems
2. Finding solutions to those problems
3. Implementing those solutions in a language your
computer can understand
11. Brief history of Javascript
• Written by Brendan Eich in 1995 for Netscape
• Initial version written in 10 days
• Completely unrelated to Java, named as a marketing
stunt because Java was “hot” at the time
• Continues to evolve under guidance of ECMA
International, driven by browser makers
12. Javascript today
• Only programming language to become standard in browsers
• Huge community of developers, libraries and frameworks
• Fairly easy syntax, though quirky
• Lots of job opportunities
13. What are we going to build?
We’re going to build a virtual pet (like a tomigachi). In
our initial version, we’ll be able to change our pet’s
settings and feed our pet
14. Note on where to write you code
When working as a programmer, you’ll use a text editor
or an “Integrated Development Environment” (IDE).
Tonight we’re using JSBin so we can skip setup, see
results immediately and easily share code
16. Javascript 101 — Variables
• A variable is a name that is attached to a value
• Gives us a shorthand way to refer to it elsewhere
• Can be string, number, boolean, objects, and arrays…
var firstVariable = “hello world”;
17. Javascript 101: Objects
• Data structure with a “key” and a “value”
• Define an object by writing an opening curly branch and a
closed curly brace
• The “key” is always a string, “value” can by any anything*
• Keys and value pairs are separated by commas
• Can have many different kinds of values in the same object
with as many key-value pairs are you'd like
var pet = { “name”: “Fluffy”, “age”: 10 }
18. Javascript 101: Objects
• To add an item to an object: pet[‘weight’] = 5
• To retrieve name of pet: pet.name or pet[‘name’]
var pet = { “name”: “Fluffy”, “age”: 10 }
19. Quick challenge
• In a new JSBin file, create an object with the name “pet”
• Initialize the object with a key “name” and provide a name for
your pet
• Add keys for “hungry”, “weight”, “age”, and “photo”
• Set “hungry” to true
• Feel free to use the example above :)
var pet = {
'name' : "",
'hungry' : true,
'weight' : 0,
'age' : 0,
'photo': "",
};
21. Challenge
• Add a name for your pet
• Add an age & weight to your pet object
• Add a “photo” (we’ve given some options at the top)
• Retrieve the name of your pet (use the console)
22. Javascript Functions
function doSomething () {
alert(“it’s done”);
};
doSomething();
A function lets you separate your code into bite-sized
pieces which you can use over again.
When you write a function to use later, you are
“declaring” it. When you use (or run) that function you
are “calling” it.
23. Javascript Functions — Parameters and Return
function addTwoNumbers (numberOne, numberTwo) {
return numberOne + numberTwo;
};
addTwoNumbers(2, 3);
•We sometimes pass a parameter and return a value.
Parameters let us call a function multiple times with
different inputs in order to get different outputs.
•return sends back a value to wherever the function
was called from
24. Javascript If/Else Statements
• Enables program to do different things based on conditions
• You can use if, else if or else
• If the statement in parentheses is true, it will execute that block
• Otherwise the program will move to the next block
if (turn == “O”) {
console.log(“It’s O’s turn”);
} else if (turn == “X”) {
console.log(“It’s X’s turn”);
} else {
console.log(“It’s no one’s turn”);
}
25. Challenge
• Complete the feed(pet) function in the starter code
• When your pet is hungry, you should print out to the console
(console.log) a statement saying your pet is full
• Change your pet’s hunger from true to false
26. More challenges
•Write a function called “exercise” which reduces
your pet’s weight
•Write a function that returns your pet’s bio
27. General learning tips for coding
• Google is your friend
• Practice at the edge of your abilities
• Ignore the hot new thing — depth matters more than breadth
28. Ways to keep learningLevelofsupport
Learning methods
29. 1-on-1 mentorship enables flexibility
325+ mentors with an average of 10
years of experience in the field
32. Try us out!
• Initial 2-week trial
includes six mentor
sessions for $50
• Learn HTML/CSS and
JavaScript
• Option to continue
onto web
development
bootcamp
• Talk to me (or email
jasjit@thinkful.com) if
you’re interested
