deniskoo blog - C#, HTML, XHTML, CSS, Javascript, Project Management

Showing posts with label Javascript. Show all posts

Saturday, May 23, 2009

Generating Random numbers with Javascript

A quick tutorial on how to generate Random numbers with Javascript. Let's get started:

1) Generating a random number
We make use of the Math 'class' available in Javascript

var randomvar = Math.random();

The result is a decimal number e.g. 0.43209418.

2) Generating a random number with a given range
Say for example, we want a random number to be generated from 1 - 10.

var randomvar = Math.random();
var roundedvar = Math.round(randomvar*10);

Same logic if you want a number from 1 to 1000.

var randomvar = Math.random();
var roundedvar = Math.round(randomvar*1000);

3) What if I want a value from a minimum of 5 to 10, instead of 1 to 10?
This involves a bit of logic and mathematics...
First, we need a random generated value.
Then, we multiply this random generated value with the difference of the range boundaries (e.g. randomvalue * (max - min) ).
Finally, we add the rounded value obtained in step 2 with the minimum value.

Not convinced? See code for randomNum function below and try if for yourself:

function randomNum(min,max)
{
var randomvar = Math.random() * (max - min);
var roundedvar = Math.round(randomvar) + min;
alert( roundedvar);
}

Wednesday, May 20, 2009

Get and display today's date - The Easiest way :)


<html>
<body>

<script type="text/javascript">

var currentTime = new Date();
var month = currentTime.getMonth() + 1;
var day = currentTime.getDate();
var year = currentTime.getFullYear();
document.write(month + "/" + day + "/" + year);

</script>

</body>
</html>

Wednesday, May 6, 2009

Shanti's Web Classwork

Question 1 - Countdown


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
</head>
<body>
<script type="text/javascript">

var num = prompt("Enter number > 0", "0");

while ((num <=0) || (isNaN(num)==true))
{
    var num = prompt("Enter number > 0", "0");
}

for (var i=0; i<num; i++)
{
    alert("Starting in " + (num-i));
}
alert ("Roll Film!");
</script>
</body>
</html>

Question 2 - Multiplication


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
</head>
<body>
<script type="text/javascript">
document.write("<table><tr><td colspan=10><h1>Multiplication Table</h1></td></tr>");

for(var i = 1; i <= 10; i++)
{
    document.write("<tr>");
    for (var j = 1 ; j <= 10; j++)
    {
        document.write("<td>" + i + " * " + j + " = " + (i * j) + "</td>");
    }
    document.write("</tr>");
}


document.write("</table>");
</script>
</body>
</html>

Question 3 - Online Reservation


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
</head>
<body>
<script type="text/javascript">
function assignSeat()
{

    for (var i = 1; i <= 5; i ++)
    {    
        if (document.getElementById(i).title == "a")
        {
            document.getElementById(i).src= "seat_select.png";
            if (confirm("Seat " + i + " is available. Accept? "))
            {
                document.getElementById(i).src = "seat_unavail.png";
                document.getElementById(i).title = "u";
                break;
            }
            else
            {
            
            }
         document.getElementById(i).src= "seat_avail.png";   
        }
    }

}
</script>

<img src="seat_avail.png" alt = "1" id="1" title = "a" />
<img src="seat_avail.png" alt = "2" id="2" title = "a" />
<img src="seat_avail.png" alt = "3" id="3" title = "a" />
<img src="seat_avail.png" alt = "4" id="4" title = "a" />
<img src="seat_avail.png" alt = "5" id="5" title = "a" />
<br />
<input type="button" value="Reserve Seat" onclick="assignSeat()" />

</body>
</html>

Wednesday, April 29, 2009

Stick Figure Storyboard with Javascript

Assume that all pictures are in the same folder with the HTML page...


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Story Board</title>
    <script type="text/javascript">
   
    var scene = 0;
   
    function changeImg(num)
    {
       
        if (scene==0)
        {
            alert("Your journey begins at a fork in the road.");
            scene=1;
        }
        else if  (scene==1)
        {
            if(num==1)
            {
                alert("You have arrived at a cute little house in the woods.");
                scene=2;
            }
            else if (num ==2)
            {
                alert("You are standing on the bridge overlooking a peaceful stream.");
                scene=3;
            }
        }
        else if  (scene==2)
        {
            if(num==1)
            {
                alert("Peeking through the window, you see a witch inside the house.");
                scene=4;
            }
            else if (num ==2)
            {
                alert("Sorry, a witch lives in the house and you just became part of her stew.");
                scene=5;
            }
        }
        else if  (scene==4)
        {
            if(num==1)
            {
                scene=8;
            }
            else if (num ==2)
            {
                alert("Sorry, a witch lives in the house and you just became part of her stew.");
                scene=5;
            }
        }
        else if  (scene==5)
        {
            scene=0;
           
        }
        else if  (scene==3)
        {
            if(num==1)
            {
                alert("Sorry, a troll lives on the other side of the bridge and you just became his lunch.");
                scene=6;
            }
            else if (num ==2)
            {
                alert("Your stare is interrupted by the arrival of a huge troll.");
                scene=7;
            }
        }
        else if  (scene==6)
        {
            scene=0;
        }
        else if  (scene==7)
        {
            if(num==1)
            {
                alert("Sorry, a troll lives on the other side of the bridge and you just became his lunch.");
                scene=6;
            }
            else if (num ==2)
            {
                scene=9;
            }
        }
        document.getElementById("img").src ="scene"+scene+".png";

    }
    </script>
</head>
<body>
    <div style="margin: 0 auto; text-align:center">
        <img src="scene0.png" alt="Choose your path" id="img"/>
        <br />
        <input type="button" id="decision1" value="1" onclick="changeImg(1)" />
        <input type="button" id="decision2" value="2" onclick="changeImg(2)" />
    </div>
</body>
</html>

Saturday, April 18, 2009

Shanti Javascript Holiday Homework

Howdie!

The javascript output is as follows:

0
10
10
0
-5
3
0
NaN
value=54
9=value
0.5
2
0.5
Infinity
-Infinity
NaN
5
NaN
one=2 two=2
one=2 two=1
false
false
false
false
true
true
false
true
true
true
true
false
true
true
false
false
false
true
false
false
null
null
false
0
0
false
0

undefined
undefined
true
false
1
undefined

The HTML code can be found below:


<html>
<head>
</head>

<body>
<pre>
<script type="text/javascript">
document.writeln("1" * "0");
document.writeln("1" + 0);
document.writeln(1 + "0");
document.writeln("1"* "0");
document.writeln(- - -5);
document.writeln(true ? 3 : false ? 5 : 0);
document.writeln("1" * false);
document.writeln("1" * "false");
document.writeln("value=" + 5 + 4);
document.writeln(5 + 4 + "=value");
document.writeln(2/4);
document.writeln(4.0/2.0);
document.writeln(2.0/4);
document.writeln(5/0);
document.writeln(-5/0);
document.writeln(0/0);
document.writeln(+ "5");
document.writeln(+ "a");
var one=1; var two=++one; document.writeln("one=" + one + " two=" + two);
var one=1; var two=one++; document.writeln("one=" + one + " two=" + two);
document.writeln(5==="5");
document.writeln("hello" === "HELLO");
document.writeln(NaN === 5);
document.writeln(NaN === NaN);
document.writeln(null===null);
document.writeln(undefined===undefined);
document.writeln(null===undefined);
document.writeln(null==undefined);
document.writeln("1" == true);
document.writeln("1" ==1);
document.writeln(1==true);
document.writeln("Z" < "A");
document.writeln("Z" < "a");
document.writeln("Zelda" < "Zoo");
document.writeln("zelda" < "Zoo");
document.writeln(true < 1);
document.writeln(1 < "true");
document.writeln("11" < "3");
document.writeln("11" < 3);
document.writeln("one" <3);
document.writeln(null && true);
document.writeln(null && false);
document.writeln(false && null);
document.writeln(0 && true);
document.writeln(0 && false);
document.writeln(false && 0);
document.writeln(true && 0);
document.writeln("" && true);
document.writeln("" && false);
document.writeln(undefined && true);
document.writeln(undefined && false);
document.writeln(!!5);
document.writeln(!!null);
document.writeln(null ? 0 : 1);
document.writeln(void (1+2));
</script>
</pre>

</body>

</html>

Thursday, April 2, 2009

Assignment due next week - Shanti's Travel Agency

I have uploaded my assignment on my website. It's nothing exceptional, pretty plain but straight to the point. Some plain javascript validations on the form.

http://denisk.webs.com/creative.html

Pages are XHTML & CSS1.2 compliant. What do you think?

Wednesday, April 1, 2009

Javascript Homework

Here are my homework answers. Anyone managed to find the exact age, without using if-else structures using the Month values?

Question 1,2,3,4


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
   <head>
       <meta http-equiv="content-type" content="text/html; charset=utf-8" />
     
       <title></title>
   </head>
   <body>
   <script type="text/javascript">
       document.write("<h1>Question 1</h1>");
       document.write("Result of 0xab00 + 0xcd = ");
       document.write(0xab00 + 0xcd + "<br />");
       document.write("Result of 0xff - 0123 = ");
       document.write(0xff - 0123 + "<br  />");
     
       document.write("<br /><br />");    /* Some Space */
     
       document.write("<h1>Question 2</h1>");
       document.write("Result of -4.321 + 55.  = ");
       document.write(-4.321 + 55. + "<br/>");
       document.write("Result of 12e2 - 1e-2 = ");
       document.write(12e2 - 1e-2 + "<br/>");
       document.write("Result of .5  -  4e-4 = ");
       document.write(.5  -  4e-4  + "<br/>");
     
       document.write("<br /><br />");    /* Some Space */
     
       document.write("<h1>Question 3</h1>");
       document.write("Result of true * 5 + false * 7  = ");
       document.write(true * 5 + false * 7  + "<br/>");
     
       document.write("<br /><br />");    /* Some Space */
       document.write("<h1>Question 4 - Create a face</h1>");
     
       document.write("<pre>    \"\"\"\"\"\"\"<br />  
\"\"\"\"\"\"\"\"\"<br />  --\"\"\" \"\"\"--<br />  <
<.> <.> ><br />      / \\<br />   
\\-----/<br />     --\"--<br /></pre>");

       document.write("<br /><br />");    /* Some Space */


   </script>
   </body>
</html>

Question 5


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
   <head>
       <meta http-equiv="content-type" content="text/html; charset=utf-8" />
     
       <title></title>
   </head>
   <body>
   <p>
   Use pop-up boxes to get a name, date of birth (date, month, and year in separate boxes) and
display the name, date of birth, and age on a table.
   </p>
   <script type="text/javascript">
       var name = prompt("Enter name ");
       var date = prompt("Enter birth date ");
       var month = prompt("Enter birth month ");
       var year = prompt("Enter birth year ");
     
       var todate = new Date();
       var elapsedYear= todate.getYear();
       var currentYear= parseInt(elapsedYear) + 1900;
       var age = currentYear - year;
     
       document.write( "<table style=\"border:solid 2px\"'><tr><td>Name<
/td><td>DOB</td><td>Age</td><tr><td>"+ name +
"</td> <td>" + date+"/"+month+ "/" + year +"</td> <td>" + age +
"</td></tr></table>");
 
   </script>
   </body>
</html>

deniskoo blog - C#, HTML, XHTML, CSS, Javascript, Project Management - WEB 2.0