Friday, January 23, 2015

Day 65: Javascript Functions (Codecademy)

I started the day off with the Introduction to Functions course in Codecademy.  I started the day by using the return keyword:

// Parameter is a number, and we do math with that parameter
var timesTwo = function(number) {
    return number * 2;
};

// Call timesTwo here!
var newNumber = timesTwo(5)
console.log(newNumber);

The output was 10.  Note how the value returned from timesTwo() is automatically assigned into newNumber.  This was my next function, using the return keyword (remember the % sign means modulo).

// Define quarter here.
var quarter = function(number) {
    return number / 4;
}

if (quarter(24) % 3 === 0 ) {
  console.log("The statement is true");
} else {
  console.log("The statement is false");

}

The output is:

The statement is true

I then created a function for finding the perimeter of a box:

// Write your function starting on line 3

var perimeterBox = function(length, width) {
    return ((length * 2) + (width * 2));
};

console.log(perimeterBox(4, 2));

The output in this case was 12.

Variables defined inside of a function are local variables, while variables defined outside of a function are global variables.  The var keyword creates a new variable in the current scope.  That means if var is used outside a function, that variable has a global scope.  If var is used inside a function, that variable has a local scope.  This input shows this concept:

var my_number = 7; //this has global scope

var timesTwo = function(number) {
    var my_number = number * 2;
    console.log("Inside the function my_number is: ");
    console.log(my_number);
}; 

timesTwo(7);

console.log("Outside the function my_number is: ")

console.log(my_number);

The output is:

Inside the function my_number is:
14
Outside the function my_number is:
7

I entered this function:

var nameString = function (name) {
    return("Hi, I am" + " " + name);
};

console.log(nameString("Adan"));

And the output was:

Hi, I am Adan

This was the next function:

var sleepCheck = function(numHours) {
    if (numHours >= 8) {
        return("You're getting plenty of sleep! Maybe even too much!");
    }
    else {
        return("Get some more shut eye!");
        
    }
};

sleepCheck(2);

And the output was:

"Get some more shuteye!"  

With that function, I finished the Introduction to Functions course on Codecademy.  The next course is called "Build "Rock, Paper, Scissors,"" and it's a course on how to build that game using JavaScript.  This is the game:

Rock destroys scissor. 
Scissors cut paper.  
Paper covers rock.

The code will break the game into three phases:
a. User makes a choice
b. Computer makes a choice
c. A compare function will determine who wins

This first step is to create this variable:

var userChoice = prompt("Do you choose rock, paper or scissors?");

This creates a prompt into which the user enters his choice (rock, paper, or scissors).  We then entered this:

var userChoice = prompt("Do you choose rock, paper or scissors?");

computerChoice = Math.random();


console.log(computerChoice);

Which printed out a random number between 0 and 1 (in this case, 0.37306072982028127).  The code below follows:

var userChoice = prompt("Do you choose rock, paper or scissors?");

computerChoice = Math.random();

console.log(computerChoice);

if (computerChoice <= 0.33) {
    computerChoice="rock";
}
else if (computerChoice >= .34 && computerChoice <= .66) {
    computerChoice="paper";
}
else {
    computerChoice="scissors";

}

The output was:

"scissors"

The next phase is below:

/*var userChoice = prompt("Do you choose rock, paper or scissors?");
var computerChoice = Math.random();
if (computerChoice < 0.34) {
computerChoice = "rock";
} else if(computerChoice <= 0.67) {
computerChoice = "paper";
} else {
computerChoice = "scissors";
} console.log("Computer: " + computerChoice);*/

This was next:

var compare = function(choice1, choice2) {
    if (choice1 === choice2) {
    return("The result is a tie!");
    }
    else if(choice1 === "rock") {
        
        if(choice2 === "scissors") {
            return("rock wins");
        }
        else {
            return("paper wins");
        }
    }

};

In the code above, I had entered ==== instead of === in one instance, and this error held me up quite a bit, as I didn't spot it at first.  Below is the complete game:

var userChoice = prompt("Do you choose rock, paper or scissors?");
var computerChoice = Math.random();
if (computerChoice < 0.34) {
computerChoice = "rock";
} else if(computerChoice <= 0.67) {
computerChoice = "paper";
} else {
computerChoice = "scissors";
} console.log("Computer: " + computerChoice);

var compare = function(choice1, choice2) {
if (choice1 === choice2) {
return("The result is a tie!");
}
else if(choice1 === "rock") {
if(choice2 === "scissors") {
return("rock wins");
}
else {
return("paper wins");
}
}
else if(choice1 === "paper") {
if(choice2 === "rock") {
return("paper wins");
}
else {
return("scissors wins");
}
}
else if(choice1 === "scissors") {
if(choice2 === "rock") {
return("rock wins");
}
else {
return("scissors wins");
}
}
};

compare(userChoice, computerChoice)

It works!  I entered the code into the JavaScript Console on Google Chrome, and the game works!  How cool!  I then added this code to handle inappropriate entries:

else if(choice1 !== "scissors" || "rock" || "paper") {

        prompt("Please enter a valid selection (note: the system does not recognize capital           letters)")

It worked, except that it only works once.  So, if the user keeps entering incorrect selections, the prompt won't repeat itself.  I haven't learned how to do that yet, but based on perusing StackExchange right now, I think the JavaScript feature that allows that code to repeat itself if called a loop, which happens to be my next JavaScript course!

SUMMARY OF CODING SKILLS

Total Treehouse Points: 4,236

Treehouse Points by Subject Matter: HTML 663, CSS 1,599, Design 1,193, Development Tools 747, and Miscellaneous
Treehouse Ranking (%): "You have more total points than 88% 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, but switched focus to web dev, as opposed to web design)
Git 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 (37 pg preface and 710 pgs of actual content (as in, I'm not including the book's index))

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: 314

No comments:

Post a Comment