Amazing HTML Image Map

Java Script Tutorial

Java Script is one of the most useful web languages, like CGI it allows the user to interact with the page more and for the page to do more. Java Script works in a normal HTML page and does not require much modification to work. This tutorial will mainly focus on how to use existing java scripts, but a little of it will talk about making your own script. Remember to check out our script center.


First off, you will need to know about the versions of Java Script and which ones work with each browser.
  • <script language="JavaScript">


  • <script>
  • <script language="JavaScript1.1">
  • <script language="JavaScript1.2">
  • <script language="VBScript">

  • <script language="VBS">

  • <script language="JScript">
  • Netscape 2.0x - 4.0x
    Internet Explorer 30x
    Aol v3 - 4 for win95
  • Any Netscape or IE browser
  • Netscape 3.0x - 4.0x
  • Netscape 4.0x
  • Internet Explorer 3.0x - 4.0x
    AOL v3 - 4 for win95
  • Internet Explorer 3.0x - 4.0x
    AOL v3 - 4 for win95
  • Internet Explorer 3.0x - 4.0x
    AOL v3 - 4 for win95

If you need a complete browser check, our script section.


Javascript runs similar to c++, in that it uses varriables teh same way, uses if loops, else if and while loops. However, javascript does not required you to use any header or include tag (like <studio.h>). Some other common commands are write or print which writes something to the page. There is also var=? which calls a varriable. new window, window, document, parent and so forth are properties and commands for scripts.


The first script that we will explain is pop up windows, which are very common on sites. Especially sites made in geocities, tripod or other free space providers.

<SCRIPT LANGUAGE="JavaScript">
<!--
window.open("http://www.yourwebsite.com/yourpop up.html", "w3adJIIAIIYJ", "width=515,height=125,statusbar=yes,toolbar=2,scrolling=auto,navbar=yes");
//-->
</SCRIPT>

In this script, http://www.yourwebsite.com/yourpop up.html is the location of the pop up window, it is followed by several variables. Width and height define how big the window is. statusbar=yes/no/1 makes a status bar where the url is displayed. Toolbar=yes/no is the back, reload and stop bar. Scrolling=auto/no/yes turns scrolling on or off. There are many other variables that can be added, simply try something and see if it works.
Another commonly used script is Get Rid of Frames automatically. This script makes your site automatically remove it's self from any frames it may be in, and it works much better then the meta tag version!

<script language=javascript>
<!--//
var wind,doc;
wind = parent.location;
doc = document.location;
if (wind != doc) {
parent.location.href= doc;
}
//-->
<script>

For this script, simply place this in every page that should not ever be in frames, add it in between then <HEAD> and </HEAD> tags and your done!
The next script we will talk about allows you to change the content of two frames with just one click! Unlike the first two java scripts we showed you, this one has many more commands so read the directions carefully.

To the frameset add this code (normally index.html):
<frameset>
<frame src="..." name="something">
<frame src="..." name="something else">
</frameset>

To the page add this code at the top of the page where the dual link will be:
<script language="JavaScript">
<!--// hide from non-javascript browsers
function change2(url1,url2) {
parent.frame1name.location.href= url1;
parent.frame2name.location.href= url2;
}
//-->
</script>

Where you want the link to be, add this code:
<a href="javascript:change2('frame1.html','frame2.html')">link</a>

This script requires very few variables to be changed, just for the framenames to be added and for the urls for the links to be changed. That's all there is to it, enjoy!


Another script that people often look for is one that will write a text file or a particular java script to a web page. We have made one, and one that allows you to edit the text file very simply, with a single upload. Here it is.

In your filename.html put your code <script src="myscript.js"> </script> Then make a file named myscript.js (make sure u have the .js otherwise it wont work) In this file, put the rest of the script like you would normally do. For instance a script that writes to web page would be this:

<!-- hide script from old browsers
document.write("Hello and other text here")
// end hiding script from old browsers -->



This part of the tutorial is about common variables and coding in java script. This will not teach you how to completely make your own java script, just how to edit them.

If - this statement is used to open an idea, if this is true or false, do this.
= is equals, != equals not, as plain as that.
{ is open function, } is close function
//comments here an more there
<!---// starts the script, //---> closes it.
function() starts a function.

This part of the tutorial is about common variables and coding in java script. This will not teach you how to completely make your own java script, just how to edit them.

If - this statement is used to open an idea, if this is true or false, do this.
= is equals, != equals not, as plain as that.
{ is open function, } is close function
//comments here an more there
<!---// starts the script, //---> closes it.
function() starts a function.

There are many more commands, but they mainly deal with individual parts of scripts and types of scripts. Try looking through more of our sample scripts to see how they work.


Mouse Over commands are very commonly used and very important for many people. We have included a few of them for your use along with an explanation of how to use them.

  • onMouseOver="window.status='whatever';return true;" this tag goes in a link and creates a message in the status bar when ever the user put their mouse over the link.
  • <a href="about.html" OnMouseOver="newImg('aboutOver',1); return true" onmouseout="newImg('aboutUp',1); return true"> This code makes the ever so popular mouse over image effect. This serves to let you have images change to give different effects when the mouse passes over them.
  • document.form.name.value="something" This function simply assigns values to forms


This last script loads pages based on a user's resolution. This is very important because different resolutions change how the page is viewed and how it looks. This script is VERY easy to setup, simply put it on it's own page and change the variables!.

<script language="JavaScript">
<!--// hide bad old browsers
var s640x480page = "http://www.yoursite.com/index1.html";
var s800x600page = "http://www.yoursite.com/index2.html";
var s1024x768page = "http://www.yoursite.com/index3.html";
var pagetype;
if ((screen.height == 480) && (screen.width == 640)) {
pagetype = 1; }
else if ((screen.height == 600) && (screen.width == 800)) {
pagetype = 2; }
else if ((screen.height == 768) && (screen.width == 1024)) {
pagetype = 3; }
else {
pagetype = 1; }
if (pagetype == 1) { window.location.href = s640x480page }
else if (pagetype == 2) { window.location.href = s800x600page }
else if (pagetype == 3) { window.location.href = s1024x768page }
//-->
</script>


For this script, simply change the variables for the url to load. index1.html beging for 640x480 resolution, index2.html for 800x600 and index3.html for 1024x768. That's all the scripts on this page. Remember to check out our code center for java script downloads and more!



Back to Main

THINK QUEST