Lær Javascript 3: Afsluttende Javascript

Afsluttende JavaScript

I denne sidste artikel i Computer PCs JavaScript-kursus fortæller Kristian Hansen, hvordan man kan lade JavaScript-programmer styre formularer og i øvrigt integrere dem med sine HTML-dokumenter.

De tidligere afsnit af dette JavaScript-kursus har gennemgået, hvordan man skriver sine egne JavaScript-funktioner og programmer, og hvordan man gør brug af de, der allerede findes i JavaScript, men det har altid været enkeltstående programmer. I denne del af kurset vil det blive gennemgået, hvordan man knytter sine JavaScript-funktioner til HTML-dokumenterne.

Formularer

Før scriptsprogene blev opfundet, skulle man bruge et CGI-program til at håndtere formularer. Stadigvæk er det ikke alting, scriptene kan klare, men når det kommer til at kontrollere indholdet af formularen, er scriptsprogene ret uovertrufne.

Der er ikke store forskelle mellem en formular, der skal håndteres af CGI, og en formular, der skal håndteres af eksempelvis JavaScript. Blot skal man være opmærksom på, at alle elementer i formularen – også formularen selv – skal have et navn. Det vil sige, at man skal angive name-parametren i alle html-kommandoerne. Eksempel 1 viser, hvordan det kan gøres. Her er formularen – i tråd med sund fornuft – kaldt formular. De to checkbokse, som brugeren kan markere, hedder henholdsvis lyd og billeder. Særlig opmærksomhed skal imidlertid rettes på den linie, hvor knappen bliver oprettet. Udover navn og titel skal der angives, hvilken JavaScript-funktion der skal udføres, når man trykker på knappen. I dette tilfælde er det visSide.

Objekter

Formålet med visSide-funktionen er at evaluere brugerens valg. For at kunne gøre det, er det nødvendigt fra JavaScript-programmet at kunne bruge de informationer, der findes i formularen. Heldigvis optræder selve formularen som et objekt, og som det er blevet gennemgået tidligere, kan indholdet af objekter tilgås ved at skrive objekt-navnet efterfulgt af et punktum. Objektet er i dette tilfældet formularens navn – formular. Herefter skal man angive navnet på det element i formularen, man ønsker informationer om. Her er det henholdsvis lyd og billeder. Eftersom disse objekter er checkbokse, har de en variabel ved navn checked. Denne angiver, om den pågældende checkboks er markeret eller ej. Det vil sige, at man for at se, om brugeren har markeret billeder-feltet, skal skrive formular.billeder.checked.

Dette foretages i visSide-funktionen. I den første sammenligning bruges det kryptiske dobbelt-og-tegn. Det angiver blot, at begge betingelser skal være opfyldt (logisk og). Hvis blot en af betingelserne skulle have været opfyldt (logisk eller), skulle man have angivet || i stedet. Bortset fra det er det relativt simpelt ved hjælp af en række if-sætninger at finde ud af, hvilken side, der skal vises. Herefter er spørgsmålet bare, hvordan siden vises. Som bruger kunne man bare have skrevet adressen i Location-feltet, og JavaScript har et objekt, der svarer til dette felt – det hedder location. Dette objekt har en variabel ved navn href. Denne variabel angiver, hvilken side der vises i øjeblikket, og ved at tildele denne variabel en værdi, kan man skifte side. Man kan enten angive en absolut sti til den nye side eller en sti, der er relativ til den aktuelle side. I eksempel 1 er det sidste tilfældet.

Mere om formularer

Formularer består imidlertid ikke kun af knapper og checkbokse, og det vil være for omfattende at gennemgå alle de forskellige elementer her. Dog kan det siges, at man på langt de fleste, kan angive, at der skal udføres JavaScript-funktioner, når en bestemt begivenhed indtræffer. Et eksempel er ved hjælp af OnClick-parametren, som anvendes i eksempel 1. Andre eksempler er OnBlur, OnFocus, OnSelect, OnChange, OnClick, OnDblClick, OnMouseDown, OnMouseUp, OnMouseOver, OnMouseMove, OnMouseOut, OnKeyPress, OnKeyDown og OnKeyUp. Betydningen af de fleste begivenheder burde være indlysende. Dog skal måske OnBlur og OnFocus beskrives yderligere. OnBlur udføres, når et felt ikke længere er markeret. For eksempel hvis brugeren flytter markøren ved hjælp af musen eller ved hjælp af tabulatorknappen. OnFocus bliver udført, når feltet atter modtager markøren.

De forskellige elementer, HTML stiller til rådighed i formularer, er temmelig forskellige, og derfor bliver deres opbygning som JavaScript-objekter også forskellig. Det er således ikke alle elementer i en formular, der har de samme variable. For eksempel har elementer, som man kan taste tekst ind i, en value-variabel, der indeholder den tekst, der er blevet indtastet. Ligeledes kan skjulte elementer – input type = hidden – også bruges, og også deres værdi tilgås gennem value-variablen.

Eksempel 2 viser, hvordan man kan bede brugeren indtaste navn og adresse, og hver gang et felt forlades kontrollere, om feltet er udfyldt.

Eksemplet viser også, hvordan focus-metoden kan bruges. Den kan kaldes på alle objekter i en formular og sørger for, at markøren flyttes hen til feltet. I dette eksempel bruges den til at sikre, at brugeren ikke kan forlade et felt, før det er udfyldt.

Goddag og farvel

Hvis man gerne vil have en funktion udført, så snart ens side bliver indlæst, kan man bruge OnLoad-parametren i HTMLs BODY-kommando. Her kan man – ligesom ved OnClick og de andre parametre – angive, hvilken JavaScript-funktion der skal udføres. Hvis man gerne vil have en funktion udført, når brugeren forlader ens side, kan man bruge OnUnload. Eksempel 3 viser, hvordan man kan sige pænt goddag og pænt farvel til brugeren.

Fading

OnLoad og OnUnload kan også bruges til andet end at vise beskeder. For eksempel kan man skabe effekten af at blive fadet ind og ud af siderne. Eksempel 4 viser, hvordan dette kan gøres. Eksemplet indeholder to funktioner – fadeIn og fadeOut – der henholdsvis bruges, når siden indlæses, og når den forlades. fadeIn gennemløber en for-løkke startende ved 0, der er farven sort. Herefter lægges den hexadecimale værdi 010101 til hver gang. Det vil sige, at farven for hvert gennemløb af løkken bliver en gråtone lysere. Grunden, til at der arbejdes med hexadecimale værdier, er, at JavaScript arbejder med farver på samme måde som HTML. Det er muligt at angive farver som decimaltal, men det er lidt nemmere at følge med i de hexadecimale. Inde i selve løkken foretages ændringen af baggrundsfarven. Det sker ved at ændre værdien af document.bgColor. Dette svarer til den bgcolor, der kan sættes i BODY-kommandoen.

Funktionen fadeOut har den modsatte effekt. Her startes fra hvid og fades mod sort.

Det afsluttende eksempel

Ligesom VBScript-kurset afsluttes også dette kursus med et eksempel. Igen drejer det sig om, at brugeren kan indtaste en tekst, der vil blive vist rullende i statusvinduet. Derudover er det muligt for brugeren at angive, den hastighed teksten skal rulle med. Dertil bruges to tekstfelter – tekst og hastighed. Når markøren forlader disse felter kontrolleres det, at der er indtastet noget i dem, og i hastigheds tilfælde kontrolleres det også, at det, der er indtastet, er et tal. Det gøres ved hjælp af en funktion med et kryptisk navn – isNaN. Det betyder is not a number og angiver, om den tekst, funktionen får med som parameter, ikke er en talværdi.

Når brugeren klikker på Opdatér-knappen, skal teksten begynde at blive vist i browserens statuslinie nederst i vinduet. Inden dette sker bliver indholdet af formularen kopieret over i globale variable. Det betyder, at visningen af teksten vil fortsætte korrekt, selvom brugeren vælger at ændre indholdet af formularen. Først når brugeren igen trykker på Opdatér, vil indholdet af formularen medføre ændringer i statuslinien.

Til slut i startClick-funktionen kaldes setTimeout-funktionen på window-objektet. Denne funktion sørger for at udføre en anden funktion efter et givent interval. I dette tilfælde er det funktionen scroll(), der skal kaldes, og derfor angives denne som første parameter. Funktionens anden parameter er det antal millisekunder, der skal gå, før funktionen kaldes. Her angives hastighed, da denne variabel jo indeholder den hastighed, brugeren indtastede i formularen.

Det er scroll-funktionen, der foretager selve arbejdet. Det er her, statuslinien opdateres. Først skal man imidlertid beregne, hvor stor en del af teksten, der skal vises. Hvis hele teksten var vist i forvejen, skal der ingenting vises – så starter man forfra – ellers skal der vises et tegn mere end sidste gang. Denne kontrol foretages af funktionens indledende if-sætning. Herefter bliver statuslinien opdateret. Statuslinien i browseren svarer til objektet window’s status-variabel. Derfor kan man angive, hvilken tekst der skal vises i statuslinien ved at tildele window.status en værdi. Det sidste, der foretages i funktionen er et kald af setTimeout for at sikre, at metoden bliver kaldt igen.

Videre med JavaScript og Java

Computer PCs JavaScript-kursus er nu slut, men det betyder ikke, at man er færdig med at lære. Allieret med Computer PCs JavaScript-opslagshæfte kan man selv gå på opdagelse i sproget, prøve sig frem og derved blive endnu bedre til JavaScript. Hæftet kan – sammen med opslagshæfter om HTML 4 og VBScript – bestilles på kuponen andetsteds i bladet.

Hvis man gerne vil videre med mere alvorlig programmering som eksempelvis Java, kan man bruge den Java-compiler, der ligger på denne måneds cd-rom. Den er udviklet af Sun, der har defineret Java-sproget, og er fuldstændig gratis at bruge. Der er masser af information – og også en online lærebog – på Javas officielle hjemmeside: http://www.javasoft.com. Derudover findes der en masse litteratur – både i trykt form og på Internet – der gør det nemt at lære at programmere i Java. Derudover skal man jo ikke glemme, at selvom JavaScript og Java ikke har ret meget til fælles, er det jo altid en fordel at have lært et andet programmeringssprog, når man skal lære et nyt. Derfor: Held og lykke med udviklingen af JavaScript og Java-programmer!

Eksempel 1

<HTML>

<HEAD><TITLE>Eksempel 1</TITLE><HEAD>

function visSide()

{

if (formular.lyd.checked && formular.billeder.checked)

location.href = “lyd_og_billeder.html”;

else

if (formular.lyd.checked)

location.href = “lyd.html”;

else

if (formular.billeder.checked)

location.href = “billeder.html”;

else

location.href = “kedelig.html”;

}

</SCRIPT>

<BODY>

Vil du både have lyd og billede på siden?

Det kan gøre siden langsommere at indlæse.

<P>

<INPUT TYPE = CheckBox NAME = billeder>Billeder<BR>

</FORM>

</BODY>

</HTML>

Eksempel 2

<HTML>

<HEAD><TITLE>Eksempel 2</TITLE></HEAD>

function kontrollerNavn()

{

if (formular.navn.value == “”)

{

alert(“De skal indtaste Deres navn”);

formular.navn.focus();

}

function kontrollerAdresse()

{

if (formular.adresse.value == “”)

{

alert(“De skal indtaste Deres adresse”);

formular.adresse.focus();

}

function knappeClick()

{

kontrollerNavn();

kontrollerAdresse();

}

</SCRIPT>

<BODY>

<TABLE>

<TR>

<TD>Adresse:</TD>

<TR>

</TABLE>

</FORM>

</BODY>

</HTML>

Eksempel 3

<HTML>

<HEAD><TITLE>Eksempel 3</TITLE></HEAD>

function velkommen()

{

alert(“Velkommen til min hjemmeside. Jeg håber, du må hygge dig…”);

}

function farvel()

{

alert(“Tak for besøget. Kom snart igen.”);

}

</SCRIPT>

Tjah…det var så den hjemmeside…

</BODY>

</HTML>

Eksempel 4

<HTML>

<HEAD><TITLE>Eksempel 4</TITLE></HEAD>

function fadeIn()

{

for (farve = 0; farve < 0xFFFFFF; farve = farve + 0x010101)

document.bgColor = farve;

}

function fadeOut()

{

for (farve = 0xFFFFFF; farve > 0; farve = farve – 0x010101)

document.bgColor = farve;

}

</SCRIPT>

</BODY>

</HTML>

Eksempel 5

<HTML>

<HEAD><TITLE>Det afsluttende eksempel</TITLE></HEAD>

// Globale variable

s = “”;

scrollTekst = “”;

hastighed = 0;

// Slut på globale variable

function kontrollerTekst()

{

if (indstillinger.tekst.value == “”)

{

alert(“Indtast venligst en tekst, inden De forlader feltet.”);

indstillinger.tekst.focus();

}

function kontrollerHastighed()

{

if (indstillinger.hastighed.value == “”)

{

alert(“Indtast venligst en hastighed, inden De forlader feltet.”);

indstillinger.hastighed.focus();

}

if (isNaN (indstillinger.hastighed.value))

{

alert(“Indtast venligst hastigheden ved hjælp af tal.”);

indstillinger.hastighed.focus();

}

function startClick()

{

s = “”;

scrollTekst = indstillinger.tekst.value;

hastighed = indstillinger.hastighed.value;

window.setTimeout (“scroll();”, hastighed);

}

function scroll()

{

if (s.length == scrollTekst.length)

s = “”;

else

s = scrollTekst.substring(0, s.length + 1);

window.status = s;

timeOut = window.setTimeout (“scroll();”, hastighed);

}

</SCRIPT>

<BODY>

<TABLE>

<TD>Indtast den tekst, der skal vises i statusvinduet</TD>

<TR>

<TD>Indtast hastigheden i millisekunder</TD>

<TR>

</TD>

</TABLE>

</BODY>

</HTML>

Comments are closed.

Biblioteket

Relaterede links

Sider

Lær Javascript 3: Afsluttende Javascript