Introduction To Javascript - Part 1

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

Introduction To Javascript - Part 1

Enviado por

Dados do documento

Título original

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Introduction To Javascript - Part 1

Enviado por

Direitos autorais:

Formatos disponíveis

Introduction to JavaScript - Part 1

1996 Copyright by Stefan Koch. All rights reserved.

Você também pode gostar