JavaScript Void 0
Hyperlinks like this one entice visitors to click because they know clicking it will lead them to a new page. However, sometimes when you are making a script, you would like to add functionality to your website that lets a hyperlink to be clicked and perform a useful action like update the sums on the webpage, without loading a new page.
It's 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 JavaScript Void 0programming 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 JavaScript. 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 JavaScript 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 has very few new pages loading. Here is an example link that does not load a new webpage.
<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 JavaScript statements is only unleashed when you use it to return a value. This is where void 0 comes into 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 JavaScript 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 JavaScript 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.
<a href="javascript: void(0)">I am a useless link</a>
Display:
Simple JavaScript 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 alertoperation.
<a href="javascript: void(myNum=10);alert('myNum = '+myNum)">
Set myNum Please</a>
Display:
No comments:
Post a Comment