DONATE  
MENU
CSS
JAVASCRIPT
JSON
PHP
MYSQL
HTML
AJAX

JavaScript Tutorials

INTRODUCTION

» Introduction to JavaScript

» Practice IT Editor

» JavaScript Example

» JavaScript Placement

» JavaScript Syntax

» JavaScript Statements

» JavaScript Input

» JavaScript Output

» JavaScript Comments

» JavaScript Variables

» Variables' Scope

» JavaScript Operators

» JS Expressions & Concatenation

» JavaScript Data Type

» JavaScript Numbers

» Number Object

» JavaScript Strings

» String Object

» JavaScript Booleans

» Boolean Object

» JavaScript Functions

» JavaScript Arrays

» Array Object - Properties

» Array Object - Methods

» JavaScript Objects

» JavaScript Undefined

» JavaScript Nulls

CONDITIONAL TESTING

» If Statement

» If Else Statement

» JavaScript Ternary Operator

» Switch Statement

LOOPS

» For Loops

» While Loops

» Break & Continue

» For...In Loops

» do...while Loop

FUNCTIONS

» JavaScript Functions

» Creating Functions

» Functions' Parameters

» Functions' Arguments

» Function Invocation

» The Return Keyword

» The Arguments Object

» Callback Functions

» Arrow Functions

ARRAYS

» JavaScript Arrays

» Creating Arrays

» Accessing Arrays

» Looping Arrays

» Multi - dimensional Arrays

OBJECTS

» JavaScript Objects

» Creating Objects

» Prototype Definition

» Accessing Objects

» The this Keyword

AJAX

» Introduction to AJAX

JSON

» Introduction to JSON

JAVASCRIPT DATES

» The Date Object

» Date Methods

» Timing (SetInterval & SetTimeout)

MATH OBJECT

» Math Object

» Math Methods

HTML / JS DOM

» DOM Introduction

» Accessing HTML Elements in DOM

» Get And Change Elements' Contents & Values

» Change Styling - DOM CSS

» DOM Attributes

» JavaScript Event Listeners

» DOM Event Listeners

» JS Events

MISCELLANEOUS

» JS Strict Mode

» JavaScript Hoisting

» JavaScript let keyword

» Reserved Keywords

» JS Best Practices

» JavaScript vs ECMAScript

JAVASCRIPT EXAMPLES

» JavaScript Calculator

.. » JavaScript » Loops » While Loops
Share Tweet WhatsApp

While Loops

The while loop just like the for loop is used in executing a code block repetitively. The while loop is easier to form as it runs continuously based on a given condition given to it via its parentheses (()). If the condition is true, the while loop keeps running until the condition becomes false. It is therefore the responsibility of the programmer to tell the while loop when it should stop executing by devising a means to make the condition false. EXAMPLE CAUTION: Don't try or practice the below example, it may crash your browser. Only try when you want to experiment with it and also ready to close your browser.
<script>
var c = 2;
while (c < 5){
alert("true"); //statement to execute
}
</script>

Copy PRACTICE IT

In the above example, the condition is that while the value of the variable "c" is less than 5, the statements inside the code block should continue executing. Since the c variable's value is 2, that means the condition is true and therefore, the code will keep executing even till eternity cause the value of c will continue to be 2 which is less than 5. This may lead to your browsing hanging or crashing as the statements won't stop working. To solve this, we need to devise a way to continuously increase the value of c so that the condition becomes false after a given time. We can do this by adding a decremental or incremental statement to decrease or increase the value of c whenever the statements in the code block have been executed. For example,
<script>
var c = 2;
while (c < 5){
alert("true");

//incremental
c++;
}
</script>

Copy PRACTICE IT

EXAMPLE
<script>
var principal = 500;
var rate = 10;
var interest;

alert("A principal of N"+principal+" was invested into a mutual fund at a rate of "+rate+"% compounded quarterly.");
var q = 12/3; //Number of quarters in a year = 4
var i = 1; //Just a variable to determine which quarter program is currently calculating
while (q >= 1){
interest = (rate/100) * principal; //interest earned
principal += interest; //same as principal = principal + interest
alert("QUARTER "+i+"\n Principal now N"+principal+" after receipt of N"+interest+" interest");
q--; //Decrement q so that it can meet the condition (q >=1) and end loop
i++; //Done with this quarter? increment i to enter next quarter. NOTE: i is not part of the loop's running.
}
</script>

Copy PRACTICE IT

Above is a good example of the while loop and looping in general. EXAMPLE EXPLAINED The above is a program to compound the interest due to a sum quarterly and show the new amount. First, we divided the year into 4 quarters(there are 4 quarters in a year). Now, in the while loop, the condition is that while the quarter is still greater than or equal to 1 i.e while the calculations for all the quarters have not been done, we continue to execute codes to determine the interest and amount for the quarter. We also decremented the quarter variable so as to meet up with our condition (q >= 1) else the loop won't stop execution. SUMMARY
  1. The while loop just like the for loop is used in executing a code block repetitively.
  2. With the while loop, you simply specify a condition and while that condition is true, the code block will be continuously executed.
  3. To stop a while loop from executing, we need to devise a way to ensure the condition becomes false after executing for some time(not just any time but as already calculated by you).
  4. We can achieve this by increasing or decreasing the variable used in forming the conditional expression.
Take a short quiz on While Loops.
Ask a question or tell us if While Loops is easy or not.
cent?

Join our 1,090 subscribers to receive tutorials' updates!

  We won't spam your mail box. We hate it.





StackBeginner 2021 © Joseph Omamode