Java Script Programming

To get started with JavaScript, you will want to be able to see the tag that will set a script apart from the HTML. The tags used to begin and end a script are the tags. The opening tag should appear like this: tag: You can have as many Now, there is still one last thing you should see before we begin writing scripts. Since there are older browsers being used out there, they do not recognize the Well, its time to try out your first javascript. This one is nice because we don't have to deal with adding the script tag. This little script will write something of your choice to the browser's status bar when you move your mouse over a link. Let's look at the example: Place your mouse here! I'll explain all this in a second. Go ahead and see what it does. Place your mouse pointer over the link, but don't click it. Now look down at the status bar at the bottom of your browser. It will say "Hi there!" Place your mouse here! Okay, here's what is happening with the onMouseover command: onMouseover=" " This is the form of the onMouseover command. The browser expects another command or function inside the quote marks. window.status='Hi there!' This command instructs the browser to write to the status bar. You place what you want the browser to write inside the single quote marks. return true Returns the statement as true so the browser will display the text. The reason for the single quote marks is because in this case, the window.status command is used inside the onMouseover command, which was already using double quotes. If we had used another set of double quotes, the browser would have gotton confused about what it should do because it would think the onMouseover command had ended when we began the window.status command: onMouseover=""window..... Well, one thing that could be bugging you is the fact that the "Hi There!" is now in your status bar and won't leave. There are two ways to fix this problem. One way is to use the onMouseout command, and another is to call a function that will erase the text after a specified amount of time. The second way requires using functions and the script tags, so for now I will show you the easiest way to do it: the onMouseout command. Here it is: Place your mouse here! Keep all of the code above on one line, the line breaks above for the ease of reading the code. This will make the text disappear from the status bar when you move your mouse off of the link. Give it a try: Place your mouse here! We did the same thing as before, except inside the onMouseout command we used a space inside the window.status command rather than text. This script is pretty fun, and can be helpful for your visitors if you use your text to describe where a link will take them. To write scripts using buttons, we will first need to know how to place a button on the page. To do this, you will need to use the This will place a button on your page, but if you click on it nothing will happen.... -------------------------------------------------------------------------------- -------------------------------------------------------------------------------- Here is what all this means:

This creates a form so we can use a button. This tag allows us to create an input area of some kind. type="button" This command declares our input area to be a button. value="Click Me" This will be the text people will see on the button. Write whatever you want your visitors to see. name="button1" You can give the button a name for future reference and possibly for use in a script. Now, I know you don't just want to make buttons that don't do anything, so let's look at a javascript command that will make the browser do something when a viewer clicks it: onClick="javascript commands" Just place this command inside the INPUT tag you created the button with, like this: Now, if you read the last section, you saw how to add text to the status bar using the onMouseover command. Well, you can also use a button to do this!

Now click the button below and see the text in the status bar at the bottom: -------------------------------------------------------------------------------- -------------------------------------------------------------------------------- You can also allow your viewers to change the background color of your page. Just use the following command, rather than the window.status command: document.bgColor='color' Just insert this as your instructions for the onClick command, like this: Now you get the button below. Click on it to see this page with a yellow background! -------------------------------------------------------------------------------- -------------------------------------------------------------------------------- You can add as many of these buttons as you like, just be sure they have the option to change back to the original color. The next script will give you three choices: yellow, red, and original color. Now you will have these buttons. Give them a try! -------------------------------------------------------------------------------- -------------------------------------------------------------------------------- The last script we will do in this section will allow you to use your button as a link. It's pretty fun to use every now and then. Just use the following command in your onClick command: window.location='url' Here is a script that will send you to a page I made just for this example: Here is the button. Give it a try, and see the other page. -------------------------------------------------------------------------------- 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:

This opens a form so we can use the button on the page. 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: history.forward() This will take the viewer one step forward in their history list. 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. Try really confusing somebody by using -7 or 12 or something. I sure would wonder what happened if I ended up seven pages back from where I was! Well, you want to add one of those JavaScript alert boxes that come out of nowhere, don't you? Okay, let's begin with the alert box that just tells the viewer something you want them to know. Here's the alert command: alert('your choice of text') Now, to use it, we'll need to place it inside another command. Let's use one we are familiar with, the onMouseover command. The following script will alert the user that you did not want them trying to click this particular link when they move their mouse over it. Don't click this link! Give it a try. Move your mouse over the link below: Don't click this link! Yes! Now you can drive your friends insane with a bunch of fake links! Here's what all the commands are doing: onMouseover=" " This tells the browser to execute the command or function inside the double quote marks when the user moves their mouse over the link. alert('Hey! I said not to try clicking this link!') Instructs the browser to display the text inside the single quotes in an alert window. That was nice, but could you make something a little more annoying? Of course! It's called the "alert as soon as you open the page!" alert. Just think, you could tell people stuff before they ever see anything on the page! The trick: placing the alert command inside the tags! You will now get to use the old SCRIPT tags I mentioned a couple of sections ago to set off the JavaScript from the other stuff. Here is the code: Cool JavaScripts This will display the alert before the page starts loading. When you hit "OK" the page will go on and load normally. Here's the breakdown: Ends the JavaScript commands. Do you want to try it out? Click on the link to see the alert before the new page. Example 1 So, do you want to get carried away? Place several of these alerts inside the SCRIPT tag, following each with a semicolon. The viewer will have to say "OK" to every alert before the page will begin loading. Try it out yourself and see if you go insane. Click the link below! Example 2 Want the code that did this? Here you go! JavaScript Example 2 So, how about that? Pretty wild, isn't it? You can also use the alert with a button, so that it is not such a surprise. Place the code where you want the button to be on your page. You won't need the SCRIPT tag for this one.

Give it a try. You'll be glad you did....I think..... Now it's time to get into some really fun stuff. Yes, variables and functions. Don't worry, it's not as bad as it sounds.....let's start with declaring variables. You'll want to keep all of your variables in the HEAD section for now. Place the declarations between the SCRIPT tags inside the head section of your document. To declare a variable in JavaScript, you will write something like this: Here is what these commands mean: var This indicates you are about to declare a variable. name This is the name you give the variable. Give it any name you like (other than a JavaScript reserved word such as "function" or "onMouseover".). value This is the initial value you want the variable to have. It can be a number, words, true, false, or null. Using Numbers You can assign a number value to a variable by placing the desired number after the = sign: var cars=3; You can also use a number with a decimal. JavaScript isn't too picky about whether the value is an integer or decimal. Just type it in. var cost=9.95; Using Strings A string is just a group of characters, such as a sentence or a word. To define a string, you will need to place single or double quote marks around the value, like this: var movie="The Lost World"; Also, if you place numbers inside the quotes, they are treated as a string rather than a numerical value. Boolean Values This one is nice. Assign the variable a value of true or false. No quotes needed. Here's an example: var story=true; The null Value If you declare something as null, it means nothing. Not even zero, just plain nothing. Here's the format: var mymoney=null; Well, nothingness isn't so great in this case, but it can be useful when you use prompts to get information from viewers, and they type in......nothing! Case Sensitivity Unlike alot of things in HTML, JavaScripts are case sensitive. So a variable named "john" is not the same as "John" or "JOHN". The same goes for commands and functions and so on. Just remember your case when you use JavaScripts, or you may get error city instead of nifty effects.... Semicolons Don't forget those semicolons! They are used to separate JavaScript commands and declarations, and can also cause error city if they are left off. I did this a few times, and it makes for some pretty wild stuff when you try to load the page! Functions! Well, functions are used to make things more organized and readable. A function is a set of JavaScript statements put together for a single purpose. You will want to keep your functions inside the SCRIPT tags inside the HEAD section. Here is the format for a function declaration: function Indicates that you are going to create a function. name This is the name you give the function. As before, name it whatever you like. (parameter1, parameter2) The parameters are variables that are sent to the function when it is called. You can have none, one parameter, two parameters, three parameters, and so on. { This symbol lets you begin adding JavaScript statements and declarations. } This indicates the end of the statements, and the end of the function. To make use of the function, you will make a call to the function when you want to use it. You call a function by using the name, any parameters you want to send, and a semicolon, like this: function dosomething (mymoney, cost); So, how does one use this stuff? Well, I'll show you another way to write the "text in the status bar" script using variables and functions. Here's the trusty old link again. Move your mouse over it, and you'll see text in the status bar. Move the mouse away, and the status bar clears. Place your mouse here! Now, here's the code that generated the link. See if you can work your way through it. I'll explain it at the end of the script. Place your mouse here! What the...? Yes, in this case the script is much longer and takes some time to work through. Here's what the script is doing: In the HEAD Section var text=" "; This declares a variable named text, and gives it a string value of empty space. function overlink(text) This declares a function named overlink. The function requires the variable text to be sent to it in order to work properly. { Begins the JavaScript Statements for the function overtext. window.status=text; This places the value of the variable text in the status bar. The value of text was sent to the function when it was called inside the link tag, which is the string "Functions Rule!". See the explaination of the link tag for more. } Ends the statements in the function overlink. function offlink (text) This declares a function named offlink. The function requires the variable text to be sent to it in order to work properly. window.status=text; This places the value of the variable text in the status bar. The value of text was sent to the function when it was called inside the link tag, which is the string " ". See the explaination of the link tag for more. In the BODY Section Place your mouse here! This tag calls both of the functions and passes on a string which is assigned to the variable named text. The first function, overlink, is called inside the onMouseover command. This means that when the user places their mouse over the link, the satements inside the function overlink will be executed. As you can see, overlink is called with a string variable inside the ( ) symbols. Notice we use single quotes to define this string, since double quotes are used in the onMouseover command. The string value we place here is what is sent to the function overlink, and thus is what ends up in the status bar. So, "Functions Rule!" is what shows up in the status bar when the mouse moves over the link. The onMouseout command calls the function named offlink when the mouse moves away from the link. This time, we assigned the variable text a value of blank space. The blank space is sent to the function, and is written to the status bar, erasing the "Functions Rule!" string before it. The return true phrases are there to make sure the script works by returning true. Well, if you made it through all of that, you are ready to move on. If you still don't quite have a handle on it yet, try writing out the script on your computer, or even by hand. Sometimes it helps you work your way through the messy stuff. Yes, this section is for learning a bunch of operators plus the if/else statement. The first thing we'll do is go through some of the mathematical operators. Here they are: + addition - subtraction * multiplication / division % modulus (this is the remainder when you divide something) Now, let's take a look at comparison operators: > Greater Than < Less Than >= Greater Than or equal to <= Less Than or equal to == Equal to (remember, the "=" sign assigns a value to a variable, the "==" compares two values for equality.) != Not equal to And now, the logical operators: && AND || OR ! NOT So, what good does this do you? Well, it'll come in handy for later scripts, as well as for the next thing we'll look at: The if/else statement. if (conditional statement) { JavaScript statements... } else { JavaScript Statements..... } This statement is useful if you want to check for a variable value or a number of values. If the statement in side the ( ) symbols is true, the commands that follow the if command inside the { } symbols will be executed. Otherwise, the commands after the else statement are executed. Here is an example: var number=3; var mymoney=0; if (number > 2) { mymoney=100; } else { mymoney= -100; } This set of code decides the fate of the variable mymoney, based on the value of the variable number. If number is greater than 2, then the value of mymoney will be changed to 100. If number is not greater than 2, the mymoney is -100, and I'm in some trouble with my bank. Now, suppose you wanted to perform a set of commands a number of times, and end when you have what you need. To do this, you can use a for loop or a while loop to repeat things. First, the for loop: for ( condition1; condition2; command) { JavaScript Statements.... } OK, what this does is begin the loop with condition 1, end the loop with condition 2, and perform the command each time through. So, if you want to change a variable value 10 times, you would do something like this: var count=1; var mymoney=0; for (count=1; count<11; count=count+1) { mymoney=mymoney+100; } The loop begins with count=1. Then the statement mymoney=mymoney+100 is executed the first time. Then the command count=count+1 is executed, making count equal to 2. Once that is done, the value of count is checked to be sure it is less than 11 (condition 2). Since count is 2, which is less than 11, the loop statement is executed again, and count goes up to 3. This goes on and on until count is equal to 11, thus not being less than 11. The loop will end before going through another time. What did I get out of this? Well, mymoney went from 0 to 1,000 really quickly! Now for the while loop. It does pretty much the same thing as the for loop, but is written out differently: var count=1; var mymoney=0; while (count<11) { mymoney=mymoney+100; count=count+1; } This example does the same thing as my last one. The only thing that is checked is whether count is less than 11 or not. If it is, the statements are executed. If not, the loop ends. Remember to add one to count within the statement section here, or you'll get the ever popular "infinite loop". Well, let's say you wanted to get somebody's name before they saw the page, and then write their name on your page right before their very eyes.......Well, you can do this using a javascript prompt. Here's the command: prompt('Your Question', ' '); This will bring up a window asking the question of your choosing, with a space for the viewer to answer. The second set of quotes allows you to enter a default answer. If you leave it blank, the viewer will just see an empty box ready to be typed in. This is usually done before the page loads, so that you can write the answer they give into your page. To view an example, click the link below. You will get a prompt for your name, and your name will be written on the page! Example 3 Now, for the script that made this work. Note how the prompt and if/else statements are in the HEAD section, while the actual writing of the name occurs in the BODY section. The first thing that happens is that the variable yourname is assigned the value it receives from the user from the prompt. So the variable yourname will be a string of characters that makes up the person's name. The if/else statement assigns yourname a value of "Dude" if nothing is entered in the prompt by the user. It checks for " " and for null, and both are pretty much nothing. Now, in the BODY section, you again use the SCRIPT tags to set off the JavaScript from any HTML around it. You will also see a new command called document.write(" "); . This is what allows the JavaScript variable yourname to be written onto the HTML document. You are writing two strings plus your variable, yourname. The variable yourname is not in quotes because it is a value and not itself a string (it's value is a string). That's why we have the plus signs around it....It makes the browser write the first string plus the variable plus the second string. Now, notice the HTML tags are inside the strings! Since this is a javascript, the only way to write the HTML tags back to the page is by including them inside the quotes as part of the string. Also, you probably noticed the way the closing tags were written differently. (<\/H1>). The backslash is there as the javascript escape character. It allows you to write the forward slash without it being mistaken for a division sign! (Remeber / is division in JavaScript). Thus using the backslash followed by a forward slash ultimately gives us.......our single forward slash. Pretty nifty trick, isn't it? OK, I finally got around to writing the javascript password protection tutorial. You will see the example script here is pretty straightforward, but it is also pretty easy to get around. I'll tell you why and give you links to more secure scripts later in this tutorial. Warning: These scripts are not totally secure and your page can be seen if someone gets through. Do NOT protect anything important with a script like this. Try looking for a CGI Script or ask your web host to set up an .htpassword file if you need to protect something important. Below is a link that will show you an example of what we are about to create. Click the link. When you are prompted for a password, enter: cool Example Password Protected Page OK, if you typed "cool" into the prompt, you were allowed to continue loading the example page. If you typed anything else or nothing at all, you were taken right back to this page. That is pretty cool. Now let's see the script that makes this work. You would place 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"; } If you want to see this in action, click the link for this example below. Enter one of the three correct passwords (cool, awesome, or geekazoid) and you will see the next page! In the last section, I introduced javascript password protection, but the script had a slight problem: Netscape browsers would show the protected page momentarily even if the password was incorrect. In this section, I will show you the same script, but the difference is that it will use an intermediate page so that the protected page is not displayed. Warning: These scripts are not totally secure and your page can be seen if someone gets through. Do NOT protect anything important with a script like this. Try looking for a CGI Script or ask your web host to set up an .htpassword file if you need to protect something important. Now that I have said that so boldly, let's take a look at how this version of the script works. Try out the example below: Click to Enter A little better, I suppose. Let's take a look at the code you will need: 1) You will need to place a link to the intermediate page on one of your pages. In my example, the intermediate page is "jex10.htm". I put the link on this page, "jpass2.htm". Example below: "jpass2.htm" -------------------------------------------------------------------------------- Click to Enter -------------------------------------------------------------------------------- 2) Now you need to create your intermediate page. In my case, this is "jex10.htm". You will need the following script on this page: "jex10.htm" -------------------------------------------------------------------------------- Intermediate Page

Hosted by www.Geocities.ws

-------------------------------------------------------------------------------- This intermediate page is what does all the work. As you can see, if the password is correct, it takes the user to the protected page. In the example, the protected page was "jex11.htm". You can replace that with the url of the page you wish to protect. If the password is incorrect, the user gets sent back to the page that contains your link to the intermediate page. In my case, that is the very page you are looking at, "jpass2.htm". Well, give it a try and see if it works better for you. Have fun! So, why is it easy to hack the script? One way is for the viewer to disable javascript. Not only will they get to the page this way, they can also view the source code to see the password and use it later. Thus, if you are protecting something important, you should use something more secure. A javascript confirmation box can be a handy way to give your visitors a choice of whether or not an action is performed. A confirmation box will pop up much like an alert box, but will allow the viewer to press an "OK" or "Cancel" button. Here is the basic command for creating a confirmation box: confirm("Text or question you want to use"); The trouble is, if you use just that it isn't very useful. The confirmation box will return a value of true or false, so this is what we must use to make use of the confirmation box. An easy way to get the value for later use is to assign it to a variable, like this: var where_to= confirm("Do you really want to go to this page??"); Now, you can use the where_to variable to send the user to one page or another, depending on the value the confirmation box returned. You can do this with an if/else block: if (where_to== true) { window.location="http://yourplace.com/yourpage.htm"; } else { window.location="http://www.barbie.com"; } In this case, if the viewer hits the "OK" button, the browser will go to your special page. If the viewer hits the cancel button, the browser takes the viewer on a fun trip to the Barbie web site! To make use of it though, you'll probably want to write a JavaScript function in your head section that you can call in the body of the page. You could place the items above into a function like this, to go inside your head tags: Now, you need to find a way to call the function inside the body of your document so that you can offer the viewer access to the special page. You can use a button to call the function when it is clicked, so you would place something like this in the body section: To go to my special page, click the button below:
This would work like the example button below, give it a try! To go to my special page, click the button below: As you can see, this may come in handy for something you want to code down the line. Of course, I can't confirm that... 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: Of course, 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: As you can see, that uses a lot of the logical operators from a previous section. It is basically saying that "if the browser name is Netscape and it is version 3 or greater, OR if the browser name is Microsoft Internet Explorer and the version is 4 or greater, then we will assign the variable version as 'n3'. Otherwise, it is going to be 'n2.' Then we move on to the rest." One of the more common uses for browser detection is to redirect a viewer to a page made for his/her browser type or browser version. We will discuss that in the next section on redirection. Note: Be careful using this if the page you use it on is listed in a search engine. Many of them find redirection to be a way of attempting to spam their index, and may remove the site from the listings. If you are unsure, don't try this-- or contact the search engine for their rules. Redirection is often used to take viewers to a page depending on their browser's name or version. To redirect a viewer instantly, you just need to add a short command in your head section: This would take the viewer right to the url you used as soon as they start loading the page. Sometimes this is done if a site has moved to another location. Another use for it is to detect a browser type and redirect your viewers to one page for Netscape, another of Internet Explorer, or a third for other browsers: This uses the browser detection method from the previous section. Rather than popping up an alert box, we redirect the viewer to a page that best suits the browser being used. If you want to have one page for version 4 browsers and another for others, we can take another script from the previous section and change it in the same way: Not too bad, the only trouble is the need to create so many pages! You can also use this to help people who come into your site, but come in on a page that should be within a frameset that you use for navigation. Using the top.frames.length object, you can find out if the page is in a frame or not. If the value is zero, the page is not in a frame. If it is greater than zero, the page is inside a frame. So, you could take the viewer back to your main frameset page using a script like this: This will alert the viewer and take them to the main page after 10 seconds. You can change the number in the setTimeout function to adjust the time if you like. You can also use it to break a viewer out of someone else's frames if they followed a link that didn't have the target set correctly. It uses the same idea in reverse: As you can see, redirection can be a handy tool at times. Just use it with caution if you are worried about the search engines. 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: 'url to open' This is the web address of the page you wish to appear in the new window. 'window name' You can name your window whatever you like, in case you need to make a reference to the window later. '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: width=300 Use this to define the width of the new window. height=200 Use this to define the height of the new window. resizable=yes or no Use this to control whether or not you want the user to be able to resize the window. scrollbars=yes or no This lets you decide whether or not to have scrollbars on the window. 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.). location=yes or no Whether or not you wish to show the location box with the current url (The place to type http://address). directories=yes or no Whether or not the window should show the extra buttons. (what's cool, personal buttons, etc...). status=yes or no Whether or not to show the window status bar at the bottom of the window. menubar=yes or no Whether or not to show the menus at the top of the window (File, Edit, etc...). 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! 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). Once you come to the onClick=" ", don't leave any spaces between anything. Just use the commas and the quote marks. Any white space will keep it from working correctly in Netscape. 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. 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, but it only works with NS4+ and IE4+: screenX=number in pixels Sets the position of the window in pixels from the left of the screen in Netscape 4+. screenY=number in pixels Sets the position of the window in pixels from the top of the screen in Netscape 4+. left=number in pixels Sets the position of the window in pixels from the left of the screen in IE 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: Now, that is a lot of work- but you can now customize a new window for your viewers! I get this question so much, I figured I'd better get in gear and write another section to address using the link tag for javascripts (such as new windows), rather than using the old grey button. Well, there are a couple of ways to do this. I'll start with the easier to understand version first. The first method is to access a javascript function within the HREF attribute of your link tag. So, if you want to link to another page, you normally write: Click here Well, you can access a javascript function you have written instead by writing the link this way: Click Here Yes, now you can open that new window without using the grey button. Here is a script to give you the new window: First, I found that this works much better if you create your own function in the head section first. All this function needs to do is open your new window. So, in your head section, create a function like this: The above script will open my "jex5.htm" page in a new window. As you know, replace this with url of the page you wish to open, and adjust the other attributes to your liking. If you need to know more about the window.open function, see the Opening a New Window tutorial and learn that first.....then come back and get going with the rest of this section. Now go into your body section to wherever you want the link to appear, and write your link tag this way: Click Here! Now you will get a link like the one below. Give it a try and see the new window appear when you click the link! Click Here! For those of you who want to use an image for the link, just do the normal "image inside the link tag" trick, but with the link tag modified for javascript like above:

Now you can click on the image below for a new window! The second way to do this is a little more difficult, but some people may be more comfortable with it. The trick is to go ahead and use the onClick=" " attribute in your link tag. The trick here is to keep the browser from following the actual link after running your script. Here is a sample of using the onClick attribute in the link tag: Click Here! I used the same script we had written in the head section for the first method, but I used it inside the onClick=" " command. Also notice the semicolon after the function call, and the "return false" at the end of the command. The return false part keeps the browser from going to "newpage.htm" after opening your new window. You could put any page here you want, and the link will no longer take you there (except in some older browsers). So you don't really have to put an actual url in the HREF attribute here unless you wish to offer an alternative for those with older browsers that don't recognize the onClick=" " command. As in the above example, you can also use an image inside your link tag to make a clickable image. Below is an example link where I used this second method: Good work! You have finished the basic javascript tutorial section. If you went through the HTML tutorials here, you got a similar page when you finshed the HTML basics. Yes, that page also had a gold background. So, once you have readjusted your eyes, you can go back to the JS main page or move on to the intermediate/advanced JS tutorials. Now, doesn't that sound like fun??

Hosted by www.Geocities.ws