Thursday 3 July 2014

Chapter 12: JavaScript Functions

Functions

As we start to add more code we want to make sure that it doesn’t get messy and hard to read. So as it all languages we’ll going to break apart large element in JavaScript into smaller reusable modular pieces. All we doing is taking several statements, wrapping them up and giving them a name, and that means we are creating functions. To make one we take the code that we want to enclose, no matter the size of the script. We surround with a curly braces to create a code block to say where this function starts and ends. We use the word function, we also give it a name. You decide what to be the name, but you have to remember but you can’t start the name of your function with number

Example:

<html>
<head>
<title>Untitled Document</title>
</head>
<body>
<script>

function anyFunction() {
    console.log("This is function example.");
}

</script>
</body>
</html>


After the function is declared, we can call it.
We can use the name of the function with the opening and closing parentheses ( always use open and closing parentheses when you declare function ), semi-colon because it is a full statement. And all the code inside the function will be executed. Now note that as soon as you put your code in a function it won’t execute, it won’t run unless you explicitly call it.
Its good practice to define your functions before you calls them.

Example:

<html>
<head>
<title>Untitled Document</title>
</head>
<body>
<script>

function anyFunction() {
    console.log("This is function example.");
}

anyFunction();
</script>
</body>
</html>



Functions with parameters
When you call a function you can pass values to it named arguments or parameters.

We can create 2 types of arguments – single and multiple which is separated with comas.
function myFunction(parameterX, parameterY, parameterZ) {
// code to be executed
}

Example:

<html>
<head>
<title>Untitled Document</title>
</head>
<body>
<script>

function anyFunction( x, y, z) {
var calc = x-y+z ;
console.log(calc);
}

anyFunction(20, 10, 5);
anyFunction(40, 27, 4);

</script>
</body>
</html>

When the function is called it receives values called arguments.
The parameters and the arguments must be in the same order:
var a = myFunction(x, y, z);
You can use the arguments as local variable when they are placed inside the function.
Often the arguments are used to compute a return value.

JavaScript return
We can optionally return values. Not only can a function accept information, but we can also send some back. If you want to return information all you need to do is to use the word return, and then pass back a variable, string, number, it’s up to you.

Example:

<html>
<head>
<title>Untitled Document</title>
</head>
<body>
<script>

function myFunction( x, y, z) {
var calc = x-y+z ;
console.log(calc);
// we can return values
return calc;
}

myFunction(20, 10, 5);
myFunction(40, 27, 2);

</script>
</body>
</html>


Parameter Mismatch
One of the usual issues with the functions to take parameters is what happens if you get something wrong with them. For example if you pass the wrong amount of information in them.
In the below example we add an extra information, and when the code is executed the value 200 would be ignored by JavaScript.

Example:

<html>
<head>
<title>Untitled Document</title>
</head>
<body>
<script>

function myFunction( x, y, z) {
var calc = x-y+z ;
console.log(calc);
}

myFunction(20, 10, 5, 333);

</script>
</body>
</html>


But what happened if I pass in only 2 values and we have 3 parameters?
And what will happen is that the missing one will be passes as undefined. The variable z will be the undefined one.

Example:

<html>
<head>
<title>Untitled Document</title>
</head>
<body>
<script>

function myFunction( x, y, z) {
console.log( x + y + z);
}

myFunction("Hello ","World ");


</script>
</body>
</html>



variable scope/ Local variable
Variable scope means where this variable is visible, what part of your code can see it, and what part can use it.

Example:

<html>
<head>
<title>Untitled Document</title>
</head>
<body>
<script>

function myFunction() {
var x = 500;
console.log(x);
}

myFunction();
console.log(x);

</script>
</body>
</html>


In the above example in function myFunction() we create a variable named x and we call it, and then it will input 500. But if we try to use this variable outside of the function the result will be undefined, x doesn’t exist outside the function. In this case the variable x is called Local variable, because we use the word var inside the function.

But if we want to create a variable that is visible for the entire file of code what you have to do is to define the variable x outside any function. And then the variable becomes a Global Variable.

Chapter 11: JavaScript Loops

JavaScript Loops
Very quickly we’ll find ourselves writing code that we want to have happen multiple times. Sometimes when we want to change background color, hiding everything in a menu, we’ll realise that this code we want repeated.
The main issues what any loop, is not when to loop, looping is easy, it’s when to stop.

While Loop
So let’s first fig rout the most basic kind of loop. Well we’ve seen if statements before. And this is all we have here. If this conditions is true in the parentheses we’ll execute the code inside the curly braces. All we do here is to replace the if with the word while, we have a loop. Whatever is in the block get done every time the loop goes around.
Example:
<html>
<head>
<title>Untitled Document</title>
</head>
<body>
<script>
var a = 0;
while ( a < 9) {
console.log(a);
a++;
}                       


</script>
</body>
</html>
                        

In the above example we ask is a less than 9, and return true. Without the increment a++ at the end of the body of the loop we create infinite loop. So the loops will start increment every time we go around the loop and we’ll keep on going.
There’s another variant of the while loop called do…while loop. This keep the same basic format, but we actually move the condition to the end. So instead of while a is less than 10 been at the start of the block is actually at the end of the block, because of that we actually need a semi-colon at the end of the do…while loop.
Example:
<html>
<head>
<title>Untitled Document</title>
</head>
<body>
<script>
var a = 1;

do {
console.log(a)
a++;
} while ( a < 10);



</script>
</body>
</html>


So let you know. while loops are much more common than these do..while loop. In most loops is expected to check the condition before entering the loop, and it’s more readable that way too.


for Loop           
With the for loop you actually bring three pieces together inside the parentheses they all there at the top. First we set up the index, so in this case var i = 1, it follows semi-colon, than we check the condition is less than 10, than even it’s right at the top this is the incrementer, this happens at the end of every loop. We don’t have to go by one. You could go up by 4, 3, 10 or 500 if you wanted. So this is very readable, because everything about the loop is right there at the top, you don’t have to look outside the loop for the index or the increment. So for loop is very common way of doing this.
Example:
<html>
<head>
<title>Untitled Document</title>
</head>
<body>
<script>
var a = 0;
for (i=0; a<10; a++) {
                                    console.log(a);
}

</script>
</body>
</html>



Break
Break is a word that will jump us out of the loop. Inside the for we have if statement for example and say is a equal to 25, no it isn’t. So will skip passed that code block and continue on hit the end of the loop go back up, check condition again, yes I is still less than 3000, continue on till i is equal to 25 and manually hit break. As soon as we hit break we basically manually say we are done, we jump completely out of the loop and we can continue on.
If we say break we are completely done with the loop.
Example:
<html>
<head>
<title>Untitled Document</title>
</head>
<body>
<script>
for ( i = 0; i < 3000; i++ ) {
                                    console.log(i);
if ( i == 25) {
break;
}

}


</script>
</body>
</html>



Continue
The word continue doesn’t mean jump out of the loop, it means jump back up and check the condition again. Don’t continue and further with this iteration just this one. We are not done with the entire loop but we are done with this time around.
Example:
<html>
<head>
<title>Untitled Document</title>
</head>
<body>
<script>

for ( i = 0; i < 99; i++ ) {
                                    console.log(i);
if ( i == 12) {
continue;
}
// do stuff

}


</script>
</body>

</html>

Chapter 10: Operators - Ternary

Ternary
Finally the last one is the Ternary operator. The general format of this is that you have a condition, you asking something, you say what happened of this is true and what happens if this is false. You can actually think of it as a many if else statements. So let me show you a example here:

Syntax:
Condition ? true : false


Default example:
<html>
<head>
<title>Untitled Document</title>
</head>
<body>
<script>
var player1 = 400;
var player2 = 495;
var winner;

if (player1 < player2) {
            console.log("player2 is winner");
} else {
            console.log("player1 is winner");
}

</script>
</body>
</html>

Ternary Example:
<html>
<head>
<title>Untitled Document</title>
</head>
<body>
<script>
var player1 = 400;
var player2 = 495;
var winner;

( player1 < player2 ) ? console.log("player2 is winner") : console.log("player1 is winner") ;

</script>
</body>

</html>

Chapter 9: JavaScript Modulus / Increment / Decrement

Modulus

In JavaScript we have modulus or remainder operator. The one is little different. Probably the classic example is using it to do something like calculating a year. So in this case I create a variable called year that is equal to 2003 and I can’t variable named remainder and I set that equal to year % 4. The Percent here is modulus or remainder operator. What it means is divide the variable year ( 2003) by 4. This don’t give me the result. Give me the remainder. In this case 4 will go to year 500 times, and the remainder would be 3.
Example:
<html>
<head>
<title>Untitled Document</title>
</head>
<body>
<div id="demo">
<h1>This is a heading.</h1>
<p>This is a paragraph.</p>
</div>
<script>
var year = 2003;
var reminder = year%4;

console.log(reminder);


</script>
</body>
</html>




Increment and Decrement
Next we have shorthand for adding to a variable. We already saw this but let’s explain in wider.
How you know we can use this:
<html>
<head>
<title>Untitled Document</title>
</head>
<body>
<div id="demo">
<h1>This is a heading.</h1>
<p>This is a paragraph.</p>
</div>
<script>
var a = 10;

console.log(a = a + 1);

</script>
</body>
</html>
or we can use that:

<html>
<head>
<title>Untitled Document</title>
</head>
<body>
<div id="demo">
<h1>This is a heading.</h1>
<p>This is a paragraph.</p>
</div>
<script>
var a = 10;

console.log(a += 1);

</script>
</body>
</html>

OR

<html>
<head>
<title>Untitled Document</title>
</head>
<body>
<div id="demo">
<h1>This is a heading.</h1>
<p>This is a paragraph.</p>
</div>
<script>
var a = 10;
var increment = ++a;

console.log(increment);

</script>
</body>
</html>

The result of all would be variable a + 1;

The above example is used to increment the variable a.
But we can use it also to decrement it.
Example:
<html>
<head>
<title>Untitled Document</title>
</head>
<body>
<div id="demo">
<h1>This is a heading.</h1>
<p>This is a paragraph.</p>
</div>
<script>
var a = 10;
var b = 20;
var c = 30;

console.log(--a);
console.log(b = b - 1);
console.log(c -= 1);

</script>
</body>

</html>