Inledning Gör en rullgardinsmeny

JavaScript - lägg in skriptkoden på sidan

JavaScript läggs in i HTML-koden, men litet olika beroende på vad koden skall utföra. 

Grundläggande är att nästan all javaskriptkod skall läggas innanför <SCRIPT> ... </SCRIPT>, och man kan ha flera SCRIPT-block på en och samma HTML-sida.

Om skriptkoden skall anropa en funktion, måste denna funktion vara definierad innan den anropas. Därför definierar man vanligen alla funktioner redan i HEAD-delen av sidan, till exempel så här:

<HEAD>
<TITLE>Titeln</TITLE>
<SCRIPT Language="JavaScript">
function Hej() {
alert("Hej och välkommen");
}
</SCRIPT>
</HEAD>

Lägg märke till att raden där funktionens namn definieras slutar med en klammerparentes - { - och att hela definitionen avslutas med en klammerparentes - } - vänd åt andra hållet. Normalt avslutas dessutom varje rad i javaskriptet med ett semikolon - ;

Här är funktionen Hej() definierad och kan anropas från sidan. Nu skall vi lägga in javaskriptkod på sidan så att funktionen Hej() verkligen anropas:

<BODY>
<SCRIPT LANGUAGE="JavaScript">
Hej();
</SCRIPT>
<P>Kul att du ville titta in!</P>
</BODY>

Pröva här så ser du vad den här lilla koden leder till. Och så här går det till:

  • I HEAD-delen definieras funktionen Hej()
  • Denna funktion skall öppna en meddelanderuta (alert) och i den skriva "Hej och välkommen"
  • Funktionen gör ingenting alls förrän den anropas, men den är färdig att användas redan när sidan laddas.
  • I BODY-delen kommer ytterligare ett block JavaScript. Det innehåller en enda kodrad.
  • Denna rad anropar funktionen Hej(), som öppnar meddelanderutan - du ser att raden slutar med ett semikolon.
  • Sedan händer ingenting mer förrän besökaren har stängt meddelanderutan genom att klicka på knappen OK.
  • När meddelanderutan är stängd, avslutas funktionen och "kommandot" lämnas tillbaka till raden efter anropet.
  • Där slutar SCRIPT-blocket och nästa rad skriver ut "Kul att du ville titta in!" på skärmen.

Kod som inte kräver någon definition, och kod som kanske inte ens måste läggas inom SCRIPT-taggarna, kan man ofta placera precis där den skall användas. Ett exempel:

Klicka på "hemlighet" i detta: Min ålder är en hemlighet som jag aldrig avslöjar!

Det här görs med den lilla skriptsnutten nedan. 

<P>Min ålder är en <A HREF="javascript:alert('19 år - usch, så jag ljuger');">hemlighet</A> som jag aldrig avslöjar!</P>

Här skall du observera placeringen av citationstecknen. Ytterst sitter ett par dubbla citationstecken ("). Omkring det som skall stå i meddelanderutan sitter enkla citationstecken ('). Jag kunde ha gjort tvärtom; det viktiga är att man är konsekvent. Skriptet måste få veta var en sak slutar och nästa börjar.

Inmatningsrutan

Vi skall pröva ytterligare en funktion och med den ta fram den så kallade inmatningsrutan (prompt), en av de fördefinierade dialogrutorna i JavaScript. Så här kan man definiera funktionen - den skall som andra funktioner placeras mellan HEAD-taggarna:

<SCRIPT LANGUAGE="JavaScript">
function Inmatningsrutan() {
hejhej = prompt("Hej, vem är du?", "gäst");
if(hejhej)
alert("Du mycket välkommen till min sida, " + hejhej);
}
</SCRIPT>

Funktionen Inmatningsrutan() gör följande:

  • hejhej = prompt... anger att "Hej, vem är du ?" skall stå som fråga i inmatningsrutan och att det förvalda värdet i den skall vara "gäst"
  • if(hejhej) undersöker om det finns något i hejhej - besökaren kan ju ta bort det förvalda värdet eller klicka på Avbryt.
  • om hejhej är tomt hoppas nästa sats över och kodkörningen återgår till platsen omedelbart efter att funktionen anropades
  • om hejhej inte är tomt utförs satsen "alert..." - meddelanderutan kommer upp.
  • i denna visas "Du är mycket välkommen till min sida, " och till detta läggs innehållet i hejhej
  • körningen avbryts tills besökaren har tryckt på OK
  • därefter återgår kodkörningen till platsen omedelbart efter att funktionen anropades
Över till anropet av funktionen

Här har vi ett formulär som innehåller en knapp (TYPE="button"). På knappen står det "Öppna inmatningsrutan" (VALUE="..."). Den här koden skall ligga mellan BODY-taggarna, på den plats där knappen skall visas.

<FORM>
<INPUT TYPE="button" VALUE="Öppna inmatningsrutan" onClick="Inmatningsrutan();">
</FORM>

Händelsehanteraren onClick gör att när besökaren klickar på knappen, anropas funktionen Inmatningsrutan().

Flera funktioner i samma SCRIPT-taggar

Inget hindrar att du lägger in båda de ovanstående funktionerna i samma par av SCRIPT-taggar. Se bara till att varje funktion definieras för sig och att de inte har samma namn.

SDN:s skriptbibliotek

Alla JavaScript som du hämtar från skriptbiblioteket innehåller noggranna anvisningar om hur du lägger in skriptkoden på din sida. Skriptbiblioteket öppnas i ett nytt webbläsarfönster, så att du lätt kan återvända hit.

HTML-skolans skript

När det gäller skripten som du lär dig använda i HTML-skolan, kommer jag att förklara dels hur du lägger in dem på sidan, dels varför de skall ligga så. Tanken är förstås att du skall kunna tillämpa de här kunskaperna även på andra skript, sådana som du till exempel hämtar på Internet och kanske själv ändrar för att de skall passa bättre på din sida.

Du har nu lärt dig
  • Hur en funktion definieras
  • Hur en funktion anropas
  • Hur en meddelanderuta kan öppnas, på två olika sätt
  • Hur en inmatningsruta kan öppnas

Nu är det dags för övningsuppgifter och kunskapstest. Sedan skall vi ge oss på de riktigt praktiska skripten.

Inledning Gör en rullgardinsmeny

© SupportData.Net