• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
seegatesite header

Seegatesite.com

Seegatesite.com - Programming Tutorial , Sharing , How and Learn Together

  • TOOLS
    • Bootstrap Navbar Online Generator
    • Customize Sidebar Menu Bootstrap 3
    • Bootstrap Demo
  • ADVERTISE
  • CATEGORIES
    • Android
    • Blogging Tips
    • Database
    • CSS
    • Info Gadget
    • Javascript
    • Linux
    • PHP
    • Various
    • WordPress
  • Q&A
  • PHP
  • JAVASCRIPT
  • JQUERY
  • ANGULAR
  • WORDPRESS
  • SEO
  • REACT
🏠 » Javascript » Tutorial Operator, Conditional Statement and Loops Javascript for Beginners

Tutorial Operator, Conditional Statement and Loops Javascript for Beginners

By Sigit Prasetya Nugroho ∙ June 11, 2019 ∙ Javascript ∙ Leave a Comment

Share : TwitterFacebookTelegramWhatsapp

After knowing what variables and data types are in Javascript, the next tutorial is about operators, conditional statements, and loops. All three are basic techniques that must be understood by a programmer.

Tutorial Operator, Conditional Statement And Loops Javascript For Beginners Min

Table of Contents

  • 1 Operator Javascript
    • 1.1 What is the operator?
    • 1.2 Arithmetic Operators in Javascript
    • 1.3 Javascript Assignment Operator
    • 1.4 Javascript Comparison Operator
    • 1.5 Logical Operator in Javascript
    • 1.6 Javascript Bitwise Operator
    • 1.7 Ternary Javascript Operators
  • 2 Conditional Statements Javascript
    • 2.1 What are Conditional statements?
    • 2.2 Various types of Javascript conditional statements
    • 2.3 Else IF  Statement
    • 2.4 Statement switch case
    • 2.5 Nested If
  • 3 Javascript Loops
    • 3.1 For
    • 3.2 Foreach
    • 3.3 Repeat
    • 3.4 While
    • 3.5 Do While
  • 4 Conclusion

Operator Javascript

What is the operator?

An operator is a symbol used to perform operations on value and variable. Also, operators are fundamental logic and arithmetic that must be understood in all programming languages. Javascript itself has some basic rules for using operators.

Operators in Javascript programming are divided into 6 types:

  • Arithmetic operators.
  • Assignment operator.
  • Relational operator or comparison.
  • Logic Operators.
  • Bitwise operator.
  • Ternary operators.

Arithmetic Operators in Javascript

Arithmetic operators are operators to carry out arithmetic operations such as addition, subtraction, division, multiplication, etc.

The arithmetic operator consists of:

Operator NameSymbol
Addition+
Reduction–
Multiplication*
Appointment**
Division/
Remaining Share%
Increment++
Decrement—

Example:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
        let a = 5;
        let b = 15;
        let c = 0;
        // addition
        c = a+b
        document.write(`${a} + ${b} = ${c}<br/>`);
        // Subtraction
        c = a - b;
        document.write(`${a} - ${b} = ${c}<br/>`);
        // Multiplication
        c = a * b;
        document.write(`${a} * ${b} = ${c}<br/>`);
        // Exponentiation
        c = a ** b;
        document.write(`${a} ** ${b} = ${c}<br/>`);
        // Division
        c = a / b;
        document.write(`${a} / ${b} = ${c}<br/>`);
        // Modulus
        c = a % b;
        document.write(`${a} % ${b} = ${c}<br/>`);

Tutorial Javascript Aritmathic Operators Step By Step Min

Javascript Assignment Operator

The assignment operator is an operator used to give orders to variables and usually used to fill variables.

Example:

1
let x =23;

We give an assignment variable x to store value 23. The assignment operator consists of:

Operator NameSymbol
Charging Value=
Filling and Addition+=
Charging and Reduction-=
Filling and Multiplication*=
Filling and Lifting**=
Filling and Distribution/=
Charging and Modulus%=

Assignment operators are the same as arithmetic operators. It’s used for arithmetic operations. The assignment operator is usually used to speed up typing the application code.

Example:

1
2
3
let countArticle = 3
countArticle += 1
console.log(countArticle) // result : 4

Javascript Comparison Operator

A comparison operator is an operator used to compare two values. The comparison operator produce a true and false boolean value.

Operator NameSymbol
Greater than>
less than<
equal to / equal value and equal type== or ===
not equal / not equal value or not equal type!= or !==
greater than or equal to>=
less than or equal to<=

Example:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
        let a = 13;
        let b = 15;
        // equal to
        let result = a == b;
        document.write(`${a} == ${b} = ${result}<br/>`);
        // greater than
         result = a > b;
        document.write(`${a} > ${b} = ${result}<br/>`);
        // greater than or equal ton
         result = a >= b;
        document.write(`${a} >= ${b} = ${result}<br/>`);
        // less than
         result = a < b;
        document.write(`${a} < ${b} = ${result}<br/>`);
        // less than or equal to
         result = a <= b;
        document.write(`${a} <= ${b} = ${result}<br/>`);
        // not equal
         result = a != b;
        document.write(`${a} != ${b} = ${result}<br/>`);

Tutorial Javascript Comparison Operator For Beginners

Logical Operator in Javascript

Logical operators used to carry out operations on two boolean values.

Logical And&&
Logical Or||
Logical Not!

Example:

1
2
3
4
5
6
7
8
9
10
11
12
13
let a = 20
let b = 19
let right = a &gt; b
let wrong = a &lt; b
// operator &amp;&amp; (and)
let hasil = right &amp;&amp; wrong
document.write(`${right} &amp;&amp; ${wrong} = ${hasil}&lt;br/&gt;`)
// operator || (or)
hasil = right || wrong
document.write(`${right} || ${wrong} = ${hasil}&lt;br/&gt;`)
// operator ! (not)
hasil = !right
document.write(`!${right} = ${hasil}&lt;br/&gt;`)

Tutorial Logical Operator Javascript

Javascript Bitwise Operator

The bitwise operator is an operator used for operations based on bits.

Because this operator rarely used, I will go through this section.

Ternary Javascript Operators

Ternary is a conditional operator and the operator that only requires three operators. This worker often used as a shortcut for if statement.

Example:

1
2
3
4
let expr1 = 20;
let expr2 = 5 ;
let result = expr1 &lt; expr2 ? " expr1 less than expr2" : " expr1 greater than expr2"
console.log(result)

If the condition returns true, then this operator returns the value from expr1, and if it is the opposite, this will return the value from expr2.

Conditional Statements Javascript

What are Conditional statements?

A conditional statement is a choice between two or more choices. In programming languages, we recognize if-else. Consider the following example:

1
2
3
4
5
If(5 &lt; 6){
Console.log(true)
}else{
Console.log(false)
}

In the example above, if the value 5 is smaller than 6, it returns true. Conditional statements make the program think and determine the actions we expect by the logic/conditions we provide.

Various types of Javascript conditional statements

IF Statement

Conditional statement that has only one selection block and will be executed when the condition is true.

Example:

1
2
3
4
Let score = 100
If( score &gt; 90){
Console.log(‘You’re great)
}

Block code in Javascript, starting with curly brackets { } .

If in the block there is only one line of expression or statement, then it can be written without curly brackets.

IF / ELSE Statement

An if / else statement is a statement that has two choice blocks. The first choice for the right condition, and the second choice for the else condition.

Example:

1
2
3
4
5
6
Let score = 100
If( score &gt; 90){
Console.log('You re great')
}else{
Console.log('You re out of luck')
}

Else IF  Statement

Conditional statements that have more than two choice blocks.

Example:

1
2
3
4
5
6
7
8
Let score = 100
if (score &gt; 80) {
console.log('you re great')
} else if (score &gt; 90) {
console.log('Savage')
} else {
console.log('you re newbie')
}

Statement switch case

The switch case statement is another form of else/if statements .

Usage syntax:

1
2
3
4
5
6
7
8
9
10
switch(expression) {
case x:
// code block
break;
case y:
// code block
break;
default:
// code block
}

Example:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
let score = 5
switch (score){
case 1 :
console.log('one')
break
case 2 :
console.log('two')
break
case 3 :
console.log('three')
break
case 4 :
console.log('for')
break
case 5 :
console.log('five')
break
default:
console.log('undefined')
}

We can make as many code blocks as desired in the switch block. Each case must end with “break.” Especially for default, there is no need to use “break” because it’s located at the end. Giving a “break” statement aims to stop the program from checking other cases when a case fulfilled.

Nested If

The block statement in another conditional statement. This called nested if.

Example:

1
2
3
4
5
6
7
8
9
10
11
var user_id = prompt("Please fill in the username : ")
var pass = prompt("Please fill in the password:")
if(user_id == "seegatesite"){
if(pass == "123456"){
document.write("&lt;h2&gt;Welcome to our seegatesite.com&lt;/h2&gt;")
} else {
document.write("&lt;p&gt;Invalid password&lt;/p&gt;")
}
} else {
document.write("&lt;p&gt;You are not registered!&lt;/p&gt;")
}

Javascript Loops

Loops are used to run one or several statements several times. In other words, looping allows you to run several statements by merely writing the statement once.

In general, loops divided into two types namely  counted loop and uncounted loop.

  • Counted Loop is a definite loop and has determined in length.
  • Uncounted Loop is a loop that is unclear how many times must repeat until it finds the goal.

There are 5 types of loops in Javascript:

Counted Loop:

  • For
  • Foreach
  • Repeat

Uncounted Loop :

  • While
  • Do/While

For

For is a counted loop, because it’s clear how many times you have to repeat.

1
2
3
for (statement 1; statement 2; statement 3) {
// executed code
}

Example :

1
2
3
for (i=1; i&lt;=10; i++) {
console.log(i);
}

Explanation :

  • The count will start from 1 (i = 1)
  • Counts to i <= 10
  • Then in each iteration i will increase +1 (i ++)

Foreach

The foreach loop is often used to execute a collection of items in an array. This loop is included in the counted loop because the length of the array will determine the number of repetitions.

There are two ways to use foreach loops in Javascript:

– for/in

– forEach()

for/in

1
2
3
4
var lang = ["JS", "Angular", "React", "Node"]
for(i in lang){
console.log(lang[1])
}

Foreach()

1
2
3
4
var months = ["January", "February", "March", "April", "May", "June", "July","August", "September", "October", "November", "December"];
days.forEach(function(month){
console.log(month);
});

Repeat

Loops with the repeat() function used to repeat a text (string). Repeat is shorter than for method.

Example:

1
console.log("Repeat this text ".repeat(50))

Tutorial Javascript Repeat Loops Min

Other tutorial : Tutorial Create First And Last Day Of The Current Month Javascript

While

The while loop runs the code block in the conditions specified correctly. The while loop is an uncounted loop.

Example:

1
2
3
4
while (i &lt; 10) {
console.log(i);
i++;
}

Example 2 :

1
2
3
4
5
6
7
var repeat = confirm("Repeat this code?");
var counter = 0;
while(repeat){
counter++;
repeat = confirm("Repeat again?");
}
console.log("Count of repeat : "+counter)

 

 

Example While Loops Tutorial Javascript For Beginners

Explanation of the code above:

Loops will occur as long as the repeat variable is true. While selecting the OK button on the confirmation dialog, the repeat variable continues to be true. However, when we select the Cancel button, the repeat variable be a false value, and the loop stopped.

Do While

do / while is the same as the while loop.

The difference:

The do/while loop checks the condition behind (after repeating), while loops checking the conditions in the front or the beginning (before repeating).

Example :

1
2
3
4
5
6
var i=0;
do{
console.log(i)
i++;
}
while (i &lt; 10);

In the loop block, we can make another loop. This method is called a nested loop. There are several cases we use a loop in loop, usually occurs in looping arrays.

Example :

1
2
3
4
5
for(let i = 0; i &lt; 10; i++){
for(let j = 0; j &lt; 10; j++){
console.log(i+" -&gt; "+j);
}
}

Other article : CodeIgniter Tutorial How To Make Rest API ( Server And Client )

Conclusion

Operators, conditional statements, and loops are basic programming techniques that are mandatory to master. Javascript is relatively easy to implement.

Next Javascript tutorial : Tutorial On Various Types Of Javascript Dialog Windows

Another Javascript Related Post :

  • Adept Using Datatables Plugin In 10 Minutes For Beginners (Tutorial)
  • The Using Of Reactstrap And React-Table, Suitable For Beginners
  • Tutorial Create Simple Block UI Using React JS
  • How To Implement Login Page And Protected Route ReactJS
  • Complete Tutorial React Router Dom For Beginners (Easy-To-Understand)
  • The Right Way Understanding React Lifecycle For Beginners

Avatar for Sigit Prasetya Nugroho

About Sigit Prasetya Nugroho

This site is a personal Blog of Sigit Prasetya Nugroho, a Desktop developer and freelance web developer working in PHP, MySQL, WordPress.

Reader Interactions

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Time limit is exhausted. Please reload CAPTCHA.

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Primary Sidebar

Welcome to my Home,

Avatar for Sigit Prasetya NugrohoThis site is a personal Blog of Sigit Prasetya Nugroho, a Desktop developer and freelance web developer working in PHP, MySQL, WordPress.



Popular Articles

Checked checkbox AdminLTE Bootstrap in Jquery

November 4, 2014 By Sigit Prasetya Nugroho 7 Comments

Simple create date format validation with jqueryUI

December 21, 2014 By Sigit Prasetya Nugroho Leave a Comment

Create Simple Progress Bar for Fake Online Generator with Jquery

January 10, 2015 By Sigit Prasetya Nugroho Leave a Comment

22+ Coolest Free Jquery Plugin For Premium Theme

October 3, 2015 By Sigit Prasetya Nugroho Leave a Comment

Easy Build Your Anti Copy Paste Plugin

October 6, 2015 By Sigit Prasetya Nugroho Leave a Comment

Popular Tags

adminlte (15) adsense (13) adsense tips (4) affiliate amazon (13) amazon (12) Android (8) angular (16) angular 4 (12) angular 5 (4) asin grabber (3) Bootstrap (27) codeigniter (5) create wordpress theme (5) crud (8) css (6) free wordpress theme (7) google adsense (4) imacros (4) increase traffic (6) jquery (34) laravel (10) laravel 5 (5) learn android (5) modal dialog (5) mysql (6) nodeJs (4) optimize seo (4) pdo (6) php (30) plugin (53) pos (7) Publisher Tips (5) react (3) Reactjs (7) SEO (37) theme (17) tutorial angular (5) tutorial angular 4 (6) tutorial javascript (10) tutorial javascript beginners (4) twitter (3) widget (3) wordpress (18) wordpress plugin (13) XMLRPC (5)




  • About
  • Contact Us
  • Disclaimer
  • Privacy Policy
  • Terms and Conditions

©2021 Seegatesite.com