js prompt & output

loop, branch

Try It!


.. alert() & prompt()
Pop up Boxes alert() prompt() Popups @ W3 Schools
This code simply exercises the alert and prompt. Using the number input, it loops using a "for" loop Copy the code below and Try It! <html> <head> <title>JS Examples</title> <script type="text/javascript"> function doalert() { alert("Hello! I am an alert box!"); } function doprompt() { var n; // get number n = prompt("Enter a number ", 0); //loop n times for (var i=0; i<n; i++) document.write( i + "<br />"); document.close(); // stops "Loading" message in browser } </script> </head> <body> <p onclick="doalert()">Do It! Alert</p> <p onclick="doprompt()">Do It! Prompt</p> </body> </html>

.. document.write()
After the initial load of the page, document.write creates a NEW DOCUMENT, erasing all other html that existed.
<html> <head> <script type="text/javascript"> var g=0; function dw() { var s = ""; var x = 1; while(x <= 3) { s += "<h3>ID " + x + " times and g " + g + "</h3>"; x++; g++; } document.write( s ); document.close(); } function showInner() { var el = document.getElementById('target'); alert(el.innerHTML); } </script> </head> <body> <script type="text/javascript"> dw(); </script> <h3 onclick="dw()">click here to write output</h3> <h3 onclick="showInner()">click here to report innerHTML</h3> <p id="target"> </p> </body> </html>

.. functions, loops and branches
functions are ONLY executed when called. // squares a number & returns function SquareIt(n) { if( isNaN(n) ) { alert(n + " is not a number!"); return; } return n*n; }
// returns the square root of the number doubled function rootDoub(number) { if( isNaN(number) ) { alert(number + " is not a number!"); return; } var answer; answer = Math.sqrt(number * 2); return answer; }
function PlusTwo() { var currrentNumber=0; do { alert(currentNumber); currentNumber = currentNumber + 2; } while (currentNumber <= 12); } 0 2 4 6 8 10 12
function PlusTwo() { var currentNumber = 0; while (currentNumber <= 12) { alert(currentNumber); currentNumber = currentNumber + 2; } } 0 2 4 6 8 10 12
function DoIt() { for (var counter = 0; counter < 20; counter++) { if (counter > 15) alert(counter + "**"); else if (counter > 10) alert(counter + "*"); else alert(counter); } } 0 1 2 3 4 5 6 7 8 9 10 11* 12* 13* 14* 15* 16** 17** 18** 19**

w3 examples

condition if..else for for in while break

.. an array: output alert & getElementById &innerHTML
COPY THE CODE BELOW (blue font) & PASTE <html> <body> <p id="out">hello world!</p> <script> var num = prompt("number?"); var list = new Array(num); var o = document.getElementById('out'); alert(o); alert(o.innerHTML); for( i=0; i<num; i++ ) list[i] = i*5; for( i=0; i<num; i++ ) o.innerHTML += " " + list[i]; </script> </body> </html>

.. 1. LOOP and show (alert) the five numbers , 0-4 using "for"
<script type="text/javascript"> var i; for( i=0; i<5; i++) { alert(i); } </script>

.. 2. LOOP using "while" and "do while" and including "if"
<script type="text/javascript"> //LOOP through the numbers 0-9, showing (alert) IF even #s using "while" var i=0; while( i < 10) { if(i % 2 === 0) alert(i); i++; } // LOOP through the numbers 1-10, showing IF odd #s using "do while" var i=1; do{ if(i % 2 === 1) alert(i); i++; }while( i <= 10); </script>

.. 3. ARRAY
pic <script type="text/javascript"> var i; // declare an array called billy with 5 items // index of items is 0 thru 4 var billy = new Array(5); // fill array with numbers 0, 2, 4, 6, 8 for(i=0; i < billy.length; i++) billy[i] = i * 2; // write out array as a series of header level 6 for(i=0; i < billy.length; i++) document.write("<h6>" + billy[i] +"</h6>)"; // now fill array with 10, 15, 20, 25, 30 - see the trick?!! billy[0] = 10; for(i=1; i < billy.length; i++) billy[i] = billy[i-1] + 5; // adds 5 to the PREVIOUS ELEMENT in the array </script>

.. 4. LOOP through numbers 0-99, put the numbers in an ARRAY and print with document.write()
<script type="text/javascript"> // variable used as an index var i=0; // declare an array - indexes go from 0-99 // name of the array is "list" var list = new Array(100); // loop thru numbers 0-99, double the number and put that number an array slot // [0][2][4][6] ... [196][198] do { list[i] = i*2; // put the number INTO the array i++; }while( i <= 100 ); // print out first 5 numbers in array for (i=0; i< 5; i++) document.write(list[i] + " "); document.write("<br />"); // print out last 5 numbers in array for (i=95; i< 100; i++) document.write(list[i] + " "); document.write("<br />"); </script>

.. 5. PROMPT & fill an ARRAY with RANDOM numbers and print contents in color
// get size from user // fill array with random nums: 0 upto but not 1 // write out in red // fill again wityh nums 0 upto but not 100 // print again in color <script type="text/javascript"> var size = prompt("Enter the size of the array") ; var list = new Array(size); for (i=0; i< size; i++) list[i] = Math.random(); for (i=0; i< size; i++) document.write("<span style='color:red'>" + list[i] + " <br /></span>"); document.write("<br />"); for (i=0; i< size; i++) list[i] = Math.random() * 100; for (i=0; i< size; i++) document.write("<span style='color:blue; background-color:yellow;'>" + list[i] + " <br /></span>"); document.write("<br />"); </script>