Download as DOC, PDF, TXT or read online from Scribd
Download as doc, pdf, or txt
You are on page 1/ 5
Introduction to JavaScript - Part 1
1996 Copyright by Stefan Koch. All rights reserved.
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. or e!ample you are able to respond to user- initiated events "uite easily. Some effects that are now possible with JavaScript were some time ago only possible with #$%. So you can create really sophisitcated pages with the help of JavaScript. &ou can see many e!amples for JavaScript scripts on the %nternet. 'est you have a loo( at some JavaScript enhanced pages. &ou can find many lin(s at $amelan )* http+,,www.gamelan.com -in the JavaScript section.. What is the difference beteen JavaScript and Java? /lthough the names are almost the same Java is not the same as JavaScript0 These are two different techni"ues for %nternet 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. 'ut often you 1ust want to ma(e 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. &ou could say that JavaSript is rather an e!tension to HTML than a separate computer language. 2f course this is not the 3official3 definition but % thin( this ma(es it easier to understand the difference between Java and JavaScript. &ou can find further information about both Java and JavaScript at http+,,www.gamelan.com. !o can JavaScript scripts be r"n? The first browser to support JavaScript was the 4etscape 4avigator 5.6. 2f course the higher versions do have JavaScript as well. &ou might (now that Java does not run on all 4etscape 4avigator 5.6 -or higher. versions. 'ut this is not true for JavaScript - although there are some problems with the different versions. The Mac- version for e!ample seems to have many bugs. 7 - 7 %n the near future there are going to be some other browsers which support JavaScript. The Microsoft %nternet 8!plorer 9.6 is going to support JavaScript. JavaScript- enabled browsers are going to be wide spread soon - so it is worth learning this new techni"ue now. &ou might reali:e that is really easy to write JavaScript scripts. /ll you have to (now is some basic techni"ues and some wor(- arounds for problems you might encounter. 2f course you need a basic understanding of HTML before reading this tutorial. &ou can find many really good online ressources about HTML. 'est you ma(e an online search about 3html3 at &ahoo -http+,,www.yahoo.com. if you want to get informed about HTML. -These online- documents are often more up-to-date than boo(s. The %nternet is moving "uite fast these days.... #et$s get started 4ow % want to show some small scripts to you so you can learn how they are implemented into HTML- documents and to show which possibilities you have with the new scripting language. % will begin with a very small script which will only print a te!t into an HTML-document. <ht ml > <head> My first JavaScript script! </head> <body> <br > This is a normal HTML document. <br > <script lanuae!"JavaScript" > document.#ri te$"This is JavaScript!"% </script > <br > &ac' in HTML aain. </body> </ht ml > &ou are 1ust reading the 3offline3- version of this document. % have an online version of this tutorial on my homepage at http+,,rummelplat:.uni- mannheim.de,;s(och,1s,script.htm. There you can see the results of the JavaScript code directly. &ou can try out the JavaScript e!amples immediately. % will present the results of the e!amples here as good as % can. 'ut % recommend that you have a loo( at the e!amples online as well - so you get an idea of what is possible in JavaScript. The output of the first e!ample is 1ust this te!t+ This is a normal HTML document. This is JavaScript! &ac' in HTML aain. 7 - 5 % must admit that this script is not very useful. &ou could write this in HTML much faster and shorter. 'ut what % wanted to show is how you have to use the <script* tags. &ou can use these tags in your document wherever you want. % really don3t want to bother you with such stupid scripts any longer. So we will procede to functions. This is not hard to understand either but= believe me= it is much more useful0 unctions are best declared between the <head* tags of your HTML- page. unctions are often called by user-initiated events. So it seems reasonable to (eep the functions between the <head* tags. They are loaded first before a user can do anything that might call a function. Scripts can be placed between inside comment fields to ensure that older browsers do not display the script itself. <ht ml > <head> <script lanuae!"Li veScript" > function pushbutton$% ( alert$"Hello!"%) * </script > </head> <body> <form> <i nput type!"but ton" name!"&ut ton+" value!",ush me" on-lic'!"pushbutton$%" > </form> </body> </ht ml > This script creates a button and when you press it a window will pop up saying 3Hello03. %sn3t that great> So= what is going on on this script> /t first the function is loaded and (ept in memory. Then a button is created with the normal <form* tag -HTML.. There is something "uite new with the <input* tag. There you can see 3on#lic(3. 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 3pushbutton-.3 is declared in the header. When the button is pressed this function is e!ecuted. There is another new thing in this script- the 3alert3 method. This method is already declared in JavaScript - so you only have to call it. There are several pre- defined functions available in JavaScript. &ou will learn about many more in this tutorial. &ou can find a complete description about all functions in JavaScript at the 4etscape- Site. % thin( that this list is getting a lot longer in the near future. 'ut right at the moment there are already some cool things we can do with the given methods. -% don3t thin( the alert- Method is thought to be used this way - but we3re only learning. /nd this way it is "uite easy to understand. % hope you will e!cuse me.... 7 - 9 We got "uite far by now. %n fact we have a lot of possibilities 1ust by adding functions to our scripts. 4ow % will show how you can read something a user has inserted into a form. <ht ml > <head> <scri pt lanuae!"Li veScript" > <! . . hide script from old bro#sers function etname$str% ( alert$"Hi/ "0 str0"! "%) * // end hidin contents . . > </scri pt > </head> <body> ,lease enter your name1 <form> <i nput type!"t e2t " name!"name" on&lur!"etname$this.val ue%" value!"" > </form> </body> </ht ml > We have some new elements implemented in this script again. /t first you have certainly noticed the comment in the script. This way you can hide the script from old browser- which cannot run scripts. &ou have to (eep to the shown order0 The beginning of the comment must be 1ust after the first <script* tag. The comment ends 1ust before the <,script* tag. %n this HTML- document you have got a form element where a user can enter his name. The 3on'lur3 in the <input* tag tells the client which function it has to call when something is entered into the form. The function 3getname-str.3 will be called after 3leaving3 this form element -for e!ample clic(ing besides it. or by pressing enter after entering something. The function will get the string you entered through the command 3getname-this.value.3. 3this.value3 means the value you entered into this form element. Wor%ing ith dates % thin( the ne!t thing is "uite nice as well. We3re going to implement a date function into our script. So if you creat a HTML- page you can ma(e the client print the last change of the document. &ou do not have to write the date to the document though. &ou simply write a small script program. When you ma(e some changes in the future= the date changes automatically. 7 - ? <ht ml > <body> This is a simple HTML. pae. <br > Last chanes1 <script lanuae!"Li veScript" > <! . . hide script from old bro#sers document.#ri te$document.l astModi fied% // end hidin contents . . > </script > </body> </ht ml > /t the moment this property seems not to function on every machine. Some servers show only the date 7,7,7@A6. There seem to be some problems with this function. We have to wait for the ne!t update and hope that it wor(s then properly on every machine. 'ut you have to test this on your own machine - on some it seems to wor( fine. /s % already said things are moving really fast today. So it would not be ama:ing if ne!t wee( there was a ma1or change to JavaScript0 So you always have to watch out for further changes as this language is "uite young. Blease understand that some things told here might change as well. 'ut % thin( that the basic principles are going to stay the same. Last changed: 10.May'96 1996 by Stefan Koch
