Knowing Branching In Javascript
What is the meaning of branching in javascript and why is called branching?
For those of you who have never had a class at the time in school, college or learn about algorithms and flowcharts, perhaps for the first term you hear.
This branching actual term to describe the process flow of a program branching.
In the flow charts, logic "IF ... THEN" described in the form of branches.
Because of that, this is called branching.
In addition to branching, these structures are also referred to: control flow , decision , structural condition, structure if, etc.
Branching will make the program be able to think and decisive action in accordance with the logic / conditions that we provide.
In the Javascript programming, there are a number of branching shape we need to know.
Discussion following ...
The first branching: IF
Branching if a ramification which has only one block selection when the condition is true.
Try to note the following flowchart:
The flowchart can be read like this:
"If the total expenditure is greater than $100,000, then display a message Congratulations you get a prize"
If less than $100,000 how?
Yes messages are not displayed.
Branching if
The result:
 |
| click image to enlarge |
Note this section:
if(totalBelanja > 100000){
document.write("<h2>Selamat Anda dapat hadiahh2>");
}This is called a block.
Block program in Javascript, begins with an opening brace { and end with a closing brace } .
Once inside there is only one row of blocks expression or statement, it can not be written with curly braces.
like this :
if(totalShoping > 100000)
document.write("Congratulations you get a prize
");
The second branching: if / else
Branching if / else is a ramification that has two blocks of choice.
The first choice to correct the condition, and the second choice for the condition is false (else).
Try to note this flowchart:
It is a flowchart for checking a password.
If the password is correct, the message is on the green blocks will be shown: "Welcome boss!"
But if false, then the message is in the red block which will be displayed: "Password incorrect, please try again!"
Then, the message is in the gray blocks will still be displayed, because he was not part of the branching block if / else.
Note the direction arrows, each block if / else leading up to it.
For more details, let's try the following program:
Branching if/else
The result:
 |
| click image to enlarge |
The third branching: if / else / if
Branching if / else / if a branch that has more than two blocks of choice.
Try to note the following flowchart:
It is a block for branching if / else / if. We can add a lot of blocks in accordance with what we want.
Sample Program:
Branching if/else/if
The result:
 |
| click image to enlarge |
In the program above, we do not use curly braces to create a block of code to if / else / if.
because there is only one command line only. Namely: grade = (a grade)
When we use curly braces, then the above program will be:
<html lang="en">
<head>
<title>Branching if/else/iftitle>
head>
<body>
<script>
var nilai = prompt("Input the final nilai:");
var grade = "";
if (nilai >= 90){
grade = "A"
} else if(nilai >= 80) {
grade = "B+"
} else if(nilai >= 70) {
grade = "B"
} else if(nilai >= 60) {
grade = "C+"
} else if(nilai >= 50) {
grade = "C"
} else if(nilai >= 40) {
grade = "D"
} else if(nilai >= 30) {
grade = "E"
} else {
grade = "F";
}
document.write(`Your Grade: ${grade}
`);
script>
body>
html>
Branching fourth switch / case
Branching switch / case is another form of branching if / else / if.
The structure is like this:
switch(variabel){
case <value>:
// blok code
break;
case <value>:
// blok code
break;
default:
// blok code
}We can create a block of code (case) as many times as desired in the switch block.
In , we can fill with values that will be compared with the variable.
Each case must end with a break. Especially for default, does not need to end with a break because he was located at the end.
Giving a break intended to make the program stop checking other cases when a case is met.
Example:
Branching switch/case
}
if(gift === ""){
document.write("
You failed to get a prize
");} else {
document.write("
Congratulations you get " + gift + "
");}
The result:
 |
| click image to enlarge |
Branching switch / case also can be made like this:
var nilai = prompt("input nilai");
var grade = "";
switch(true){
case nilai < 90:
grade = "A";
break;
case nilai < 80:
grade = "B+";
break;
case nilai < 70:
grade = "B";
break;
case nilai < 60:
grade = "C+";
break;
case nilai < 50:
grade = "C";
break;
case nilai < 40:
grade = "D";
break;
case nilai < 30:
grade = "E";
break;
default:
grade = "F";
}
First of all, we give a true value on the switch, so that we can enter into the block switch.
Then in the switch block, we create the conditions by using a case.
The result will be the same as in the example of branching if / else / if.
Branching Fifth: Ternary Operator
Branching using ternary operator is another form of branching if / else.
Arguably the Ternary Operator is:
Abbreviated form of the if / else.
Example:
Branching Ternary
The function of the method toUpperCase () to change the text in the input into capital letters.
The result:
 |
| click image for enlarge |
Ternary operator acts as a branching if / else:
var answer = (aswr.toUpperCase () == "YES")? "True False";
If the condition is in parenthesis- (aswr.toUpperCase () == "YES") - is true, then later the contents of the variable will be the same answer with "Yes".
But if it is false, then variable will contain the answer "False".
Branching Sixth: Nesting (Nested)
We also can make in branching branching block. This is called branching nested or nested if.
Example:
Branching Ternary
}
The result:
 |
| click image for enlarge |
Bonus: Using Logical Operators on Branching
Branching nesting, we can actually create more simply by using logical operators.
Example:
var username = prompt("Username:");
var password = prompt("Password:");
if(username == "FajarYusuf"){
if(password == "coffee"){
document.write("<h2>Welcome Boss!h2>");
} else {
document.write("<p>Password Wrong, Try Again!p>");
}
} else {
document.write("<p>You are not registered!p>");
}
We can make this simpler with the logical AND operator (&&).
var username = prompt("Username:");
var password = prompt("Password:");
if(username == "FajarYusuf" && password == "Coffee"){
document.write("Welcome Boss!
");
} else {
document.write("Password wrong, Try Again!
");
}However, this is not the best solution.
Since we can not check whether the user is registered or not.
