DrumSensei

betwixt code and music

The Iron Yard - Day 08

Tic-Tac-Toe

In our quest to learn about loops of all kinds, the task at hand is to create a game of tic-tac-toe (also, called "Noughts and Crosses" across the pond) built in JavaScript to run in node on the command line.

Noughts and Crosses


There are some complications to this problem that are not obvious at first. We are making it a two-player game (except for nightmare mode is building an AI to play against). We start off asking for the players' names, and setting the current player to player1. Then the player must enter the coordinates of their move in the format "x y" (yes, with the space). The move is stored in an array that holds three arrays which I am calling gameBoard.

All of that is fairly simple (yet time-consuming) except we need the array to hold the numbers of the coordinate, and the way it was entered is a string. Thankfully, in JavaScript there is a method called
.split that allows a string to be split by a separator, which I defined as " ". This leaves us with a string of two numbers. The trick now is to use parseInt to get the numbers pulled out of the string and put into the array as a numeric value. This was a bit of a logical challenge simply because I had not really used all of these little processes before. However, like my old days as a music educator, I just have to tell myself (instead of the students) that the best way to learn is by doing it!

For the next part, I don't
love the way I constructed it yet. We must determine if the entered information was, in fact, the correct format, an acceptable number (1, 2, or 3), and that no one has taken that location. My solution here is incomplete and inelegant. I will continue to work through it!

I did manage to make the game board print with the correct player's token in the correct spot. That was a huge moment! Also, I have made it successfully switch players and I have gotten as far as declaring a winner if they get a row of their token (still have column, diagonal, and cat left!).

All in all this has been a good week, but I still have to touch up some of the responsive site stuff from earlier this week. I will do that today. We have a campus-wide huddle at 10:00am and
Iron Pints at 3:30pm. Also, I have to take my car in to double-check that the light that came on will be ok. Heading back to BIG D tonight!

Oh... and my oldest child turns thirteen on Sunday. We got old all of a sudden!

The Iron Yard - Day 07

The Iron Yard - Day 07

We have learned about arrays and objects. We are now aware of the matrix...

matrix_screen_saver_by_icyalaska

An array is a data structure that lists information in what we can think of as an ordered list. This might be most useful when needing a list of items such as a cash register needing to access prices or perhaps an inventory. Square brackets are used to start off an array, and all data types can be stored here.

An empty array named
groceries looks like this:
var groceries = [];

An
object is a data structure that functions more like a large bag that holds pieces of information in any order. Objects are central to the more advanced abilities of modern programming languages. The information stored in an object has a label to go with the value. Curly braces indicate the beginning and end of an object, and all data types can be stored here, as well.

An empty object named
kitchen looks like this:
var kitchen = {};

Arrays
We need to insert data into our array, so we will use the method .push() to insert data into the front of the structure. (You can also add data at the end or the middle, as needed.)
groceries.push('milk');
groceries.push('eggs');
groceries.push('bacon');

So our array now looks like this:
['milk', 'eggs', 'bacon']

These values inside the array can be retrieved and used by referring to label of the
position of the value. For instance, milk is at position 0, eggs at position 1, bacon at position 2. (Due to largely historical reasons, many times computer scientists will begin counting with zero.)

If we need to access an element of the array and reassign a new value to the spot that holds milk, that would look like this (pronounced "groceries sub zero):
groceries[0] = 'whole milk';

Objects
Unlike an array, an object is not ordered, so we cannot
push things to the object. Instead we have to access keys that behave as labels for the objects inside the array. If the keys do not already exist, then they will be created as we give them a value. For example:
kitchen.flour = '2lb';
kitchen.eggs = 1;
kitchen.coffee = true;

The above values don't have just a generic label but have a custom label. If we need to access the values inside an object we can access it much like above. If we want to reassign a new value to an object, then that would be identical to the assignment above.

Objects have two ways to retrieve data from inside: dot notation (usually preferred) or curly braces notation.

A
Matrix is created when we store an array as an element inside an array. If we had three arrays stored inside of an array, then that might look something like this:
var matrix = [
[0, 0, 0],
[0, 0, 0],
[0, 0, 0]
]

This could conceivably lead to some rather complex data structures.

Anyone ready for tic-tac-toe?


The Iron Yard - Day 06

The Iron Yard - Day 06

On Tuesday we dove a little deeper into JavaScript discussing boolean operators, the ternary operator, and conditional statements.



We also discussed several scenarios that JavaScript handles in a quirky way. Type coercion in JS has its own rules that will be wonderful to harness once a developer can fully grasp them.

For instance, let's assign a value to the variable "name" and put it into an important sentence.
var name = "Mike";
var statement = name + " is really cool";
var name = "Bob";

One would think that the output would be "Bob is really cool"... Nope, it is still "Mike is really cool". Confused yet? The logic works like this:

Name holds the value "Mike"
Statement holds the value "Mike is really cool"
Name is given a new value of "Bob" which replaces the original of "Mike"
Statement is asked to show the value it contains, which is still "Mike" - we did not put a new value into Statement

Our homework was to use plain JavaScript to create a command line quiz in either normal mode, hard mode, or nightmare mode. We were to include 15 items that covered various HTML, CSS, and JS topics and then tell the user their number correct and percentage. I finished that and made some adjustments to also tell the user which topics they did best in and I made it display the correct answer if the user gets the question wrong. I also added a timer to tell the length of the test. As a bonus, I made a "100" display in ASCII characters if they get every question correct.

The nightmare mode (which I did not employ) asked the developer to make the quiz adaptive based on the success of the answered questions. I could see how this is possible, but my code would have been MUCH longer to make it work.

Now, I am
still working on my HTML forms homework from Monday. I will finish this TODAY!!



The Iron Yard - Day 05 part 2

The Iron Yard - Day 05 part 2

Solidly into week 2 now and things got real. Our JavaScript assignment was pretty straightforward, and I had no issue getting that done. We had to make a table in HTML with some answers to JavaScript questions that Aaron provided to us. My version of the assignment ended up looking very nice. I learned some nifty things about using tables in HTML. Thankfully I have studied a decent amount of JavaScript to prepare for the course. It does tend to make sense to me overall.

Our other assignment has me twisted in knots. It deals with using forms in HTML, just like the little buttons a user will push or the checkboxes you see on a website. I have the page looking
mostly right except a few elements just will not go into the correct place. I could only get about 60% of the way through the homework before I had to sleep. Hopefully this is a situation where things will just click when I approach it again in a bit.

Apparently, radio buttons and their text are nonsense to my brain on a Monday evening. I will have to work overtime to be able to get those up and running!

Breaks are helpful, I am finding. Occasionally you just have to get up and take a walk outside for a few minutes. In fact, your brain is still turning that problem round and round to work on it. Many times I have sat back down and busted out some serious problem-solving skills. Waking up and coding is just as beneficial.

Time to head to Day-06! Woot!