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>
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 PAGE,
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').innerHTML; alert(el); } </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>
<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').innerHTML; alert(el); } </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>
.. loops and branches
var currentNumber = 0;
do
{
alert(currentNumber);
currentNumber = currentNumber + 2;
} while (currentNumber <= 12);
0 2 4 6 8 10 12
var currentNumber = 0; while (currentNumber <= 12) { alert(currentNumber); currentNumber = currentNumber + 2; } 0 2 4 6 8 10 12
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**
var currentNumber = 0; while (currentNumber <= 12) { alert(currentNumber); currentNumber = currentNumber + 2; } 0 2 4 6 8 10 12
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
<html>
<body>
<p id="out">hello world!</p>
<script type="text/javascript">
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 with IF using "while" and "do while"
<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
<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>