build tic tac toe with javascript (3:28)
TRANSCRIPT
Build Tic Tac Toe in Javascript
March 2017
http://bit.ly/thinkful-tic-tac-toe
About me
• Jasjit Singh
• Self-taught developer
• Worked in finance & tech
• Co-Founder Hotspot
• Thinkful General Manager
About us
Thinkful prepares students for web development & data science jobs with 1-on-1 mentorship programs
Notes for tonight
• Made for beginners, but it will be challenging
• Don’t give up, try to struggle for the answer
• We will probably be going over 1.5 hours :(
• But… we’ll be here after for one-on-one help
• Ask for help if you’re confused
Junior Mentors
Matt Sebastian Connor Erikson Jacob Askew
Format for tonight
• Crash course on a concept
• See how it is implemented in the code
• Try a challenge in the starter code
User story
• Opens to a blank 3 x 3 grid
• Player 1 clicks on a square, fills in an “X”
• Player 2 clicks on another square, fills in an “O”
• Alert pops up when a player wins, restarts game
• If no one wins, alert pops up, restarts game
Creating the board
HTML overview
HTML elements usually consist of an opening tag, closing tag, and some content. These elements also have attributes.
<table border=“1”> #html element starts here
<tr> #body element starts here
<td height=“50” width=“50”></td> #this is an HTML element
</tr> #body element ends here
</table> #html element ends here
Starter code
• We’ve done this for you
• Everything from now on will be Javascript!
• JSFiddle: http://bit.ly/tic-tac-toe-starter-code
Note on different approaches
• There are many ways to solve coding problems
• Your job is to make the right trade-offs
• Here’s our preferred way…
Our approach
1 2 4
8 16 32
64 128 256
Each square is given a value so that if you add up any combination of values, you’ll get a different number
Our approach
1 2 4
8 16 32
64 128 256
After each turn, we’ll add up the “score” for each player to see if they win (i.e. add up to a winning number)
7
56
84
448
27329214673
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…
• Variables also help us manage state (turn = “X”)
var firstVariable = “hello world”;
Challenge: What variables do we need?
We’ll be using three main variables throughout the program to “manage state”. What do we want to remember for the whole program?
Can you figure out what these will need to be?
Answer
These variables track where players are in the game
Javascript 101 — Arrays
• With arrays we can store a list of items in a single variable
• We use “brackets” to refer to an array in our code
• The stored item can be a number, string, array, object, etc…
• Each array is “indexed” and starts with 0, then 1, etc
• var firstItem = wins[0] saves 5 to firstItem variable
• What will wins[2] return?
var wins = [5, 10, 15];
Challenge: Fill in “wins” variable
In your starter code, set the win variable to an array with the list of winning scores
Answer
wins = [7, 56, 84, 73, 146, 273, 292, 448]
Adding a second array…
<td> <td> <td>
<td> <td> <td>
<td> <td> <td>
[<td>,<td>,<td>,<td>,<td>,<td>,<td>,<td>,<td>]
Javascript 101 — Functions
• A function is a block of code that can be executed
• You declare a function by defining a name for it (see above)
• You can call that function by adding doSomething()to code
• Javascript has a lot of built-in functions (alert(“Hello”))
function doSomething () {alert(“it’s done”);
};
Javascript 101 — Parameters and Return
• You can also send a “parameter” to the function (the input)
• You can also “return” a value from the function (the output)
function doSomething (string) {return string;
};
Challenge: “Call” the start new game function
In the init_game() function, call the the start new game function (replace TODO in init_game)
Answer
Another (quick) challenge
Answer
Javascript 101: Objects
• Data structure with a “key” and a “value”
• The “key” is always a string, “value” can by anything*
• Can have many different kinds of values in an object
• For example, score[“X”] would return 0
• To add a new value, score[“T”] = 0;
score = { “X”: 0, “O”: 0 }
Score will be tracked with an object…
Adding click “listeners” to the boxes
Javascript 101 — “For” loops
• Used to run same code again and again with different values
• Parameter #1: Executed before the loop starts
• Parameter #2: Defines the condition for running the loop
• Parameter #3: Executed after the loop is done
• This loop will print “Javascript!” five times
for (var i = 0; i < 5; i++) {console.log(“Javascript!”)
};
First For Loop
Challenge (trickier!)
Answer
Javascript 101: 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”);
}
Question
After each move, what are the three possible outcomes?
Challenge (even trickier!)
Answer
Another challenge
Answer
Final challenge (maybe) — run the program!
Answer
Bonus!
Another Bonus!
There’s a massive bug in our code (to keep it simpler). Can you figure out what it is?
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
• We only make money when you get a job
Our Program
You’ll learn concepts, practice with drills, and build capstone projects for your own portfolio — all guided by a personal mentor
Our Mentors
Mentors have, on average, 10+ years of experience
Our Results
Job Titles after GraduationMonths until Employed
Special Introductory Offer
• Two-week program, includes six mentor sessions for $50
• Starts with HTML/CSS/Javascript
• Option to continue into full web development bootcamp
• Talk to me (or email me) if you’re interested
