Day 80: More Javascript Loops and Arrays

I'm still working on the arrays quiz.  The quiz has a second part to it, which I plan on working on today.  So, as I was going over the code for the quiz, I thought of a way to solve Euler problem one, I worked on that for some time, and I solved it!  Here's my solution to Euler problem one:

var i = 0;
var total = 0;
for (i = 0; i < 1000; i += 1) {
if(i % 3 === 0 || i % 5 === 0) {
total = total + i;
console.log(total);
}
}
document.write(total)

Stoked!!!  I worked on Euler problem 2 as well today, and I made up some code to create a Fibonacci Sequence!  This is it:

    var fibArray = [1,2];
    for (var i = 0; i < 8; i += 1) {
    var fib1 = fibArray[fibArray.length - 2]
var fib2 = fibArray[fibArray.length - 1]
    var fib = fibArray[fibArray.length - 1] + fibArray[fibArray.length - 2];
    fibArray.push(fib);    
    }
    document.write(fibArray)

The length of the sequence is determined by the i < 8 section of the code, so you can make it go as long as you like.  I had a lot of fun creating that, and I'm really proud of it because I came up with it myself!  Today was extremely productive, while I didn't earn any Treehouse points, I did go over the code for the quiz, solved Euler problem one, and began work on Euler problem 2.  I ordered a book filled with Javascript problems and I can't wait for it to come in!  I want to get to work on the problems as soon as possible, as working on problems is a great way to solidify the concepts involved.

SUMMARY OF CODING SKILLS

Total Treehouse Points: 5,385
Treehouse Points by Subject Matter (Miscellaneous not included): 
HTML:                                663 
CSS:                                1,599 
Design:                            1,193 
Development Tools:            747 
Javascript:                      1,120

Treehouse Ranking (%): "You have more total points than 94% of all students."

Treehouse Badge(s) Earned Today:

Treehouse Courses Completed:
How to Make a Website
HTML
CSS Foundations
CSS Layout Techniques

Aesthetic Foundations
Design Foundations
Adobe Photoshop Foundations
Adobe Illustrator Foundations (66% complete, switched focus from web design to web dev)
Git Basics
Introduction to Programming
Javascript Basics

Codecademy (& other) Courses Completed:
HTML and CSS (Codecademy) 

Books Read or in Progress:
Completed: "Head First HTML and CSS," by E. Robson & E. Freeman
In Progress: "Eloquent JavaScript," by Marijn Haverbeke (On pg 27)
In Progress: "Head First Javascript," by Eric Freeman and Elisabeth Robson (On pg 56)

My Progress on The Odin Project:

1.  Introduction to Web Development             100% Complete

2.  Web Development 101                                29% Complete

3.  Ruby Programming                                       0% Complete

4.  Ruby on Rails                                               0% Complete

5.  HTML5 and CSS3                                           0% Complete

6.  Javascript and JQuery                                  0% Complete

7.  Getting Hired as a Web Developer                 0% Complete

Hours Spent Coding Today: 5.5

Total Hours Coding: 385

Day 79: Javascript Loops and Arrays

Today I continued working on arrays.  I started by reviewing some of yesterday's material, regarding 2 dimensional arrays.  We have a project, making a quiz using an array, that I'm working on.  

1.  The quiz must ask a series of questions and evaluate each answer.
2.  The program should keep track of the number of questions answered correctly.
3.  After all the questions are answered, the program should display the number of questions that were correctly answered and the number that the player got wrong.

Regarding the array.

1.  We should use a two dimensional array to hold the questions and the answers.  
2.  Each element of the array represents one question and is itself an array composed of two elements, the question and the answer.  
3.  Create a two dimensional array with at least three questions in it.  

We must use a loop to:

1.  Cycle through each question, ask it, then compare the response from the player to the answer in the array.
2.  Use the prompt method to ask the question.
3.  Then, use a conditional statement to see if the player's answer matches the real answer. 

When the loop is done, we should know how many answers were correctly answered, and we should print that out to the screen.  Here is the instructor's answer for the quiz:

var questions = [
  ["How many letters in Madrid?", 6],
  ["How many letters is Peter?", 5],
  ["How many letters in beach?", 5],
];

var correctAnswers = 0;
var question;
var answer;
var response;
var html;

function print(message) {
document.write(message);
}

for (var i = 0; i < questions.length; i += 1) {
question = questions[i][0];
answer = questions[i][1];
response = parseInt(prompt(question));
if (response === answer) {
correctAnswers += 1;
}
}

html = "You got " + correctAnswers + " question(s) right.";
print(html); 

Next, we have to make the program keep track of the correctly answered and wrongly answered questions, however, before I move on to that, I'm re-doing the quiz problem above, because the concepts that are involved, and the complexity (relative to prior exercises) is really interesting to me, so I want to explore it in depth, by coding it again several times, before I move on.  I actually printed out the code above, and I'm taking it to bed with me to read over and over, to fully grasp every section of it.

SUMMARY OF CODING SKILLS

Total Treehouse Points: 5,385
Treehouse Points by Subject Matter (Miscellaneous not included): 
HTML:                                663 
CSS:                                1,599 
Design:                            1,193 
Development Tools:            747 
Javascript:                      1,120

Treehouse Ranking (%): "You have more total points than 94% of all students."

Treehouse Badge(s) Earned Today:

Treehouse Courses Completed:
How to Make a Website
HTML
CSS Foundations
CSS Layout Techniques

Aesthetic Foundations
Design Foundations
Adobe Photoshop Foundations
Adobe Illustrator Foundations (66% complete, switched focus from web design to web dev)
Git Basics
Introduction to Programming
Javascript Basics

Codecademy (& other) Courses Completed:
HTML and CSS (Codecademy) 

Books Read or in Progress:
Completed: "Head First HTML and CSS," by E. Robson & E. Freeman
In Progress: "Eloquent JavaScript," by Marijn Haverbeke (On pg 27)
In Progress: "Head First Javascript," by Eric Freeman and Elisabeth Robson (On pg 56)

My Progress on The Odin Project:

1.  Introduction to Web Development             100% Complete

2.  Web Development 101                                29% Complete

3.  Ruby Programming                                       0% Complete

4.  Ruby on Rails                                               0% Complete

5.  HTML5 and CSS3                                           0% Complete

6.  Javascript and JQuery                                  0% Complete

7.  Getting Hired as a Web Developer                 0% Complete

Hours Spent Coding Today: 4

Total Hours Coding: 379.5

Day 78: Head First Javascript and Treehouse Arrays Course

An array is a data structure, in other words, it's a way to store and organize information.  An array can hold a single string, 50 numbers, or any combination of data types, including strings, numbers, booleans, and other arrays.  We create an array like so:

var myCoolArray = ["orange", "apple", "coconut", "banana"];

This can also be expressed like so:

var myCoolArray = ["orange", 
"apple", 
"coconut",
"banana"]; 

White spaces are fine in javascript.  When locating items in an array, the first item is indexed as 0, the second as 1, and so forth.  So, to log the "orange" string, I would do this:

console.log(myCoolArray[0]);

I've made a lot of changes to my work area lately.  I purchased a comfortable office chair for a little over $200.  My previous office chair broke several months ago and I threw it away, and since then, I had been using a foldable metal wal-mart chair, but the problem was that every 15 to 20 minutes or so, it would make my legs hurt, as it would cut off their blood flow by putting pressure on my upper thighs.  This was not good, but I just compensated by studying at coffee shops most of the time.  I did that until I decided that I needed to invest in a good chair.  So I tested out over 50 chairs at various stores, until I found one that fit my body perfectly.  I'm happy to say that since I purchased that chair, my studying has increased dramatically.  I also bought a plastic mat so that the chair can roll around easily on the carpet.  This investment in ergonomics has been extremely worthwhile, and I wish I had done it sooner.  

I also just placed an order for a laptop stand because I am tall, and currently, my neck is at an awkward position whenever I look at my macbook's screen.  It's fine when I look at the second monitor, but not when I have to look down at the macbook.  Even as I type this, my neck is uncomfortable, because I keep the blog on the macbook screen and the work I'm currently working on on the second monitor.  The laptop stand has excellent reviews, including some from other tall people which praise its performance in regards to ameliorating neck strain.  Although these kinds of topics don't really come up when discussing learning how to code, they're actually extremely important, and I just wish I had realized it sooner.  As a developer, we need to be aim for optimum ergonomics in order to prevent short term fatigue and long term health problems.

Back to arrays!  We used the .length property will output the number of letters in a string or the number of items in an array, for example.  After lots of playing around, I entered this code in Codepen, which I started using again today:

var numbers = [1,2,3,4,5,6];
numbers[numbers.length] = 3;
document.write([numbers.length]);

document.write(numbers[6]);

The output is:

73 

So let me explain how we ended up with an output of 73.  The first line of code creates the array.  The array has 6 items within.  The first item is the number 1, and it has an index value of 0.  The last item is the number 6, and it has an index value of 5.  Now, the second line calls the array, then adds an item at the end of the array, and that item is the number 3.  So, at this point, the number three is the 7th item in the array, which has an index value of 6.  Now, the third line in the code calls length of the array (and displays it on screen via calling the .write method on the document object), which is 7, because there are 7 items in the array now (we added the 7th item, 3, which has an index value of 6).  The final line of code calls the item in the numbers array with an index value of 6, which is 3, because the 7th item in the array is 3, and 3 has an index value of 6.

Neat!  It took me a bit of playing with the array to get a hang for that.  Hopefully that wasn't too confusing.  You can use the .push method to add an item or items to the end of an array.  Like so:

numbers.push("teacup");

The code above would result in (adding to the prior example):

var numbers = [1,2,3,4,5,6,3,"teacup"];

The .push() method also returns the length of the array.  The opposite, the method to add an item or items to the beginning of an array, is the .unshift method, which has an odd name.  The .pop() method "pops" the last item in an array off.  While it does this, it also returns that item, so you can save the item by creating a variable like so:

var lastItem = numbers.pop();

In that case, lastItem would hold the number 3, as that was the last item in the array.  The .shift() method is like the .pop() method, except it removes (and returns) the first item in an array.  As an aside, properties like .length do not require parentheses after the property, but methods like .pop() do.  There are nearly two dozen array methods.  The .join() method takes an array and returns a string with all the items in an array separated by a supplied character such as a comma or colon.  Like this:

numbers.join(", ");

Would return the contents of the array, separate by a comma and a space (the comma and the space will appear after each item in the array except for the last one).  The .concat() method will return the result of the array it is called on with the array inside the parentheses added after the other array, but it does not actually change either array.  The next method is .indexOf(), which will return the index number of the item that you enter into the parentheses, if the item is found in the array.

The class recommended that, in regards to working on projects, we code, then test the code before moving on, then code some more, test the code before moving on, and so on and so forth.  This technique is helpful in catching errors.  This is some of the code we worked on:

var inStock = [ 'apples', 'eggs', 'milk', 'cookies', 'cheese', 'bread', 'lettuce', 'carrot', 'broccoli', 'pizza', 'potato', 'crackers', 'onion', 'tofu', 'frozen dinner', 'cucumber'];
var search;

function print(message) {
  document.write( '<p>' + message + '</p>');
}

while (true) {
  search = prompt ("Search for a product in our store.  Type 'list' to show all of the produce and 'quit' to exit");
    search = search.toLowerCase();
  if ( search === 'quit') {
    break;
  } else if ( search === 'list') {
    print( inStock.join(", ") );
  }
    else {
      if ( inStock.indexOf( search) > - 1) {
        print( "Yes, we have " + search + " in the store.");
      }
      else {
        print( search + " is not in stock.");
      }
    }

}

It's a shopping/grocery store program which uses prompts to check on inventory.  When accessing arrays within arrays, the format is like so:

myArrayName[3][4];

The three corresponds to the index value of item in the array (in this case also an array), and the 4 corresponds to the index value of the item inside of the array inside of the array.  This is called a two dimensional array.  The class continues with an assignment to build a quiz using two dimensional arrays and the prompt() method, but I will set things down for now.  I had a very productive day, now I'm going to enjoy a show or movie in bed while I mull over the quiz in the background of my mind.  Tomorrow will be a great day, I'm looking forward to waking up early and solving the next challenge!

SUMMARY OF CODING SKILLS

Total Treehouse Points: 5,385
Treehouse Points by Subject Matter (Miscellaneous not included): 
HTML:                                663 
CSS:                                1,599 
Design:                            1,193 
Development Tools:            747 
Javascript:                      1,120

Treehouse Ranking (%): "You have more total points than 94% of all students."

Treehouse Badge(s) Earned Today:

Treehouse Courses Completed:
How to Make a Website
HTML
CSS Foundations
CSS Layout Techniques

Aesthetic Foundations
Design Foundations
Adobe Photoshop Foundations
Adobe Illustrator Foundations (66% complete, switched focus from web design to web dev)
Git Basics
Introduction to Programming
Javascript Basics

Codecademy (& other) Courses Completed:
HTML and CSS (Codecademy) 

Books Read or in Progress:
Completed: "Head First HTML and CSS," by E. Robson & E. Freeman
In Progress: "Eloquent JavaScript," by Marijn Haverbeke (On pg 27)
In Progress: "Head First Javascript," by Eric Freeman and Elisabeth Robson (On pg 56)

My Progress on The Odin Project:

1.  Introduction to Web Development             100% Complete

2.  Web Development 101                                29% Complete

3.  Ruby Programming                                       0% Complete

4.  Ruby on Rails                                               0% Complete

5.  HTML5 and CSS3                                           0% Complete

6.  Javascript and JQuery                                  0% Complete

7.  Getting Hired as a Web Developer                 0% Complete

Hours Spent Coding Today: 5.5

Total Hours Coding: 375.5

Day 77: Head First Javascript and Treehouse Javascript Loops Course

Today I continued working on the battleship game.  

As a side note, I'm changing my study habits to a goal of 4 hours a day, instead of 4.5, because round numbers are more pleasant to work with, lol.  I'll probably do an extra .5 today just to end up with a total number of hours that's a whole number.  What I like about a 4 hours goal is that if I do a "double" shift on some days, it comes out to the usual 8 hr workday, and if I do a "triple" shift, it comes out to 12 hours, which still leaves time for comfortable meals, a little socializing, and an errand or two.  I think it's an overall improvement, the main drawback is that I end up "short" 3.5 hours a week, but as long as I can squeeze in one "double" shift a week, that becomes  a non-issue in regards to my goal of 1000 hours by July 29th, 2015.

All right, I have quite a lot of work to do, back to the battleship game!  

I was introduced to the do while loop today.  It's similar to the do while loop, except that the do while loop always runs at least once, unlike the while loop, which may not run even once if the condition is not met the first time the code is run.

Programmers call the process of improving a program "refactoring."  I completed a Treehouse badge today, "Javascript Loops."

SUMMARY OF CODING SKILLS

Total Treehouse Points: 5,280
Treehouse Points by Subject Matter (Miscellaneous not included): 
HTML:                                663 
CSS:                                1,599 
Design:                            1,193 
Development Tools:            747 
Javascript:                      1,015

Treehouse Ranking (%): "You have more total points than 94% of all students."

Treehouse Badge(s) Earned Today:
Javascript Loops

Treehouse Courses Completed:
How to Make a Website
HTML
CSS Foundations
CSS Layout Techniques

Aesthetic Foundations
Design Foundations
Adobe Photoshop Foundations
Adobe Illustrator Foundations (66% complete, switched focus from web design to web dev)
Git Basics
Introduction to Programming
Javascript Basics

Codecademy (& other) Courses Completed:
HTML and CSS (Codecademy) 

Books Read or in Progress:
Completed: "Head First HTML and CSS," by E. Robson & E. Freeman
In Progress: "Eloquent JavaScript," by Marijn Haverbeke (On pg 27)
In Progress: "Head First Javascript," by Eric Freeman and Elisabeth Robson (On pg 56)

My Progress on The Odin Project:

1.  Introduction to Web Development             100% Complete

2.  Web Development 101                                29% Complete

3.  Ruby Programming                                       0% Complete

4.  Ruby on Rails                                               0% Complete

5.  HTML5 and CSS3                                           0% Complete

6.  Javascript and JQuery                                  0% Complete

7.  Getting Hired as a Web Developer                 0% Complete

Hours Spent Coding Today: 4.5

Total Hours Coding: 370

Day 76: Head First Javascript

Today I continued with the Head First Javascript book, starting on pg 29, where I left off yesterday.  I started off the day working on a "99 Bottle of Beer on the Wall" game. 

This is the original version:

var word = "bottles"; 
var count = 99; 
while (count > 0) {
console.log(count + " " + word + " of beer on the wall,"); 
console.log(count + " " + word + " of beer,"); 
console.log("Take one down, pass it around,");
count = count - 1;
if (count > 0) {
console.log(count + " " + word + " of beer on the wall.");
} 
else {
console.log("No more " + word + " of beer on the wall.");
} 
}

This is my version, correcting the grammar for when there is only one bottle of beer left on the wall:

var word = "bottles"; 
var word1 = "bottle";
var count = 99; 
while (count > 0 && count > 1) {
console.log(count + " " + word + " of beer on the wall,"); 
console.log(count + " " + word + " of beer,"); 
console.log("Take one down, pass it around,");
count = count - 1;
if (count > 1) {
console.log(count + " " + word + " of beer on the wall.");
}
else if (count === 1) {
console.log(count + " " + word1 + " of beer on the wall.");
console.log(count + " " + word1 + " of beer on the wall,"); 
console.log(count + " " + word1 + " of beer,"); 
console.log("Take one down, pass it around,");
console.log("No more " + word + " of beer on the wall.");
}
else {
console.log("No more " + word + " of beer on the wall.");
} 
} 

That was a fun little exercise and a great way to start my day!  My next assignment is to build a Battleship-like game using javascript.  I set up the index.html file, inserted the link to the external javascript file, and created the external javascript file (battleship.js).  The link is like so:

<script src="battleship.js"><script>

I inserted that script right above the closing body tag, where the current standard practice recommends links to external javascript code be inserted.  One of the reasons this was recommended as an ideal insertion point is that it allows the webpage to load for the user before any javascript code is processed, so the user can have something to look at in case the code takes some time to process.  Sounds reasonable.  

When creating a variable, we don't have to necessarily give it a value, and if we don't, then javascript will default the variable to a value of undefined.  

SUMMARY OF CODING SKILLS

Total Treehouse Points: 5,151
Treehouse Points by Subject Matter (Miscellaneous not included): 
HTML:                                663 
CSS:                                1,599 
Design:                            1,193 
Development Tools:            747 
Javascript:                         916

Treehouse Ranking (%): "You have more total points than 91% of all students."

Treehouse Badge(s) Earned Today:

Treehouse Courses Completed:
How to Make a Website
HTML
CSS Foundations
CSS Layout Techniques

Aesthetic Foundations
Design Foundations
Adobe Photoshop Foundations
Adobe Illustrator Foundations (66% complete, switched focus from web design to web dev)
Git Basics
Introduction to Programming
Javascript Basics

Codecademy (& other) Courses Completed:
HTML and CSS (Codecademy) 

Books Read or in Progress:
Completed: "Head First HTML and CSS," by E. Robson & E. Freeman
In Progress: "Eloquent JavaScript," by Marijn Haverbeke (On pg 27)
In Progress: "Head First Javascript," by Eric Freeman and Elisabeth Robson (On pg 51)

My Progress on The Odin Project:

1.  Introduction to Web Development             100% Complete

2.  Web Development 101                                29% Complete

3.  Ruby Programming                                       0% Complete

4.  Ruby on Rails                                               0% Complete

5.  HTML5 and CSS3                                           0% Complete

6.  Javascript and JQuery                                  0% Complete

7.  Getting Hired as a Web Developer                 0% Complete

Hours Spent Coding Today: 4.5

Total Hours Coding: 365.5

Day 75: Head First Javascript

All right, so now that I'm refocused, today's work began with the Head First Javascript book.  I already had an idea of what compiling meant, but the book defined it.  Compiling is the process through which your code goes through which produces a machine efficient representation of it, usually optimized for runtime performance.  With conventional languages like C, C++, or Java, you compile the code before you execute it.  Scripting languages, like javascript, are typically interpreted, which means the browser runs each line of code as it gets to it.  Scripting languages place less importance on runtime performance, and are more geared towards tasks like prototyping, interactive coding, and flexibility.  In the early days of javascript, performance was not so great due to this, but in recent years however, browser manufacturers have made it so that javascript, an interpreted language, can be compiled on the fly.

So, with javascript, you now have the conveniences of a scripting language, while enjoying the performance of a compiled language.  The word ECMA Script will pop up every so often when learning about javascript.  ECMAScript is the standard language definition for all javascript implementations.  The current implementation is ECMAScript 5, and ECMAScript 6 is currently being worked on.

A keyword is a reserved word in javascript, like var, function, true, false, break, or delete, for example.  We cannot use these keywords as names for variables.  In javascript, case does matter, so if we use two sample variable names, thisVariable and thisvariable, they would be treated as two different variables.  Although we are allowed to begin variable names with _ and $, we should avoid doing so.  

We wrote a simple function:

var total3 = 3
var total5 = 5

function finalTotal() {
document.write(total3 * total5);
}

finalTotal();

We went over while loops, and this reminded me of my Project Euler problem, which I need to solve, so I started working on a solution.  My first Project Euler Problem is this: 

If we list all the natural numbers below 10 that are multiples of 3 or 5, we get 3, 5, 6 and 9. The sum of these multiples is 23.  Find the sum of all the multiples of 3 or 5 below 1000.

This is what I have so far:

 Multiples of 3

i = 0
while (i < 999) {
var i = i + 3;
document.write(i);
}

Multiples of 5

i = 0
while (i < 999) {
var i = i + 5;
document.write(i);

}

So, I'm able to get the necessary numbers to appear on the screen, but I have to figure out how to add the result of each loop iteration to the result of the prior loop iteration, and then, add the results of both loops to each other.  It's a start!

I learned that DOM stands for Document Object Model, but we didn't go into what exactly this means.

SUMMARY OF CODING SKILLS

Total Treehouse Points: 5,151
Treehouse Points by Subject Matter (Miscellaneous not included): 
HTML:                                663 
CSS:                                1,599 
Design:                            1,193 
Development Tools:            747 
Javascript:                         916

Treehouse Ranking (%): "You have more total points than 91% of all students."

Treehouse Badge(s) Earned Today:

Treehouse Courses Completed:
How to Make a Website
HTML
CSS Foundations
CSS Layout Techniques

Aesthetic Foundations
Design Foundations
Adobe Photoshop Foundations
Adobe Illustrator Foundations (66% complete, switched focus from web design to web dev)
Git Basics
Introduction to Programming
Javascript Basics

Codecademy (& other) Courses Completed:
HTML and CSS (Codecademy) 

Books Read or in Progress:
Completed: "Head First HTML and CSS," by E. Robson & E. Freeman
In Progress: "Eloquent JavaScript," by Marijn Haverbeke (On pg 27)
In Progress: "Head First Javascript," by Eric Freeman and Elisabeth Robson (On pg 29)

My Progress on The Odin Project:

1.  Introduction to Web Development             100% Complete

2.  Web Development 101                                29% Complete

3.  Ruby Programming                                       0% Complete

4.  Ruby on Rails                                               0% Complete

5.  HTML5 and CSS3                                           0% Complete

6.  Javascript and JQuery                                  0% Complete

7.  Getting Hired as a Web Developer                 0% Complete

Hours Spent Coding Today: 4.5

Total Hours Coding: 361