Tic tac toe

1. Build Tic Tac Toe in Javascript
March 2017
http://bit.ly/thinkful-tic-tac-toe

2. About me
• Jasjit Singh
• Self-taught developer
• Worked in finance & tech
• Co-Founder Hotspot
• Thinkful General Manager

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

4. 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

5. Junior Mentors
Matt Sebastian Connor Erikson Jacob Askew

6. Format for tonight
• Crash course on a concept
• See how it is implemented in the code
• Try a challenge in the starter code

7. 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

8. Creating the board

9. 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

10. Starter code
• We’ve done this for you
• Everything from now on will be Javascript!
• JSFiddle: http://bit.ly/tic-tac-toe-starter-code

11. 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…

12. 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

13. 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

14. 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”;

15. 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?

16. Answer
These variables track where players are in the game

17. 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];

18. Challenge: Fill in “wins” variable
In your starter code, set the win variable to an array with
the list of winning scores

19. Answer
wins = [7, 56, 84, 73, 146, 273, 292, 448]

20. Adding a second array…
<td> <td> <td>
<td> <td> <td>
<td> <td> <td>
[<td>,<td>,<td>,<td>,<td>,<td>,<td>,<td>,<td>]

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

22. 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;
};

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

24. Answer

25. Another (quick) challenge

26. Answer

27. 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 }

28. Score will be tracked with an object…

29. Adding click “listeners” to the boxes

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

31. First For Loop

32. Challenge (trickier!)

33. Answer

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

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

36. Challenge (even trickier!)

37. Answer

38. Another challenge

39. Answer

40. Final challenge (maybe) — run the program!

41. Answer

42. Bonus!

43. Another Bonus!
There’s a massive bug in our code (to keep it simpler).
Can you figure out what it is?

44. 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

45. Our Program
You’ll learn concepts, practice with drills, and build capstone
projects for your own portfolio — all guided by a personal mentor

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

47. Our Results
Job Titles after GraduationMonths until Employed

48. 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

49. October 2015
Questions?
jas@thinkful.com
schedule a call through thinkful.com