HTML-tricks
Gör en levande hemsida med Javascript

Med Javascript får du en proffsigare och mer levande webplats. Vi lär dig lägga in rörliga knappar, byta ut bakgrundsfärgen samt visa tid och datum på din hemsida.

Text: Måns Jonasson moj@algonet.se

Javascript är ett enkelt scriptspråk. Det är lätt att lära sig grunderna, och dessutom är det väldigt användbart i kombination med HTML. Förutom namnet har Java och Javascript inte mycket gemensamt. Java är ett nytt programmeringsspråk, och är ungefär lika svårt att lära sig som C++. Skillnaderna är flera. Medan Java kommer till din webläsare som små programsnuttar som körs i egna rutor är Javascript inbäddat i själva HTML-koden, och kan integreras totalt med din vanliga hemsida. Vill du lära dig att lägga in egen text i statusraden när dina besökare klickar på en länk, eller att byta ut en bild när besökaren pekar på den? Läs vidare om hur man använder Javascript!

Datum och tid
Att lägga till datum och tid på sin sida är mycket lätt. Men tänk på att det är tid och datum på användarens dator som visas, inte den där din sida ligger.
För att tala om för webläsaren att den inte ska skriva ut hela scriptet på sidan måste vi lägga det inom en tag, <SCRIPT>. För att dessutom hindra äldre webläsare (som ju inte känner igen taggen <SCRIPT> och därför hoppar över den) från att skriva ut det som ligger mellan <SCRIPT> och </SCRIPT> måste vi lägga hela Javascriptet inom kommentars-taggar. Det vill säga: vi börjar scriptet med <! och slutar det med >.

<script language=Javascript>
<!
document.write ( " Datum och Tid hos dig just nu är " + Date ( ) )
//>
</script>

onMouseOver byt text i statusraden
En ofta använd funktion i Javascript är att låta webläsaren byta ut det tråkiga "länk.html" som visas i statusraden längst ned i fönstret när du pekar på en länk (se exemplet till höger). Med syntaxen <A HREF="sida.html" onMouseOver=" window.status=' Cool filmmusik-sida ' ; return true "> <IMG SRC="bild.gif"> </A> byter du ut "sida.html" mot "Cool filmmusik-sida" i statusraden. Det ser lite snyggare ut och kan vara till hjälp för dina besökare när du gör navigering med hjälp av bilder. Tänk bara på att vara tydlig när du skriver din text, skriver du fel eller otydligt är det lätt hänt att användaren hamnar fel.

Bakgrundsfärgsbyte
Med Javascript kan du låta dina användare själva välja vilken bakgrundsfärg din sida ska ha. Kopiera följande script och lägg in det någonstans på din sida. Du kan själv lägga till eller ta bort rader med färg i scriptet. Tänk bara på att inte låta användaren välja samma färg till bakgrunden som texten på din sida har det blir lite svårläst då.

<FORM>
<SELECT name=clr onChange="document.bgColor=this.options[this.selectedIndex].value">
<OPTION VALUE="#000000">Svart
<OPTION VALUE="#FFFF00">Gul
<OPTION VALUE="#FF0000">Röd
<OPTION VALUE="#0000FF">Blå
<OPTION VALUE="#DDDDDD">Grå
<OPTION VALUE="#FFFFFF" SELECTED>Vit
</select>
</form>
Oftast lägger man Javascripten i början av sitt HTML-dokument för att scriptet ska laddas först. Gör man inte det kan man få felmeddelanden när man anropar scriptet senare i dokumentet.

Bildbyte
Många snygga webplatser har en funktion som byter ut en bild när musen pekar på den (exempel från InternetGuidens webplats till höger). Detta är väldigt användbart om man till exempel vill göra snygga och funktionella menyer. Det här scriptet är långt, men kopiera det rakt av från förstasidan på http://www.internetguiden.com eller skriv av det härifrån (se rutan till höger; strunta dock i mina kommentarer då, de som ligger innanför hakparanteser).
Här kan behövas förklaringar innan vi kör igång. Vad scriptet egentligen gör är alltså att det byter ut en bild mot en annan när muspekaren står på den. I det här fallet kallar vi bilderna bild1.gif och bild2.gif, och vi vill att bild1 ska bytas mot bild2 när musen pekar på den.
Det här fungerar i skrivande stund bara i Netscape 3 och 4, men förhoppningsvis kommer Explorer 4 att ha lagt sig till med denna funktion eftersom så många använder den.

Följande script läggs alltså först i HTML-koden, men efter <BODY>-taggen.

<SCRIPT LANGUAGE = "JavaScript">
<!

browserName = navigator.appName;
browserVer = parseInt(navigator.appVersion);
if (browserName == "Netscape" && browserVer >= 3) version = "n3";
else version = "x";

if (version == "n3")
{
bild2 = new Image(91, 18); [bredd och höjd på bild 2]
bild2.src = "bild2.gif"; [namn på bild 2]
bild = new Image(91, 18); [bredd och höjd på bild 1]
bild.src = "bild1.gif"; [namn på bild 1]
}

function img_act(imgName)
{
if (version == "n3")
{
imgOn = eval(imgName + "2.src");
document [imgName].src = imgOn;
}
}

function img_inact(imgName)
{
if (version == "n3")
{
imgOff = eval(imgName + ".src");
document [imgName].src = imgOff;
}
}

//>
</SCRIPT>

Nu ska du anropa scriptet när muspekaren rör sig på bilden. Det gör med följande kod:

<A HREF="sida.html"
onMouseover = "img_act('bild')"
onMouseout = "img_inact('bild')">
<IMG SRC="bild1.gif" WIDTH="91" HEIGHT="18">
</A>

... alltså precis som en vanlig länk, fast du lägger till "onMouseover" och "onMouseout" i "<A HREF"-delen. De gör så att scriptet "img_act" eller "img_inact" utförs när pekaren träder in över eller lämnar en bild.

Mera om Javascript:

Annica Tigers HTML-skola
http://www.atiger.pp.se
Introduktion till Javascript
http://www.monkeytoys.pp.se/javascript/javascr.htm
JavaScript World
http://www.mydesktop.com/internet/javascript/
JavaScript Warehouse
http://www.ezl.com/~mlile/javascript/
JavaScript Index
http://www.webreference.com/jsindex/
JavaScript Authoring Guide
http://home.netscape.com/eng/mozilla/Gold/handbook/javascript/index.html
Fråga en Javascript-expert
http://www.inquiry.com/techtips/js_pro/