Learning JavaScript-- Understanding If-else statement

in GEMS6 years ago

Hello Everyone!

As we have started a complete tutorial of JavaScripts. In the previous post, we have covered a few topics like variables in javascript and loops in javascript. Now as we are moving to some basics program it is very important to understand the concept of if-else in the programming language. Almost every application in our PC/Phone works uses an if-else statement. It is a very basic and fundamental part of any programming language. To understand the If-else concept easily we will first try to understand it by some definitions and then by writing some basic scripts. So let's start and first understand the fundamental concept if-else by a flow chart from the internet.

IF Statment in Javascript

The if statement is the fundamental control statement that allows JavaScript to make decisions and execute statements conditionally. (according to google I will prove it by writing a script)

  • Syntax:

if(condition){
statment

}
The statement in the brackets will be executed if the condition is true otherwise the compiler will ignore this statement and start executing the rest of the script.

If-Else Statment in Javascript.

Flow chart of if-else

image.png
Image source

The 'if...else' statement is the next form of control statement that allows JavaScript to execute statements in a more controlled way.

  • Syntax

if (condition) {
Statement to be executed if expression is true
} else {
Statement to be executed if the expression is false
}

If the condition in the if statement is not true then the compiler will leave that particular statement and will move to the else statement and will execute the else statement.

If-Else-If

The if...else if... statement is an advanced form of if…else that allows JavaScript to make a correct decision out of several conditions.

  • Syntax
if(condition)
{statment   // If the first condition is true then this statment will executed.
}
else if(condition)
{
statment // If the second condition is true then this statment will be executed.
}
else if(condition)
{
statment}
else  // If no condition is true then this will be executed.
statment}

Practical work.

Let's understand the above definitions with the help of some scripts.

  • Open the visual studio and open a new HTML file.

image.png

  • Run the script with live server.

image.png

  • Let's write code so if the user enters the 1 it should display the name of first Hive witness name if the user enters 2 it should display second witness name and so on. (Note: The program is not fetching data from hive server it is the data we are putting the script)

image.png

Here we have created a text box and a button. If the button is clicked the document.getElementById method will get the text from the text box. Now Let's declare some variables and assign the names of witnesses to it and then compare them with the input in the box.

image.png

We have assigned the names of witnesses to variables now we will compare them to the input by the user.

image.png

  • At this point, we are comparing the entry by the user to the variables we have declared with the help of if-else statement. So if the user enters 1 it will execute this piece of code The witnesses on 1 rank is "+Witness1(which is @gtg)

image.png

image.png

  • lets enter 5

image.png

I can just compare a string value with the input but I believe it is a good practice for variables. In the basic programs like this, we should use variables to understand it and remember it.

Script

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
<input type="text" size="10" id="txt" ><br>
<input type="button" value="Get Witness name" onclick="btn()">
    

<script>
function btn(){

var text=document.getElementById("txt").value;
let Witness1="@gtg";
let Witness2='@good-karma';
let Witness3="@themarkymark";
let Witness4='@roelandp';
let Witness5="@blocktrades";
let Witness6='@ausbitbank';
let Witness7="@anyx";
let Witness8='@steempress';
let Witness9="@therealwolf";
let Witness10='@drakos';

if(text==1){
    document.write("The witness on 1 rank is "+Witness1);
}
else if(text==2){document.write("The witness on 2nd rank is "+Witness2);}
else if(text==3){
    document.write("The witness on 3rd rank is "+Witness3);
}
else if(text==4){document.write("The witness on 4th rank is "+Witness4);}
else if(text==5){
    document.write("The witness on 5th rank is "+Witness5);
}
else if(text==6){document.write("The witness on 6th rank is "+Witness6);}
else if(text==7){
    document.write("The witness on 7th rank is "+Witness7);
}
else if(text==8){document.write("The witness on 8th rank is "+Witness8);}
else if(text==9){
    document.write("The witness on 9th rank is "+Witness9);
}
else if(text==10){document.write("The witness on 10th rank is "+Witness10);}
else{document.write("Wrong input. Please put numbers from 1 to 10");}

}

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

That's much is enough for today. Take care.

Sort:  

Your blog is really interesting for people like me.

Can you please start a tutorial on SQL and how the data analytics and statistics can be prepared by extracting data from Hive Blocckhain. I don't have any background on IT skills. So it will further galvanize my interest if you start a tutorial on the same.

Thank you so much.

Thank you for appreciating. I means a lot. I will try.