Introduktion till JavaScript

Vad är JavaScript?

JavaScript är ett nytt script-språk för Web-sidor. Script skrivna i JavaScript kan bäddas in i dina HTML-sidor. JavaScript ger dig många möjligheter att förbättra din HTML-sida med en del intressanta saker. Du kan t ex enkelt svara på användar-initierade händelser . En del av de saker som nu är möjliga att göra med JavaScript var tidigare bara möjliga att göra med CGI. Du kan alltså göra verkligt sofistikerade sidor med hjälp av JavaScript. Du hittar många exempel på hur man kan använda JavaScript på Internet. Bäst är att titta på några sidor som bygger på JavaScript. Det finns många länkar på Gamelan (JavaScript-sektionen). Du kan hitta Netscapes dokumentation på http://home.netscape.com.

Vad är det för skillnad mellan Java och JavaScript?

Även om namnen är lika är Java inte samma sak som JavaScript! Det är två olika internet-programmeringstekniker. Java är ett programspråk. JavaScript är ett script-språk (precis som namnet antyder). Skillnaden är att man kan skapa riktiga program med Java. Ofta vill man bara ha en trevlig effekt och slippa bry sig om vanlig programmering. JavaScript är tänkt att vara lätt att förstå och använda. JavaScript-författare behöver inte bry sig så mycket om programmering. Man kan säga att JavaScript är en utökning av HTML snarare än ett eget språk. Detta är naturligtvis inte den officiella definitionen, men jag tycker att detta synsätt gör det lättare att skilja mellan Java och JavaScript. Du finner mer information om Java och JavaScript på Gamelan.

För mer information, läs introduktionen som finns hos Netscape.

Hur kör man JavaScript?

Den första internetläsaren som hade stöd för JavaScript var Netscape Navigator 2.0. Senare versioner stöder naturligtvis också JavaScript. Det kanske är av intresse att veta att Java inte stöds av alla Netscape Navigator 2.0 (och högre) versioner. Mac-versionen verkar t ex ha många buggar. Inom en nära framtid kommer flera läsare att ha stöd för JavaScript. Microsofts Internet Explorer 3.0 kommer att ha stöd för JavaScript. JavaScript-stöd kommer snart att vara spritt - så det är värt att lära sig tekniken nu. Du kommer nog att upptäcka att det är enkelt att skriva JavaScript. Det enda du behöver kunna är några grundläggande tekniker och några sätt att komma runt problem du kan stöta på.
Du måste naturligtvis ha en grundläggande förståelse för HTML innan du börjar läsa denna handledning. Det finns många bra online-resurser om HTML. Det bästa är att söka på 'html' hos Yahoo om du vill ha information om HTML. (Dessa online-källor är ofta bättre uppdaterade än böcker. Internet förändras fort nuför tiden...)

Nu ska jag lära dig några små script så att du förstår hur de byggs in i HTML-dokument och för att visa vilka möjligheter du har med det nya script-språket. Jag börjar med ett mycket litet script som bara skriver en text i ett HTML-dokument.

<html>
<head>
My first JavaScript!
</head>
<body>
<br>
This is a normal HTML document.
<br>
  <script language="JavaScript">
    document.write("This is JavaScript!")
  </script>
<br>
Back in HTML again.
</body>
</html>

Om du har en internetläsare som stöder JavaScript kommer du att kunna se hur det här scriptet fungerar. Om din internetläsare inte stöder JavaScript kan resultatet bli lite konstigt...

This is a normal HTML document.

Back in HTML again.

Jag medger att det här scriptet inte är särskilt användbart, men jag ville visa hur man använder <script>-koderna. Du kan använda de här koderna var som helst i dina dokument.

Jag vill inte ta upp din tid med dumma script, så vi fortsätter med funktioner. De är inte heller så svåra att förstå men, tro mig, de är mycket mer användbara! Funktioner definieras bäst inom HTML-sidans <head>-koder. Funktioner anropas av användar-initierade händelser, så det verkar logiskt att sätta funktionerna mellan <head>-koderna. De läses innan användaren kan göra någonting som anropar en funktion. Script kan placeras inom kommentars-koder för att inte gamla läsare ska visa själva scriptet.

<html>
<head>
  <script language="JavaScript">
     function pushbutton() {
       alert("Hello!");
  }
 </script>
</head>
<body>
<form>
  <input type="button" name="Button1" value="Push me" onclick="pushbutton()">
  </form>
</body>
</html>

Om du vill testa det på en gång och har en läsare som stöder JavaScript kan du trycka på knappen.

Detta script skapar en knapp och när du trycker på den öppnas ett fönster som säger 'Hello!'. Fantastiskt va'? Nå, vad händer i scriptet? Först laddas funktionen och sparas i minnet. Sen skapas en knapp med vanliga <form>-koder (HTML). I <input>-koden har vi någonting nytt. 'onclick'. Detta talar om för läsaren vilken funktion den ska anropa när någon trycker på knappen (självklart bara om läsaren stöder JavaScript). Funktionen 'pushbutton()' definieras mellan <head>-koderna. När knappen trycks in startas den här funktionen. Vi har ytterligare en nyhet i det här scriptet - 'alert'-metoden. Den metoden är redan definierad i JavaScript så vi behöver bara anropa den. Det finns många olika metoder att anropa. Jag kommer att visa några här. En komplett lista finns hos Netscape. Jag tror att listan kommer att bli mycket längre framöver, men redan nu finns det många tuffa saker man kan göra med de befintliga metoderna.
(Jag tror inte att 'alert'-metoden är tänkt att användas på det här sättet, men vi håller ju på att lära oss. Och på det här sättet är det lätt att förstå. Hoppas att du ursäktar...)

Vi har redan kommit ganska långt. Vi kan faktiskt göra mycket genom att bara lägga till funktioner till våra script. Nu ska jag visa hur du kan läsa något en användare har skrivit i ett formulär.

<html>
<head>
<script language="JavaScript">
<!--  hide script from old browsers
  function getname(str) {
    alert("Hi, "+ str+"!");
  }
// end hiding contents -->
</script>
</head>
<body>
Var snäll och skriv ditt namn:
<form>
  <input type="text" name="name" onBlur="getname(this.value)" value="">
</form>
</body>
</html>

Prova scriptet igen:

Var snäll och skriv ditt namn:

Åter har vi lagt till några nya komponenter i scriptet. Du måste ha lagt märke till kommentar-koderna. De hindrar att gamla läsare, som inte kan läsa script, ser det. Du måste hålla dig till den givna ordningsföljden! Startkommentars-koden måste hamna direkt efter <script>-koden. Slutkommentars-koden slutar precis före </script>-koden. I det här HTML-dokumentet har vi en formulär-ruta där användaren kan fylla i sitt namn. 'onBlur' i <input>-koden talar om för internet-läsaren vilken funktion den ska anropa när någonting skrivs i formuläret. Funktionen 'getname(str)' anropas när du hoppar ut ur formuläret eller trycker enter efter att ha fyllt i någonting. Funktionen kommer att skicka strängen från formuläret till kommandot 'getnamn(this.value)'. 'This.value' betyder det värde du skrev i formuläret.

Jag tycker att även nästa sak är ganska bra. Vi ska sätta in en datum-funktion i vårt script. Om du skapar en HTML-sida kan du få internet-läsaren att skriva senaste ändringsdatum på dokumentet. Du behöver inte skriva datumet själv. Du skriver helt enkelt ett litet script. När du någon gång i framtiden gör förändringar kommer datumet att ändras automatiskt.

<html>
<body>
This is a simple HTML- page.
<br>
Last changes:
  <script language="JavaScript">
  <!--  hide script from old browsers
    document.write(document.lastModified)
  // end hiding contents -->
  </script>
</body>
</html>

För tillfället verkar inte denna funktion fungera på alla maskiner. En del servers visar bara datumet 1/1/1970. Det verkar vara något problem med funktionen. Vi får vänta på nästa uppdatering och hoppas att det fungerar på alla maskiner då. Du får testa på din egen maskin. På vissa fungerar det bra.

Som jag sa tidigare, saker och ting förändras fort nuför tiden. Det skulle inte förvåna mig om det skedde stora förändringar i JavaScript redan nästa vecka! Du måste hela tiden hålla utkik efter förändringar eftersom språket är så nytt. Även så'nt som jag lär dig kan komma att förändras. Grundprinciperna lär nog förbli desamma.

Index - Del 2 - Del 3 - Del 4 - Del 5 - Del 6 - Del 7

Översatt till svenska av Niklas Johansson 1996