About this FAQ

Question: Why this FAQ? Answer: The goal of this FAQ is to help you develop robust client-side scripts that can run in Netscape Navigator as well as Microsoft Internet Explorer, under various operating systems. This FAQ collection is different from others in the following:
• • •

Here the answers are focused on platform-independent coding, rather than on one particular browser or platform. Here most answers contain interactive code examples which you can run without leaving the Web page you are reading. Here you get the solution, not just a confirmation that the problem exists. For example, other sources would just say: Sorry, JavaScript cannot read files from the server. This FAQ gives you the solution: Here's a Java applet that helps JavaScript read files from the server.

Back

Question: What is JavaScript? Answer: JavaScript is a scripting language designed for adding interactivity to HTML pages. The language was first implemented by Netscape Communications in Netscape Navigator 2 beta (1995). JavaScript is different from the Java language (developed at Sun Microsystems). However, the two languages can interoperate well. JavaScript programs, or scripts, are usually embedded directly in HTML files. The script executes when the user's browser opens the HTML file. (There is also server-side JavaScript, but it's beyond the scope of this FAQ collection.) JavaScript is an interpreted language. This means that scripts execute without preliminary compilation, i.e. without conversion of the script text into a systemdependent machine code. The user's browser interprets the script, that is, analyzes and immediately executes it. JavaScript is supported by the following browsers:
• • •

Netscape Navigator (beginning with version 2.0) Microsoft Internet Explorer (beginning with version 3.0) Any other browser/product whose vendor licensed or implemented JavaScript interpreter (for example, Opera).

Thus, most Internet users today have browsers that support JavaScript. That's why JavaScript is one of the most popular tools for adding interactive features to Web pages.

JavaScript Features

Question: What can JavaScript programs do? Answer: The following list presents only some groups of typical tasks in which JavaScript proves very useful:
• • • • • •

Giving the user more control over the browser Detecting the user's browser, OS, screen size, etc. Performing simple computations on the client side Validating the user's input Handling dates and time Generating HTML pages on-the-fly without accessing the Web server.

Below you'll find simple examples illustrating each of these tasks. 1. Giving the user more control over the browser. Example: Here you can change the background color of this page as well as the text on the browser's status bar.

And here is a Back button implemented with JavaScript. Click it, and you'll return to the page from which you arrived: 2. Detecting the user's browser 2. Detecting the user's browser and OS. The ability to detect the user's browser and OS allows your script to perform platform-dependent operations, if necessary. Example. Here users of different browsers will get different greetings: glad to see a user of Microsoft Internet Explorer under Windows! We are really

3. Performing simple computations on the client side. Example. This is a JavaScript calculator: type an arithmetic expression, and JavaScript will compute its value.

4. Validating the user's input. Example. In the calculator above, try typing some letters instead of numeric input. You'll get a warning: Invalid input characters! Note that JavaScript helps the browser perform input validation without wasting the user's time by the Web server access. If the user makes a mistake in the input, the user will get an error message immediately! On the other hand, if the input information is validated only on the server, then the user would have to wait for the server response.

5. Handling dates and time. Example 1. This is a JavaScript clock. Local time: Example 2. This script says "Nice morning, isn't it?" or "Good afternoon!" or "Good evening!" or "Wow, you are not asleep yet!?" depending on the current time. It also tells you today's date. Nice morning, isn't it? Today is Tuesday, 14 August 2007. 6. Generating HTML pages on the fly. Example. The Table of Contents on the left is dynamically expandable. To view all subsections in a section, you can click on the white arrow corresponding to that section. To hide subsections, click on the arrow . Every time you click on the arrows, the browser generates and displays a new HTML page in the left frame. Thanks to JavaScript, this operation is performed on the client machine, and therefore you don't have to wait while the information goes back and forth between your browser and the Web server.
Back JavaScripter.net. Copyright © 1999-2006, Alexei Kourbatov

JavaScript Limitations
Question: What can't JavaScript programs do? Answer: JavaScript code cannot do any of the following:
• •

• •

use printers or other devices on the user's system or the client-side LAN (For a workaround, see Printing JavaScript output.) directly access files on the user's system or the client-side LAN ; the only exception is the access to the browser's cookie files. (For a workaround, see the File Access section.) directly access files on the Web server. (For a workaround, see the File Access section.) implement multiprocessing or multithreading.

If you do need to access files or perform other "privileged" operations, you can use JavaScript in combination with a Java applet. Signed Java applets are allowed to do "privileged" things, and your JavaScript programs can exchange information with applets. However, you have to bear in mind the biggest JavaScript/Java limitation: the user can always disable Java or JavaScript or both!

Back

Browsers Supporting JavaScript
Question: Which browsers support JavaScript? Answer: JavaScript is supported by the following browsers:
• • •

Netscape Navigator (beginning with version 2.0) Microsoft Internet Explorer (beginning with version 3.0) Any other browser/product whose vendor licensed or implemented JavaScript interpreter (for example, Opera).

See also JavaScript Versions.
Back JavaScripter.net. Copyright © 1999-2006, Alexei Kourbatov

JavaScript Versions
Question: What JavaScript versions are there? Answer: JavaScript is one of the youngest programming languages. It was first implemented by Netscape Communications in 1995. The first browser to support JavaScript was Netscape Navigator 2.0 beta version. By 1999 the two major browsers, Netscape Navigator and Microsoft Internet Explorer, supported the following client-side versions of JavaScript: Browser Netscape Navigator 2.0 Netscape Navigator 3.0 Netscape Navigator 4.0 Netscape Navigator 4.5 Year JavaScript Version

1995 JavaScript 1.0 1996 JavaScript 1.1 1997 JavaScript 1.2 1998 JavaScript 1.3

Microsoft Internet Explorer 3.0 1996 JavaScript 1.0 (JScript 1.0)

Microsoft Internet Explorer 4.0 1997 JavaScript 1.2 (JScript 3.0) Microsoft Internet Explorer 5.0 1999 JavaScript 1.3 (JScript 5.0) Unfortunately, Netscape and Microsoft implementations of JavaScript are different, even for the same JavaScript version number. For example, JavaScript 1.0 in Internet Explorer 3 differs from JavaScript 1.0 in Netscape Navigator 2; similarly, JavaScript 1.2 in Internet Explorer 4 is not the same as JavaScript 1.2 in Netscape Navigator 4.

In addition to these JavaScript versions, third parties can also create their own JavaScript implementations, or license the JavaScript technology from either Microsoft or Netscape. For example, the Opera browsers now support JavaScript. What does that mean for cross-platform coding? Essentially, you have to use either of the following techniques:
• •

use only a subset of the JavaScript language that is supported by all target browsers and/or write different code segments for different browsers, and detect the actual browser at run time.

Be sure to test your scripts on all target platforms.
Back JavaScripter.net. Copyright © 1999-2006, Alexei Kourbatov

JavaScript Documentation
Question: Where can I get JavaScript documentation? Answer: Online JavaScript documentation is available at these sites:
• •

http://www.mozilla.org/js/language/ - Mozilla.org JavaScript Resources page http://msdn.microsoft.com/scripting - Microsoft's JScript, DHTML info, etc.

In addition, you can find JavaScript discussions, online tutorials, links, code examples, and hundreds of useful scripts at the following sites (of course this list is incomplete and serves only as a starting point):
• • • • • Back JavaScripter.net. Copyright © 1999-2006, Alexei Kourbatov

http://www.WebReference.com/programming/JavaScript/ - tutorials and in-depth discussions http://www.JavaScripts.com - lots of scripts and code examples http://www.24fun.com - another good site with lots of scripts http://www.irt.org - FAQ collections in several categories, including JavaScript http://www.JavaScripter.net/faq/ - this FAQ collection.

Printing JavaScript Output
Question: How do I print JavaScript output?

Answer: JavaScript programs cannot directly access printers. However, the user can print out everything on the Web page, including the output of JavaScript programs, by using the File | Print menu of the browser (or the keyboard shortcut, e.g. Ctrl+P on Windows systems). If your script outputs data that users would often print out, then you can
• •

remind them to use the File | Print menu and/or use the window.print() method to open the print dialog.

Also, your script might generate the printable data in a separate browser window (see example below). Example. This script generates the multiplication table, writes it to a new browser window and explains to the user how to print it.
Back

Comments in JavaScript
Question: How do I insert comments in JavaScript code? Answer: JavaScript supports three different types of comments: 1. Multiple-line C-style comments. Everything between /* and */ is a comment, for example:
2. 3. 4. 5. /* /* as as This is a comment */ C-style comments can span many lines as you like, shown in this example */

6. One-line comments of C++ style. These comments begin with // and continue up to the next line break:
7. // This is a one-line comment

8. One-line comments with the HTML comment-opening sequence (<!--). Note that the JavaScript interpreter ignores the closing characters of HTML comments (->). Consider this example:
9. <!-10.<!-11.<!-12.<!-13.<!-This is treated as a one-line JS comment It works just like a comment beginning with // --> This is also a one-line JS comment --> because JS ignores the closing characters --> of HTML-style comments

HTML-style comments are not usually found in the middle of JavaScript code. (The // comments are simpler and easier to read.) However, it is strongly recommended to use HTML comments for hiding JavaScript code from old browsers.
Back

JavaScripter.net. Copyright © 1999-2006, Alexei Kourbatov

Hiding JS code from old browsers
Question: How do I hide JS code from old browsers that do not support JavaScript? Answer: To prevent old browsers from displaying your JS code, do the following: 1. Immediately after the opening <script> tag, put a one-line HTML-style comment without the closing characters, so that the first two lines of your script would look like this:
2. <script language="JavaScript"> 3. <!-5. //--> 6. </script>

4. At the end of your script, put the following two lines: Thus, your HTML file will contain the following fragment:
<script language="JavaScript"> <!-Here you put your JS code. Old browsers will treat it as an HTML comment. //--> </script>

Old browsers will treat your JS code as one long HTML comment. On the other hand, new JavaScript-aware browsers will normally interpret JS code between the tags <script> and </script> (the first and last lines of your JS code will be treated by the JavaScript interpreter as one-line comments).
Back JavaScripter.net. Copyright © 1999-2006, Alexei Kourbatov

Is JavaScript enabled?
Question: If the user's browser cannot execute JavaScript code, can I display a warning for the user? Answer: Yes, you can display a special warning for users of JavaScript-incapable browsers. Put your warning text between the tags <NOSCRIPT> and </NOSCRIPT>. Here's an example:
<NOSCRIPT> <H3>This page uses JavaScript</H3> <ul> <li>Please use Netscape Navigator 3+ or Internet Explorer 3+ <li>Make sure that JavaScript is enabled in your browser. </ul>

</NOSCRIPT>

JavaScript-enabled browsers will ignore everything between <NOSCRIPT> and </NOSCRIPT>. Browsers that cannot execute JavaScript will display your message on the page. NOTE: The <NOSCRIPT> tag is not supported by Netscape Navigator 2. Therefore, your message will be visible to Netscape 2 users even if JavaScript is enabled in their browser. Keep this in mind and choose a proper wording that won't mislead Netscape 2 users. (For example, the above message assumes that your script requires at least version 3 of the browser.)
Back

External JS Files
Question: Can I include JavaScript code from external JS files, rather than embedding all my scripts within HTML pages? Answer: Yes. To do so, create a new file with the extension myscript.js. Put your JavaScript code in this file; do not include opening and closing SCRIPT tags in the myscript.js into your Web page, use these tags in your HTML file:
.js files containing JavaScript functions that you reuse on many different HTML pages. Please note, however, that some old browsers (e.g. Navigator 2.x and Explorer 3.x) cannot load external JavaScript files!
Back

JavaScripter.net. Copyright © 1999-2006, Alexei Kourbatov

Reserved words in JavaScript
Question: What reserved words are there in JavaScript? Answer: Reserved words of the JavaScript langauge are listed below. (Some of these words are actually used in the Java language, and are reserved in JavaScript for compatibility purposes or as possible extensions.) When choosing names for your JavaScript variables, avoid these reseved words! abstract boolean break byte else enum export extends instanceof int interface long switch synchronized this throw

case catch char class const continue debugger default delete do double

false final finally float for function goto if implements import in

native new null package private protected public return short static super

throws transient true try typeof var void volatile while with

In addition to the above reserved words, you'd better avoid the following identifiers as names of JavaScript variables. These are names of client-side objects, methods, or properties in Netscape Navigator or Internet Explorer: hidden all history anchor image anchors images area isNaN array java assign JavaArray blur JavaClass button JavaObject checkbox JavaPackage clearTimeout innerHeight clientInformation innerWidth close layer closed layers confirm length crypto link date location defaultStatus Math document mimeTypes element name elements navigate embed navigator embeds netscape alert outerWidth packages pageXOffset pageYOffset parent parseFloat parseInt password pkcs11 plugin prompt prototype radio reset screenX screenY scroll secure select self setTimeout status String

escape eval event fileUpload focus form forms frame frames frameRate function getClass
Back

Number Object offscreenBuffering onblur onerror onfocus onload onunload open opener option outerHeight

submit sun taint text textarea top toString unescape untaint valueOf window

JavaScripter.net. Copyright © 1999-2006, Alexei Kourbatov

Navigation Enhancement
• • • • • • •

How do I code a select menu with hyperlinks to different pages? Can I make a button on my page work as a hyperlink to another page? Can I make a button on my page work as the browser's Back button? Can I make a button on my page work as the browser's Forward button? Can my script access the query string in the current URL? Can I pass parameters from one page to another? How do I search for a particular text string on the page?

JavaScripter.net. Copyright © 1999-2006, Alexei Kourbatov

Links in a Select Menu
Question: How do I code a select menu with hyperlinks to different pages? Answer: To create a select menu like this: you can use the following code:
<form> <select onChange="if(this.selectedIndex!=0) self.location=this.options[this.selectedIndex].value"> <option value="" selected>Select a page <option value="startpag.htm">JavaScript FAQ <option value="numbers.htm">Numbers <option value="strings.htm">Strings <option value="navigati.htm">Navigation

<option value="colors.htm">Colors <option value="http://www.javascripter.net">JavaScripter.net </select> </form>

Just change the menu items and the corresponding URLs to whatever you want. You can use absolute URLs (like http://www.javascripter.net) as well as relative URLs (like mypage.htm).
Back JavaScripter.net. Copyright © 1999-2006, Alexei Kourbatov

Button Links
Question: Can I make a button on my page work as a hyperlink to another page? Answer: To create a button that works as a you can use this code:
<form> <input type=button value="insert button text here" onClick="self.location='Your_URL_here.htm'"> </form>

Just change the button text and the target URL to whatever you want. Try it now: You can use absolute URLs (like http://www.javascripter.net) as well as relative URLs (like mypage.htm).
Back JavaScripter.net. Copyright © 1999-2006, Alexei Kourbatov

Back Button
Question: Can I make a button on my page work as the browser's Back button? Answer: To create your own Back button, use this code
<form> <input type=button value="Back" onCLick="history.back()"> </form>

Try it now:
JavaScripter.net. Copyright © 1999-2006, Alexei Kourbatov

Forward Button
Question: Can I make a button on my page work as the browser's Forward button?

Answer: To create your own Forward button, use this code
<form> <input type=button value="Forward" onCLick="history.forward()"> </form>

If your browser's Forward button is currently inactive, then the Forward button on your page won't work either. This is the case when the current page is the last page in your browsing history. On the other hand, if you arrived to the current page using the browser's Back button (or a scripted Back button) then the Forward button will work. Try it now!
JavaScripter.net. Copyright © 1999-2006, Alexei Kourbatov

Query Strings
Question: Can my script access the query string in the current URL? Answer: A query string (or search string) is an optional part of a URL that goes after the file name and begins with a question mark (?). For example, the following URL has a query string ?myquery after the HTML file name:
http://www.myfirm.com/file.html?myquery

Your script can access the query string in the current URL by using the JavaScript location.search property. Click the buttons below to try it! (To view the URL in the address line, you might want to display this page in the top-level browser window.) These buttons have been created using the following code:
<form> <input type=button value="Add query ?test" onClick="self.location= self.location.protocol+'//' +self.location.host +self.location.pathname+'?test'"> <input type=button value="Show query" onClick="alert('Query string: '+self.location.search)"> <input type=button value="Remove query" onClick="self.location= self.location.protocol+'//' +self.location.host +self.location.pathname"> </form>

NOTE: query strings may not always work as expected. For example, if you save this page on your local disk, the above buttons won't work in Internet Explorer 4.x (but they would still work in Netscape Navigator).
Back JavaScripter.net. Copyright © 1999-2006, Alexei Kourbatov

Passing parameters to a page
Question: Can I pass parameters from one my page to another? Answer: Yes, you can pass a parameter to another page in several different ways:
• • • •

by storing the parameter in a cookie by storing the parameter in a variable of another window or frame by storing the parameter in the rewritable property top.name (the browser window name) by appending the parameter to the destination page's URL as a query string

Here is a simple demo illustrating all these methods for passing parameters. The value to be passed is the string 'It_worked'. When you click on the button below, the button's event handler script stores the parameter (1) in a cookie named parm_value, (2) in a toplevel variable top.parm_value, and (3) in the top.name property. Then the script directs your browser to the URL parm_get.htm appended with a query string containing the URL-encoded parameter value.
Back JavaScripter.net. Copyright © 1999-2006, Alexei Kourbatov

Searching for text
Question: How do I search for a particular text string on the page? Answer: In Netscape Navigator 4.x, to search for a string use the window.find(string) method; see also Find Dialog. In Internet Explorer 4.x and newer, create a text range object (TRange in the example below) and use the method TRange.findText(string). Example: The following script gets a text string from the user and then finds and highlights this string on the page. This example has been created using the following code:

<form name="f1" action="" onSubmit="if(this.t1.value!=null && this.t1.value!='') findString(this.t1.value);return false" > <input type="text" name=t1 value="" size=20> <input type="submit" name=b1 value="Find"> </form> <script language="JavaScript"> <!-var TRange=null

function findString (str) { if (parseInt(navigator.appVersion)<4) return; var strFound; if (navigator.appName=="Netscape") { // NAVIGATOR-SPECIFIC CODE strFound=self.find(str); if (!strFound) { strFound=self.find(str,0,1) while (self.find(str,0,1)) continue } } if (navigator.appName.indexOf("Microsoft")!=-1) { // EXPLORER-SPECIFIC CODE if (TRange!=null) { TRange.collapse(false) strFound=TRange.findText(str) if (strFound) TRange.select() } if (TRange==null || strFound==0) { TRange=self.document.body.createTextRange() strFound=TRange.findText(str) if (strFound) TRange.select() }

} //--> </script>

} if (!strFound) alert ("String '"+str+"' not found!")

JavaScript Numbers FAQ
• • • • • • • • • • • •

What types of numbers can I use in JavaScript code? How do I handle mathematical constants in JavaScript? Is there a way to use octal and hexadecimal values in JavaScript? How do I convert numbers to strings? How do I convert strings to numbers? How do I convert a number to a different base? Is there a way to test whether a particular variable holds a number or a string? What arithmetic operations are supported in JavaScript? What mathematical functions are supported in JavaScript? How do I generate random numbers? How can I round a number to n decimal places? Sometimes JavaScript computations seem to yield "inaccurate" results, e.g. 0.362*100=36.199999999999996. How can I avoid this?

JavaScripter.net. Copyright © 1999-2006, Alexei Kourbatov

Constants
Question: What types of numbers can I use in JavaScript code? Answer: In JavaScript code, you can use the following forms of numbers:
• • •

conventional decimal numbers:
5 137 1.3

decimal numbers in exponential form:
6.67e-11 -1.127e20

octal numbers, for example:
01234 -077 0312

Positive octal numbers must begin with 0 (zero) and negative octal numbers must begin with -0. hexadecimal numbers, for example:
0xFF -0xCCFF 0xabcdef

Positive hexadecimals must begin with 0x and negative hexadecimals must begin with -0x.
Back JavaScripter.net. Copyright © 1999-2006, Alexei Kourbatov

Math Constants
Question: How do I handle mathematical constants in JavaScript? Answer: Some mathematical constants are predefined in JavaScript. You can write these constants as follows:
Math.PI Math.E Math.LOG2E Math.LOG10E Math.LN2 Math.LN10 Math.SQRT2 Math.SQRT1_2 // // // // // // // // pi = 3.14159265... e = 2.71828182... log of e base 2 log of e base 10 log of 2 base e log of 10 base e square root of 2 square root of 1/2

Thus, there is no need to remember the exact numerical value of e or pi. Just use Math.E or Math.PI!
Back JavaScripter.net. Copyright © 1999-2006, Alexei Kourbatov

Octals and Hexadecimals

Question: Is there a way to use octal and hexadecimal numbers in JavaScript? Answer: Yes. In JavaScript you can use octals and hexadecimals. The following are examples of octal numbers:
01234 -077 0312

Positive octal numbers must begin with 0 (zero) and negative octal numbers must begin with -0. And these are examples of hexadecimal numbers:
0xFF -0xCCFF 0xabcdef

Positive hexadecimals must begin with 0x and negative hexadecimals must begin with -0x. When you need to convert an octal or hexadecimal string to a number, use the function parseInt(str,base). Consider these examples:
octalStr='377'; num = parseInt(octalStr,8); // num now holds 255

hexStr='7F'; num = parseInt(hexStr,16); // num now holds 127 The second argument of parseInt specifies the base of the number

whose representation is contained in the original string. This argument can be any integer from 2 to 36.

Converting Numbers to Another Base
Question: How do I convert a number to a different base (radix)? Answer: In JavaScript 1.1, you can use the standard method Number.toString(radix) for converting a number to a string representing that number in a non-decimal number system (e.g. to a string of binary, octal or hexadecimal digits). For example:
a b c d = = = = (32767).toString(16) (255).toString(8) (1295).toString(36) (127).toString(2) // // // // this this this this gives gives gives gives "7fff" "377" "zz" "1111111"

However, in old browsers (supporting only JavaScript 1.0) there is no standard method for this conversion. Here is a function that does the conversion of integers to an arbitrary base (radix) in JavaScript 1.0:
function toRadix(N,radix) { var HexN="", Q=Math.floor(Math.abs(N)), R; while (true) { R=Q%radix; HexN = "0123456789abcdefghijklmnopqrstuvwxyz".charAt(R)+HexN;

}

Q=(Q-R)/radix; if (Q==0) break; } return ((N<0) ? "-"+HexN : HexN);

You can test this conversion right now:

Arithmetic Operations
Question: What arithmetic operations are supported in JavaScript? Answer: JavaScript supports the following arithmetic operations (which you can group in brackets to form more complex expressions):
• • • •

unary operations binary operations shifts mathematical functions

Unary operations have one argument (in the following examples, the argument is a):
-a ~a ++a a++ --a a-// // // // // // change the sign of a bitwise NOT a add 1 to a (before using a) add 1 to a (after using a) subtract 1 from a (before using a) subtract 1 from a (after using a)

Binary operations operations have two arguments (in the following examples, the arguments are a and b):
a a a a a a a a * / % + & | ^ b b b b b b b b // // // // // // // // multiply a by b divide a by b find the remainder of division of a by b add a and b subtract b from a bitwise a AND b bitwise a OR b bitwise a XOR b

Shifts are the following operations:
a << b a >> b a >>> b // // // // // shift a by b bits to the left (padding with zeros) shift a by b bits to the right (copying the sign bit) shift a by b bits to the right

// (padding with zeros) Back

Number vs. String
Question: Is there a way to test whether a particular variable holds a number or a string? Answer: Yes. To test whether the variable holds a number or a string, use the typeof operator. If your variable holds a number, typeof(variable) will return "number". If it holds a string, typeof(variable) will return "string". The following are examples of typeof usage:
typeof(123) typeof("123") // result: "number" // result: "string"

if (typeof k == "string") { alert('k is a string.') } if (typeof k == "number") { alert('k is a number.') } The typeof operator can also help you distinguish between other data types. Depending on the particular variable's value, the result of typeof can be one of the following: "number" "string" "boolean" "function" "object" "undefined" Back

Math Functions
Question: What mathematical functions are supported in JavaScript? Answer: JavaScript supports the following mathematical functions (methods of the Math object):
Math.abs(a) Math.acos(a) Math.asin(a) Math.atan(a) Math.atan2(a,b) Math.ceil(a) Math.cos(a) Math.exp(a) Math.floor(a) Math.log(a) Math.max(a,b) Math.min(a,b) Math.pow(a,b) // // // // // // // // // // // // // the absolute value of a arc cosine of a arc sine of a arc tangent of a arc tangent of a/b integer closest to a and not less than a cosine of a exponent of a integer closest to and not greater than a log of a base e the maximum of a and b the minimum of a and b a to the power b

Math.random() Math.round(a) Math.sin(a) Math.sqrt(a) Math.tan(a)

// // // // //

pseudorandom number in the range 0 to 1 integer closest to a sine of a square root of a tangent of a

Note that trigonometric functions assume that the argument is in radians, not degrees!
Back

Random Numbers
Question: How do I generate random numbers in JavaScript? Answer: To generate random floating-point numbers in the range from 0 to 1, use the Math.random() method:
num = Math.random() // num is random, from 0 to 1 // num is random, from A to B

If you need random floating-point numbers in the range from A to B, use this code:
num = A + (B-A)*Math.random() Back JavaScripter.net. Copyright © 1999-2006, Alexei Kourbatov

Accuracy
Question: Sometimes JavaScript computations seem to yield "inaccurate" results, e.g. 0.362*100=36.199999999999996. How can I avoid this? Answer: To avoid "inaccurate" results, you might want to round the results to the precision of the data you used. For example, in order to round the result to one thousandth, you can use this code:
roundedX = Math.round(1000*rawX)/1000;

Back

Rounding
Question: How do I round a number to n decimal places? Answer: You can use the following code to round a number:
Math.round(10*X)/10; // round to tenths Math.round(100*X)/100; // round to hundredths Math.round(1000*X)/1000; // round to thousandths

... Back

Strings
• • • • • • • • • Back

How do I insert quotes in strings? How do I extract substrings from strings? How do I convert strings to URL-encoding? How do I convert strings from URL-encoding? How do I convert numbers to strings? How do I convert strings to numbers? How do I convert a number to a string representing that number in a non-decimal number system? Is there a way to test whether a particular variable holds a number or a string? See also Searching for text

Quotes in Strings
Question: How do I insert quotes in strings? Answer: Quotes in strings should be preceded by a backslash. This allows the JavaScript interpreter to distinguish a quote within the string from the quotes that serve as string delimiters. Here's an example:
string1='It\'s five o\'clock!'; string2="<A HREF=\"index.htm\">";

Alternatively, if your string includes single quotes only, then you can use double quotes as string delimiters, and vice versa. Here's an example:
string1="It's five o'clock!"; string2='<A HREF="index.htm">'; Back

Converting Numbers to Strings
Question: How do I convert numbers to strings in JavaScript? Answer: The simplest way to convert any variable to a string is to add an empty string to that variable, for example:
a = a+'' // This converts a to string b += '' // This converts b to string

In the above examples, the resultant string will hold the decimal representation of the original number. For converting numbers to binary, octal, or hexadecimal strings (or to any other base) see Converting to Another Base.
Back

Question: How do I convert strings to numbers in JavaScript? Answer: To convert a string to a number, use the JavaScript function parseFloat (for conversion to a floating-point number) or parseInt (for conversion to an integer). parseFloat syntax: parseFloat('string') How it works: The argument of parseFloat must be a string or a string expression. The result of parseFloat is the number whose decimal representation was contained in that string (or the number found in the beginning of the string). If the string argument cannot be parsed as a decimal number, the results will be different in different browsers (either 0 or NaN). Examples (comments in each line give the conversion results):
parseFloat('1.45kg') parseFloat('77.3') parseFloat('077.3') parseFloat('0x77.3') parseFloat('.3') parseFloat('0.1e6') Back // // // // // // 1.45 77.3 77.3 0 0.3 100000

Question: How do I extract a substring from a string? Answer: To extract a substring from a string, use the substring method:
string.substring(start,end)

Here
string start end

is the string from which you want to extract a substring. is the number specifying the position of the character at which the substring begins. (The character at start itself will be included in the substring.) is the number specifying the position of the character at which the substring ends. (The character at end will not be included in the substring.)

Note that the first character in the string corresponds to position 0, and the last character to position string.length-1. Examples:

'Hello'.substring(0,2) 'Hello'.substring(0,4) Back

// 'He' // 'Hell'

JavaScripter.net. Copyright © 1999-2006, Alexei Kourbatov

URL-encoding
Question: How do I convert a string to URL-encoding? Answer: To convert a string to the URL-encoded form suitable for transmission as a query string (or, generally speaking, as part of a URL), use the escape function. This function works as follows: digits, Latin letters and the characters + - * / . _ @ remain unchanged; all other characters in the original string are replaced by escape-sequences %XX, where XX is the ASCII code of the original character. Example:
escape("It's me!") // result: It%27s%20me%21

In Unicode-aware browsers (that support JavaScript 1.3) the function escape has a more complex behavior. If the input is a Unicode string, then Unicode characters will be converted to the Unicode escape-sequences %uXXXX.
Back

unescape
Question: How do I convert strings from URL-encoding? Answer: To convert a string from URL-encoded form, use the JavaScript function unescape(string). This function works as follows: if the string contains escapesequences of the form %XX, where XX stands for two hexadecimal digits, each escapesequence is replaced by the character whose ASCII code is XX. Otherwise, the string remains unchanged. (In Unicode-aware browsers, in addition to escape-sequences %XX, the unescape function also processes sequences of the form %uXXXX; see also escape.) Example:
unescape("It%27s%20me%21") // result: "It's me!" Back

Dialogs

• • • • • •

How do I generate an alert message from JavaScript? How do I generate an OK/Cancel dialog box from JavaScript? How do I generate a user prompt from JavaScript? What value does prompt() return if the user clicked the Cancel button? How do I invoke the browser's Find dialog from JavaScript? How do I invoke the browser's Add Favorite dialog?

JavaScripter.net. Copyright © 1999-2006, Alexei Kourbatov

Alert
Question: How do I generate an alert message from JavaScript? Answer: To generate an alert message, use the alert() method:
alert('Message goes here')

The button above was created using the following code:
<form name=myform> <input type=button value="Try it now" onClick="alert('Hello from JavaScript!')"> </form> Back JavaScripter.net. Copyright © 1999-2006, Alexei Kourbatov

Confirm
Question: How do I generate an OK/Cancel dialog box from JavaScript? Answer: To generate an OK/Cancel box, use the confirm() method:
if (confirm("Your question)) { // do things if OK }

The button above was created using the following code:
<form name=myform> <input type=button value="Try it now" onClick="if(confirm('Format the hard disk?')) alert('You are very brave!'); else alert('A wise decision!')"> </form> Back

Prompt
Question: How do I generate a user prompt from JavaScript? Answer: To generate a user prompt, use the prompt() method:
prompt('Prompt text','Suggested input')

The button above was created using the following code:
<form name=myform> <input type=button value="Try it now" onClick="f=prompt('Enter your name','Name'); alert('Hello '+f+'!')"> </form>

Canceled prompt
Question: What value does prompt() return if the user clicked the Cancel button? Answer: The return value of canceled prompt() depends on the browser. In some browsers the return value is null, in others it's '' (empty string). Therefore, you might want to use the following code when calling the prompt() method:
userInput = prompt('Prompt text','Suggested input'); if (userInput != '' && userInput != null) { // do something with the input } Back

Find Dialog
Question: How do I invoke the browser's Find dialog from JavaScript? Answer: In Netscape Navigator 4.0 or newer, you can call the window.find() method to invoke the browser's Find dialog. Try it now: This example was created using the following code:
<form> <input type=button value="Find (Netscape only)" onClick="if (navigator.appName=='Netscape' && parseInt(navigator.appVersion)>3) window.find(); else alert('Your browser does not support \'window.find()\'!') "> </form> Internet Explorer does not support window.find(). However, in both Internet

Explorer and Netscape Navigator, you can use a script that finds a string on the page. For more information, see Searching for text.

Back

Bookmarks: Add Favorite
Question: How do I invoke the browser's Add Favorite dialog? Answer: In Internet Explorer 4.0 and newer versions, you can invoke the browser's Add Favorite dialog by calling the method window.external.AddFavorite: window.external.AddFavorite('URL','bookmark text'). Netscape Navigator has no similar method (and no Add Favorite dialog at all). But your script can just remind Netscape users to create a bookmark by clicking using the Navigator menu or keyboard shortcut (see the example below). Example: In Internet Explorer, this script creates a hyperlink that displays the Add Favorite dialog. In Netscape, the script reminds the user to create a bookmark by clicking Bookmarks | Add bookmark or press Ctrl+D.

Click here to bookmark this site.

Here's the source code of this example:

if (navigator.appName=="Netscape") { document.write ( 'To bookmark this site, click ' +'<b>Bookmarks | Add bookmark</b> ' +'or press <b>Ctrl+D</b>.' ) } else if (parseInt(navigator.appVersion)>3) { document.write ('' +'<a onMouseOver="self.status=\'Bookmark this site\'" ' +' onMouseOut="self.status=\'\'" ' +' href="javascript:window.external.AddFavorite' +'(\'http://www.JavaScripter.net/faq/\',' +'\'JavaScripter.net FAQ\')">' +'Click here to bookmark this site</a>.' ) } Back

JavaScript Windows FAQ
• • • • • •

How do I open a new browser window? How do I close a window? How do I resize a window? How do I maximize a window? How do I write script-generated content to another window? How do I test whether my other window is still open?

How do I change another window's title, that is, the content of title bar at the top of the window?

JavaScripter.net. Copyright © 1999-2006, Alexei Kourbatov

Question: How do I open a new browser window? Answer: To open a new browser window, use the window.open() method. For example, the following code opens this page in a new window.
myRef = window.open(''+self.location,'mywin', 'left=20,top=20,width=500,height=500,toolbar=1,resizable=0');

The general syntax of the window.open() method is as follows:
winRef = window.open( URL, name [ , features [, replace ] ] ) The return value, stored in the variable winRef, is the reference to your new window. You can use this reference later, for example, to close this window (winRef.close()), give focus to the window (winRef.focus()) or perform other window manipulations.

The parameters URL, name, features, replace have the following meaning:
URL

name

String specifying the location of the Web page to be displayed in the new window. If you do not want to specify the location, pass an empty string as the URL (this may be the case when you are going to write some script-generated content to your new window). String specifying the name of the new window. This name can be used in the same constructions as the frame name provided in the frame tag within a frameset <FRAME NAME=name ...>. For example, you can use hyperlinks of the form <a target=name href="page.htm">, and the hyperlink destination page will be displayed in your new window.

If a window with this name already exists, then window.open() will display the new content in that existing window, rather than creating a new one. features An optional string parameter specifying the features of the new window. The features string may contain one or more feature=value pairs separated by commas. replace An optional boolean parameter. If true, the new location will replace the current page in the browser's navigation history. Note that some browsers will simply ignore this parameter. The following features are available in most browsers:
toolbar=0|1 location=0|1

Specifies whether to display the toolbar in the new window. Specifies whether to display the address line in the new window.

directories=0|1 status=0|1

Specifies whether to display the Netscape directory buttons. Specifies whether to display the browser status bar. menubar=0|1 Specifies whether to display the browser menu bar. scrollbars=0|1 Specifies whether the new window should have scrollbars. resizable=0|1 Specifies whether the new window is resizable. width=pixels Specifies the width of the new window. height=pixels Specifies the height of the new window. top=pixels Specifies the Y coordinate of the top left corner of the new window. (Not supported in version 3 browsers.) left=pixels Specifies the X coordinate of the top left corner of the new window. (Not supported in version 3 browsers.)
Back

Closing a window
Question: How do I close a window? Answer: To close a window that you previously opened from your script, you can use the window.close() method, for example:
winRef.close(); where winRef is the

window reference, as returned by the window.open() method. The gotcha here is that the window referenced by winRef does not necessarily exist at the time when your script attempts to close it. (The user might well have closed it already!) And if the window no longer exists, your script may cause errors. Possible workarounds are the following:
• • •

Re-open the window with the same winRef and name. Place the window-closing code only in the window to be closed. In this case the window reference will be self, and the code will be self.close(). Test whether the window is still open before attempting to close it.

If your script tries to execute window.close() for the main browser window that was opened by the user, most browsers will first invoke a dialog to ask the user whether to let the script close the browser window. Test this yourself: here is a script that attempts to close your browser window.
Back

Resizing a window
Question: How do I resize a window?

Answer: In Netscape Navigator 4 or Internet Explorer 4, you can resize the browser window by using the methods window.resizeTo(newWidth,newHeight) or window.resizeBy(DX,DY). Note, however, that older browsers do not support these methods. The best course of action here is probably "do nothing in an old browser". For example, this code will resize the window to 600x400 in newer browsers, without causing errors in old browsers:
if (parseInt(navigator.appVersion)>3) top.resizeTo(600,400); Note also that the parameters of resizeTo() have

different meaning in different browsers: in Internet Explorer the parameters specify the outer size of the window, while in Netscape Navigator they refer to the inner size (which does not include the window borders, toolbar, status bar, title bar, and the address line). To resize the window to the same outer size in both browsers, you can use this function:
function resizeOuterTo(w,h) { if (parseInt(navigator.appVersion)>3) { if (navigator.appName=="Netscape") { top.outerWidth=w; top.outerHeight=h; } else top.resizeTo(w,h); } }

Back

Maximizing a window
Question: How do I maximize a window? Answer: To maximize the browser window, your code should determine the available screen size and then resize the window to the user's screen size. Note that there is no reliable way to determine the screen size in version 3 of both major browsers (except for calling Java from Navigator 3.x). Therefore, the following sample function maximizeWindow() only works in versions 4 and newer. Try it now: Here's the source code:
function maximizeWindow() { if (parseInt(navigator.appVersion)>3) { if (navigator.appName=="Netscape") { if (top.screenX>0 || top.screenY>0) top.moveTo(0,0); if (top.outerWidth < screen.availWidth) top.outerWidth=screen.availWidth; if (top.outerHeight < screen.availHeight) top.outerHeight=screen.availHeight; } else { top.moveTo(-4,-4);

} } }

top.resizeTo(screen.availWidth+8,screen.availHeight+8);

A couple of remarks: 1. In Windows, maximizing a window is equivalent to
• •

moving the window's top left corner to the point x=-4, y=-4 and resizing the window to the screen size plus 8 pixels (in both horizontal and vertical dimensions)

This allows to effectively hide the window borders. Unfortunately, Netscape Navigator 4 requires a signed script to move the window's top left corner off screen, and therefore the above (unsigned) script leaves the window borders visible. (Before changing the window, the Netscape-specific branch of the script checks whether the window is already maximized. If yes, it leaves the window as is.) 2. Note also that JavaScript code cannot change the look of the maximize button (the second button in the top right corner).
Back

Writing to a window
Question: How do I write script-generated content to another window? Answer: To write script-generated content to another window, use the method winRef.document.write() or winRef.document.writeln(), where winRef is the window reference, as returned by the window.open() method. To make sure that your script's output actually shows up in the other window, use winRef.document.close() after writing the content. As an example, consider the following function that opens a new window with the title Console and writes the specified content to the new window.
writeConsole('Hello from JavaScript!'); function writeConsole(content) { top.consoleRef=window.open('','myconsole', 'width=350,height=250' +',menubar=0' +',toolbar=1' +',status=0' +',scrollbars=1' +',resizable=1') top.consoleRef.document.writeln( '<html><head><title>Console</title></head>' +'<body bgcolor=white onLoad="self.focus()">'

+content +'</body></html>' ) top.consoleRef.document.close() }

In the above example, you might notice that after you write something to the console several times, the console window will allow you to navigate back and forth in the output's history. This is not always a desired feature. If you would like to output the new content without creating a new history entry, add the following operator after opening the window (and before the first write):

docRef = top.winRef.document.open("text/html","replace"); Here winRef is the window reference returned by the window.open() method, and docRef is a global variable in which the script stores the reference to your new document. Back

Is my window still open?
Question: How do I test whether my other window is still open? Answer: Let's assume that you opened a new browser window using the window.open() method
winRef = window.open( URL, name, features )

Later on, you can check whether this window is still open by using the window.closed property:
if (winRef.closed) alert ("It's closed!") else alert ("It's still open!") The window.closed property is not supported in Netscape

Navigator 2 or Internet Explorer 3. To avoid error messages, you can place the above code within a conditional statement as follows:
if (parseInt(navigator.appVersion>2)) { if (winRef.closed) alert ("It's closed!") else alert ("It's still open!") }

(Internet Explorer 3 reports that its version is 2, so the condition involving navigator.appVersion will be true for Navigator 3 and higher and Internet Explorer 4 and higher.) There is no simple workaround for old browsers. You might want to emulate the window.closed property using the onUnload event handler. However, note that the unload event is not always equivalent to closing the window. For example, this event may occur when the user leaves the original page and goes somewhere else (and the window remains open).
Back

Window title

Question: How do I change another window's title, that is, the content of title bar at the top of the window? Answer: To change another window's title, your script can write to that window a string beginning with the following code:
'<html><head><title>Your new title here</title></head>'

Note that rewriting the other window's content will erase everything previously displayed in that window. Therefore, if you want the window's content to stay, then, after changing the window title, you'll have to write the old content to that window once again. (If your script does not know what the old content was, you'd rather not change the window title either!) For more information on writing script-generated content to another window, see Writing to a Window.
Back

Frames
• • • •

Is my page framed (loaded in a frameset) or is it in the browser's top-level window? Bad boys from another website load my page into their frameset. How can I break out of the frameset? Can I update two (or more) frames at a time? See also External files within layers.

JavaScripter.net. Copyright © 1999-2006, Alexei Kourbatov

Is my page framed?
Question: Is my page framed (loaded in a frameset) or is it in the browser's top-level window? Answer: To test whether your page is in a frameset, you can use this conditional operator:
if (self.location!=top.location) // if yes, you're framed if (self.location==top.location) // here you aren't framed

Example. Let's assume that your site uses frames to provide some navigation functionality (like this site does). Assume that your top-level frameset is in the file /index.htm. What if a user arrives to some of your pages without frames? (This might happen if the user arrived e.g. from a search engine.) For such users, you may want to display an additional hyperlink to your top-level frameset - only if your page is not in the frameset yet.
if (self.location==top.location) { // The page is not in the frameset index.htm !!!

}

document.write('<p><a href="/index.htm">Home page</a>')

A similar code is used on this page. If you open this page in the top-level window of your browser, you'll see an additional hyperlink Table of Contents (at the top of the page, right under the page title). This hyperlink will bring you back to the framed view.
Back

Breaking out of a frameset
Question: Bad boys from another website load my page into their frameset. How can I break out of the frameset? Answer: You can just test whether your page is framed, as explained in the previous question. If yes, you can easily break out of frames:
if (self.location!=top.location) top.location=self.location; However, use this trick sparingly - especially if your own site also uses frames! Back

Updating two frames at a time
Question: Can I update two (or more) frames simultaneously? Answer: Yes. The easiest way to update several frames simultaneously is to have a JavaScript function that loads a new page into each of the frames to be updated. For example, if you have two frames, left and right, then the function for updating both frames might look like this:
function updateBothFrames() { top.left.location="newpage1.htm"; top.right.location="newpage2.htm"; }

This function can be called when the user presses a button or clicks a hyperlink. The following example shows the HTML code for a button and hyperlink that invoke the function:
<a href="javascript:updateBothFrames()">Click here</a> <input type=button value="Press me" onClick="updateBothFrames()"> Back

Forms
• •

How do I validate the form input before sending it to the server? Can I save space in my form by getting more than one input value from just one field?

• •

Will my form be submitted when the user presses the Enter key? How do I disable a radio button (making it not selectable)?

JavaScripter.net. Copyright © 1999-2006, Alexei Kourbatov

Validating a Form
Question: How do I validate the form input before sending it to the server? Answer: To validate the form input, call your validation function from the form's onSubmit event handler. When the user submits the form, the browser will first invoke the onSubmit event handler. The form will actually be submitted to the server only if the handler returns true. In the following example, the onSubmit event handler validates the user's email address. (For simplicity, the address is considered to be valid if it does not contain spaces, contains the @ character and if @ is neither the first nor the last character.) Note that the handler itself must contain a return statement in order to return the value true or false to the browser. Your email: This example used the following code:
<script language="JavaScript"> <!-function isValid() { var email=document.form1.t1.value; if (email.indexOf(' ')==-1 && 0<email.indexOf('@') && email.indexOf('@')+1 < email.length ) return true; else alert ('Invalid email address!') return false; } //--> </script> <form name=form1 method=post action="javascript:alert('The form is submitted.')" onSubmit="return isValid()"> Your email: <input type=text name=t1 size=20 > <input type=submit value=Submit> </form> Back

Combining Input Fields
Question: Can I save space in my form by getting more than one input value from just one text field?

Answer: Yes. For example, you can display a text input field and a select box. Using the select box, the user will be able to choose which kind of value to input in the text field. All input data can actually be submitted to the server in additional hidden form elements. Try this example: This form was created using the following JavaScript code:

<form name=form1 action="" onSubmit="return validate()"> <input name="name" type=hidden value=""> <input name="email" type=hidden value=""> <input name="country" type=hidden value=""> <select name=s1 onChange="refill()"> <option value="name" selected >Your name: <option value="email" >Your email address: <option value="country" >Your country: </select> <input name=t1 type=text value="" size=20> <input name=b1 type=submit value="Enter!"> </form> <script language="JavaScript"> <!-isFilled=new Array(0,0,0); oldActiveField="name"; oldIndex=0; theActiveField="name"; theIndex=0; theValue=''; theForm=document.form1; function refill() { oldIndex=theIndex; theIndex=theForm.s1.selectedIndex; oldActiveField=theActiveField; theActiveField=theForm.s1.options[theIndex].value; theValue=theForm.t1.value; eval('theForm.'+oldActiveField+'.value=theValue'); eval('theForm.t1.value=theForm.'+theActiveField+'.value'); if (theValue!='') isFilled[oldIndex]=1; if (theValue=='') isFilled[oldIndex]=0; } function read() { oldIndex=theForm.s1.selectedIndex; oldActiveField=theForm.s1.options[oldIndex].value; theValue=theForm.t1.value; eval('theForm.'+oldActiveField+'.value=theValue'); if (theValue!='') isFilled[theIndex]=1; if (theValue=='') isFilled[theIndex]=0; } function validate() { read(); for (var k=0; k<isFilled.length; k++) { if (!isFilled[k]) { theIndex=k; theForm.s1.selectedIndex=k;

theForm.t1.value=''; theActiveField=theForm.s1.options[k].value; if (oldIndex==k) alert ('Please fill in your '+theActiveField) return false; } } alert ('You are submitting the following data:' +'\nName: '+theForm.name.value +'\nEmail: '+theForm.email.value +'\nCountry: '+theForm.country.value ) return false; // Instead of returning false in all cases, // a real-life code here would validate the data // and return true if the user submitted valid data } //--> </script> Back

Will the Enter key work?
Question: Will my form be submitted when the user presses the Enter key? Answer: In most browsers, pressing the Enter key will submit your form if the form has only one text input field. (The form may also have other input elements, such as checkboxes, select boxes, radio buttons, password, hidden elements etc.)
Back

Disabling a Radio Button
Question: How do I disable a radio button in a form (making it not selectable)? Answer: To make a radio button not selectable, in the button's INPUT tag you can use an onClick event handler like this:
<INPUT type="radio" name="myButton" value="theValue" onClick="this.checked=false; alert('Sorry, this option is not available!')">

In the example below, the "Courier delivery" option is disabled. Try it now - you'll get an alert box with the text Sorry, this option is not available! Delivery method (choose one): download regular mail courier delivery

Back

Layers
• • •

Can I display an external HTML file as part of my page? How do I create a new layer from JavaScript? How do I delete a layer using JavaScript?

JavaScripter.net. Copyright © 1999-2006, Alexei Kourbatov

External Files Within Layers
Question: Can I display an external HTML file as part of my page? Answer: Yes, you can display an external HTML file on your page by using: 6) You can use JavaScript to detect the browser name and version (see Client Information) and then generate the necessary IFRAME or LAYER tags. Here's an example:
LAYER or ILAYER tags with SRC=FILENAME.HTM (in Netscape 4) IFRAME tag with SRC=FILENAME.HTM (in Explorer 4+ and Netscape

In the above example, we've created a JavaScript function insertExternalFile() for detecting the client browser and generating the necessary tags. In order to insert an external file, we called insertExternalFile() passing the file name as a parameter. The function also takes two other parameters: the width and height of the area where you'd like to display the inserted file. Thus, each of the external files inserted_file1.htm and inserted_file2.htm was embedded in the page using the following code:
insertExternalFile("inserted_file.htm",layer_width,layer_height)

The JavaScript code of the function insertExternalFile() is contained within the HEAD section of the page:
<script language="JavaScript"> <!-function insertExternalFile(fname,W,H) { if (navigator.appName.indexOf("Microsoft")!=-1 || navigator.appName=="Netscape" && parseInt(navigator.appVersion)>4 ) { document.write('' +'<IFRAME src="'+fname+'" scrolling="no" frameborder=0 border=0' +(W==null ? '' : ' width='+W)

}

+(H==null ? '' : ' height='+H) +'></IFRAME>' )

} //--> </script>

if (navigator.appName=="Netscape" && parseInt(navigator.appVersion)==4) { document.write('' +'<ILAYER>' +'<LAYER src="'+fname+'" ' +(W==null ? '' : ' width='+W) +(H==null ? '' : ' height='+H) +'></LAYER></ILAYER>' ) }

Copyright © 2000, Alexei Kourbatov

Creating Layers
Question: How do I create a new layer from JavaScript? Answer: Normally, you create layers by using DIV tags in the HTML source code of your page. However, you can also create layers programmatically with JavaScript! Here's an example: The above example has been created using this code:
<form> <input type=button value="Create layer" onClick="makeLayer('LYR1',200,10,100,100,'red',1,1)"> <input type=button value="Delete layer" onClick="deleteLayer('LYR1')"> </form> To create a new layer, this code calls the function makeLayer: makeLayer(ID,left,top,width,height,color,visible,zIndex)

And here's the JavaScript source code of this function:

function makeLayer(id,L,T,W,H,bgColor,visible,zIndex) { if (document.layers) { if (document.layers[id]) { alert ('Layer with this ID already exists!') return } var LR=document.layers[id]=new Layer(W) LR.name= id LR.left= L LR.top = T LR.clip.height=H LR.visibility=(null==visible || 1==visible ? 'show' : 'hide') if(null!=zIndex) LR.zIndex=zIndex

}

if(null!=bgColor) LR.bgColor=bgColor } else if (document.all) { if (document.all[id]) { alert ('Layer with this ID already exists!') return } var LR= '\n<DIV id='+id+' style="position:absolute' +'; left:'+L +'; top:'+T +'; width:'+W +'; height:'+H +'; clip:rect(0,'+W+','+H+',0)' +'; visibility:'+(null==visible || 1==visible ? 'visible':'hidden') +(null==zIndex ? '' : '; z-index:'+zIndex) +(null==bgColor ? '' : '; background-color:'+bgColor) +'"></DIV>' document.body.insertAdjacentHTML("BeforeEnd",LR) }

JavaScripter.net. Copyright © 1999-2006, Alexei Kourbatov

Deleting Layers
Question: How do I delete a layer from JavaScript? Answer: Here's the example that you've already seen in the Creating Layers section: This example was created using the following code:
<form> <input type=button value="Create layer" onClick="makeLayer('LYR1',200,10,100,100,'red',1,1)"> <input type=button value="Delete layer" onClick="deleteLayer('LYR1')"> </form> To delete a layer, given the layer's ID, this code calls the function deleteLayer(id).

Here's the JavaScript source code of this function:
function deleteLayer(id) { if (document.layers && document.layers[id]) { document.layers[id].visibility='hide' delete document.layers[id] } if (document.all && document.all[id]) { document.all[id].innerHTML='' document.all[id].outerHTML='' } } JavaScripter.net. Copyright © 1999-2006, Alexei Kourbatov

Images

• • • Back

How do I change an image when the user's mouse points at it? How do I change an image when the user clicks on it? Can I create "pressable" buttons with images?

JavaScripter

OnMouseOver Effects
Question: How do I change an image when the user's mouse points at it? Answer: Here is a simple example: Point at this folder, and it will open. Move the mouse away, and the folder will close. In this example, the image is 2.gif; the image is 1.gif. Both files are stored in the ../hi-icons directory. In order to create the "mouseover" effect, the <IMG> tag is embedded in a hyperlink that has onMouseOver and onMouseOut event handlers:
<a href="#any_URL" onMouseOver="handleOver();return true;" onMouseOut="handleOut();return true;" ><img name=imgName width=17 height=15 border=0 alt="This image changes when you point at it!" src="../hi-icons/2.gif" ></a> In the <HEAD> section of the page, we have JavaScript code

that preloads the image files

and defines the event handler functions:
<script language="JavaScript"> <!-// PRELOADING IMAGES if (document.images) { img_on =new Image(); img_on.src ="../hi-icons/1.gif"; img_off=new Image(); img_off.src="../hi-icons/2.gif"; } function handleOver() { if (document.images) document.imgName.src=img_on.src; } function handleOut() { if (document.images) document.imgName.src=img_off.src; } //--> </script>

Here is a more complex example with several images: The code is very similar to the above, except that now the event handler functions take the image's number as a parameter. (To see the actual code, view the source of this page.)

Back

OnMouseDown Effects
Question: How do I change an image when the user clicks on it? Answer: This is very similar to onMouseOver effects. However, the techniques described on this page will work only in Netscape 4.x or Internet Explorer 4.x (or newer browsers) because versions 3.x of both browsers do not support the onMouseDown and onMouseUp event handlers. Here is a simple example: Press the mouse button while pointing at this folder, and it will open. Release the mouse button, and the folder will close. The <IMG> tag in this example is embedded in a hyperlink that has onMouseDown, onMouseUp and onMouseOut event handlers:
<a href="#any_URL" onMouseDown="handlePress();return true;" onMouseUp="handleRelease();return true;" onMouseOut="handleRelease();return true;" onClick="return false;" ><img name=imgName width=17 height=15 border=0 alt="This image changes when you press the mouse button!" src="../hi-icons/2.gif" ></a> In the <HEAD> section of the page, we have JavaScript code that preloads

the image files

and defines the event handler functions:
<script language="JavaScript"> <!-// PRELOADING IMAGES if (document.images) { img_on =new Image(); img_on.src ="../hi-icons/1.gif"; img_off=new Image(); img_off.src="../hi-icons/2.gif"; } function handlePress() { if (document.images) document.imgName.src=img_on.src; } function handleRelease() { if (document.images) document.imgName.src=img_off.src; } //--> </script>

Here is a more complex example with several images: The code is very similar to the above, except that now the event handler functions take the image's number as a parameter. (To see the actual code, view the source of this page.)

Back

Buttons with Images
Question: Can I create "pressable" buttons with images? Answer: Yes. For each button, you'll need two images: one for the "pressed button" and the other for the "released button". Try the following example: point at any of the buttons below and press the left mouse button - the button image will change to "pressed" state. To watch the button images change back to "released" state, move the (pressed) mouse off the image and then release the mouse button.

In this example, the "pressed button" images are btn1down.gif and btn2down.gif; the "released button" images are btn1up.gif and btn2up.gif. In order to make the buttons "pressable", each <IMG> tag is embedded in a hyperlink that has onMouseDown, onMouseUp, onMouseOut and onClick event handlers:
<a href="indexpg.htm" onMouseDown="pressButton('btn1');return true;" onMouseUp="releaseButton('btn1');return true;" onMouseOut="releaseButton('btn1');return true;" onClick="return true;" ><img name=btn1 width=60 height=22 border=0 alt="Index" src="btn1up.gif" ></a> <a href="startpag.htm" onMouseDown="pressButton('btn2');return true;" onMouseUp="releaseButton('btn2');return true;" onMouseOut="releaseButton('btn2');return true;" onClick="return true;" ><img name=btn2 width=60 height=22 border=0 alt="Home" src="btn2up.gif" ></a> The <HEAD> section of the page contains JavaScript code that

preloads the image files and

defines the event handler functions:

<script language="JavaScript"> <!-// PRELOADING IMAGES if (document.images) { btn1_down=new Image(); btn1_down.src="btn1down.gif"; btn1_up =new Image(); btn1_up.src ="btn1up.gif"; btn2_down=new Image(); btn2_down.src="btn2down.gif"; btn2_up =new Image(); btn2_up.src ="btn2up.gif"; }

// EVENT HANDLERS function pressButton(btName) { if (document.images) eval('document.'+btName+'.src='+btName+'_down.src'); } function releaseButton(btName) { if (document.images) eval('document.'+btName+'.src='+btName+'_up.src'); } //--> </script> Back

Mouse Events
• • • • • • •

What event properties can I use to analyze mouse events? How do I check whether the user clicked the left or right mouse button? Can I disable the Windows context menu that normally shows up when the user clicks the right mouse button? Can I disable the right-click menu for a particular image, while enabling the normal right-click menu for all other parts of my page? How do I detect mouse events with Ctrl, Alt, and Shift keys? Can I disable the default browser response for Shift-click? See also OnMouseOver and OnMouseDown

JavaScripter.net. Copyright © 1999-2006, Alexei Kourbatov

Mouse Event Properties
Question: What event properties can I use to analyze mouse events? Answer: Netscape Navigator 4 and Internet Explorer 4 (as well as newer versions) support quite a few event properties. Some of them are the same for both browsers (for example, event.screenX or event.type); however, most properties are platformdependent. Move or click your mouse, and the text boxes below will display all mouse event properties for your browser ( Microsoft Internet Explorer):

Properties of the most recent event:

Properties of the most recent event:

Back

Left vs. Right Button

Question: How do I check whether the user clicked the left or right mouse button? Answer: The click event occurs for the left mouse button only. Therefore, onClick event handlers do not need to preform the left-versus-right button test. On the other hand, the mousedown and mouseup events may occur for any mouse button. To determine whether the user clicked the left or right button, you can use the following event properties:
event.which in Netscape Navigator event.button in Internet Explorer

If the value of these properties is 1, the event occurred for the left button. In the following example, the onMouseDown event handler displays the messages Left button or Right button, depending on the mouse button you actually have clicked. The messages will appear on your browser's status bar. Click or right-click anywhere on this page to see it work:
<script language="JavaScript"> <!-function mouseDown(e) { if (parseInt(navigator.appVersion)>3) { var clickType=1; if (navigator.appName=="Netscape") clickType=e.which; else clickType=event.button; if (clickType==1) self.status='Left button!'; if (clickType!=1) self.status='Right button!'; } return true; } if (parseInt(navigator.appVersion)>3) { document.onmousedown = mouseDown; if (navigator.appName=="Netscape") document.captureEvents(Event.MOUSEDOWN); } //--> </script> Back

Right Button: Disabling
Question: Can I disable the Windows context menu that normally shows up when the user clicks the right mouse button? Answer: In most modern browsers, you can disable the context menu by using the oncontextmenu event handler in the body tag of your page:
<body oncontextmenu="return false;">

Try right-clicking anywhere on this page - the context menu won't show up! In older browsers (beginning with Netscape Navigator 4.x and Internet Explorer 4.x) you can disable the right-button menu by displaying an alert message on right-click. To do so, insert the following code in your page's <HEAD> section:
<script language="JavaScript"> <!-function mouseDown(e) { if (parseInt(navigator.appVersion)>3) { var clickType=1; if (navigator.appName=="Netscape") clickType=e.which; else clickType=event.button; if (clickType!=1) { alert ('Right mouse button is disabled.') return false; } } return true; } if (parseInt(navigator.appVersion)>3) { document.onmousedown = mouseDown; if (navigator.appName=="Netscape") document.captureEvents(Event.MOUSEDOWN); } //--> </script>

Note: In very old browsers (Netscape Navigator 3.x, Internet Explorer 3.x or earlier) the context menu would still show up. Also, the context menu will be displayed if the user has disabled JavaScript.
Back

Disabling the Right-Click Menu For an Image
Question: Can I disable the right-click context menu for a particular image, while still enabling the menu for all other parts of my page? Answer: Yes. In most modern browsers you can disable the right-click menu for a particular image. To do so, you can use the event handler oncontextmenu="return false;" within the IMG tag that defines your image:
<IMG border=0 src="..." oncontextmenu="return false;">

For example, the context menu has been disabled for this image: Note: In older browsers (e.g. Internet Explorer 4.x or earlier) this trick won't work. Also, the context menu will show up if the user has disabled JavaScript.
Back

Ctrl, Alt, Shift Keys
Question: How do I detect mouse events with Ctrl, Alt, and Shift keys? Answer: In modern browsers, your script can check whether a mouse event occurred while the user was pressing any of the Ctrl, Alt, Shift keys. In the example below, this is accomplished for the MouseDown and MouseUp events. For other mouse events, a similar strategy may or may not work, depending on the browser. To implement the Ctrl / Alt / Shift detection, you can use the properties event.ctrlKey, event.altKey, event.shiftKey and the deprecated Navigator-specific property event.modifiers. Click anywhere on this page while pressing any combination of Ctrl, Alt, and Shift keys, and the key combination will be detected by the following script (that resides in the <HEAD> section of the page). Every time you click the mouse, you'll see the event.ctrlKey, event.altKey, event.shiftKey or event.modifiers properties on the browser's status bar.
<script language="JavaScript"> <!-function mouseDown(e) { var ctrlPressed=0; var altPressed=0; var shiftPressed=0; if (parseInt(navigator.appVersion)>3) { var evt = navigator.appName=="Netscape" ? e:event; if (navigator.appName=="Netscape" && parseInt(navigator.appVersion)==4) { // NETSCAPE 4 CODE var mString =(e.modifiers+32).toString(2).substring(3,6); shiftPressed=(mString.charAt(0)=="1"); ctrlPressed =(mString.charAt(1)=="1"); altPressed =(mString.charAt(2)=="1"); self.status="modifiers="+e.modifiers+" ("+mString+")" } else { // NEWER BROWSERS [CROSS-PLATFORM] shiftPressed=evt.shiftKey; altPressed =evt.altKey; ctrlPressed =evt.ctrlKey; self.status="" + "shiftKey="+shiftPressed +", altKey=" +altPressed +", ctrlKey=" +ctrlPressed } if (shiftPressed || altPressed || ctrlPressed) alert ("Mouse clicked with the following keys:\n" + (shiftPressed ? "Shift ":"") + (altPressed ? "Alt " :"") + (ctrlPressed ? "Ctrl " :"")

} if (parseInt(navigator.appVersion)>3) { document.onmousedown = mouseDown; if (navigator.appName=="Netscape") document.captureEvents(Event.MOUSEDOWN); } //--> </script> The properties event.ctrlKey, event.altKey, event.shiftKey are self-explanatory. Their values are true if the corresponding keys are pressed, and false otherwise. The Netscape 4 property event.modifiers is more tricky. Depending on the actual key

) } return true;

combination, this property has the following values:
Alt only Ctrl only Ctrl+Alt Shift only Shift+Alt Shift+Ctrl Shift+Alt+Ctrl None of these keys

Thus, in the the least significant (right) bit is 1 if Alt is pressed the second bit is 1 if Ctrl is pressed the third bit is 1 if Shift is pressed
Back

modifiers=1 (001) modifiers=2 (010) modifiers=3 (011) modifiers=4 (100) modifiers=5 (101) modifiers=6 (110) modifiers=7 (111) modifiers=0 (000) binary representation of the event.modifiers

value:

Shift-click: Disabling
Question: Can I disable the default browser response for Shift-click event? Answer: In Netscape Navigator 4 or Internet Explorer 4 or newer browsers, you can distinguish the Shift-click event from a simple click, and disable the default response for Shift-click. For example, Shift-click has been disabled on this page. If you use version 4 browser (or newer) under Windows, shift-click on any hyperlink on this page to test that! (In older browsers, you would still get the default response.) To disable Shift-click, insert the following code in your page's <HEAD> section:
<script language="JavaScript"> <!-function mouseDown(e) { var shiftPressed=0; if (parseInt(navigator.appVersion)>3) { if (navigator.appName=="Netscape") shiftPressed=(e.modifiers-0>3); else shiftPressed=event.shiftKey; if (shiftPressed) {

alert ('Shift-click is disabled.') return false; } } return true;

} if (parseInt(navigator.appVersion)>3) { document.onmousedown = mouseDown; if (navigator.appName=="Netscape") document.captureEvents(Event.MOUSEDOWN); } //--> <script> Back

Colors
• • • • •

How do I change the document's background color? How do I change the document's text color and link colors? How do I convert RGB values of a color to a hexadecimal string? How do I convert a hex color string (e.g. "FFFFCC") to numeric RGB values of the same color? What color names are supported by JavaScript?

JavaScripter.net. Copyright © 1999-2006, Alexei Kourbatov

Background Color
Question: How do I change the document's background color? Answer: To change the background color, set the document.bgcolor property. For example, this will change the background color to gray:
document.bgColor="#CCCCCC" // set to gray

Try it now: This select box was created using the following code:
<form name="bgcolorForm">Try it now: <select onChange="if(this.selectedIndex!=0) document.bgColor=this.options[this.selectedIndex].value"> <option value="choose">set background color <option value="FFFFCC">light yellow <option value="CCFFFF">light blue <option value="CCFFCC">light green <option value="CCCCCC">gray <option value="FFFFFF">white </select></form> Back

Foreground Colors
Question: How do I change the text and link colors of the document? Answer: You might have been told that it's impossible to change the foreground colors (that is, text and link colors) because the JavaScript properties document.fgColor, document.linkColor and the like are read-only, and you cannot set these properties. That means, the colors defined in the BODY tag of your page will remain unchanged no matter what you try to set; all you can do is change the background. Well, that's right... almost right... but try this:

It works like this: the script saves the new color settings, then reloads the page, reads the saved settings and document.write's the BODY tag with the new colors. What? Saves?, you might say, Can JavaScript really save files??? The trick is simple: the script can save the new color settings not in a file, but in a variable of another window or frame. And even if there might be no other windows/frames available, then the script still can use a cookie. The script on this page actually uses both techniques, a cookie and a variable in the toplevel frameset. Thus, this script would fail to reset the text and link colors only if the user disabled cookies and the page is loaded in a top-level window of the browser. If you would like to reuse this code, just cut-and-paste it from the source of this page. Enjoy! Just one final note: in Internet Explorer 4, the properties document.fgColor, document.linkColor, document.vlinkColor, document.alinkColor are no longer read-only. You can set these properties to change colors!
Back

Hex-to-RGB Conversion
Question: How do I convert a hex color string (e.g. "FFFFCC") to numeric RGB values of the same color? Answer: Here is a script that does this conversion:
R = HexToR("#FFFFFF"); G = HexToG("#FFFFFF"); B = HexToB("#FFFFFF"); function HexToR(h) {return parseInt((cutHex(h)).substring(0,2),16)} function HexToG(h) {return parseInt((cutHex(h)).substring(2,4),16)} function HexToB(h) {return parseInt((cutHex(h)).substring(4,6),16)}

function cutHex(h) {return (h.charAt(0)=="#") ? h.substring(1,7):h}

Try it yourself: R: G: B:
Back

RGB-to-Hex Conversion
Question: How do I convert RGB values of a color to a hexadecimal string? Answer: The algorithm is as follows: make sure that RGB values are in the range 0...255, convert RGB values to hex strings, and then merge the three strings. Here is a script that does this conversion:
function RGBtoHex(R,G,B) {return toHex(R)+toHex(G)+toHex(B)} function toHex(N) { if (N==null) return "00"; N=parseInt(N); if (N==0 || isNaN(N)) return "00"; N=Math.max(0,N); N=Math.min(N,255); N=Math.round(N); return "0123456789ABCDEF".charAt((N-N%16)/16) + "0123456789ABCDEF".charAt(N%16); }

Try it yourself: R: G: B:
Back

Color Names
Question: What color names are supported by JavaScript? Answer: In some old browsers (e.g. Internet Explorer 3.x) JavaScript supported only 16 color names:
aqua black blue fuchsia gray green #00FFFF #000000 #0000FF #FF00FF #808080 #008000 lime maroon navy olive purple red #00FF00 #800000 #000080 #808000 #800080 #FF0000 silver teal white yellow #C0C0C0 #008080 #FFFFFF #FFFF00

In newer browsers, there are many more supported color names (see list below). You can try all these colors here:
#F0F8FF aliceblue #FAEBD7 antiquewhite #00FFFF aqua #7FFFD4 aquamarine #F0FFFF azure #F5F5DC beige #F8F8FF #FFD700 #DAA520 #808080 #008000 #ADFF2F ghostwhite gold goldenrod gray green greenyellow #FFDEAD #000080 #FDF5E6 #808000 #6B8E23 #FFA500 navajowhite navy oldlace olive olivedrab orange

#FFE4C4 bisque #000000 black #FFEBCD blanchedalmond #0000FF blue #8A2BE2 blueviolet #A52A2A brown #DEB887 burlywood #5F9EA0 cadetblue #7FFF00 chartreuse #D2691E chocolate #FF7F50 coral #6495ED cornflowerblue #FFF8DC cornsilk #DC143C crimson #00FFFF cyan #00008B darkblue #008B8B darkcyan #B8860B darkgoldenrod #A9A9A9 darkgray #006400 darkgreen #BDB76B darkkhaki #8B008B darkmagenta #556B2F darkolivegreen #FF8C00 darkorange #9932CC darkorchid #8B0000 darkred #E9967A darksalmon #8FBC8F darkseagreen #483D8B darkslateblue #2F4F4F darkslategray #00CED1 darkturquoise #9400D3 darkviolet #FF1493 deeppink #00BFFF deepskyblue #696969 dimgray #1E90FF dodgerblue #B22222 firebrick #FFFAF0 floralwhite #228B22 forestgreen #FF00FF fuchsia #DCDCDC gainsboro Back

#F0FFF0 honeydew #FF69B4 hotpink #CD5C5C indianred #4B0082 indigo #FFFFF0 ivory #F0E68C khaki #E6E6FA #FFF0F5 #7CFC00 #FFFACD #ADD8E6 lavender lavenderblush lawngreen lemonchiffon lightblue

#FF4500 orangered #DA70D6 orchid #EEE8AA palegoldenrod #98FB98 palegreen #AFEEEE paleturquoise #DB7093 palevioletred #FFEFD5 papayawhip #FFDAB9 peachpuff #CD853F peru #FFC0CB pink #DDA0DD plum #B0E0E6 powderblue #800080 purple #FF0000 red #BC8F8F rosybrown #4169E1 royalblue #8B4513 saddlebrown #FA8072 salmon #FAA460 #2E8B57 #FFF5EE #A0522D #87CEEB #6A5ACD #708090 #FFFAFA #00FF7F sandybrown seagreen seashell sienna skyblue slateblue slategray snow springgreen

#F08080 lightcoral #E0FFFF lightcyan #FAFAD2 lightgoldenrodyellow #90EE90 lightgreen #D3D3D3 lightgrey #FFB6C1 lightpink #FFA07A lightsalmon #20B2AA #87CEFA #778899 #B0C4DE #00FF00 #32CD32 #FAF0E6 #FF00FF #800000 lightseagreen lightskyblue lightslategray lightsteelblue lime limegreen linen magenta maroon

#FFFFE0 lightyellow

#C0C0C0 silver

#66CDAA mediumaquamarine #0000CD mediumblue #BA55D3 mediumorchid #9370DB #3CB371 #7B68EE #00FA9A #48D1CC #C71585 #191970 #F5FFFA #FFE4E1 #FFE4B5 mediumpurple mediumseagreen mediumslateblue mediumspringgreen mediumturquoise mediumvioletred midnightblue mintcream mistyrose moccasin

#4682B4 steelblue #D2B48C tan #008080 teal #D8BFD8 #FF6347 #40E0D0 #EE82EE #F5DEB3 #FFFFFF #F5F5F5 #FFFF00 #9ACD32 thistle tomato turquoise violet wheat white whitesmoke yellow yellowgreen

File Access

• • •

How do I read a file into a JavaScript variable? How do I write a file from JavaScript? See also Cookies for information on cookie files.

Reading a File
Question: How do I read a file into a JavaScript variable? Answer: Reading a file from JavaScript is (almost) as easy as reading a file from a Java applet. Your script cannot read files itself; you would have to code a Java applet that reads files for your script. In more detail, one of the possible reading mechanisms can work like this: 1. Your script calls a public method of the applet. 2. The public method initiates the reading process in another thread of the applet, and then returns. 3. The reading process in another thread of the applet continues. At the same time, the script keeps asking the applet whether the reading is complete. 4. The applet finishes reading and puts the file content in a public string variable of the applet. 5. The script sees that the applet completed reading. 6. The script copies the file content from the applet's public variable into a Javascript variable. Note that unsigned Java/JavaScript code can read files only if the file(s) to read and the code itself have the same origin. For example, if your unsigned code is published on a Web server, it is allowed to read files from the same server only. If your code resides on the local hard disk, it is allowed to read files only from the same disk (at best). If you would like to read files that have a different origin, you'll need to sign your code. (For more information, see Writing Files; very similar security considerations apply to reading files whose origin is other than that of your code.) Here's a simple example that implements the file reading mechanism described above. The rectangle below is a Java applet called ReadURL.class. This applet reads the content of the chosen file into a public variable fileContent. When finished, the applet sets its public variable finished to 1.

The script in this example reads selected files that contain some topics from this JavaScript FAQ. The JavaScript code that starts the reading process looks as follows:

var fileContent=''; var theLocation=''; function readFileViaApplet(n) { document.f1.t1.value='Reading in progress...'; document.ReadURL.readFile(theLocation); setTimeout("showFileContent()",100); } function showFileContent() { if (document.ReadURL.finished==0) { setTimeout("showFileContent()",100); return; } fileContent=document.ReadURL.fileContent; document.form1.textarea1.value=fileContent; } Back

Writing a File
Question: How do I write a file from JavaScript? Answer: Writing a file from JavaScript is just as easy as writing a file from a Java applet. Your script cannot write files itself; it should call a Java applet's public method which will actually do all the dirty file writing work for you. The bad news is that 1. Writing is a privileged operation, and therefore your Java applet must be digitally signed in order to write files. 2. Applet signing for Internet Explorer is completely different from applet signing for Netscape Navigator. 3. Signed applets may not work properly in Netscape Navigator 3. 4. What's the worst, it's very insecure to put privileged operations in public methods of signed applets! If you publsh such an applet, a malicious code could easily subvert the applet's public methods, and you (the applet publisher/signer) will be sued for any damage! Therefore, nobody publishes scripts that write files via signed applets, although in versions 4 of both major browsers it's technically possible.
Back

Dates and Time
• •

How do I write a clock program in JavaScript? How do I determine the week day for a given date?

• •

Is JavaScript code vulnerable to the Year 2000 problem? See also Clock bookmarklet

JavaScripter.net. Copyright © 1999-2006, Alexei Kourbatov

Clock Example
Question: How do I write a clock program in JavaScript? Answer: A simple clock program would retrieve a new Date() every second (or, better yet, several times a second) and then display the time information from the Date() object. The following code displays a clock on the browser's status bar:
function sbClock() { var DateString=(new Date()).toString(); self.status=DateString.substring(0,3+DateString.lastIndexOf(':')); setTimeout("sbClock()",200); } sbClock();

Back

Calendar Example
Question: How do I determine the week day for a given date? Answer: To determine the week day for a given date, you set this date in a Date() object, and then get the week day using the Date.getDay() method:
d=new Date(); d.setDate(1); d.setYear(yyyy); d.setMonth(mm); d.setDate(dd); ww=d.getDay(); if (ww==0) wDay="Sunday"; if (ww==1) wDay="Monday"; if (ww==2) wDay="Tuesday"; if (ww==3) wDay="Wednesday"; if (ww==4) wDay="Thursday"; if (ww==5) wDay="Friday"; if (ww==6) wDay="Saturday";

Back

Year 2000 Problem

Question: Is JavaScript code vulnerable to the Year 2000 problem? Answer: You can write your code so as to make sure that it will not suffer from "millennium bugs" even if run on older browsers. However, without special precautions, JavaScript code can be vulnerable to the Year 2000 problem. To avoid "millennium bugs", take into account the following:
• •

in most browsers, the Date.getYear() method returns the full four-digit year for the year 2000 and all subsequent years in some old browsers (for example, Internet Explorer 3.0) this method returns the year minus 1900 for all years.

The following code fragment sets the correct four-digit year in all browsers:
theDate = new Date(); theYear = theDate.getYear(); if (theYear<1900) theYear=theYear+1900; Back

Cookies
• • • • •

How do I set a cookie from JavaScript? How do I read a cookie with a given name? How do I delete a cookie with a given name? How do I test whether cookies are enabled in the user's browser? Where are cookie files actually stored on the hard disk?

JavaScripter.net. Copyright © 1999-2006, Alexei Kourbatov

Setting a Cookie
Question: How do I set a cookie from JavaScript? Answer: To set a cookie that will expire in nDays, you can use the following function:
function SetCookie(cookieName,cookieValue,nDays) { var today = new Date(); var expire = new Date(); if (nDays==null || nDays==0) nDays=1; expire.setTime(today.getTime() + 3600000*24*nDays); document.cookie = cookieName+"="+escape(cookieValue) + ";expires="+expire.toGMTString(); }

Cookie Name:

Cookie Value: Must expire in: days from today

Back

Reading a Cookie
Question: How do I read a cookie with a given name? Answer: To read a cookie cookieName that has been set by the SetCookie function, you can use the following function:
function ReadCookie(cookieName) { var theCookie=""+document.cookie; var ind=theCookie.indexOf(cookieName); if (ind==-1 || cookieName=="") return ""; var ind1=theCookie.indexOf(';',ind); if (ind1==-1) ind1=theCookie.length; return unescape(theCookie.substring(ind+cookieName.length+1,ind1)); }

Cookie Name:

Back

Deleting a Cookie
Question: How do I delete a cookie with a given name? Answer: To delete a cookie with a given name, set a cookie that has the same name and an expiration date in the past.
Back

Are cookies enabled?
Question: How do I test whether cookies are enabled in the user's browser? Answer: To test whether cookies are enabled, you can set a non-empty cookie and then retrieve it. If the retrieved cookie value is the same as you've just set, then cookies are enabled. If the retrieved value is an empty string, then cookies are disabled. This page contains a simple code that tests the cookies support using the functions SetCookie and ReadCookie. Here's the result:

Cookies are currently enabled in your browser.
Back

Cookie Files Location
Question: Where are cookie files actually stored on the hard disk? Answer: The actual location of cookie files depends on the user's browser and OS. For example, Netscape Navigator 4.x under Windows stores all your cookies in a single file cookies.txt; a typical location of this file is the following:
c:\Program Files\Netscape\Users\Your_Name\cookies.txt

Internet Explorer 4.x stores each cookie in a separate file. The name of a cookie file is something like this: anyuser@WebSiteName.txt. A typical location of cookie files in Internet Explorer 4.x is the following:
c:\Windows\Cookies\anyuser@WebSiteName.txt JavaScripter.net. Copyright © 1999-2006, Alexei Kourbatov

Client Information
• • • • •

How do I detect the browser name (vendor)? How do I detect the browser version? How do I detect the operating system on the client machine? How do I get the screen size on the client machine? How do I get the browser window size?

JavaScripter.net. Copyright © 1999-2006, Alexei Kourbatov

Browser Name
Question: How do I detect the browser name (vendor)? Answer: To eastablish the actual name of the user's Web browser, you can use the navigator.appName and navigator.userAgent properties. The userAgent property is more reliable than appName because, for example, Opera browsers (and others) may return the string "Netscape" as the value of their appName for compatibility with Netscape Navigator. The code example below uses navigator.userAgent to implement browser detection. It also uses navigator.appName and navigator.appVersion as a last resort only, if the userAgent string has an "unexpected" format. In your browser, this code produces the following output:

Browser name = Microsoft Internet Explorer Full version = 6 Major version = 6 navigator.appName = Microsoft Internet Explorer navigator.userAgent = Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.0; .NET CLR 1.1.4322; .NET CLR 2.0.50727) And here is the source code that performed the browser detection in this example:
var var var var var nVer = navigator.appVersion; nAgt = navigator.userAgent; browserName = ''; fullVersion = 0; majorVersion = 0;

// In Internet Explorer, the true version is after "MSIE" in userAgent if ((verOffset=nAgt.indexOf("MSIE"))!=-1) { browserName = "Microsoft Internet Explorer"; fullVersion = parseFloat(nAgt.substring(verOffset+5)); majorVersion = parseInt(''+fullVersion); } // In Opera, the true version is after "Opera" else if ((verOffset=nAgt.indexOf("Opera"))!=-1) { browserName = "Microsoft Internet Explorer"; fullVersion = parseFloat(nAgt.substring(verOffset+6)); majorVersion = parseInt(''+fullVersion); } // In most other browsers, "name/version" is at the end of userAgent else if ( (nameOffset=nAgt.lastIndexOf(' ')+1) < (verOffset=nAgt.lastIndexOf('/')) ) { browserName = nAgt.substring(nameOffset,verOffset); fullVersion = parseFloat(nAgt.substring(verOffset+1)); if (!isNaN(fullVersion)) majorVersion = parseInt(''+fullVersion); else {fullVersion = 0; majorVersion = 0;} } // Finally, if no name and/or no version detected from userAgent... if (browserName.toLowerCase() == browserName.toUpperCase() || fullVersion==0 || majorVersion == 0 ) { browserName = navigator.appName; fullVersion = parseFloat(nVer); majorVersion = parseInt(nVer); } document.write('Browser name = '+browserName+'<br>'); document.write('Full version = '+fullVersion+'<br>'); document.write('Major version = '+majorVersion+'<br>'); document.write('navigator.appName = '+navigator.appName+'<br>'); document.write('navigator.userAgent = '+navigator.userAgent+'<br>');

Back

Browser Version
Question: How do I detect the browser version? Answer: Unfortunately, the value of navigator.appVersion is no good for detecting the browser version. For example, in many JavaScript-aware browsers, the navigator.appVersion value is meant to be the number of compatible Netscape Navigator version rather than the version of the user's actual browser. (Even in the early days of JavaScript, Microsoft Internet Explorer 3 used to return the string navigator.appVersion that began with 2, which was intended to reflect the compatibility with Netscape Navigator 2.) Thus, to get the full version number of any of the above browsers, you need to rely primarily on the navigator.userAgent string, like in the Browser Name code example. Here is your browser's name and version: Browser name = Microsoft Internet Explorer Full version = 6 Major version = 6 navigator.appName = Microsoft Internet Explorer navigator.userAgent = Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.0; .NET CLR 1.1.4322; .NET CLR 2.0.50727) (Source code can be found in the Browser Name article.)
Back

Operating System
Question: How do I detect the operating system on the client machine? Answer: To detect the operating system on the client machine, your script should analyze the navigator.appVersion string. Below is a simple example of a script that sets the variable OSName to reflect the actual client OS.
// This script sets OSName variable as follows: // "Windows" for all versions of Windows

// // // //

"MacOS" "Linux" "UNIX" "Unknown OS"

for all versions of Macintosh OS for all versions of Linux for all other UNIX flavors indicates failure to detect the OS

var OSName="Unknown OS"; if (navigator.appVersion.indexOf("Win")!=-1) OSName="Windows"; if (navigator.appVersion.indexOf("Mac")!=-1) OSName="MacOS"; if (navigator.appVersion.indexOf("X11")!=-1) OSName="UNIX"; if (navigator.appVersion.indexOf("Linux")!=-1) OSName="Linux"; document.write('Your OS: '+OSName);

On your system, this script yields the following result: Your OS: Windows (To get more detailed OS information, your script should perform a more sophisticated analysis of the navigator.appVersion string, but the idea would be the same.)
Back

Screen Size
Question: How do I get the screen size on the client machine? Answer: To determine the screen size on the client machine, use the properties screen.width and screen.height supported by version 4 of both major browsers. If your user has Netscape Navigator 3 and enables Java, you use a Java call to get the screen width and height (see the example below). The following code sets the variables screenW and screenH to the actual width and height of the screen, and outputs the width and height values. If the user has an old browser, then screenW and screenH are set to 640 and 480, respectively.
var screenW = 640, screenH = 480; if (parseInt(navigator.appVersion)>3) { screenW = screen.width; screenH = screen.height; } else if (navigator.appName == "Netscape" && parseInt(navigator.appVersion)==3 && navigator.javaEnabled() ) { var jToolkit = java.awt.Toolkit.getDefaultToolkit(); var jScreenSize = jToolkit.getScreenSize(); screenW = jScreenSize.width; screenH = jScreenSize.height; } document.write( "Screen width = "+screenW+"<br>" +"Screen height = "+screenH

)

In your browser, this code produces the following output: Screen width = 1024 Screen height = 768
Back

Browser Window Size
Question: How do I get the browser window size? Answer: To determine the actual size of the browser window, use the following properties:
• •

in Netscape Navigator 4:
window.innerWidth, window.innerHeight

in Microsoft Internet Explorer:
document.body.offsetWidth, document.body.offsetHeight

Note that the code that uses document.body.offsetWidth and document.body.offsetHeight must be executed after the browser has parsed the <BODY> tag. The following code sets the variables winW and winH to the actual width and height of the browser window, and outputs the width and height values. If the user has an old browser, then winW and winH are set to 630 and 460, respectively.
var winW = 630, winH = 460; if (parseInt(navigator.appVersion)>3) { if (navigator.appName=="Netscape") { winW = window.innerWidth; winH = window.innerHeight; } if (navigator.appName.indexOf("Microsoft")!=-1) { winW = document.body.offsetWidth; winH = document.body.offsetHeight; } } document.write( "Window width = "+winW+"<br>" +"Window height = "+winH )

In your browser, this code produces the following output: Window width = 806 Window height = 460

Note that if the above code executes within a frame, it will give you the frame's width and height. To adjust the width and height values taking into accout the scrollbars:
• •

in Netscape Navigator: subtract 16 from the width and height in Microsoft Internet Explorer: subtract 20 from the width and height

Thus, the code adjusted for scrollbars might look as follows:
if (parseInt(navigator.appVersion)>3) { if (navigator.appName=="Netscape") { winW = window.innerWidth-16; winH = window.innerHeight-16; } if (navigator.appName.indexOf("Microsoft")!=-1) { winW = document.body.offsetWidth-20; winH = document.body.offsetHeight-20; } } Back

Bookmarklets
• • • • • •

What's a bookmarklet? What browsers support bookmarklets? What's the maximum length of bookmarklet code? Bookmarklet example: Calculator Bookmarklet example: Clock Can I have a JavaScript interpreter bookmarklet?

JavaScripter.net. Copyright © 1999-2006, Alexei Kourbatov

What's a Bookmarklet?
Question: What's a bookmarklet? Answer: Bookmarklet is a tiny JavaScript program contained entirely in a hyperlink's URL. (JavaScript URLs look like this: <a href="javascript:the code goes here">.) Most browsers allow you to bookmark these JavaScript URLs, just as you bookmark any other hyperlinks. The word bookmarklet was coined by Steve Kangas, who also developed many useful bookmarklets himself. Below is a simple example: the go-back bookmarklet.

Go-Back Bookmarklet
This bookmarklet is an equivalent of the browser's Back button. To preview the bookmarklet, click on the above title. To add it to your bookmarks, right-click on the title and choose Add bookmark or Add to Favorites (depending on your browser).
JavaScripter.net. Copyright © 1999-2006, Alexei Kourbatov

Bookmarklets: Browser Support
Question: What browsers support bookmarklets? Answer: Bookmarklets are supported by the following browsers: Netscape Navigator 3.0 and newer versions Internet Explorer 4.0 and newer versions Not all bookmarklets will work in any browser. This is due to the differences in JavaScript implementations in different browsers. To write a cross-browser bookmarklet: Use JavaScript subset that is supported in all target browsers. Make sure that the bookmarklet code is not too long.
Back

Bookmarklets: Maximum Length
Question: What's the maximum length of bookmarklet code? Answer: The maximum length of bookmarklet code depends on the browser. Experiments show that the toughest requirements are in Internet Explorer 6.x. Any bookmarklet with code length exceeding ~510 characters might not work in IE6.
Back

Calculator Bookmarklet
Question: Can I have a calculator in my bookmarks file? Answer: Yes, here is a bookmarklet calculator. To preview the calculator, click on the above hyperlink. To close the calculator, click Cancel in the calculator prompt box. To add the calculator to your bookmarks, right-click on the hyperlink and choose Add bookmark or Add to Favorites (depending on your browser).

This bookmarklet has been tested with both NS4 and MSIE4.
Back JavaScripter

JavaScript Interpreter Bookmarklet
Question: Can I have a bookmarklet with the JavaScript interpreter? Answer: Yes. In fact, some JS programmers find that a JavaScript interpreter bookmarklet is very useful. Not only it allows to execute a line of JavaScript code on-thefly - it also helps you check the state of any variable in your code while viewing your HTML page. Here it is - the JavaScript interpreter bookmarklet.
• • • • •

To get the JavaScript interpreter prompt, click on the above hyperlink. To check the state of a JS variable, enter the variable name. To execute a line of JS code, enter the code. To close the interpreter prompt, click Cancel in the prompt box. To add the JavaScript interpreter to your bookmarks, right-click on the hyperlink and choose Add bookmark or Add to Favorites (depending on your browser).

This bookmarklet has been tested with both NS4 and MSIE4.
Back

Sound
• • • • • • • •

What browsers can execute scripts that play sound? Can I play a sound file without using JavaScript? How do I write a JavaScript function that plays a sound file? How do I write a JavaScript function that stops playing sound? Can I play a sound onMouseOver? How do I preload a sound file? How do I set a background sound on a Web page? Which formats of sound files can I play on my Web page?

JavaScripter.net. Copyright © 1999-2006, Alexei Kourbatov

Audio-enabled Browsers
Question: What browsers can execute scripts that play sound? Answer: The techniques described in Playing Sound work in Microsoft Internet Explorer 4.0 and newer as well as Netscape Navigator 3.0 and newer. In order to play sound from

JavaScript in Internet Explorer, it's enough to test that the browser version is 4.0 or newer. In Netscape Navigator, you'll have to make sure that the browser version is 3.0 or newer Java (not only JavaScript!) is enabled the browser recognizes the mime-type of the audio file you want to play the LiveAudio plugin is ready to play For example, if you want to play the sound file mySound.mid specified in the following EMBED tag
<EMBED NAME="mySound" SRC="mySound.mid" LOOP=FALSE AUTOSTART=FALSE HIDDEN=TRUE MASTERSOUND>

then the necessary tests can be performed using this code:
ver=parseInt(navigator.appVersion) if (ver>2 && navigator.appName=="Netscape" && navigator.mimeTypes['audio/x-midi'] && navigator.javaEnabled() && document.mySound.IsReady() ) { // put Netscape-specific code here } if (ver>3 && navigator.appName.indexOf("Microsoft")!=-1) { // put Explorer-specific code here } JavaScripter.net. Copyright © 1999-2006, Alexei Kourbatov

Audio File Formats
Question: Which formats of sound files can I play on my Web page? Answer: All audio-enabled browsers support the playback of audio files in WAV and MIDI formats (.mid, .midi, and .wav files) . Other file formats may or may not be supported, depending on the user's browser and system configuration. For example, RealAudio sound files will be played back only if the user installed the RealPlayer application.
JavaScripter.net. Copyright © 1999-2006, Alexei Kourbatov

Playing Sound from JavaScript
Question: How do I write a JavaScript function that plays a sound file? Answer: There are different ways to play sound from JavaScript. Let's consider a couple of examlpes.

Example 1. Here's the simplest cross-browser script for playing a sound file:
self.location="AUDIO_FILE_URL"

Click here to test the code of Example 1. The browser will open a separate sound control window. The user will then have to close this window manually. Note that the script in Example 1 is not user-friendly: every time the user clicks to run this script, the browser will open a new sound control window - even if there might be a couple of other audio windows already playing the same file! Example 2. Here's a more complex example in which you won't see a separate sound control window. (You'll find a discussion below.) In Microsoft Internet Explorer, there are several ways to play a sound file from JavaScript, without opening a separate window for sound control. For example, you can use the Explorer-specific BGSOUND tag:
<BGSOUND ID="BGSOUND_ID" LOOP=1 VOLUME="-600" SRC="jsilence.mid"> Use the following JavaScript code to play a sound file mySound.mid via the BGSOUND tag: To start playing: document.all['BGSOUND_ID'].src='mySound.mid' To stop playing: document.all['BGSOUND_ID'].src='jsilence.mid' Here mySound.mid stands for the name of the sound file that you actually want to play; jsilence.mid is a "do-nothing" sound file - it does not play any sound at all, but can be

used to stop the playback of other sound files. In Netscape Navigator, you'll have to use the LiveAudio plugin; to do so, you'll need to put an EMBED tag on your page. For example, if you want to play the file mySound.mid and hide the LiveAudio window, you can use the following EMBED tag:
<EMBED NAME="mySound" SRC="mySound.mid" LOOP=FALSE AUTOSTART=FALSE HIDDEN=TRUE MASTERSOUND>

Use the following JavaScript code to control sound in Netscape: To start playing: document.mySound.play() To stop playing: document.mySound.stop() The source code of Example 2 is shown below. The code first tests whether the browser is audio-enabled and then uses the techniques described on this page. You'll see two JavaScript functions, playSound() and stopSound(), that actually start and stop the playback.
<BGSOUND id="BGSOUND_ID" LOOP=1 SRC="jsilence.mid"> <EMBED NAME="Bach" SRC="Bach.mid" LOOP=FALSE AUTOSTART=FALSE HIDDEN=TRUE MASTERSOUND> <script language="JavaScript"> <!-ver=parseInt(navigator.appVersion) ie4=(ver>3 && navigator.appName!="Netscape")?1:0 ns4=(ver>3 && navigator.appName=="Netscape")?1:0 ns3=(ver==3 && navigator.appName=="Netscape")?1:0

function playSound() { if (ie4) document.all['BGSOUND_ID'].src='Bach.mid'; if ((ns4||ns3) && navigator.javaEnabled() && navigator.mimeTypes['audio/x-midi'] && self.document.Bach.IsReady() ) { self.document.Bach.play() } } function stopSound() { if (ie4) document.all['BGSOUND_ID'].src='jsilence.mid'; if ((ns4||ns3) && navigator.javaEnabled() && navigator.mimeTypes['audio/x-midi'] ) { self.document.Bach.stop() } } //--> </script> <form name=myform> <input type=button value="Play Sound" onClick="playSound()"> <input type=button value="Stop Sound" onClick="stopSound()"> </form> Back

Stopping Sound
Question: How do I write a JavaScript function that stops playing sound? Answer: If you've opened a separate sound control window using the code self.location="AUDIO_FILE_URL" (see Example 1), then there is no simple way to stop the sound programmatically. The user will have to close the sound control window manually. To be able to stop playing sound from JavaScript, you'll need to use the techniques described in Example 2. Let's assume that Microsoft Internet Explorer is playing the sound file mySound.mid specified by the BGSOUND tag
<BGSOUND ID="BGSOUND_ID" SRC="mySound.mid">

To stop playing the sound, you can use this code:

document.all['BGSOUND_ID'].src='jsilence.mid' Here jsilence.mid is a "do-nothing" sound file - it does

not play any sound at all.

Now assume that Netscape Navigator is playing the sound mySound.mid specified by the following EMBED tag:
<EMBED NAME="mySound" SRC="mySound.mid" LOOP=FALSE AUTOSTART=FALSE HIDDEN=TRUE MASTERSOUND>

Then you can use the following code to stop the playback:
document.mySound.stop() Back

Playing Sound onMouseOver
Question: Can I play a sound onMouseOver? Answer: Yes, you can call a sound playback function from the onMouseOver event handler of a hyperlink. Try this example: place your mouse pointer over the following hyperlink, and the browser will start the playback.

J.S.Bach's Suite in B-minor
Here's the source code for this hyperlink:
<a href=# class=playOnHover title="This hyperlink plays a sound onMouseOver." onClick="return false" onMouseOver="playSound();return true" onMouseOut ="stopSound();return true" >&nbsp;J.S.Bach's Suite in B-minor&nbsp;</a> The source code of the functions playSound() and stopSound()

can be found in the

Playing Sound section.
Back

Preloading Sound Files
Question: How do I preload a sound file? Answer: In Netscape Navigator 3.0 and newer, as well as in Microsoft Internet Explorer 4.0 and newer, you can use the following EMBED tag to preload a sound file mySound.mid:
<EMBED NAME="mySound" SRC="mySound.mid" LOOP=FALSE AUTOSTART=FALSE HIDDEN=TRUE MASTERSOUND>

Then you can play the sound using the techniques described in the Playing Sound section.
Back

Background Sound
Question: How do I set a background sound on a Web page? Answer: In all audio-enabled browsers, you can use the EMBED tag to play a background sound. For example, if you want to play the file bkground.mid right after the browser loads the page, you can use the following EMBED tag:
<EMBED NAME="bkgroundID" SRC="bkground.mid" LOOP=TRUE AUTOSTART=TRUE HIDDEN=TRUE MASTERSOUND>

To stop the background sound, call the cross-browser method document.bkgroundID.stop() - try it now! If your target browser is Microsoft Internet Explorer (for example, in an intranet), then you can use the Explorer-specific BGSOUND tag:
<BGSOUND ID="bkgroundID" LOOP=0 VOLUME="-600" SRC="bkground.mid"> Here, again, bkground.mid stands for the name of the sound file that you actually want

to play.
Back JavaScripter.net. Copyright

Playing Sound without JavaScript
Question: Can I play a sound file without using JavaScript? Answer: Yes, you can play a sound by specifying the sound file's URL as a hyperlink destination, for example, <A HREF="mySound.mid"> (click here to try it). When the user clicks the hyperlink, the browser will open a separate sound control window. The user will then have to close this window manually. What's worse, every time the user clicks the hyperlink, the browser will open a new sound control window - even though there might be several other audio windows already playing the same file!
Back

Error Handling
• • •

Can I suppress JavaScript error messages? Can I set up my own JavaScript error handler? Can I change the active JavaScript error handler? (Demo)

JavaScripter.net. Copyright © 1999-2006, Alexei Kourbatov

Suppressing JS Errors
Question: Can I suppress JavaScript error messages? Answer: Yes. To suppress all JavaScript error messages on your HTML page, you can put the following code fragment in the HEAD section of your page:
<SCRIPT language="JavaScript"> <!-function silentErrorHandler() {return true;} window.onerror=silentErrorHandler; //--> </SCRIPT> Or you can use a similar code (without SCRIPT tags) in

an included .js file, if you have one. For a working code example, see our error handling demo!
Back

Adding Your Own Error Handler
Question: Can I set up my own JavaScript error handler? Answer: Yes. To define your own error handler, use this JavaScript code:
function handlerFunction(description,page,line) { // put error-handling operators here return true } window.onerror=handlerFunction

Your error handler function can optionally use the following parameters: a textual description of the error the address (URL) of the page on which the error occurred the number of the line in which the error occurred The error handler function must return false if you wish to invoke the browser's default error handler after your own handler finishes. If you don't want to invoke the browser's default handler, your handler function must return true. For an additional code example, check out our error handling demo!
Back

Error Handling Demo
Question: Can I dynamically change the JavaScript error handler? Answer: Yes. To change the JavaScript error handler, just set window.onerror to the name of the function that will serve as your new error handler.

Here's a demo that lets you test three different error handlers: the browser's default error handler an error handler that displays a customized alert box a "silent" error handler that suppresses all error messages. 1. Use the select box to set or change the error handler. 2. Click Fire an Error to test the active error handler. Below is the source code of the error handling functions used in this demo:
function defaultHandler() {return false} function silentHandler() {return true} function customHandler(desc,page,line,chr) alert( 'JavaScript error occurred! \n' +'The error was handled by ' +'a customized error handler.\n' +'\nError description: \t'+desc +'\nPage address: \t'+page +'\nLine number: \t'+line ) return true } Back

{

JavaScripter.net FAQ: Alphabetical Index

A About this FAQ Accuracy Adding Your Own Error Handler Alert Are cookies enabled? Arithmetic Operations
back to top

B Back Button Background Color Background Sound Bookmarklets Bookmarklets: Browser Support Bookmarklets: Maximum Length Bookmarks: Adding Breaking out of a frameset

Browser Name Browser Version Browser Window Size Browsers Supporting JS Browsers Supporting Sound Button Links Buttons with Images
back to top

C Calculator Bookmarklet Calendar Example Canceled Prompt Client Information Clock Bookmarklet Clock Example Closing a window Color Names Colors Combining Input Fields Comments in JavaScript Confirm Dialog Constants Converting Numbers to Strings Converting Strings to Numbers Converting to Another Base Cookie Files Location Cookies Creating Layers Ctrl, Alt, Shift Keys
back to top

D Dates and Time Deleting a Cookie Deleting Layers Dialogs Disabling a radio button Disabling the Right-click Menu for an Image
back to top

E Enter key: will it submit my form? Error Handling Error Handling Demo escape External Files in Layers External JS Files
back to top

F File Access Find Dialog Foreground Colors

Forms Forward Button Frames
back to top

G General Questions
back to top

H Hex-to-RGB Conversion Hiding JS code from old browsers
back to top

I Images Is JavaScript enabled? Is my page framed? Is my window still open?
back to top

J JavaScript Documentation JavaScript FAQ JavaScript Features JavaScript Interpreter Bookmarklet JavaScript Limitations JavaScript Versions JavaScripter.net Home
back to top

L Layers Left vs. Right Button Links in a Select Menu
back to top

M Math Constants Math Functions Maximizing a window Mouse Event Properties Mouse Events
back to top

N Navigation Number vs. String Numbers
back to top

O Octals and Hexadecimals

OnMouseDown Effects OnMouseOver Effects Opening a window Operating System
back to top

P Passing parameters to a page Playing Sound Playing Sound onMouseOver Preloading Sound Printing JavaScript Output Prompt Dialog
back to top

Q Query Strings Quotes in Strings
back to top

R Random Numbers Reading a Cookie Reading a File Reserved Words Resizing a window RGB-to-Hex Conversion Right Button: Disabling Rounding
back to top

S Screen Size Searching for Text Setting a Cookie Shift-click: Disabling Sound Sound File Formats Sound without JS Stopping Sound Strings Substrings Suppressing JS Errors
back to top

U unescape Updating two frames at a time
back to top

V Validating a Form
back to top

W What is JavaScript What's a Bookmarklet? Window title Windows Writing a File Writing to a window
back to top

Y Year 2000 Problem

http://www.javascripter.net/faq/index.htm

Sign up to vote on this title
UsefulNot useful