Knappar

Vi fortsätter med javaskript som placeras direkt i BODY-elementet. Nu handlar det om knappar – klickbara knappar av den sort som brukar visas tillsammans med formulär (Skicka, Rensa, OK och så vidare) men som kan användas till mycket annat också.

Det här är en sådan knapp:

Det går att klicka på den, men det händer ingenting. Koden till den här knappen ser ut så här:

<FORM> 
<INPUT type="button" value="En knapp" name="knappen"> 
</FORM>

<FORM> ... </FORM>
För att kunna använda en knapp, bör vi först ha en FORM-tagg. Allt som handlar om knappen placerar vi i denna FORM-tagg.

Att jag skriver "bör" i stället för "måste" beror på att det här fungerar olika beroende på vilken webbläsare man har. Man kan strunta i FORM-taggen om sidan bara skall läsas i Internet Explorer eller Netscape 6. Dessa båda webbläsare är relativt förlåtande när det gäller slarvig HTML-kod.

Men med Netscape 4 är det en helt annan sak. Det räcker inte med att koden inte fungerar; knappen visas inte ens!

Alltså: Använd FORM-taggen.

<INPUT>
Det här gör att vi kan skapa någon typ av "inmatningsyta", i det här fallet en knapp.

type="button"
Vi anger här att det skall vara en knapp – inte en bild, en kryssruta eller något annat av allt det som kan användas i FORM-taggar.

value="En knapp"
Här anger vi den text som skall visas på knappen.

name="knappen"
Om man vill kan man ge just den här knappen ett namn. Det är inte absolut nödvändigt, men kan vara bra att ha.

Så här långt är det bara vanlig HTML-kod. Men nu skall vi se till att det händer någonting när man klickar på knappen. Det är här javaskriptet kommer in.

Precis som i förra avsnittet skall vi använda en händelsehanterare, nämligen onClick. Som namnet säger tar onClick hand om händelsen "klick med musen".

I förra avsnittet såg vi att syntax för händelsehanteraren är – förenklat uttryckt:

händelsehanterare=gör det här; gör det nu

Eller:

onMouseover="window.status='Hej, här nere!'; return true"

Nu kan vi använda nästan samma kod för att få något att hända när man klickar på knappen. Vi placerar helt enkelt onClick-hanteraren i INPUT-taggen:

<FORM> 
<INPUT type="button" value="Pröva!" name="knappen" onClick="window.status='Du klickade på knappen'; return true"> 
</FORM>

Genom att ändra javaskriptet kan du få knappen att göra mycket annat. Alla knapparna nedan använder samma grundläggande HTML-kod. Det som skiljer dem åt är texten i value="..." plus förstås det inbakade javaskriptet som säger vad klicket skall leda till.

Öppna en sida – använd knappen som länk
Du kan till exempel öppna en annan sida med den – alltså använda knappen som länk. För att öppna en annan sida har jag använt den här koden. Mellan de enkla citationstecknen placerar du sökvägen till sidan som du vill öppna:

onClick="window.location='extra/sida1.html'; return true"

Byta bakgrundsfärg
Eller låta besökaren byta färg på webbsidan. Observera att detta inte fungerar om sidan är kopplad till en stilmall som bestämmer bakgrundsfärg och/eller bakgrundsbild.

Du kan ange färgerna som här med hexvärden, men även använda till exempel godkända namn som du då bara sätter inom citationstecknen utan brädgårdstecknet ('yellow'):

onClick="document.bgColor='#FFFFDF'; return true"
onClick="document.bgColor='#FBF9FA'; return true"

Skicka e-post
Följande kod skickar e-post till mig, med ämnesraden ifylld. Du byter förstås till din egen e-postadress och det du vill ha i ämnesraden (subject):

onClick="parent.location='mailto:helledal@algonet.se?subject=Jag lär mig JavaScript'; return true"

Oftast fungerar knappar även om du inte tar med slutsnutten "; return true". Men den gör inte någon skada och det kan vara klokt att ta med den ändå.

Vi tar en knapp till, medan vi ändå är i farten. Den här knappen skickar besökaren ett steg bakåt, till föregående sida – alltså den sida som var öppen innan han kom till sidan med knappen.

Koden ser ut så här:

<FORM>
<INPUT TYPE="button" name="knapp5" value="Ett steg bakåt" onClick="history.back()">
</FORM>

onClick="history.back()"
Här säger skriptet att händelsen "klick på knappen" skall skicka besökaren ett steg bakåt i webbläsarens "history". Knappen fyller alltså exakt samma funktion som när du klickar på bakåtpilen i webbläsarens verktygsrad. Enklare kan det knappast bli. Men man kan krångla till det ...

onClick="history.forward()"
Den har varianten leder till att besökaren skickas ett steg framåt i webbläsarens "history" – alltså samma funktion som framåtpilen i webbläsarens verktygsrad.

För att det här skall fungera krävs naturligtvis att det finns en sida att gå till – det vill säga att besökaren har varit på en sida och backat därifrån. I annat fall händer ingenting alls när man klickar på en knapp som har den här funktionen.

onClick="history.go(-1)" och onClick="history.go(1)"
Genom att byta history.back eller history.forward mot history.go kan du bestämma hur många sidor bakåt eller framåt besökaren skall skickas. Siffran i parentesen anger antalet sidor. Sätt ett minustecken framför siffran för att skicka besökaren bakåt.

© SupportData.Net