Opening a New Window

How to open a new window with JavaScript

To open a new window, you will need to use yet another ready-made JavaScript function. Here is what it looks like:

window.open('url to open','window name','attribute1,attribute2')
This is the function that allows you to open a new browser window for the viewer to use. Note that all the names and attributes are separated with a comma rather than spaces. Here is what all the stuff inside is:

1.'url to open'
This is the web address of the page you wish to appear in the new window.
2. 'window name'
You can name your window whatever you like, in case you need to make a reference to the window later.

3. 'attribute1,attribute2'
As with alot of other things, you have a choice of attributes you can adjust.

Window Attributes
Below is a list of the attributes you can use:

1. width=300
Use this to define the width of the new window.
2. height=200
Use this to define the height of the new window.
3. resizable=yes or no
Use this to control whether or not you want the user to be able to resize the window.
4. scrollbars=yes or no
This lets you decide whether or not to have scrollbars on the window.
5. toolbar=yes or no
Whether or not the new window should have the browser navigation bar at the top (The back, foward, stop buttons..etc.).
6. location=yes or no
Whether or not you wish to show the location box with the current url (The place to type http://address).
7. directories=yes or no
Whether or not the window should show the extra buttons. (what's cool, personal buttons, etc...).
8. status=yes or no
Whether or not to show the window status bar at the bottom of the window.
9. menubar=yes or no
Whether or not to show the menus at the top of the window (File, Edit, etc...).

10. copyhistory=yes or no
Whether or not to copy the old browser window's history list to the new window.

All right, here's an example code for opening a new window:

Test it out below:

Yes, you got a 400 by 200 window with some writing in it!
Some Important Rules
Before we move on, we need to make note of some things so you won't go insane like I did trying to get this to work right!

1. When you get to the INPUT tag, keep everything in that tag on one single line in your text editor, including the javascript commands. (The text goes to the next line on this page so you can print it out easily).
2. Once you come to the onClick=" ", don't leave any spaces between anything. Just use the commas and the quote marks.
3. Don't put quote marks around the yes, no, or numbers for the attributes. You only use single quotes around the entire set of attributes.

4. In some browsers, you may need to substitute the number 1 for yes, and the number zero for no in the attributes section. The yes or no should work fine, though.

A New Browser Window
Okay, enough rules. Let's look at the code that makes a completely new browser! Basically, you just use yes for all of the attributes. Here is the code:

Give it a try, this window has all the features!

Remember, keep everything on one line....one really, really long line! I just put the sample code on new lines so you wouldn't have to scroll forever to read everything........and your printer won't go crazy now either!
Closing a New Window
Hmm.....what's with the "Close Window" button you saw in the new window? How does one do do that? To use that trick, use the window.close() function in the HTML of the new window. Just put this code wherever you want the close button to show up in the new window:

Of course, the window can be closed with the "x" symbol on the top-right of the window as well.
Set the Window Position
There is another set of options you can use to set the position of the new window on the viewers:

1. screenX=number in pixels
Sets the position of the window in pixels from the left of the screen in Netscape 4+.
2. screenY=number in pixels
Sets the position of the window in pixels from the top of the screen in Netscape 4+.
3. left=number in pixels
Sets the position of the window in pixels from the left of the screen in IE 4+.

4. top=number in pixels
Sets the position of the window in pixels from the top of the screen in IE 4+.

Great, but how do you decide which commands to use if there are different ones for each browser? In this case, you can use both sets of commands- the browser will ignore the set it does not recognize. The example below will give you a new window 0 pixels from the left and 100 pixels from the top of your screen:

JavaScript Browser Detection

Detecting your viewer's browser

Browser detection allows you to find out what browser your viewer is using, and then perform a script based on it-- or just to send a friendly message to those with your favorite browser.

There are two objects often used for this, the navigator.appName and navigator.appVersion objects. The first one returns the name of the browser, the second returns the version of the browser.
If the browser is Netscape, navigator.appName returns the string "Netscape". If it is Internet Explorer, it returns the string "Microsoft Internet Explorer". Using just this, you could make a script to alert people as to what browser they are using (just to bug them). Like this:

You can do the same thing with the navigator.appVersion, except you will most likely want to grab just the integer from the version information (2,3,4, etc.). To do this, we use the parseInt() function:

var browserVer=parseInt(navigator.appVersion); 

Now, it returns only the integer value and not something like version 4.51. It just sends back 4 in that case. Thus, we could alert viewers as to whether their browser is new enough for us or not:

you can use both objects to be more exact. You could look for a certain set of browsers and only if they are above a certain version:

JavaScript Password Protection

Adding a password to your page

Password Protected Page
this script in the HEAD section of the page you want to protect. In this case, it was "jex8.htm". Here is the script:

---

---

If you have been through the previous tutorials, most of the code will make sense to you. Let's get to the details of what is going on with this thing:
var password;
This creates a variable named "password".
var pass1="cool";
This creates a password that will be accepted by the script. We name it pass1 in case we would like to have more than one acceptable password. ( ie pass2, pass3 etc. ).
password=prompt('Please enter your password to view this page!',' ');
This is what creates the prompt for the user to enter a password. Whatever the user enters in the prompt will be the value of the variable "password". If you have not seen prompts before, go to the prompts tutorial for more info.
if (password==pass1)
alert('Password Correct! Click OK to enter!');
This is where we verify the password. The variable "password" is what the user just typed into the prompt. The variable "pass1" is the only password we will accept. If they are the same, we send them an alert that the password was OK and they can continue. If you haven't seen if/else statements yet, go to the if/else page. For more on alerts, see the alerts page.
else
{
window.location="http://www.pageresource.com/jscript/jpass.htm";
}
This is what happens when they type in an incorrect password. We send them to a page of our choice. In IE4, it looks like nothing happened, it just reloads this page. In NS3 and 4 you will probably see the protected page for a quarter of a second. I said it wasn't the most secure script out there, so I would recommend the links at the end of the tutorial so you can get a more secure script. I chose to send it back to this page (jpass.htm), but you can type any url here you want. Maybe you could use something like:
window.location="http://www.barbie.com";
Make them cringe a little.......
All that's left after that is to link to the protected page from another page, like my link above to the example. No problem.
Now, if you want more than one acceptable password, you can make a couple of modifications and you will have it.
First, add more variables for the accepted passwords. If you want three good passwords, declare three variables. Since I had one named "pass1" already, I will just use "pass2" and "pass3":

var pass1="cool";

var pass2="awesome";

var pass3="geekazoid";

Next, you will need to change your "if" statement to include the other two passwords. This is done with the || (or) operator:

if (password==pass1 || password==pass2 || password==pass3)

  alert('Password Correct! Click OK to enter!');

This means that if the user typed in the correct value for "pass1" OR "pass2" OR "pass3", the password is correct and they can view the page.
Here is how the full code would look for this:

var password;

var pass1="cool";

var pass2="awesome";

var pass3="geekazoid";

password=prompt('Please enter your password to view this page!',' ');

if (password==pass1 || password==pass2 || password==pass3)

  alert('Password Correct! Click OK to enter!');

else

   {

    window.location="http://www.pageresource.com/jscript/jpass.htm";

    }

Foward and Back Buttons

How to make JavaScript history buttons

Well, you want to make a back button- but you want the button to take the viewer back to the page they just came from, which may not have been one of your pages. This kind of back button would act like the back button on a web browser. Well, if you really want to have one, you can do it with a nifty little javascript. Here it is:

This will place a button on your page that will send the user back to the last page in their history list before yours. To try it out, click the link below and see the button on the new page.
Example Page
And when you clicked the button, you ended up back here. You can try going to the example page from elsewhere......you'll just be sent back there when you click the button....

So, what does all of that code mean? Okay, here's the scoop:

1.

This opens a form so we can use the button on the page.

2.
This creates the button we use for the script.

3. ....onClick="history.back()">
This is what makes everything happen. The onClick=" " tells the browser to do the command in the quotes when the button is clicked. The history.back() is the function that does just what it says: It takes the viewer on step back in their history list.
Is there more? ..I thought you'd never ask......
Okay, you can swap out the history.back() function above with one of the following to do some different things:

1. history.forward()
This will take the viewer one step forward in their history list.

2. history.go(-1) or history.go(1)
This allows you to determine how far forward or back to take the viewer. Use a minus sign and a number to go back, or just a number to go forward.

Introduction to Tabular Data Control (IE)

Introduction to Tabular Data Control (IE)

Tabular Data Control is a Microsoft ActiveX control that comes pre-installed with all versions of IE4+. This useful control allows you to access, display, and even sort ASCII information stored on the server end, such as a .txt file. In other words, it creates a simple "database" function without the need for server side scripting such as PHP and mySQL. A client side language such as JavaScript handles the more sophisticated features of Tabular Data Control. In a nutshell, TDC renders a simple client side database!

As mentioned, the tabular data control is available in IE 4 and upwards. Netscape requires a plug-in for the same function to work.

Implementation:

The ActiveX control is initialized using the

CLSID:333C7BC4-460F-11D0-BC04-0080C7055A86

Thus we initialize this control in a web page as follows :

Any object, like applet, has a number of parameters. Parameters of the object are specified using the tag. The tabular data control has around 8 parameters. Here, I'll discuss only the more important ones :

• DataURL: The path of the file that contains the data. For eg "data.txt".
• UseHeader: Specifies whether the first line of the data file should be used as reference names for their respective fields below. If specified to false, use "Column1", "Column2" etc instead. The default value is false.
• TextQualifier: Specifies the optional character that surrounds a field.
• FieldDelim: Specifies the character that is used to separate each field in the data file. The default character is the comma (,). For eg, consider a data file where we have the fields data: *SomeName*|*SomeAge*|*SomeSex*. Here, the field delimiter used is '|' and '*' is  the text qualifier.
• RowDelim: Specifies the character used to mark the end of each row of data. The default character is the newline (NL) character.

Thus, an example complete initialization will look as follows :

The parameter names are not case sensitive. The TextQualifier parameter is purely optional, though can be useful in helping you more easily distinguish between each data entry.
First, let us consider a simple example where I store my name and age in a text file data1.txt. Here is the file:
data1.txt:

name|age
~Premshree Pillai~|~19~

Now, I will extract this data and display it in a web page as follows : Corresponding HTML page:

The output will display : Premshree 19
Note the attributes within the SPAN tags. DATASRC specifies the data source to use, which is the same as the ID of the object we have initialized (here, 'data1'). The DATAFLD attribute specifies which field of the data we want to display. The data file data1.txt had two fields 'name' and 'age' as you can see. Specifying the DATAFLD as 'name' will display the name.
Now, the above example, while perfectly valid, reveals a potential shortcoming of the technique- as we add and remove data in the text file, we also need to then update the corresponding HTML on the page to accommodate this change (ie: add/remove tags). This process quickly becomes cumbersome depending on the size of our database and how often it changes. Fortunately for these situations there is another way to display the data that is both dynamic and self-correcting.