spacer

Webref WebRef   Sitemap · Experts · Tools · Services · Newsletters · About i.com

home / experts / javascript / column35


The "javascript:" Protocol

Developer News
Sir Tim Talks Up Linked Open Data Movement
From L.A. to Vegas With 100GbE
Salesforce Rolls Out Big Summer '08 Update

If you've reached this site, you are probably familiar with the basic protocols, such as http: and ftp:. JavaScript-enabled browsers support the javascript: protocol, which lets you execute statements rather than loading a new document. For example, enter the following URL in your browser:

javascript:alert("Hello World")

Now enter a two-statement URL:

javascript:alert("Hello World");alert("Hello Net")

As you can see, it is possible to enter multiple statements after the preceding javascript: specification. Also note that a semicolon is not necessary after the last statement in the URL.

Entering a javascript: URL in the browser's Location bar is almost useless. However, we can implement javascript: URLs in various browser elements. The most trivial implementation is a simple link:

<A HREF="javascript:alert('Hello World')">Hello World</A>

Simply click the following link, and an alert box will appear: Hello World. If it doesn't work, make sure JavaScript is currently enabled in your browser.

Notice the alternation of quotes. Since the HREF attribute requires quotes, we must make sure the internal javascript: URL doesn't use the same type of quotes. In the preceding example, we use double quotes for the HTML attribute, and single quotes for the JavaScript statement.

The JavaScript statement used in a javascript: URL should not return any value. For example, the alert() method doesn't return a value; in other words, it returns undefined. If the statement returns undefined, the browser simply executes it. However, if it returns an explicit value, the browser loads a new page, with the javascript: URL in the Location bar, and the returned value in the body of the page.

When taking advantage of the javascript: protocol, we must make sure the statement doesn't return any value. Therefore, we need to apply the void operator if the statement returns an actual value. Here's an example:

<A HREF="javascript:void(str='Doc JavaScript')">

The void operator evaluates its expression, and returns undefined. The parentheses surrounding the expression are optional, but they are important when writing compact, one-line scripts. If you're not sure if a statement returns a value, use the void operator to stay on the safe side.

When inserting several statements in a single javascript: URL, all value-returning statements require a void operator. Take a look at the following example:

<A HREF="javascript:void(a=1);void(b=prompt('Enter a number:','99'))">

Note that the entire javascript: URL should be as compact as possible. Long javascript: URLs tend to generate errors or crash the browser. We suggest that you stick to a maximum of about 500 characters.

http://www.internet.com

Produced by Yehuda Shiran and Tomer Shiran


JupiterOnlineMedia

internet.comearthweb.comDevx.commediabistro.comGraphics.com

Search:

Jupitermedia Corporation has two divisions: Jupiterimages and JupiterOnlineMedia

Jupitermedia Corporate Info


Legal Notices, Licensing, Reprints, & Permissions, Privacy Policy.

Advertise | Newsletters | Tech Jobs | Shopping | E-mail Offers

Solutions
Whitepapers and eBooks
IBM eBook: Planning a Service Oriented Architecture
IBM eBook: Choosing the Right Architecture--What It Means for You and Your Business
Microsoft Article: Will Hyper-V Make VMware This Decade's Netscape?
Avaya Article: Using Intelligent Presence to Create Smarter Business Applications
Intel Go Parallel Article: Getting Started with TBB on Windows
Microsoft Article: 7.0, Microsoft's Lucky Version?
Avaya Article: How to Feed Data into the Avaya Event Processor
IBM Article: Developing a Software Policy for Your Organization
Microsoft Article: Managing Virtual Machines with Microsoft System Center
Intel Go Parallel Article: Intel Threading Tools and OpenMP
HP eBook: Storage Networking , Part 1
Microsoft Article: Solving Data Center Complexity with Microsoft System Center Configuration Manager 2007
MORE WHITEPAPERS, EBOOKS, AND ARTICLES
Webcasts
HP Video: StorageWorks EVA4400 and Oracle
HP Webcast: Storage Is Changing Fast - Be Ready or Be Left Behind
Microsoft Silverlight Video: Creating Fading Controls with Expression Design and Expression Blend 2
MORE WEBCASTS, PODCASTS, AND VIDEOS
Downloads and eKits
Red Gate Download: SQL Toolbelt and free High-Performance SQL Code eBook
Iron Speed Designer Application Generator
MORE DOWNLOADS, EKITS, AND FREE TRIALS
Tutorials and Demos
Silverlight 2 App and Walkthrough: Leverage Silverlight 2 with SQL Server and XML
IBM Article: Enterprise Search--Do You Know What's Out There?
HP Demo: StorageWorks EVA4400
Microsoft Article: The Progress and Promise of Deep Zoom
Microsoft How-to Article: Get Going with Silverlight and Windows Live
MORE TUTORIALS, DEMOS AND STEP-BY-STEP GUIDES
webref The latest from WebReference.com Browse >
Book Review: Head First JavaScript · Web Hosting Control Panels · Use Your Blog for Fast Search Engine Rankings
Sitemap · Experts · Tools · Services · Email a Colleague · Contact FREE Newsletters 
 The latest from internet.com
NetApp's Virtual Storage Strategy Crystallizes · F/MC Watch: A Cisco-Centric Approach · Olympic Time Trials Use Wi-Fi Mesh


Created: February 1, 1999
Revised: February 1, 1999

URL: http://www.webreference.com/js/column35/protocol.html