How to code Tic-Tac-Toe in JavaScript - Tutorial

[@sanmartt2745]

This was a really useful tutorial. I learned a lot of css and JavaScript from this, Thanks

[@ahmadalkordee5879]

its really good ,, thank u very much

[@DevProTips]

Let me know what you guys want to see more of! My code for this video: github.com/DenverCoder1/Tic-Tac-Toe Thanks for watching! If you like tutorials and tips for developers, subscribe to my channel! bit.ly/SubscribeDPT

[@explainerdude4382]

this tutorial really strengthened a lot of core concepts. concerning the "this" keyword, I understand why you assigned it to the ttt variable for the function within the function, but I still don't understand why you couldn't use "this" in the init function.

[@DevProTips]

Thanks, I'm glad it was helpful. I have figured out the reason for why the keyword "this" did not work in the init() function. When "TicTacToe.init()" was called, it was called as the "window.onload()" function. Therefore, "this" was referring to the object calling the function which was "window" and not "TicTacToe". If, instead of "window.onload = TicTacToe.init;", you would write simply "TicTacToe.init();" to call the function, you would be able to use "this" and it would refer to the "TicTacToe" object.

[@DevProTips]

In case you want init() to be called from TicTacToe, but still have it run when window.onload executes, you can write it like this: window.onload = function () { TicTacToe.init(); };

[@explainerdude4382]

@@DevProTips super interesting. you may need to look more into this in case I am misquoting, but I remember hearing "this is not where it is defined, but where it is called". this seems like an example of that because when calling TicTacToe.init() after the declaration of var window.onload(), this would refer to the window object. please correct me if I'm wrong :)

[@DevProTips]

​@@explainerdude4382 There is a mistake in the way I explained it in the video. window.onload() is a function that is automatically called when the window loads. By default, it's empty but it can be redefined as a function of your choice. If window.onload is set to be *equal* to TicTacToe.init, then it's as if you are putting the body of the init function inside the window object and when window.onload() is called, "this" refers to the window object. It is fine to declare window.onload at any time, but in order to make "this" refer to "TicTacToe", the function needs to be called on the TicTacToe object (i.e. TicTacToe.init() is how it is called). Since we are using "defer" on the script, the JavaScript will already load after the rest of the page, so it is not really even necessary to use window.onload in this case. Simply writing "TicTacToe.init()" would be enough.