<%response.buffer=true%> <% yere = year(date()) Response.Expires = 0 %> Q & A
<Q & A >
  spacerspacer

JavaScript Questions & Answers

How do I sniff multiple browsers? How do I popup a new window without JavaScript?
Should I use single or double quotes in JavaScript? What do I do when I get a blank page?
How do I change a string into an object? (eval) Why can't I read the value of a radio button?
What is the for(var myProperty in document) saying and its component parts?


How do I sniff multiple browsers (and browser versions) with a single page?:

If you are interested in sniffing more than 2 browsers, I would take a close look at the code (view the source) of the following page:
 
 
Here is a snippet of code from that page that is designed to find out whether the current browser is opera (for example), and what version.  First, a variable called "agt" is used to store the " userAgent" property:
 
var agt=navigator.userAgent.toLowerCase();
 
Then, look at this section of the code for sniffing Opera:
 
var is_opera = (agt.indexOf("opera") != -1);
var is_opera2 = (agt.indexOf("opera 2") != -1 || agt.indexOf("opera/2") != -1);
var is_opera3 = (agt.indexOf("opera 3") != -1 || agt.indexOf("opera/3") != -1);
var is_opera4 = (agt.indexOf("opera 4") != -1 || agt.indexOf("opera/4") != -1);
var is_opera5 = (agt.indexOf("opera 5") != -1 || agt.indexOf("opera/5") != -1);
var is_opera6 = (agt.indexOf("opera 6") != -1 || agt.indexOf("opera/6") != -1);
var is_opera7 = (agt.indexOf("opera 7") != -1 || agt.indexOf("opera/7") != -1);
 

They are using the string operator called indexOf, which allows JS to search for a "sub" string (string fragment) anywhere in a particular string.

Sometimes we call the substring the "needle", and the string we are looking inside the "haystack". This makes it easier to imagine. 

The "haystack" is the "userAgent" property of the navigator object, in our case called "agt".  If the "haystack" includes the "needle" (if the word "opera" appears ANYWHERE inside the string) the actual number of where the string STARTS is returned! If the substring is NOT found, the number -1 is returned.
 
We are not interested WHERE the string starts, only that it STARTS at all!
 
As long as -1 is NOT returned, the sub string exists SOMEWHERE inside the original string!
 
The string they are using to identify Opera is in fact the string "opera":
 
var is_opera = (agt.indexOf("opera") != -1);
 
The previous line of code would return TRUE if the string "opera" exists inside the userAgent property of the navigator object. Now the var called "is_opera" returns TRUE, and you can use an if/else or switch statement to output a message, load DHTML or switch a CSS style sheet based on this information!
 
Further testing determines the version:
 
var is_opera2 = (agt.indexOf("opera 2") != -1 || agt.indexOf("opera/2") != -1);
 
Note that Opera version 2 must include EITHER the string "opera 2" or "opera/2".  The implication is there are different ways to indicate the browser version in Opera.
 
Note also that the agt (appName property) is turned to "lower case" for comparison, so as not to miss a version due to case inconsistency: 

var agt=navigator.userAgent.toLowerCase();

Back To Top



How do I popup a new window without JavaScript?:

When you place the attribute "target=_blank" inside a link:
 
<a href="blah.htm" target="_blank">my Link</a> 

Your linked page shows up in a new window, when clicked! No JavaScript necessary.

Back To Top



Should I use single or double quotes in JavaScript?

JavaScript needs to know WHERE the end of any string is. If you start a string with one or the other (single or double quotes) you need to finish what you started, and end with that version.

Sometimes it is good to choose one over the other, for example, if you choose single quotes on document.write, you may not need to escape as many characters:

document.write('<font color="blue" size="3">blah</font>');

Note since single quotes were used, we don't need to escape anything, because there is no way for JS to confuse where the string ends. Compare this to the double quote version:

document.write ("<font color=\"blue\" size=\"3\">blah</font>");

Every occasion of double quote in the above version needs to be escaped, since JS would not know where to end the string.

Single quotes might be the best way to go. Remember though, if you have an apostrophe, you would then need to escape it:

document.write('<font color="blue" size="3">boy\'s toys</font>');

Notice the slash before the letter s in boy's! Since we used single quotes to denote the string, we need to escape any example of a single quote INSIDE the string!

Back To Top



I'm getting a blank page instead of seeing my JavaScript. What do I do now?:

A blank page (meaning your JavaScript output does not show up on the page) is usually due to one of two factors:

  1. Your JavaScript has an error in the code, in which case the browser stops running your code
  2. The variable or value you are trying to output is empty, or otherwise not what you had expected.

Both of these conditions can be addressed by using the javascript: command typed into the address bar of either the Netscape, Firefox or Mozilla browsers to pull up the JavaScript Console. (Or use the TOOLS menu to pull it up in Firefox).

All your JavaScript errors must be corrected before your code can be expected to run. Any single error, (value not quoted, parenthesis not closed, etc.) will STOP the code from running at all.

Most browsers elect NOT to show any error messages, so that is why you need to use the JavaScript Console, where JavaScript error messages are shown, including the involved line of code, and even the character where your JavaScript breaks down!

If you see no error messages in the JavaScript Console, it is possible the variables you are using are empty due to misnaming, calculations going awry, or if/else or switch statements that do not plan for certain conditions.

Remember the alert() function is your first option in this regard, because you can output the current contents of a variable inside the code, thus:

var myVar = "blah";
alert("myVar currently contains: " + myVar);

If necessary, you can place SEVERAL alerts, or set up elaborate alerts that gather more than one variable, possibly even in more than one place in the code:

var myVar = "blah";
var anotherVar = "bleh";
alert("BEFORE myVar: " + myVar + "\n" + "anotherVar: " + anotherVar);
myVar += anotherVar;
alert("AFTER myVar: " + myVar + "\n" + "anotherVar: " + anotherVar);

Note that in the above code, the 2 alerts show the same info, but appear in 2 different places, therefore showing the contents of the 2 variables involved both before and after the concatenation operation that takes place between them.

For more details on how to overcome JavaScript errors, please visit see troubleshooting.



I'm having a user input the name of an object in a prompt. How do I turn the string into the actual object?

When the user types in an object name, for example "location" or "navigator", what is being provided is a string, not an actual object.

To be able to get the string called "navigator" to turn into the actual navigator object, We need to tell JS to RUN the code in the string. There is an internal function that allows me to do that called "eval", which is short for "evaluate":

userObject = eval(userObject);

This inserts the string the user has typed in, (in this case in a variable called "userObject") and evaluates it as JavaScript, and outputs the object into the SAME variable name! (Why waste a good variable!!)

Any JS that inside the parens of the "eval" is tested as an actual stand alone JS script. This is EXTREMELY powerful, in fact the language would be quite limited without it!

Back To Top



Why can't I read a value of a radio button?:

A radio button (and a checkbox, for that matter) consists of separate form elements under the same name. Therefore, to get to the data, we need to use an array. Look at the following radio buttons:
 
<input type="radio" name="gender" value="male" / > Male <br />
<input type="radio" name="gender" value="female" />  Female <br />

Note that both radio button are distinct elements, yet they share the same name. We can't use the same method to get the individual 'value' inside a radio button until we specify which one!

var myGender = document.myForm.gender[0].value;

The above will ALWAYS return 'male' however, because 'male' is hard wired into the first element of the named array 'gender'. What we really want to know is WHICH one the user has CHECKED:

if(document.myForm.gender[0].checked){alert("It's a Boy!";}
if(document.myForm.gender[1].checked){alert("It's a Girl!";}

Since we know the offset of each of our radio buttons (in this case), we know the values. If we did NOT know the values, we could do this:

for(x=0;x<document.myForm.gender.length;x++)
{
    if(document.myForm.gender[x].checked)
    {
        alert("It's a " + document.myForm.gender[x].value);
    }
}

The above example is even more applicable to a checkbox, which is nearly functionally identical in JavaScript to a radio button. In that case, several 'values' may be checked, and we may want to count how many are checked (to determine a minimum selected) or to see if one of several checked items are 'compatible', etc.

Back To Top


What is the for(var myProperty in document) saying and its component parts?

In JS, objects have been created to allow us to access pieces of web pages and parts of the current browser and it's windows.  The document object represents the HTML document itself, but there are other objects, for example the location object (address bar) and the navigator object (the current browser being used). Form more objects, view the the Object Properties

Each object allows access to parts & pieces of their functionality through properties & methodsA property are somewhat akin to the word 'quality' for example, a car is blue, with blue being the property:

car.color = blue;

Methods are more akin to actions, or tricks an object can perform, and are usually identified by the parens, for example:

car.go()

Properties and methods give us access to specific data about the object, for example the href property of the location object is the URL seen in the address bar:

var theURL = location.href;


The objects themselves have an inconsistent number of properties and/or methods. Each browser provides a similar number and type of properties and methods, but they are not always identical.  Wouldn't it be nice to be able to 'view' the properties & methods of the current browser?

This is where the for/in loop helps.   Most objects in JS will reveal all of their properties when we loop through them:

for(myProperty in window)
{
     document.write(
myProperty + '<br />');
}


In the above example, the word window is the name of the object and the word myProperty is a variable, which could have any name.  We could have used the word property instead of myProperty, but since it looks like a possible reserved word, we avoid it.

This is the way we loop through (and reveal) all properties of any JS object.
  This forms the basis of our browser sniffing research, as we looked at each browser via this command, and looked for patterns on which to match up browsers.  This is likely the way that most browser sniffers were created, by examining in detail the properties of each browser in turn, to determine matching patterns (to use all browsers consistently) and unique qualities (to speak to specific browsers only, or to determine which browser is which).

Back To Top

 

   
Print this Page  

2000- <%=yere%> newMANIC INC, All rights reserved