Build tic tac toe with javascript (4:11 dc)

Build Tic Tac Toe in Javascript
March 2017
bit.ly/thinkful-tictactoe

About me
• David Coulter
• Frontend developer and product manager for 10 years at
National Geographic, NGP Van, Arcadia Power
• Mentor @ Thinkful

About us
Thinkful prepares students for web development &
data science jobs with 1-on-1 mentorship programs

Programming level (Javascript)
• First lines of code written tonight
• I’ve been coding for a couple months
• I’ve been coding for awhile

Notes for tonight
• Goal is to provide exposure to a more complex
challenge than we normally face as a beginner
• Beginner-friendly, but will be challenging if you’re
completely new to code
• You might only get the answer to one or two
challenges, but we’ll walk through every line of
code and learn through the exposure
• Don’t give up, try to struggle for the answer
• We’ll circulate and answer questions while we’re
working on challenges

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, ﬁlls in an “X”
• Player 2 clicks on another square, ﬁlls in an “O”
• Alert pops up when a player wins, restarts game
• If no one wins, alert pops up, restarts game

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 complex coding
problems
• Your job is to consider trade-offs and choose the most
effective solution (the meaning of effective depends on
circumstances)
• As a beginner, your job is to make it work, and learn in
the process
• We’re going to cut through a lot of those tradeoffs and
make speciﬁc choices for how to design the program

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
273
29214673

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 ﬁgure out what these will need to be?

Answer
These variables track where players are in the game

Javascript 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 ﬁrstItem 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 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.

Javascript Functions — 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;
};
doSomething(“Hi”);

Challenge: “Call” the start new game function
In the init_game() function, call the the start new
game function (replace TODO in init_game)

What do we need to do inside start_new_game
• Set who goes ﬁrst
• Reset the “number_of_moves” to 0
• Reset the scores (stored in scoreXO)
• Clear the boxes of any X’s and O’s
• Let’s do it together on the next slide

Adding click “listeners” to the boxes

Javascript “for” loops
• Used to run same code again and again with different values
• Parameter #1: Executed before the loop starts
• Parameter #2: Deﬁnes the condition for running the loop
• Parameter #3: Executed after the loop is done
• This loop will print “Javascript!” ﬁve times
for (var i = 0; i < 5; i++) {
console.log(“Javascript!”)
};

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”);
}

First For Loop when user clicks
“For” each square, we need to:
• Register that the click happened with a click event
• Get the number that’s attached to the square
• If it’s X’s turn, add to the score for X; if O’s turn, add to the score
for Y
• Add 1 to the number of moves
• Set the content of the square to show X or O
• Let’s walk through this

Question
After each move, what are the three possible outcomes?

Final challenge (maybe) — run the program!

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

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

October 2015
Questions?
dcoulter@thinkful.com
dan@thinkful.com
schedule a call through thinkful.com

Build tic tac toe with javascript (4:11 dc)

More Related Content

What's hot (20)

Similar to Build tic tac toe with javascript (4:11 dc) (20)

Recently uploaded (20)

Build tic tac toe with javascript (4:11 dc)