Javascript FAQ

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 system-
dependent 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: We are really
glad to see a user of Microsoft Internet Explorer under Windows!
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
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 Year JavaScript Version

Netscape Navigator 2.0 1995 JavaScript 1.0
Microsoft Internet Explorer 3.0 1996 JavaScript 1.0 (JScript 1.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
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):
• 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.
Back
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. /* This is a comment */
3. /* C-style comments can span
4. as many lines as you like,
5. as 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 ( This is also a one-line JS comment
12. because JS ignores the closing characters
13. 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
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. 
6. </script>
Thus, your HTML file will contain the following fragment:
<script language="JavaScript">

</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
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
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 else instanceof switch

boolean enum int synchronized
break export interface this
byte extends long throw
case false native throws
catch final new transient
char finally null true
class float package try
const for private typeof
continue function protected var
debugger goto public void
default if return volatile
delete implements short while
do import static with
double in super
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:
alert hidden outerWidth

all history packages
anchor image pageXOffset
anchors images pageYOffset
area isNaN parent
array java parseFloat
assign JavaArray parseInt
blur JavaClass password
button JavaObject pkcs11
checkbox JavaPackage plugin
clearTimeout innerHeight prompt
clientInformation innerWidth prototype
close layer radio
closed layers reset
confirm length screenX
crypto link screenY
date location scroll
defaultStatus Math secure
document mimeTypes select
element name self
elements navigate setTimeout
embed navigator status
embeds netscape String
escape Number submit
eval Object sun
event offscreenBuffering taint
fileUpload onblur text
focus onerror textarea
form onfocus top
forms onload toString
frame onunload unescape
frames open untaint
frameRate opener valueOf
function option window
getClass outerHeight
Back
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?
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
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
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:
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!
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

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 top-
level 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
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>
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?

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
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 // pi = 3.14159265...
Math.E // e = 2.71828182...
Math.LOG2E // log of e base 2
Math.LOG10E // log of e base 10
Math.LN2 // log of 2 base e
Math.LN10 // log of 10 base e
Math.SQRT2 // square root of 2
Math.SQRT1_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
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 = (32767).toString(16) // this gives "7fff"

b = (255).toString(8) // this gives "377"
c = (1295).toString(36) // this gives "zz"
d = (127).toString(2) // this gives "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 // change the sign of a

~a // bitwise NOT a
++a // add 1 to a (before using a)
a++ // add 1 to a (after using a)
--a // subtract 1 from a (before using a)
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 * b // multiply a by b
a / b // divide a by b
a % b // find the remainder of division of a by b
a + b // add a and b
a - b // subtract b from a
a & b // bitwise a AND b
a | b // bitwise a OR b
a ^ b // bitwise a XOR b
Shifts are the following operations:
a << b // shift a by b bits to the left

// (padding with zeros)
a >> b // shift a by b bits to the right
// (copying the sign bit)
a >>> b // 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) // result: "number"

typeof("123") // 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) // the absolute value of a

Math.acos(a) // arc cosine of a
Math.asin(a) // arc sine of a
Math.atan(a) // arc tangent of a
Math.atan2(a,b) // arc tangent of a/b
Math.ceil(a) // integer closest to a and not less than a
Math.cos(a) // cosine of a
Math.exp(a) // exponent of a
Math.floor(a) // integer closest to and not greater than a
Math.log(a) // log of a base e
Math.max(a,b) // the maximum of a and b
Math.min(a,b) // the minimum of a and b
Math.pow(a,b) // a to the power b
Math.random() // pseudorandom number in the range 0 to 1
Math.round(a) // integer closest to a
Math.sin(a) // sine of a
Math.sqrt(a) // square root of a
Math.tan(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

If you need random floating-point numbers in the range from A to B, use this code:
num = A + (B-A)*Math.random() // num is random, from A to B
Back
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
• 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
Back
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') // 1.45
parseFloat('77.3') // 77.3
parseFloat('077.3') // 77.3
parseFloat('0x77.3') // 0
parseFloat('.3') // 0.3
parseFloat('0.1e6') // 100000
Back
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 is the string from which you want to extract a substring.
start 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.)
end 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) // 'He'
'Hello'.substring(0,4) // 'Hell'
Back
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 escape-
sequences of the form %XX, where XX stands for two hexadecimal digits, each escape-
sequence 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?
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
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
}
<form name=myform>
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')
<form name=myform>
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:

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?
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 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).
name 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 Specifies whether to display the toolbar in the new window.

location=0|1 Specifies whether to display the address line in the new window.
directories=0|1Specifies whether to display the Netscape directory buttons.
status=0|1 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) {
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 (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.
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)?
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>
<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>
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?
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:
LAYER or ILAYER tags with SRC=FILENAME.HTM (in Netscape 4)

IFRAME tag with SRC=FILENAME.HTM (in Explorer 4+ and Netscape 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:
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>
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)
}
}
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=''
}
}
Images
• 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?
Back
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>
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>
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>
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
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 platform-
dependent. 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>
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>
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>
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
combination, this property has the following values:
Alt only modifiers=1 (001)
Ctrl only modifiers=2 (010)
Ctrl+Alt modifiers=3 (011)
Shift only modifiers=4 (100)
Shift+Alt modifiers=5 (101)
Shift+Ctrl modifiers=6 (110)
Shift+Alt+Ctrl modifiers=7 (111)
None of these keys modifiers=0 (000)
Thus, in the binary representation of the event.modifiers value:
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
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>
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?
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 top-
level 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 #00FFFF lime #00FF00 silver #C0C0C0

black #000000 maroon #800000 teal #008080
blue #0000FF navy #000080 white #FFFFFF
fuchsia #FF00FF olive #808000 yellow #FFFF00
gray #808080 purple #800080
green #008000 red #FF0000
In newer browsers, there are many more supported color names (see list below). You
can try all these colors here:
#F0F8FF aliceblue #F8F8FF ghostwhite #FFDEAD navajowhite

#FAEBD7 antiquewhite #FFD700 gold #000080 navy
#00FFFF aqua #DAA520 goldenrod #FDF5E6 oldlace
#7FFFD4 aquamarine #808080 gray #808000 olive
#F0FFFF azure #008000 green #6B8E23 olivedrab
#F5F5DC beige #ADFF2F greenyellow #FFA500 orange
#FFE4C4 bisque #F0FFF0 honeydew #FF4500 orangered
#000000 black #FF69B4 hotpink #DA70D6 orchid
#FFEBCD #EEE8AA
#CD5C5C indianred
blanchedalmond palegoldenrod
#0000FF blue #4B0082 indigo #98FB98 palegreen
#AFEEEE
#8A2BE2 blueviolet #FFFFF0 ivory
paleturquoise
#DB7093
#A52A2A brown #F0E68C khaki
palevioletred
#DEB887 burlywood #E6E6FA lavender #FFEFD5 papayawhip
#5F9EA0 cadetblue #FFF0F5 lavenderblush #FFDAB9 peachpuff
#7FFF00 chartreuse #7CFC00 lawngreen #CD853F peru
#D2691E chocolate #FFFACD lemonchiffon #FFC0CB pink
#FF7F50 coral #ADD8E6 lightblue #DDA0DD plum
#6495ED
#F08080 lightcoral #B0E0E6 powderblue
cornflowerblue
#FFF8DC cornsilk #E0FFFF lightcyan #800080 purple
#FAFAD2
#DC143C crimson #FF0000 red
lightgoldenrodyellow
#00FFFF cyan #90EE90 lightgreen #BC8F8F rosybrown
#00008B darkblue #D3D3D3 lightgrey #4169E1 royalblue
#008B8B darkcyan #FFB6C1 lightpink #8B4513 saddlebrown
#B8860B
#FFA07A lightsalmon #FA8072 salmon
darkgoldenrod
#A9A9A9 darkgray #20B2AA lightseagreen #FAA460 sandybrown
#006400 darkgreen #87CEFA lightskyblue #2E8B57 seagreen
#BDB76B darkkhaki #778899 lightslategray #FFF5EE seashell
#8B008B darkmagenta #B0C4DE lightsteelblue #A0522D sienna
#556B2F
#FFFFE0 lightyellow #C0C0C0 silver
darkolivegreen
#FF8C00 darkorange #00FF00 lime #87CEEB skyblue
#9932CC darkorchid #32CD32 limegreen #6A5ACD slateblue
#8B0000 darkred #FAF0E6 linen #708090 slategray
#E9967A darksalmon #FF00FF magenta #FFFAFA snow
#8FBC8F darkseagreen #800000 maroon #00FF7F springgreen
#483D8B
#66CDAA mediumaquamarine #4682B4 steelblue
darkslateblue
#2F4F4F
#0000CD mediumblue #D2B48C tan
darkslategray
#00CED1
#BA55D3 mediumorchid #008080 teal
darkturquoise
#9400D3 darkviolet #9370DB mediumpurple #D8BFD8 thistle
#FF1493 deeppink #3CB371 mediumseagreen #FF6347 tomato
#00BFFF deepskyblue #7B68EE mediumslateblue #40E0D0 turquoise
#696969 dimgray #00FA9A mediumspringgreen #EE82EE violet
#1E90FF dodgerblue #48D1CC mediumturquoise #F5DEB3 wheat
#B22222 firebrick #C71585 mediumvioletred #FFFFFF white
#FFFAF0 floralwhite #191970 midnightblue #F5F5F5 whitesmoke
#228B22 forestgreen #F5FFFA mintcream #FFFF00 yellow
#FF00FF fuchsia #FFE4E1 mistyrose #9ACD32 yellowgreen
#DCDCDC gainsboro #FFE4B5 moccasin
Back
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
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?
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
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?
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 nVer = navigator.appVersion;

var nAgt = navigator.userAgent;
var browserName = '';
var fullVersion = 0;
var 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";
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);
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" for all versions of Macintosh OS
// "Linux" for all versions of Linux
// "UNIX" for all other UNIX flavors
// "Unknown OS" 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;

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;
winW = window.innerWidth;
winH = window.innerHeight;
}
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:

winW = window.innerWidth-16;
winH = window.innerHeight-16;
}
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?
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).
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-the-
fly - 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?
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']
&& document.mySound.IsReady() )
{
// put Netscape-specific code here
}
if (ver>3 && navigator.appName.indexOf("Microsoft")!=-1)
{
// put Explorer-specific code here
}
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.
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:

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"

</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:

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"
> J.S.Bach's Suite in B-minor </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:

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)

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">

</SCRIPT>
Or you can use a similar code (without SCRIPT tags) inan 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

Javascript FAQ

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Javascript FAQ

Uploaded by

Copyright:

Available Formats

About this FAQ

Question: Why this FAQ?

Question: What is JavaScript?

Answer: JavaScript is a scripting language designed for adding interactivity to HTML

JavaScript is an interpreted language. This means that scripts execute without

• Netscape Navigator (beginning with version 2.0)

• Giving the user more control over the browser

Below you'll find simple examples illustrating each of these tasks.

1. Giving the user more control over the browser.

2. Detecting the user's browser

3. Performing simple computations on the client side.

4. Validating the user's input.

Nice morning, isn't it? Today is Tuesday, 14 August 2007.

6. Generating HTML pages on the fly.

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

Question: What can't JavaScript programs do?

Answer: JavaScript code cannot do any of the following:

Browsers Supporting JavaScript

Question: Which browsers support JavaScript?

Answer: JavaScript is supported by the following browsers:

• Netscape Navigator (beginning with version 2.0)

See also JavaScript Versions.

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

Question: What JavaScript versions are there?

Answer: JavaScript is one of the youngest programming languages. It was first

Browser Year JavaScript Version

Unfortunately, Netscape and Microsoft implementations of JavaScript are different, even

Be sure to test your scripts on all target platforms.

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

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://www.WebReference.com/programming/JavaScript/ - tutorials and in-depth

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

Printing JavaScript Output

Question: How do I print JavaScript output?

• remind them to use the File | Print menu and/or

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

Hiding JS code from old browsers

1. Immediately after the opening <script> tag, put a one-line HTML-style

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

.js files containing JavaScript

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

Reserved words in JavaScript

Question: What reserved words are there in JavaScript?

abstract else instanceof switch

alert hidden outerWidth

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

• How do I code a select menu with hyperlinks to different pages?

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:

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

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

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

Answer: To create your own Back button, use this code

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

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