Thursday, 3 July 2014

Chapter 7: JavaScript Conditions

JavaScript conditions

In JavaScript we need to ask questions. We always need to run script when a certain condition is true. And if the condition is true we will execute whatever code is inside the braces { } .
We will begin with if statement.
If statement syntax example:
if (condition) {
// code goes here
// …
// …
}

In this tutorial we will use this terminology - parentheses (), brackets [], and braces {} . All of these are always found in pairs. If you have an opening one you will need a closing one. It may be several lines later, but need to be there.
Example for if statement:
<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 = 20;
var b = 100;

if (a<b) {
                         console.log("a is less than b");
}
</script>
</body>
</html>


Always our condition will be equal to true or false.
We can also use equality to see if something is equal to something by using these ==.
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 = 100;
var b = 100;

if (a == b) {
                         console.log("a is equal to b");
}
</script>
</body>
</html>



JavaScript has another way for checking equality, the triple equal sign. When you want to ask if something is equal to something you will never use a single equal sign, because this is assignment not equality and its set a value not checking value. We can use double if triple equal signs for checking equality: In below examples we use the if else statement. You will see learn how to use it later on this chapter.
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 = "100";
var b = 100;

if (a === b) {
                         console.log("a is equal to b");
}
else {
                         console.log("a is not strictly equal to b because it's string.");
}
</script>
</body>
</html>


Or if we want to ask is something is not equal to something, we can do this:
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 = 200;
var b = 100;

if (a !== b) {
                         console.log("a is not equal to b");
}
</script>
</body>
</html>

If a is not equal to be it will alert true, in this case it will alert a is not equal to be.

The curly braces after the if condition is called blocks. There you add your code, which will be executed if the condition is true or false. Always use the code blocks.
If you want to execute some code block if the conditions is equal to false you can follow the if with the else statement.
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 = 200;
var b = 100;

if (a == b) {
                   console.log("a is equal to b");
} else {
                   console.log("a is not equal to b");
}
</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 = 200;
var b = 100;

if (a == b) {
                   console.log("a is equal to b");
}
else {
                   console.log("a is not equal to b");
}
</script>
</body>
</html>

Both examples are similar.

You can also nest more if’s into the if or else statement, but don’t do that too much deeper because it will make your code hard to read. Instead of this you can next them into different function.