Gunnar Jutelius
Gunnar_Jutelius@lector.kth.se


JavaScript – Basic för webb?

JavaScript är inte Java. Du kan inte skapa fristående program. JavaScript lever bara i dina webbsidor – men där kan det göra underverk. Ett spännande språk att bemästra!

Du som varken har gjort webb-sidor eller provat på att programmera, ta din chans nu!
Skriv av programmet nedan, ordagrannt, i en enkel ordbehandlare, som Anteckningar(Notepad), för PC. Spara det som mittal1.htm. OBS! inte som .txt.
Starta sedan Netscape. Du måste ha Netscape version 3.0 eller senare. Gå till File/Open in.... och leta reda på din fil. Om du inte har fått in någon lus i programmet, så ska skärmen fyllas inte bara av ett hej utan 100 därtill!
Har du Netscape 3.0 så har du tillgång till ett programmeringsspråk! Ett objektorienterat sådant, där du kan författa kod i en vanlig ordbehandlare precis som du kan skriva vanliga webb-sidor.
Så enkelt är JavaScript, därmed mycket enklare än Java. Om du skriver någonting i Java måste du först kompilera det för att sen lägga ut det på din sida som en applet.
Till JavaScript behöver du en ordbehandlare och sen laddar du bara in sidan och du har fått något som fungerar (om inga löss har slunkit med).
Gör ett program för att räkna ut antal levnadsdagar. Fungerar sen för alla, inte bara för kungar och presidenter!
Finessen är att man kan integrera sitt program med webb-sidans text och grafik och sen låta "hela" världen ta del av vad man gjort. Den möjligheten har inte funnits tidigare i historien. Så låt oss göra historia i nuet!


Introduktion till JavaScript
Alla kan väl plussa på någonting med ett?!. Men hur gör man det det på Webben med JavaScript? Jo, så här:
function plusEtt(tal) {return tal + 1;}
Funktionen plusEtt() tar in ett tal, vilket som helst, lägger ett därtill och returnerar resultatet. Men vart tar resultatet vägen? Och varifrån kom talet tal? Låt oss titta på ett annat avsnitt av programmet.
En funktion som hämtar in och skriver ut

function raknaNu(){ talin=parseFloat(document.BRAFORM. SKRIVIN.value); talut=plusEtt(talin); document.BRAFORM.SKRIVUT.value= talut; }
Här är en ny funktion vid namn raknaNu. (Det gäller att undvika de svenska bokstäverna, å,ä,ö!)
På sidan finns en textruta som heter Skrivin, som finns i ett formulär, Form, en vanlig ingrediens på en webb-sida. Form:en är döpt till Braform. Första satsen i programmet (en sats är något som slutar med semikolon) så sparas talet som matats in i textrutan i en variabel döpt till talin.
Säg att en användare matar in talet 20. Allt som matas in blir till text, så kallade strängar, sånt som står mellan citationstecken. Så det som tas in är inte talet 20 utan strängen "20" .
För att det ska gå att räkna måste man göra om strängen till ett tal. Till det går det att använda parseInt() som gör om till heltal eller parseFloat() som gör om till decimaltal.
Efter det att strängen "20" passerat igenom funktionen parseFloat kommer den ut som talet 20 och sparas sen i variabeln talin. Funktionen plusEtt(talin) får ta hand om talins värde och lägga ett därtill och sen returnera resultatet: 21, som fångas upp och sparas i variabeln talut.
Nu gäller det att få ut resultatet, 21, på skärmen. Som tur är finns det en textruta som heter Skrivut, som man kan skriva ut resultatet i och det gör man med hjälp av den sista satsen i funktionen raknaNu.
Här kommer satsen som matar ut resultatet på skärmen med hjälp av textrutan Skrivut:
document.BRAFORM.SKRIVUT.value= talut;

Så här ser det ut på skärmen:
Skriv in ett tal:
Men hur kunde användaren mata in ett tal och efter att ha matat in talet begära en uträkning och hur kunde det finnas en textruta för utmatningen av resultatet?

I webb-sidan
Jo, allt detta finns på webb-sidan skapad med hjälp av vanlig HTML-kod. Så här ser koden ut:


Här går det att känna igen vissa namn. Skrivin är inmatningsrutan och Skrivut är utmatningsrutan. Däremellan finns det en knapp "button" att klicka, med texten "RÄKNA UT TALET + 1!".
Har man klickat knappen så reagerar ett JavaScript, som utlöser hela det tidigare beskrivna händelseförloppet. JavaScriptet för att utlösa den spännande händelsen att något ska ökas med ett, ser ut så här: onClick="raknaNu();"
En gråare variant, men till innehållet lika, kommer här (den fullständiga HTML-koden för vår sida):

Skriv av och spara som tex plusett.htm. Gå till Netscape, sen File/ File Open...
Har du skrivit in allt rätt har du fått ett eget litet "kalkylark"!
Om det smugit sig in något fel, så får du reda på det av Netscape och får dessutom lite tips om vad som gått snett.
Det finns mycket JavaScript på nätet och mycket som handlar om JavaScript, så gå tex till altavista och sök på JavaScript, så hittar du mer, mycket mer av både exempel och "do it yourself"-råd.
Gör något med JavaScript själv och låt dina elever testa en och annan formel i en trevlig miljö, som det går att dela med sig av i det världsomspännande klassrummet.
Skriv eller maila till Datorn i Utbildningen och tala om vad ni gjort och var ni finns på nätet. I nästa nummer hoppas vi då kunna publicera ett antal nya spännande adresser med JavaScript! Se vår webb-adress: www.haninge.kth.se/diu.

Gunnar Jutelius

KTH-Haninge, multimedia
E-post: Gunnar_Jutelius@lector.kth.se



Datorn i Utbildningen nr 1 1997. Artiklar ur Datorn i Utbidlningen är copyrightskyddade ©. De får användas för enskilt bruk. I övrigt får de enbart spridas efter överenskommelse med redaktionen. Vill du ha hela numret på papper, sänd en beställning via detta system!

[Åter till början av sidan]

Datorn i Utbildningen, Frejgatan 32, 113 26 Stockholm
Uppdaterad: 980730