JavaScript-Intro by Voodoo I have mentioned it before but I think it is important to repeat it. JAVA IS NOT JAVASCRIPT! There are many differences. Many postings about Java in the newsgroup comp.lang.javascript prove that there is a lack of information. The other way round questions about JavaScript shall be posted to comp.lang.javascript NOT to comp.lang.java. The techniques used in Java and JavaScript differ so much because Java is a programming language and JavaScript is a scripting language. This languages are two different languages with different purposes. I must admit that the two almost similar names may seem to be the same. But this is not so! Please take this into consideration when you ask somebody about Java or JavaScript. ---------- JavaScript-Intro by Voodoo INTRODUCTION TO JAVASCRIPT c 1996 by Stefan Koch - All rights reserved. This page without tables and pics... -=- [TABLE] -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=- -=- [TABLE] -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=- -=- [TABLE] -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=- Part 1: What is JavaScript? Running JavaScript scripts Embedding scripts into HTML A first function Form elements Last changed - date -=- [TABLE] -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=- -=- [TABLE] -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=- Part 4: The statusbar The setTimeout function Programming a scroller -=- [TABLE] -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=- -=- [TABLE] -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=- -=- [TABLE] -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=- -=- [TABLE] -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=- Part 2: Information in the statusbar Date object Creating random numbers Working with windows -=- [TABLE] -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=- -=- [TABLE] -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=- PART 5: Arrays How to clear a document Back and Forward- buttons -=- [TABLE] -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=- -=- [TABLE] -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=- PART 7: Validating forms Submitting form input How to set the focus to a certain element -=- [TABLE] -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=- -=- [TABLE] -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=- -=- [TABLE] -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=- -=- [TABLE] -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=- Part 3: Working with frames -=- [TABLE] -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=- -=- [TABLE] -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=- PART 6: Load two frames with one click Opening a new window when a link is taken Operators -=- [TABLE] -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=- -=- [TABLE] -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=- -=- [TABLE] -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=- You found this page at http://rummelplatz.uni-mannheim.de/ ~skoch/js/script.htm Stefan's Home - e-Mail ---------- JavaScript-Intro by Voodoo This page with tables... This is an introduction to JavaScript. You will learn the basic elements needed for embedding JavaScript scripts into HTML- pages. I have written some easy to understand examples, from which you can learn. Introduction to JavaScript - Part 1: What is JavaScript? Running JavaScript scripts Embedding scripts into HTML A first function Form elements Last changed - date Introduction to JavaScript - Part 2: Information in the statusbar Date object Creating random numbers Working with windows Introduction to JavaScript - Part 3: Working with frames Introduction to JavaScript - Part 4: The statusbar The setTimeout function Programming a scroller Introduction to JavaScript - Part 5: Arrays How to clear a document Back and Forward- buttons Introduction to JavaScript - Part 6: Load two frames with one click Opening a new window when a link is taken Operators Introduction to JavaScript - Part 7: Validating forms Submitting form input How to set the focus to a certain element Play a little JavaScript- game Get a copy of this page so you can read it offline (62.1kB) (Last update: 9.April'96) About changes to JavaScript Java is not the same as JavaScript! Mirror- Sites: My german homepage My site at Webconn Australia - Vince Mankelow Austria- Franz Knipp Italy Sweden - Mikael Nicolaidis New Zealand If you want to read this document in other languages: Chinese - translated by Been-Chian Chien Chinese - translated by Shii-Tyng Duann Czech - translated by Pavel JANIK ml. German - translated by Veikko Wuensche Links to other JavaScript ressources: Many links to other JavaScript pages Read the JavaScript- FAQ (Frequently Asked Questions) Netscape - Home Download Netscape Navigator 2.0 You are visitor number to this page. Stefan's Home - e-Mail ---------- Introduction to JavaScript - Part1 Introduction to JavaScript Part 1 What is JavaScript? JavaScript is a new scripting language for Web- pages. Scripts written with JavaScript can be embedded into your HTML- pages. With JavaScript you have very many possibilities for enhancing your HTML- page with interesting elements. For example you are able to respond to user- initiated events quite easily. Some effects that are now possible with JavaScript were some time ago only possible with CGI. So you can create really sophisitcated pages with the help of JavaScript. You can see many examples for JavaScript scripts on the Internet. Best you have a look at some JavaScript enhanced pages. You can find many links at Gamelan (in the JavaScript section). You will find the documentation provided by Netscape at http:/ /home.netscape.com. What is the difference between Java and JavaScript? Although the names are almost the same Java is not the same as JavaScript! These are two different techniques for Internet programming. Java is a programming language. JavaScript is a scripting language (as the name implies). The difference is that you can create real programs with Java. But often you just want to make a nice effect without having to bother about real programming. So JavaScript is meant to be easy to understand and easy to use. JavaScript authors should not have to care too much about programming. You could say that JavaSript is rather an extension to HTML than a separate computer language. Of course this is not the 'official' definition but I think this makes it easier to understand the difference between Java and JavaScript. You can find further information about both Java and JavaScript at Gamelan. For further information about this topic please read the introduction provided by Netscape. How can JavaScript scripts be run? The first browser to support JavaScript was the Netscape Navigator 2.0. Of course the higher versions do have JavaScript as well. You might know that Java does not run on all Netscape Navigator 2.0 (or higher) versions. But this is not true for JavaScript - although there are some problems with the different versions. The Mac- version for example seems to have many bugs. In the near future there are going to be some other browsers which support JavaScript. The Microsoft Internet Explorer 3.0 is going to support JavaScript. JavaScript- enabled browsers are going to be wide spread soon - so it is worth learning this new technique now. You might realize that is really easy to write JavaScript scripts. All you have to know is some basic techniques and some work- arounds for problems you might encounter. Of course you need a basic understanding of HTML before reading this tutorial. You can find many really good online ressources about HTML. Best you make an online search about 'html' at Yahoo if you want to get informed about HTML. (These online- documents are often more up-to-date than books. The Internet is moving quite fast these days...) Now I want to show some small scripts so you can learn how they are implemented into HTML- documents and to show which possibilities you have with the new scripting language. I will begin with a very small script which will only print a text into an HTML- document. -=- [PREFORMATTED] =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=- My first JavaScript!
This is a normal HTML document.

Back in HTML again. -=- [PREFORMATTED] =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=- If you are using a JavaScript - enabled browser at the moment then you will have the possibility to see this script working. If your browser doesn't support JavaScript then this output might be some kind of strange... This is a normal HTML document. Back in HTML again. I must admit that this script is not very useful. You could write that in HTML much faster and shorter. But what I wanted to show is how you have to use the
-=- [PREFORMATTED] =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=- If you want to test this one immediately and you are using a JavaScript- enabled browser then please go ahead and push the button. === [FORM] ================================================================ This script will create a button and when you press it a window will pop up saying 'Hello!'. Isn't that great? So, what is going on on this script? At first the function is loaded and kept in memory. Then a button is created with the normal < form> tag (HTML). There is something quite new with the < input> tag. There you can see 'onclick'. This tells the browser which function it has to call when this button is pressed (of course, only if the browser supports JavaScript). The function 'pushbutton()' is declared in the header. When the button is pressed this function is executed. There is another new thing in this script- the 'alert' method. This method is already declared in JavaScript - so you only have to call it. There are many different methods which you can call. I will show you some here. You can find a complete description at the Netscape- Site. I think that this list is getting a lot longer in the near future. But right at the moment there are already some cool things we can do with the given methods. (I don't think the alert- Method is thought to be used in this way - but we're only learning. And this way it is quite easy to understand. I hope you will excuse me...) We got quite far by now. In fact we have a lot of possibilities just by adding functions to our scripts. Now I will show you how you can read something a user has inserted into a form. -=- [PREFORMATTED] =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=- Please enter your name:
-=- [PREFORMATTED] =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=- Now you can test this script again: Please enter your name: === [FORM] ================================================================ We have some new elements implemented in this script again. At first you have certainly noticed the comment in the script. This way you can hide the script from old browser- which cannot run scripts. You have to keep to the shown order! The beginning of the comment must be just after the first tag. In this HTML- document you have got a form element where a user can enter his name. The 'onBlur' in the tag tells the client which function it has to call when something is entered into the form. The function 'getname(str)' will be called when you 'leave' this form element or press enter after entering something. The function will get the string you entered through the command 'getname(this.value)'. 'This.value' means the value you entered into this form element. Ithink the next thing is quite nice as well. We're going to implement a date function into our script. So if you creat a HTML- page you can make the client print the last change of the document. You do not have to write the date to the document though. You simply write a small script program. When you make some changes in the future, the date changes automatically. -=- [PREFORMATTED] =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=- This is a simple HTML- page.
Last changes: -=- [PREFORMATTED] =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=- At the moment this property seems not to function on every machine. Some servers show only the date 1/1/1970. There seem to be some problems with this function. We have to wait for the next update and hope that it works then properly on every machine. But you have to test this on your own machine - on some it seems to work fine. As I already said things are moving really fast today. So it would not be amazing if next week there was a major change to JavaScript! So you always have to watch out for further changes as this language is quite young. Please understand that some things told here might change as well. But I think that the basic principles are going to stay the same. Index - Part 2 - Part 3 - Part 4 - Part 5 - Part 6 - Part 7 Last changed: 11.May'96 © 1996 by Stefan Koch ---------- Introduction to JavaScript - Part2 Yo! "); msg.document.write(" THIS IS REALLY COOL! "); } function stat(txt) { window.status = txt; setTimeout("erase()",1500); } function erase() { window.status=""; } // --> Introduction to JavaScript Part 2 The onMouseOver- property You can see the next feature of JavaScript by moving your mouse pointer over this link. Just look at the statusbar at the bottom of this browser. You can combine this with other JavaScript functions as well. If you move over this link a window will pop up. Now I will show you the source of these two effects: -=- [PREFORMATTED] =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=- -=- [PREFORMATTED] =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=- The only thing you have to do is to add the onMouseOver- property to your - tag. The 'window.status' will allow you to write things to the statusbar of your web-browser. As you can see you have to alter with the quotes. You cannot use " all the time, because otherwise JavaScript is not able to identify the string you want to print to the statusbar. After the string you have to write ;return true. The second example uses JavaScript by calling the alert- function. Here is the code: -=- [PREFORMATTED] =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=- link -=- [PREFORMATTED] =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=- This is quite easy. It uses the onMouseOver- method and the function hello() is called when this event occurs. More date- functions Now I want to show another example to you using the time and date methods. You already saw the lastModified property working. Now we are going to print the local time to our document. This method uses the time and date of your machine- so if you got the machine- date set to 5/17/1983 you will get the wrong date by this method as well. So this is not a time and date kept by the Internet (or something like that). The date is: ", today.getMonth()+1,"/",today.getDate(),"/", today.getYear()); // end hiding contents --> Here is the code: -=- [PREFORMATTED] =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=- -=- [PREFORMATTED] =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=- At first we are creating a date variable. This is done by today=new Date(). If we do not specify a certain time and date the browser uses the local time and puts it into the variable today. Notice that we do not have to declare the variable today anywhere. This is a difference to Java and most other programming languages where you have to specify your types you want to use before you use them. We have created a time object which keeps the local time and date. Now we can simply write its contents to the document. You have to write today before each get...- method. Otherwise the browser would not know which object to refer to. The getMonth() method returns a number between 0 and 11 (0 standing for january and 11 for december). So we have to add 1 to the number returned to get the right month. An interesting thing you could think of is to create a date - for example the date when you created a document. Then you could calculate how many days later somebody is reading your document. And if it is more than 10 days old you could tell him: Hey, this is really old- don't read it! For this you will need the date of today as shown in the example above and the creation date. You can set a date while creating a date object. This would look like this: docStarted= new Date(96,0,13) You have to specify the year first, then the month (remember to decrease the month by one!) and then the day. You can also specify the time: docStarted= new Date(96,0,13,10,50,0) The first numbers are still the date. They are followed by the hour, the minutes and the seconds. I have to tell you that JavaScript does not have a real date type. But as you see you can work with dates quite nice. This works because dates are represented by the number of milliseconds since 1/1/1970 0:0h. This sounds quite complicated but this is a common method for representing dates on computers. But you don't have to bother about this. You just have to care about the functions and this is not difficult at all. I just wanted to tell you so you don't think I tell you anything wrong. Random numbers A common problem is how you can use random numbers in programming and scripting languages. At the moment the random- function in JavaScript does not work but it soon going to be implemented, I believe. But at the moment you have to work with some tricks. Well, it is not really a trick. This is a really common way almost any compiler I can think of uses to calculate random numbers. Yes, it calculates it. You take the time and date of your machine and manipulate it somehow. I believe the final JavaScript language will use this method (or a kind of it) as well. As I told you above the time is just a large number. You can use this number and make some calculations with it. For example you could calculate the sine from it and take the absolute value. This will get a number between 0 and 1. As the time changes every millisecond you won't risk to get the same number twice (when calculating them fast behind each other). If you want to calculate many random numbers in a short time you should not use sin() alone. Then you would get numbers following a sine- curve! This is not really random. But if you want to calculate a random number and let's say in 20 seconds again- this is a great function to do this. This is a random number: Here is the code for this example: -=- [PREFORMATTED] =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=- -=- [PREFORMATTED] =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=- Of course the random- function shown here isn't great for all puposes. It is just that you get a basic idea about how they work. Here I will present a function which I got from Maynard Demmon. You just have to set the limits variable to the value you need - 100 for example. And you will get a 'good' random value between 0 and 99. Here is the code: -=- [PREFORMATTED] =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=- function random() { today = new Date(); num = today.getTime(); num = Math.round(Math.abs(Math.sin (num)*1000000)) % limits; return num; } -=- [PREFORMATTED] =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=- Creating windows Creating windows is a great feature of JavaScript. You can build new windows. Load a HTML- document. Navigate through the Internet- all with JavaScript. I'm going to show you how we can open a window and write something to it. If you push this button you will get to see what I'm going to explain to you next. === [FORM] ================================================================ Breaking up with traditions I didn't write Hello world! to the page... Here is the source: -=- [PREFORMATTED] =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
-=- [PREFORMATTED] =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=- As always you can see the button which calles a function. The function WinOpen() creates a new window by calling the method open. The first quotes contain the URL of the page. Here you can put the address of a HTML- document which you want to load. If you leave it blank no page is loaded and you can write to it with JavaScript! The next quotes specify the name of the window. Here you can write nearly anything- this has no effect on our examples right know. But you will get an error message if you write Display Window (with a space between the two words - Netscape tells you something different in their information- but I sat half an hour because I could not find an error!) The next quotes specify the properties of the window. This is really interesting. You can tell if you want a toolbar, scrollbars... If you write toolbar=yes then you will get a toolbar in your window. There are some different properties listed below which you can change. You can specify every possible property. You have to write them the way shown above. And with NO spaces between! Here is what you can change on your page: toolbar location directories status menubar scrollbars resizable copyhistory width=pixels height=pixels For pixels you have to write the number of pixels. This way you can tell the browser how large your window should be. After you have opened your window and called it msg (stands in front of the open- method), you can now write to your window. Here you can write normal HTML- code! This is really a great thing. You could build a HTML- document using the form input a user gave you in the document before. You could make a page where a user has to write his name to a form and then a new HTML- document is created containing his name! Some months ago this was only possible with CGI- Scripts! PLEASE NOTE THIS: When writing something to a window you should always put a
after the last text you write to a window. Otherwise you probably don't get to see the last row of your text. This happens because the browser only writes out complete lines - and if there is no end of the line it waits for more to come. ANOTHER IMPORTANT THING IS THIS: If you want to insert any images into a new window be sure to put the height and width properties to the tag. Otherwise you won't see any pictures or your pages crashes somehow. This may cause some very strange problems where you don't expect the image to be 'responsible' for. So always write something like this so you won't get any trouble: Index - Part 1 - Part 3 - Part 4 - Part 5 - Part 6 - Part 7 Last changed: 11.May'96 © 1996 by Stefan Koch ---------- Introduction to JavaScript - Part3 Introduction to JavaScript Part 3 Many people asked me how JavaScript and frames work together. To use frames with JavaScript you got to have Netscape Navigator 2.0 at the moment. There are some other browsers which support frames by now- but they usually do not support JavaScript. But I think that it won't take too long until there are further browsers which support frames and JavaScript. First, I want to tell you a little bit about frames. Many documentations for HTML do not contain anything about frames because frames are quite new. Using frames you can 'divide' your window which displays the HTML- pages into several parts. So you have some independent parts in your window. You can load different pages to the frames. A nice thing is that these frames can interact. That means they can exchange information between each other. For example you could create 2 frames. One with your normal HTML- page and one with a toolbar. The toolbar could contain buttons for navigating through your normal HTML- page. The toolbar will always be visible even when another HTML- page is loaded in the other frame. At first I want to show to you what this will look like. Just push the button and look what frames are like. (If you look at this page online you have to wait some time when pushing the buttons in this part of the tutorial because the scripts are loaded from the server) === [FORM] ================================================================ Here is the HTML- script for frames: -=- [PREFORMATTED] =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=- Frames -=- [PREFORMATTED] =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=- At first you tell the browser how many frames you want to have. This is defined in the tag. Writing rows to it the browser will divide the given space into rows. You can create different columns by using cols instead of rows. You can use several tags as well. Here is an example provided by Netscape: -=- [PREFORMATTED] =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=- -=- [PREFORMATTED] =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=- === [FORM] ================================================================ This will create two columns and the second column is divided into 3 equal parts. The 50%,50% in the first tag tells the browser how big the frames shall be. You can give names to your frames. This is important for the use with JavaScript. In the first example above you can see how frames get their names. Using the tag you tell the browser which HTML- page to load. I think the basic elements of frames are easy to understand. Now have a look at our next example: === [FORM] ================================================================ This will show a window where you can click on some buttons in order to write some text to the other frame. Here goes the source: To create the frames you'll need (frames.htm): -=- [PREFORMATTED] =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=- Frames -=- [PREFORMATTED] =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=- Here is the source for frame1.htm: -=- [PREFORMATTED] =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=- This is our first frame! -=- [PREFORMATTED] =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=- And now frame2.htm: -=- [PREFORMATTED] =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=- This is our second frame!

-=- [PREFORMATTED] =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=- Wow! These scripts get longer and longer! What is done here? The user loads the first file (frames.htm). This creates the frames and loads the HTML- file frame1.htm to the first frame (named 'fr1') and frame2.htm to the second frame (called 'fr2'). This is plain HTML until here. As you can see the first script frame1.htm contains some JavaScript functions. But they are not called in the first script. Are these functions not needed at all? Am I just too lazy to delete the useless functions? Although I'm certainly the lazy type of guy these functions are needed in fact. They are called by the second script frame2.htm! We create some buttons in this second script like the way we did in the first part of this introduction. The onClick- property is familiar as well. But what does the parent.fr1... mean? If you are familiar with objects then this is not new to you. As you have seen above the frame1.htm and frame2.htm are called by the file frames.htm. Frames.htm is called the parent of the other two frames. Consequently the two new frames are called child- frames of the frames.htm. You can see there is a kind of hierarchy which gives a certain interrelation between the different frames. I try to show this idea to you with the help of a small 'graphic' (ASCII- art would describe it much better...): -=- [PREFORMATTED] =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=- frames.htm parent / \ / \ / \ fr1(frame1.htm) fr2(frame2.htm) children -=- [PREFORMATTED] =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=- You can extend this concept of course. You can create some 'grandchildren' (if you want to call it like this- it is not the official expression!). It looks like this: -=- [PREFORMATTED] =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=- frames.htm parent / \ / \ / \ fr1(frame1.htm) fr2(frame2.htm) children / \ / \ / \ gchild1 gchild2 'grandchildren' -=- [PREFORMATTED] =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=- If you want to index anything in the parent- frame from frame2.htm you just put parent. before the function you call. Addressing the functions defined in frame1.htm from the parent- frame can be done by putting fr1 before the function- call. Why fr1? In your script for the parent- frame (frames.htm) you created the different frames and gave them different names. I chose fr1 for the first frame. The next step is easy. How is the first frame called if you want to address it from frame2.htm (which is kept in the second frame called fr2)? As you can see in my awesome graphic there is no direct connection between frame1.htm and frame2.htm. So you cannot call functions directly from frame2.htm defined in frame1.htm. You have to address it via the parent- frame. So the right index is parent.fr1. If you want to call the function hi() from frame2.htm you just write parent.fr1.hi(). This is what is done in the second script in the onClick- property. If you have created some frames and someone takes a link the frames do not disappear. This is ok if the user 'stays on' your page. You could create a menubar which is shown in one frame all the time for example. But if the user jumps to another page in the Internet your menubar might not be wanted anymore. So how can you delete the frames once created? Just add TARGET="_top" to your tag. This looks like this then: -=- [PREFORMATTED] =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=- if you don't want to stare at my page anymore -=- [PREFORMATTED] =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=- Of course, you have to add TARGET="_top" to every link that leads 'outside'. If every link in your page leads 'outside' you can also write to the head of your HTML- page. This means that every link in the page erases the frames. Index - Part 1 - Part 2 - Part 4 - Part 5 - Part 6 - Part 7 Last changed: 11.May'96 © 1996 by Stefan Koch ---------- Introduction to JavaScript - Part4 Introduction to JavaScript Part 4 Now I want to show you how to write text to the statusbar (the bar on the bottom of your browser where the URLs are shown) and of course I will explain how a scroller works- although they are already hated in the JavaScript scene (I tell you why later on). At first how is the statusbar 'addressed' ? This script shows you how one can write a simple text to the statusbar: === [FORM] ================================================================ Isn't this nice? Here's the script: -=- [PREFORMATTED] =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
-=- [PREFORMATTED] =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=- We create two buttons which call both the function statbar(txt). The txt in the brackets shows that the function gets a variable passed over from the function call. (I called this just txt- it could as well be anything totaly different.) When you look at the
tag where the buttons are created you can see that the function statbar(txt) is called. But we don't write txt there. We just put the text there we want the browser to show in the statusbar. You can see it this way: The function is called and defines the variable txt- it gets the 'value' you passed over by the function call. So when pressing the 'Write!' button the statbar(txt) function is called and txt stores the string 'Hi! This is the statusbar'. You can now use the variable txt as usual. This method of passing variables to a function makes the function very flexible. Look at the second button. It calls the same function. Without variable passing we would need 2 different functions. Now what does the function statbar(txt) do? Well this is simple. You just write the contents of txt to the variable window.status. This is done by window.status = txt;. Writing an empty string ('') to the statusbar erases it. Notice that we have to use these single quotes ' because we use double quotes " for defining onClick. The browser needs to know which quotes belong together- so you have to alternate with single and double quotes. I think this is quite clear. You know already the onMouseOver- property from part 2 of my tutorial: Don't you hate it that the statusbar does not erase the text when the mousepointer does not point on the link any longer? I have quite a simple solution. We just write a small function which uses the same technique to erase the statusbar as shown above. But how can the erase- function be called? We don't have a method or property which we can use for detecting if the mouse pointer is moving from a link. Setting a timer is the solution. Try the following script here. Just move your pointer over it- don't click it! This is really neat, isn't it? Just have a look at the source and you'll see that it is easier than it seems on the first glance. -=- [PREFORMATTED] =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=- link -=- [PREFORMATTED] =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=- You will recognize many parts of this script. The moveover(txt) function is just the statbar(txt) function after some copy/ paste work on it! Nearly the same happend to the erase() function. In the of the HTML- page we create a link with the known onMouseOver- property. Our moveover(txt) function is called with the string 'Disappearing!' being passed over to the txt variable. The window.status gets the contents of txt. This the same thing as in the statbar(txt) function. The setTimeout(...) function call is new though. This function sets a timeout. Who was expecting this? The setTimeout(...) function defines how long the timer is going to run and what will happen when the time is over. In our example the erase() function is called after 1000 milliseconds (that's a second for all math- cracks out there). This is a phantastic feature! Your function moveover(txt) function is finished after the timer is set. The browser calls the function erase() automatically after 1 second. (Already thinking of a page telling the user: If you don't do this your harddrive is going to be destroyed in 10 seconds! ???) After the timeout is finished the timer does not restart again. But you could of course call it again in the erase() function. This leads us directly to the all-over liked scrollers. As you already know how to write to the statusbar and how the setTimeout- function works the scroller will be easy for you to understand. Push this button to see my scroller. The script has to be loaded from the server so please be patient if you won't see the scroller immediately. === [FORM] ================================================================ Have a look at the script: -=- [PREFORMATTED] =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=- Here goes your cool page! -=- [PREFORMATTED] =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=- This script uses the same functions (or parts of it) we already used above. The setTimeout(...) 'tells' the timer to call the scroll() function when the time is up. The scroller will move one step further. At the beginning there are a lot of calculations but these are not too important for understanding how the script works. The calculations are there for getting the position where the scroller ought to start. If it is just at the start the script has to add some spaces in order to place the text right. I told you at the beginning of this part of my introduction that scrollers are not very popular or if they are still popular they won't be it very long anymore. There are some reasons. I list several here but there are certainly more. If you see this effect for the first time it might be quite nice but looking at it the 1 million and second time it is not that fun anymore. Well, this is no good argument indeed because this affects nearly every cool trick used in your pages. There are more severe problems. What I don't like is that it changes the speed when you move the mouse (It gets faster!). At least it does that for me. This effect gets a lot stronger when you want to make the scroller little bit faster by changing the setTimeout- value. Maybe there is a way around this problem. But the worst is that if you let this script run some time you get an Out of memory error. And this is really ugly. It seems to be a problem of the Netscape Navigator 2.0. Maybe a higher version will have this bug fixed. There are many other routines out there on the Net. I've seen some scrollers writing the text to a frame. Programming this shouldn't be too difficult. Index - Part 1 - Part 2 - Part 3 - Part 5 - Part 6 - Part 7 Last changed: 11.May'96 © 1996 by Stefan Koch ---------- Introduction to JavaScript - Part5 Introduction to JavaScript Part 5 One important programming technique is the use of arrays. Most programming language support them in a certain manner. Maybe you have already come to a point where arrays would help you further. But if you looked through the documentation provided by Netscape you realized that nothing is said about arrays. The problem is that arrays do not exist in JavaScript! But I can show you a work around of course! First, what are arrays? You could say that arrays are many variables bound together. Let's say that you want 10 variables. You could begin with the variables a, b, c ... But this is really complicated. Especially if you want to store 100 or more variables. If you have an array which is called 'MyArray' and it has got 10 elements, you could address the different elements with MyArray[1], MyArray[2], MyArray[3]... (many programming languages start with the 0 as the first element- but we want to have the 1 as first element because this is the way we use it later in JavaScript). So if you want to keep the number 17 in the first element you have to write MyArray[1]=17. You see that you can work with arrays the same way as with normal variables. But there are some more features. If you want to store the number 17 in every element you can write it this way: for (var i=1;i<11;i++) MyArray[i]=17< The for- command tells the computer how often the next command is going to be executed. The for- loop starts with i= 1. First the computer gets the command MyArray[1]= 17. After this i is incremented by 1 and then the command is MyArray[2]= 17. i is incremented until it has the value 10. (The expression i<11 in the for loop has to be true- if i is 11 this expression isn't 'true' anymore).< Now I will show you a function to initialize arrays. This function was discussed in the JavaScript Mailing list. -=- [PREFORMATTED] =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=- function initArray() { this.length = initArray.arguments.length for (var i = 0; i < this.length; i++) this[i+1] = initArray.arguments[i] }

-=- [PREFORMATTED] =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=- You don't need to understand this function. You only have to know how to use this function. If you want to create an array with three elements you just write: var MyArray= new initArray(17,18,19). 17,18,19 are assigned to the elements 1,2,3. You could as well write strings to your array. So you don't have to matter which type is used! var heyho= new initArray("This", "is","cool"). Mixing different types is no problem at all: var Mixedup= new initArray(17,"yo",103). I will now initialize the array 'Mixedup' and then show the output: "); document.write("Element No. 2: "+Mixedup[2]+" "); document.write("Element No. 3: "+Mixedup[3]+" "); // --> This is the script for the output: -=- [PREFORMATTED] =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=- -=- [PREFORMATTED] =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=- I have written a small game yesterday. I have encountered a problem you might have got as well. If you want to clear a window or frame you look into the documentation by Netscape and see that JavaScript knows the function 'document.clear()'. But if you implement this function nothing happens! The function document.clear() seems to be broken on every platform. Gordon McComb gave me the following script which clears the window as I wanted it. -=- [PREFORMATTED] =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=- document.close(); document.open(); document.write("

"); -=- [PREFORMATTED] =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=- You don't have to write document.write("

");. It is only important that you send anything to the window. This works fine with frames as well. Now we're looking at a script which lets you navigate through different documents. What I'm talking about is the back() and forward()- function. If you have a back- link on your page this isn't the same as the back- button in the Netscape- Navigator. For example I have got some back- links which work like normal links but I know that the user probably comes from that certain page I'm linking to. The back- button provided by the Netscape Navigator goes one step back in your history list. You can do this with JavaScript as well. Just take this link in order to get back again! The script I used here is shown below: -=- [PREFORMATTED] =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-

-=- [PREFORMATTED] =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=- You could also write history.go(-1) and history.go(1). Index - Part 1 - Part 2 - Part 3 - Part 4 - Part 6 - Part 7 Last changed: 11.May'96 © 1996 by Stefan Koch ---------- Introduction to JavaScript - Part6 Introduction to JavaScript Part 6 Ireceive a lot of mails about the problem how two pages can be loaded with only one mouse click. Basically there are three different solutions to this problem. The first possiblity is to create a button which calls a function when the user presses it. This function loads the two pages into different frames or opens new windows. This is not too difficult if you have a look at our examples in the other parts of this introduction. We have all elements we already need. === [FORM] ================================================================ We create three frames. The first one is used for the button. The first html-page is just needed for openening the frames and giving names to them. This is nothing new since we used this technique in part 3 in order to work with frames. I'll show it to you anyway. (I don't know whether this happens to you as well- but everytime an author of a computer book thinks that something hasn't got to be printed because it is so easy - this is exactly the part I'm having trouble with. So here we go:) frames2.htm -=- [PREFORMATTED] =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=- Frames -=- [PREFORMATTED] =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=- loadtwo.htm is loaded to the first frame. This is the frame with the button. loadtwo.htm -=- [PREFORMATTED] =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
-=- [PREFORMATTED] =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=- The function loadtwo() is called when the button is pressed. Two strings are passed to the function. If you look at the loadtwo() function you see that the second frame fr2 loads the page that is defined by the first string in the function call. If you have different buttons opening different pages you can reuse this function. You only have to pass the different URLs (addresses) of the pages. The second technique uses hyperlinks. Some examples floating around the Internet have something like this: This technique seems not to work on all platforms. So you better don't use it. I'm not sure if it is supposed to work at all - but we don't have to worry because there is another method how we can implement this. We can call a JavaScript- function the following way: -=- [PREFORMATTED] =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=- My Link -=- [PREFORMATTED] =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=- This is really easy and seems to work fine on all browsers. You just have to write javascript: and then the name of your function as your 'link'. If you call the 'loadtwo()'- function from the example above you can update two frames with one single click on a hyperlink. The third technique for loading two pages on one mouse click can be combined either with buttons or normal hyperlinks. We could do this with the second technique shown above but this approach here might be more appropriate sometimes. What we can do is to load one HTML- page to one frame. This is done by Click here! We know this already. What we do now is to add a onLoad property to the loaded file. The getfr2.htm file could look like this: -=- [PREFORMATTED] =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=- bla bla bla -=- [PREFORMATTED] =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=- Of course you have to add this to every document that is loaded into the second frame. Another often seen problem is how new pages can be loaded to a new window. The window shall pop up when the user clicks on a link. You just have to add the target- property to your tag again. This looks like this: Go!< /a> Now we will have a look at different operators you might use in JavaScript. Operators are a powerful technique to shorten and improve your script. For example you want to test if a variable x is larger than 3 and you want to see if it is smaller than 10. You might want to write it this way: -=- [PREFORMATTED] =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=- if (x>3) if (x<10) doanything(); The function doanything() is called if x>3 and x<10. There is a faster way to write this though: -=- [PREFORMATTED] =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=- if (x>3 && x<10) doanything(); -=- [PREFORMATTED] =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=- The && is called AND- operator. Then there is an OR- operator. You can use this for example if you want to check if one variable x is equal 5 or another variable y is equal 17: -=- [PREFORMATTED] =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=- if (x==5 || y==17) doanything(); -=- [PREFORMATTED] =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=- The function doanything() is called when x==5 or y==17. It is also called if both comparisons are true. Comparisons are done via the == operator in JavaScript (Of course there are also <,>,<= and >=). If you know C/ C++, this is the same. A single = is used to store a value in a variable. (If you know Pascal this may be a little bit confusing. Assigning a value to a variable is done in Pascal via := and comparisons with a single =) If you want to see if a variable does not equal a certain number, this might get a little bit complicated without operators. This is done with a simple !=. So this would look like this for example: x != 17. There are many more interesting operators which can make your programs more efficiently. Look at the documentation provided by Netscape to get a full overview of all operators you can use in JavaScript. Index - Part 1 - Part 2 - Part 3 - Part 4 - Part 5 - Part 7 Last changed: 11.May'96 © 1996 by Stefan Koch ---------- Introduction to JavaScript - Part7 Introduction to JavaScript Part 7 Form input is very important for some Web- pages. The form input is often sent back to the server again. JavaScript has got the functionality to validate the form input before sending it to the server. First I want to show you how forms can be validated. Then we will have a look at the possibilties for sending information back with JavaScript or HTML. First of all we want to create a simple script. The HTML- page shall contain two text- elements. The user has to write his name into the first and an e-mail address into the second element. You can enter anything into the form elements and then push the button. Also try to enter nothing and then push the button. === [FORM] ================================================================ Enter your name: Enter your e-mail address: === [FORM] ================================================================ Concerning the first input element you will receive an error message when not entering anything. Any input is seen as valid input. Of course, this does not prevent the user from entering any wrong name. The browser even accepts numbers. So if you enter '17' you will get 'Hi 17!'. The second form is a little bit more sophisticated. Try to enter a simple string - your name for example. It won't work (unless you have a @ in your name...). The criteria for accepting the input as a valid e-mail address is the @. A single @ will do it - but this is certainly not very meaningful. Every Internet e-mail address contains a @ so it seems appropriate to check for a @ here. What does the script for those two form elements and for the validating look like? Here it goes: -=- [PREFORMATTED] =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
Enter your name:

Enter your e-mail address:
-=- [PREFORMATTED] =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=- First have a look at the HTML- code in the body- section. We just create two text elements and two buttons. The buttons call the functions test1(...) or test2(...) depending on which button is pressed. We pass this.form to the functions in order to be able to address the right elements in the functions later on. The function test1(form) tests if the string is empty. This is done via if (form.text1.value == "")... . 'form' is the variable which receives the 'this.form' value in the function call. We can get the value of the input element through using 'value' in combination with form.text1. In order to look if the string is empty we compare it with "". If the input string equals "" then no input was done. The user will get an error message. If something is entered the user will get an ok. The problem here is that the user might enter only spaces. This is seen as a valid input! If you want to, you can of course check for these possibilities and exclude them. I think this is quite easy with the information given here. Now have a look at the test2(form) function. This function again compares the input string with the empty string "" to make sure that something has been entered. But we have added something to the if- command. The || is called the OR- operator. You have learned about it in part 6 of this introduction. The if- command checks if either the first or the second comparison is true. If at least one of them is true the whole if- command gets true and the following command will be executed. This means that you will get an error message either if your string is empty or if there isn't a @ in your string. The second operation in the if- command looks if the entered string contains a @. What different possibilities do exist for submitting the contents of a form? The easiest way is to submit the form input via e-mail. This is the method we are going to look at a little closer. If you want to get feedback without e-mail and want the server to handle the input automatically you have to use CGI at the moment. You would need CGI for example if you wanted to make a search engine like Yahoo- where the user gets a result quickly after the form input. He does not have to wait until the people maintaining this server read the input and then look up the information requested. This is done automatically by the server. JavaScript does not have the functionality to do things like this. Even if you want to create a guestbook you can't make the server to add the information automatically to an existing HTML- page with JavaScript. Only CGI can do this at the moment. Of course you can create a guestbook with the people answering via e-mail. You have to enter the feedback manually though. This is ok if you don't expect to get 1000 feedback mails a day. This script here is plain HTML. So no JavaScript is needed here! Only, of course, if you want to check the input before the form is submitted you will need JavaScript. I have to add that the mailto- command does not work for every browser- but the newer browsers support it. -=- [PREFORMATTED] =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-

Do you like this page?

Not at all.
Waste of time.
Worst site of the Net.
-=- [PREFORMATTED] =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=- You will get the feedback through e-mail by doing this. The only problem is that you will receive a mail that might seem very cryptic at the first glance. Sometimes all spaces are filled up with '+' and sometimes they are filled up with '%20'. So+this+might+look+like+this. There are some parser programms out on the Net, I believe, which will put the received mail in to a nicer format. There is another nice thing so you can make your form elements a little bit more user-friendly. You can define which element is in focus at the beginning. Or you could tell the browser to focus on the form where the user- input was done wrong. This means that the browser will set the cursor into the specified form- element so the user does not have to click on the form before entering anything. You can do this with the following piece of script: -=- [PREFORMATTED] =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=- function setfocus() { document.first.text1.focus(); return; } -=- [PREFORMATTED] =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=- This script would set the focus to the first text- element in the script I have shown above. You have to specify the name of the whole form - which is here called first - and the name of the single form element - here text1. If you want to put the focus on this element when the page is being loaded you can add an onLoad- property to your tag. This looks like this for example: -=- [PREFORMATTED] =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=- -=- [PREFORMATTED] =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=- Index - Part 1 - Part 2 - Part 3 - Part 4 - Part 5 - Part 6 Last changed: 11.May'96 © 1996 by Stefan Koch ---------- JavaScript - Changes About changes to JavaScript Even if the Netscape Navigator 2.0 isn't in beta any longer JavaScript is still being developed. We will see many changes in the future because this scripting language is still very young. But at the moment we can already work with many features seriously. Some things of JavaScript are still about to change. The best example is the one I had trouble with myself. I had the property lastmodified in my document. This was correct for Netscape 2.0 beta2. But with newer versions this property changed to lastModified. You might think this is just a small mistake and the browser does not bother. But for the browser lastmodified and lastModified is something different. JavaScript is case sensitive! So you have to be certain about the case! Some functions that are mentioned in the documentation provided by Netscape are not yet implemented. Still there are some nasty bugs. Some only affect some users. For example there is a known problem for Mac users. The date- functions do not work properly. Please have a look at the FAQ (frequently asked questions). I hope you understand that I cannot know what further changes are made to JavaScript and in how far this is going to affect your scripts. But as things are moving so fast today I don't want to wait until the final version (if things like this exist today...) is ready. And I have the feeling you don't want to wait either... And if you realize a problem with my examples please write. I will write further parts for this introduction. So be sure to check back once in a while. Voodoo's Home - Get Back - e-Mai