{"id":37945,"date":"2018-05-06T03:01:00","date_gmt":"2018-05-05T17:01:00","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=37945"},"modified":"2018-05-05T16:01:35","modified_gmt":"2018-05-05T06:01:35","slug":"dynamic-javascript-tic-tac-toe-game-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/dynamic-javascript-tic-tac-toe-game-tutorial\/","title":{"rendered":"Dynamic Javascript Tic Tac Toe Game Tutorial"},"content":{"rendered":"
\"Dynamic<\/a>

Dynamic Javascript Tic Tac Toe Game Tutorial<\/p><\/div>\n

Yesterday’s Dynamic Javascript and the YouTube Embedded API Tutorial<\/a> got us thinking about dynamic Javascript, and today we put that concept through its paces by writing another incarnation of the Tic Tac Toe<\/a> (or Noughts and Crosses) game we’ve written a few versions of now. We think this approach of taking a simple concept for a web application and rewriting it in different ways is instructive, and you learn quite a bit doing this, we think. We think in this respect, though, that because things can be deadends in I.T. you should pick simple concepts as the ones you tackle in this way. Even so, we find different ways each time to code the logic of Tic Tac Toe, let alone the changes in coding practices we are exploring each time.<\/p>\n

Today’s “dynamic Javascript” coding involved the use of the Javascript …<\/p>\n


\nsetTimeout<\/a>()
\n<\/code> <\/p>\n

… timer method to give the web application a chance to display the webpage between the “Javascript writes more dynamic Javascript” automated additions to the webpage’s client logic.<\/p>\n

You will see, examining the code, that you could have performed the same logic with different approaches. If so, good, that is you recognising where you can use one technique or another at various places within the web application client logic. The point is, that you should learn early on that there are very often more than one way to solve any programming problem. Not always, but often. Practising lots of different techniques could stand you in good stead when you come across a problem where your new found knowledge fits purposes perfectly.<\/p>\n

It’s not popular in many circles, but we often find Javascript …<\/p>\n


\neval<\/a>()
\n<\/code><\/p>\n

… invaluable to extend “the one to many” Javascript coding logics, but “eval” didn’t feature that way today, as much as it did with yesterday’s Dynamic Javascript and the YouTube Embedded API Tutorial<\/a>.<\/p>\n

Feel free to try the HTML and Javascript initially_andthen.html<\/a>‘s code will be more food for thought, that you can test for yourself at this live run<\/a> link.<\/p>\n

\n

Previous relevant Dynamic Javascript and the YouTube Embedded API Tutorial<\/a> is shown below.<\/p>\n

\"Dynamic<\/a>

Dynamic Javascript and the YouTube Embedded API Tutorial<\/p><\/div>\n

Webpages without Javascript are generally pretty static and boring. Javascript is that dynamic client addition to webpage functionality, but perhaps you only think of it as that statically written part of the webpage unable to be reloaded into effect after that initial webpage load. Well, that is not taking into account Javascript such as …<\/p>\n


\n<script>
\n var tag = document.createElement<\/a>('script');
\n tag.src = \"https:\/\/www.youtube.com\/iframe_api\";
\n var firstScriptTag = document.getElementsByTagName('script')[0];
\n firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
\n<\/script>
\n<\/code><\/p>\n

… taken from the excellent YouTube IFrame Player API<\/a> we really like to use around here to embed and control YouTube<\/a> videos embedded into an HTML iframe<\/a> element.<\/p>\n

In today’s small extension of that we load nine such HTML iframe embedded YouTube videos into a 3×3 grid. We resisted the previous Brady Bunch usage<\/a> of such an arrangement (perhaps you’ll be sad to hear?!) in favour of showing you a “collage” of video snippets from one of my favourite films ever, Mr Smith Goes to Washington<\/a>.<\/p>\n

We hope the HTML and Javascript dynamic_js.html<\/a>‘s code will be food for thought, that you can test for yourself at this live run<\/a> link.<\/p>\n

If this was interesting you may be interested in this<\/a> too.<\/p>\n