Loops

While Loops
    <!DOCTYPE html>
    <html lang="en" xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta charset="utf-8" />
        <title>While Loops</title>
        <script>
            window.onload = function(){
                var counter = 0;
                //while (counter < 101) {
                //    document.getElementById('result').innerHTML += "<br/>" + counter;
                //    counter++;
                //}
                while (counter < 1001) {
                    document.getElementById('result').innerHTML += "<br/>" + counter;
                    counter += 10;
                }
            }
        </script>
    </head>
    <body>
        <div id="result"></div>
    </body>
    </html>
        
Top

Index

Do ... While Loops
a do-while loop will execute at least once
    <!DOCTYPE html>
    <html lang="en" xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta charset="utf-8" />
        <title>Do ... While Loop</title>
        <script>
            window.onload = function () {
                var counter = 0;
                do {
                    document.getElementById('result').innerHTML += "<br/>" + counter;
                    counter++;
                } while (counter < 15);
            }
        </script>
    </head>
    <body>
        <div id="result"></div>
    </body>
    </html>
        
Top

Index

For Loops
    <!DOCTYPE html>
    <html lang="en" xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta charset="utf-8" />
        <title>For Loop</title>
        <script>
            window.onload = function () {
                var out = "";
                for (var counter = 0; counter < 45; counter++) {
                    out += (counter + "<br/>");
                }
                document.getElementById('result').innerHTML = out;
            }
        </script>
    </head>
    <body>
        <div id="result" />
    </body>
    </html>
        
Top

Index

For ... In Loops
    <!DOCTYPE html>
    <html lang="en" xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta charset="utf-8" />
        <title>For ... In Loop</title>
        <script>
            window.onload = function () {
                var myObject = { a: 93, b: 72, c: 56, d: 88, e: 85, f: 91 };
                var myKeys = [];
                var i = 0;
                for (myKeys[i++] in myObject) {
                    console.log(myKeys);
                }
            }
        </script>
    </head>
    <body>
        <div id="result" />
    </body>
    </html>
        
Top

Index

Endless Loops
    <!DOCTYPE html>
    <html lang="en" xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta charset="utf-8" />
        <title>Endless Loop</title>
        <script>
            window.onload = function () {
                var x = 2;
                while (x > -1) {
                    x *= x;
                    console.log(x);
                }
            }
        </script>
    </head>
    <body>
        <div id="result" />
    </body>
    </html>
        
Top

Index

Break and Continue Statements
    <!DOCTYPE html>
    <html lang="en" xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta charset="utf-8" />
        <title>Break and Continue</title>
        <script>
            window.onload = function () {
                //    var y = 0;
                //    while (y < 15) {
                //        document.getElementById('result').innerHTML += y + "<br/>";
                //        y++;
                //        if (y == 11) {
                //            break;
                //        }
                //    }
                var x = 1;
                while (x < 50) {
                    if (x % 2 == 0) {
                        console.log(x);
                        x++;
                        continue;
                    }
                    document.getElementById('result').innerHTML += x + "<br/>";
                    x++;
                }
            };
        </script>
    </head>
    <body>
        <div id="result"></div>
    </body>
    </html>
    
Top

Index

Javascript Program : Calculating Simple Interest
note use of parseFloat method to convert string to a float
    <!DOCTYPE html>
    <html lang="en" xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta charset="utf-8" />
        <title>Calculating Simple Interest</title>
        <script>
            window.onload = function () {
                document.getElementById('btnCalc').addEventListener('click', calculateInterest);
            };
            function calculateInterest() {
                var amount = parseFloat(document.getElementById('amount').value);
                var term = parseFloat(document.getElementById('term').value);
                var rate = parseFloat(document.getElementById('interest').value);

                var x = 0;
                var out = "";
                while (x < term) {
                    amount = (amount + (amount * (rate/12/100)));
                    out += "Month " + (x + 1) + " $" + (Math.floor(amount)) + '<br/>';
                    x++;
                }
                document.getElementById('result').innerHTML = out;
            }
        </script>
    </head>
    <body>
        <label for="amount">Amount Invested : </label>
        <input type="number" id="amount" /><br />
        <label for="term">How Many Months : </label>
        <input type="number" id="term" /><br />
        <label for="interest">Interest Rate : </label>
        <input type="number" id="interest" /><br />
        <button id="btnCalc">Calculate Interest</button>
        <div id="result"> </div>
    </body>
    </html>
        
Top

Index

n4jvp.com