This document provides an overview of building a virtual pet game using JavaScript. It introduces JavaScript concepts like variables, objects, functions, and conditional statements. It outlines the goals of building a functional pet game to practice programming skills and covers specific coding challenges like adding properties to a pet object and writing functions to feed and exercise the pet. The document also provides context on JavaScript and programming in general.

1. April 2017
Build a Virtual Pet with Javascript
http://bit.ly/tf-js-game-atl

2. About us
We train developers and data scientists
through 1-on-1 mentorship and career
prep programs

3. About me
• Matt Day
• Self-taught developer
• Worked as a photographer
• Taught high school Spanish
• Work as web developer at
Georgia Power
• Current Thinkful Mentor

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 game – emphasis on build
• Practice solving problems like real developers
• Learn JavaScript fundamentals as we use them
• Pick up a touch of jQuery
• Homework!

7. What is programming?
Programming is writing instructions for a computer to
execute. Programming is problem-solving.

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

9. Perception

10. Reality

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

15. Here’s the starter code
http://bit.ly/tf-virtual-pet-starter

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 a name “me”
• Initialize the object with a key “name” and provide your full
name as the value
• Initialize the object with a key “age” with your age as a value
• Feel free to use the example above :)
var pet = { “name”: “Fluffy”, “age”: 10 }

20. Starter code walkthrough
Our pet will be an object. We’ll save that object to a variable

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 put is full
• Change your pet’s hunger from true to false

26. Homework
•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. More about Thinkful
• Anyone who’s committed can learn to code
• 1-on-1 mentorship is the best way to learn
• Flexibility matters — learn anywhere, anytime
• Thinkful only makes money when you get a job

29. More about Thinkful
You’ll learn concepts, practice with drills, and build capstone
projects for your own portfolio — all guided by a personal mentor

30. Our mentors
Mentors have, on average, 10+ years of experience

31. Our results
Job Titles after GraduationMonths until Employed

32. Try us out!
Try the program for two
weeks, includes six mentor
sessions - $50
Learn HTML/CSS/JavaScript
Option to continue onto web
development bootcamp
Come talk to me if you’re
interested (or email me at
jas@thinkful.com)

33. Questions?
email me at jas@thinkful.com