Javacsript Help

Dharmpal Singh · Oct 16, 2009

Code:

<html>
<head>
<script type="text/javascript">
function blinking_header()
{
if (!document.getElementById('blink').style.color)
	{
	document.getElementById('blink').style.color="red";
	}
if (document.getElementById('blink').style.color=="red")
	{
	document.getElementById('blink').style.color="black";
	}
else
	{
	document.getElementById('blink').style.color="red";
	}
timer=setTimeout("blinking_header()",100);
}

function stoptimer()
{
clearTimeout(timer);
}
</script>
</head>

<body onload="blinking_header()" onunload="stoptimer()">
<h1 id="blink">Blinking header</h1> 
</body>

</html>

Can Any Body explain me these code line by line .

krishnandu.sarkar · Nov 20, 2009

Can Any Body explain me these code line by line

Well Let me try....!!

Code:

<html>
<head>

Starting tag of HTML and HEAD part

Code:

<script type="text/javascript">

Defines the script type which is js in this case

Code:

function blinking_header()

a user defined function named blinking_header is starting

Code:

if (!document.getElementById('blink').style.color)

document means the HTML page(currect page/doc). getElementById is a inbuilt func which gets element id where we passed blink which is a element(we'll see it later) to get its id.
.style is refers to the style of blink
.color is a property of style.
and a !(not) is added to the beginning.

This means if thr is no color in blink then.....

Code:

document.getElementById('blink').style.color="red";

Again we r fetching the id of element blink which is within document and setting its colour to red.

Code:

if (document.getElementById('blink').style.color=="red")

Now we r checking whether the colour of blink is red

Code:

document.getElementById('blink').style.color="black";

If the avobe condition is true thn we r setting thr colour of blink to Black

Code:

else
	{
	document.getElementById('blink').style.color="red";
	}

Else means if the colour of blink is not red then we r setting the colour to red.
It is the else part of 2nd if.

Code:

timer=setTimeout("blinking_header()",100);

Now we r setting a clock which will execute this blinking_header() func every 100secs(i forgot is it millisec/sec) and the timer variable will keep track of it.

And with this the function blinking_header() ends.

Code:

function stoptimer()
{
clearTimeout(timer);
}

Now a new function starts named stoptimer()
and its stopping the timer i.e the clock.
clearTimeout is an inbuilt function where we passed timer variable which was keeping track of the clock.

Code:

</script>
</head>

The script and head part ends. The scripts needs to be always declared in head part.

Code:

<body onload="blinking_header()" onunload="stoptimer()">
<h1 id="blink">Blinking header</h1> 
</body>

</html>

The body of HTML is starting and onload event(i.e when the page loads i.e startup/releaded) it's calling blinking_header() function and onunload event(i.e when the page unloads(when the page is being unload i.e closed) it's calling the stoptimer() functn.

Means when the page will load the blinking_header() function starts and keeps changing the colour of blink element from red to black and vice-versa after a desired time(i.e 100 in this case) and continues it.

And when the page is closed this action stops as the timer is stopped within the fiunction.

And now we can see that what we are calling element blink is a header of H1.

Tats all.....!!

I know my eng is painfull plz manage....!!

Others plz correct me if I'm wrong.

Javacsript Help

Dharmpal Singh

Broken In

krishnandu.sarkar

Simply a DIGITian