JavaScript Tutorial 9 - Rock-Paper-Scissors

This is another quick game using some of the JavaScript that we have learned so far. To start this app off we need to once again generate a random number between 1 - 100 like so...

var number = Math.round(Math.random() * 100);

We will use this to decide what the computer picks, using some simple comparison code, the computer will pick an option based off the number generated...


if (number <= 33)
{
com = "rock";
}
else if (number >= 66)
{
com = "paper";
}
else 
{
com = "scissor";
}

So basically all this code does is take the number generated previously and says its less or equal to 33 then the com will pic rock, or if the number is greater or equal to 66 then com will choose paper and if its not any of those options then they pick scissors.

Now that we have our computer choice done, we now have to add in functionality for the user to pick their choice. We will use a simple prompt like this...

var user = prompt("What do you Choose, Rock...Papper...Scissor?");

So this will work well but what if the user types in with capital letters or under case, because JavaScript is case sensitive, we need to add in a statement so no matter what is typed into the box it will always output it lower case. That will look like this...

var user = user.toLowerCase();

Now we don't need to worry about capital letters. We now have both inputs from the computer and user. Next we have to add in comparison code that will decide who the winner is. Because we have two conditions instead of one, when we use the if statement we can add in "&&" and put in a second condition. So both conditions have to be true for the code to execute.


if ((com == "rock") && (user == "paper"))
{
alert("You Win.Com Chose " + com);
}
else if ((com == "rock") && (user == "scissor"))
{
alert("You Loose.Com Chose " + com);
}
else if ((com == "rock") && (user == "rock"))
{
alert("You Tie.Com Chose " + com);
}
else if ((com == "paper") && (user == "rock"))
{
alert("You Loose.Com Chose " + com);
}
else if ((com == "paper") && (user == "scissor"))
{
alert("You Win.Com Chose " + com);
}
else if ((com == "paper") && (user == "paper"))
{
alert("You Tie.Com Chose " + com);
}
else if ((com == "scissor") && (user == "paper"))
{
alert("You Loose.Com Chose " + com);
}
else if ((com == "scissor") && (user == "rock"))
{
alert("You Win.Com Chose " + com);
}
else if ((com == "scissor") && (user == "scissor"))
{
alert("You Tie.Com Chose " + com);
}

That block of code will cover every possible outcome and will spit out an alert statement based on the input. When you put all the code together it will look like this...

var number = Math.round(Math.random() * 100);

var user = prompt("What do you Choose, Rock...Papper...Scissor?");

var user = user.toLowerCase();

if (number <= 33)

{

com = "rock";

}

else if (number >= 66)

{

com = "paper";

}

else 

{

com = "scissor";

}

if ((com == "rock") && (user == "paper"))

{

alert("You Win.Com Chose " + com);

}

else if ((com == "rock") && (user == "scissor"))

{

alert("You Loose.Com Chose " + com);

}

else if ((com == "rock") && (user == "rock"))

{

alert("You Tie.Com Chose " + com);

}

else if ((com == "paper") && (user == "rock"))

{

alert("You Loose.Com Chose " + com);

}

else if ((com == "paper") && (user == "scissor"))

{

alert("You Win.Com Chose " + com);

}

else if ((com == "paper") && (user == "paper"))

{

alert("You Tie.Com Chose " + com);

}

else if ((com == "scissor") && (user == "paper"))

{

alert("You Loose.Com Chose " + com);

}

else if ((com == "scissor") && (user == "rock"))

{

alert("You Win.Com Chose " + com);

}

else if ((com == "scissor") && (user == "scissor"))

{

alert("You Tie.Com Chose " + com);

}

This is a very simple and easy to make JavaScript version of Rock-Paper-Scissors.

JavaScript Tutorial 8 - Guess The Number

Now we will put some of our skills to the test by creating a simple app that will give the user 5 chances for the user to guess the number it generated. To start of we nee to first be able to generate a random number from 1 - 100. Just like we did in my previous tutorial...


var random = (Math.random());
var multiply = random * 100;
var round = Math.round(multiply) ;
var number = round;

So now the variable "number" will be a random number between 1 - 100. Next we need to write a code that will give the user only 5 chances to guess the number, I think a for loop will work perfectly for this...

for(var c = 0; c < 4; c ++)

Ok, so now it will only let the user have 5 guesses, next we need to create a prompt that will let the user enter in their guess, for this all we do is use a prompt statement like this...

var guess = prompt("Guess what number i'm thinking off, 1 - 100");

Now we can grab the guess from the user, now we need to create a if else statement to tell the user if their guess is higher or lower then the number that the code generated, but what happens if the user guesses it right because if else statements can only handle 2 options? Well thats when else if statements come in, they allow you to add in another condition, so in our case that will be if the user guesses it correctly...


if(guess < number)
{
    alert("higher. " + c);
}

else if (guess > number)
{
    alert("lower. " + c);
}
else
{
    alert("correct the number was " + number);
 }

Using the "<" and ">" we were able to determine if the guess was higher or lower then the number and if it wasn't or higher or lower then we knew that it must be the number.So when its all put together it looks like this...


var random = (Math.random());
var multiply = random * 100;
var round = Math.round(multiply) ;
var number = round;
for(var c = 0; c < 5; c ++)
{
var guess = prompt("Guess what number i'm thinking off, 1 - 100");
if(guess < number)
{
    alert("higher. " + c);
}

else if (guess > number)
{
    alert("lower. " + c);
}
else
{
    alert("correct the number was " + number);
}
}

This is what a simple guess my number game looks like in JavaScript.

JavaScript Tutorial 7 - For Loops

Like while loops, for loops will run a block a code numerous but times, but with for loops you choose how many times you want to run the block of code. They syntax looks like this...

for (statement1;statement2;statement3)
{
block of code
}

Statement 1 is executed before the loop (the code block) starts.

Statement 2 defines the condition for running the loop (the code block).

Statement 3 is executed each time after the loop (the code block) has been executed.

So for example if you wanted to execute a code 5 times you could do something like this...

for (var i = 0; i < 5; i++)

{

alert(i)

}

From the example above, you can read:
Statement 1 sets a variable before the loop starts (var i=0).
Statement 2 defines the condition for the loop to run (i must be less than 5).
Statement 3 increases a value (i++) each time the code block in the loop has been executed.

So it will output 1,2,3,4,5 then the code will be done.If you wanted to change it to 10 then you could change the i = 0 to i = -5. You could also change the i <5 the i < 10. Lastly you could change the i++ to i+=.5 which changes the amount i increases each time.

This is the very basics of for loops in JavaScript.

JavaScript Tutorial 6 - While Loops

In JavaScript While Loops can execute a block of code as long as a specified condition is true. So as long as your condition is true the block of code will keep looping until your condition is false. They syntax looks like this...

while(condition)
{
block of code to be looped
}

This is very simple, now to get a more complex take on while loops, this will look something like this...

var x = 4;

while( x == 4)
{
alert("loop")
x = 5
}

This code will run the alert statement once, because I added in the x = 5, which makes the condition false and will stop the loop. Its very important to have a way for the condition to become false or else it will create an infinite loop and crash your browser.You can also do something like this...


while (i<5)  {  x=x + "The number is " + i + "<br>";  i++;  }

This code will spit out 5 different alerts by using the "++" statement which just increase the value of a variable by 1. This is the basics of how while loops work in JavaScript.

JavaScript Tutorial 5 - Math

In JavaScript there are several math functions, they vary in diffifculty starting from very simple addition to some complex generating numbers. The very simple stuff looks like this syntax wise...

var add = 7 + 9
var subtract = 10 - 5
var divide = 10/2
var multiply = 5 * 5
var x = 5
var y = 7
x > y = false
x<y = true

This is as simple as it gets math wise. Now we will move on to generating numbers between 0 and 1. To do this we will use a Math random statement which looks like this...

var num = Math.random()

var num = 0.983782646377272

The number it spits out can be anywhere from 0 to 1. Now if we wanted to to make this out of a hundred for convenience, then all you would do is multiply this by 100 like so...

var num = Math.random() * 100

var num = 98.3782646377272

Now we are getting somewhere but do we really want that whole number with a ton of digits? well this is where the math round code comes in handy and it works just like this....

var num = Math.random() * 100

var round = Math.round(num)

var round = 98

Now we have a application that will spit out a random number between 1 and 100. Now how can this be used in an application? well I will show you a possible situation for its use...


var num = Math.random() * 100
var round = Math.round(num)
if (round >= 50)
{
 alert(" im smaller then 50")
}
else 
{
alert(" im greater then 50")
}

This is just a simple app that will trigger an alert statement based of the number generated. This is the basic concept of math in JavaScript.

JavaScript Tutorial 4 - Arrays

An array is a special variable, which can hold more than one value at a time.

If you have a list of items instead of creating multiple var statements you can just use an array to store all the data in one line of code. For example...

Var names = [Nick,Joe,Bryan];

Ok so now we have this piece of data, but how do we access it you ask? Well each piece of data has a corresponding index number where it can be accessed from. Nick = 0 , Joe = 1 and 

Bryan = 2 if you had more data you would just keep counting up by 1. So now to see how this looks in JavaScript...

var Myname = names[0]

Myname = Nick

var Myname = names[1]
Myname = Joe


var Myname = names[2]
Myname = Bryan

Now you can also change the data in the array by using a statement like this...

names[0] = "Luke"

That line of code just changed the result of the previous code that pulled the first peice of data in the array so now if we run the code...


var Myname = names[0]
Myname = Luke

We see that Nick changed to Luke due are previous code. This is a brief overview of Arrays in JavaScript.

JavaScript Tutorial 3 - Functions

A function is a block of code that will be executed when "someone" calls it. A function is stated by saying function followed by the name of the function for example...

function name () 

The name of this function is called name, now the syntax of a function looks like this...

function myFunction()
{alert("Hello World!");}


myFunction()

Now every time you call that function it will run that block of code this is very useful when you need to write out the same code multiple times.

At this point you are probably wondering why after the function there is "()", well this is where you can add in arguments. Basically this allows you to add in variables to your function  for example...


function myFunction(name,job)
{
alert("Welcome " + name + ", the " + job);}

myFunction(name,job)


This is the basics of Functions and what there syntax is.

JavaScript Tutorial 2 - If Else Statements

In JavaScript if else  statements play a huge part of the language the basic syntax for them looks like this..

if (Statement)

{
   Do something
}
else
{
   Do something else
}

Now to apply this in a normal situation you could have some user input and say if the user says "yes" then do a command and if they say "no" do something else. This application would look like this...

var q = prompt("Is your name Nick?");

if ( q == "yes")
{
alert("Hi Nick");
}
else
{
alert("oh ok"
}

The way the alert part works is similar to prompt except it doesn't have user input, it just displays a message. You must always use two "=" signs when comparing two different types of data (variable and string).

This is it for if else statements in JavaScript.

Philips Hue Applescript Controller

                                     

Philips Hue Applescript Controller

By Nick Hallowell

Requirements:OS X,Philips Hue,Know the Ip Address and Register your Light to the API

Step 1: Download App here: http://www.mediafire.com/?q9qav4str3r441l
Step 2: 

• Pick a username that you'll use to connect to your Hue device, and make a MD5 hash of it. You can either google it or typemd5 -s *your username* in a terminal. Save this hash for the next steps.
• Install resty or a similar tool to make HTTP requests. I'll let you go check out the instructions on that page, but it amounts to downloading resty with curl and then sourcing it with source resty so that you can use it.
• Press the link button on your Hue bridge.
• Make a POST HTTP request to http://*YourHueHubIP*/api with the data:{"username": "YourMD5Hash", "devicetype": "SiriProxyHue"}. Using resty I first set the base URL to this address withresty http://10.0.1.16/api and POST '{"username": "YourMD5Hash", "devicetype": "SiriProxyHue"}' to send the request. You should get a response like {"success":{"username":"YourMD5HashFromBefore"}}
• Store this MD5 hash and Ip Address somewhere you can access it easily.

Step 3: Open the app you downloaded and hit configure.

Step 4: First type in your Ip Address then the MD5 Hash you generated.

Step 5: Enjoy

Please Comment and let me know how it works, or if you have any problems or suggestions.

JavaScript Tutorial 1 - Variables

To start off learning JavaScript the first thing to learn is what is a variable and how they are used. Variables are stated by using the "var" statement followed by the variable name. For example...

Var x = 20;

Variables can display three different types of data here is a list of all three...

var string = "text";

var boolean = true;

var float = 56.43;

Note whenever you use a string variable the text has to be enclosed by quotation marks.This is the basic syntax for Variables.

It can get more complicated though, you can set a variable to another variable like this...

var x = 78;
var y = x;
y = 78

Simple right? You can also set a variable to a user response using the prompt statement, it can be used like this...

var Q = prompt("What is your name?");

Now Q is equivalent to whatever the user types in.This should give you a basic idea of how variables work in JavaScript.