Javascript Void 0
Hyperlinks like this one entice visitors to
click because they know it will lead to a new page. However, sometimes when you are making a
script you would like to add functionality to your web site that lets a hyperlink to be clicked, perform
a useful action like update the sums on the web page, but not load a new page.
It are these types of programming solutions that will utilize the Javascript Void 0 programming
tool.
This lesson will teach you some of the reasons to use the Javscript Void 0
programming strategy in your scripts.
Directly Executing Javascript in a Browser
Web browsers allow you to execute Javascript statements directly by entering
Javascript code into the browser's URL text field. All you need to do is place a Javascript: before your
code to inform the browser you wish to run Javscript. You can play around with this right now
by typing something like
- Javascript:alert("I'm learning at Tizag.com")
into the browser's URL text field and pressing Enter.
This is useful to you, the Javascript scripter, because you can now set your hyperlinks's
href attribute equal to a Javscript statement! This means you can
remove the hyperlink's ability to load a new page and reprogram it to do your "complete some actions directly
on this page" bidding.
This practice can be seen in services like Gmail (Google Email) which does a great deal of
interaction with hyperlinks, but very few new pages loading. Here is an example link
that does not load a new web page.
Javascript Code:
<a href="javascript: alert('News Flash!')">News Flash</a>
Display:
This is interesting to learn, but it isn't much more than a gimmick. The true power of
direct URL Javscript statements is only unleashed when you use it to return a value. This is where void 0 comes in to play.
Javascript Void 0 Explanation
Web browsers will try and take whatever is used as a URL and load it. The only reason
we can use a Javscript Alert statement without loading a new page is because alert is a
function that returns a null value. This means that when the browser attempts to load a new page it sees null
and has nothing to load.
The important thing to notice here is that if you ever do use a Javascript statement as the URL that returns
a value the browser will attempt to load a page. To prevent this unwanted action you need to use the
void function on such statement, which will always return null and never load a new page.
Simple Javscript Void 0 Simple Example
Void is an operator that is used to return a null value so the browser will not be able to load a new page.
An important thing to note about the void operator is that it requires a value and cannot
be used by itself. Here is a simple way to use void to cancel out the page load.
Javascript Code:
<a href="javascript: void(0)">I am a useless link</a>
Display:
Simple Javscript Void 0 Useful Example
This example shows how you would return a value using the void operator. myNum is a
variable that we set to the value 10. We then use the same variable myNum in an alert
operation.
Javascript Code:
<a href="javascript: void(myNum=10);alert('myNum = '+myNum)">
Set myNum Please</a>
Display:
|