I forrige nummer gennemgik Kristian Hansen de grundlæggende begreber i JavaScript-programmering. Denne gang ser han på, hvordan man kan forbedre sin hjemmeside ved at kombinere de indbyggede JavaScript-funktioner med sine egne.
Efter at have læst forrige afsnit af JavaScript-kurset skulle man kunne skrive sine egne funktioner. De funktioner, der blev gennemgået i det afsnit, var imidlertid ikke særligt avancerede. Denne gang vil det blive gennemgået, hvordan man skriver funktioner, der kan bruges til noget. Der er imidlertid ingen grund til at opfinde den dybe tallerken igen. Derfor vil mange af de indbyggede JavaScript-funktioner blive gennemgået – de er nemme at bruge, og så er man fri for at programmere det hele selv.
Afprøvning af sine funktioner
Der er imidlertid ikke meget ved at skrive en funktion, hvis man ikke kan få lov til at se, hvordan den virker. Samarbejdet mellem HTML-dokumenter og JavaScript-funktioner vil blive gennemgået i detaljer i næste afsnit – dette afsnit vil bare forklare, hvordan man sætter programmet ind i et HTML-dokument og afprøver det.
Til at lave HTML-dokumentet kræves en HTML-editor. Har man ikke en rigtig HTML-editor, kan man nøjes med Notesblok fra Windows 95. Derudover skal man bruge en browser til at vise dokumentet. Her anbefales Netscape Navigator 4eller Internet Explorer 4. Man må regne med, at visse funktioner enten ikke kan bruges eller opfører sig anderledes end forventet i en af browserne. Dettes skyldes, at der er forskelle mellem Netscapes JavaScript og den JScript, som Microsoft anvender. Internet Explorer 4 ligger på månedens cd, og Netscape Navigator 4 kan hentes på http://www.netscape.com. Ældre versioner af de to browsere kan også bruges, men så skal man forvente, at mange JavaScript-funktioner ikke kan bruges.
Når man har programmerne i orden, kan man begynde at skrive det HTML-dokument, der skal indeholde JavaScript-programmet. Det meste af HTML-dokumentet skrives som alle andre HTML-dokumenter. Blot skal man efter <BODY>-kommandoen bruge <SCRIPT>-kommandoen til at angive, at det efterfølgende er et program skrevet i et scriptsprog. I dette tilfælde et sproget JavaScript, og man skriver derfor <SCRIPT Language = JavaScript>. Herefter kan man skrive de funktioner, der udgør programmet, og endeligt afslutte scriptsektionen med at kalde en eller flere af funktionerne. Som så mange andre HTML-kommandoer, skal <SCRIPT>-kommandoen afsluttes – det gøres med </SCRIPT>. De kommandoer, der står inde i <SCRIPT>-kommandoen, men ikke inde i en funktion, udføres så snart hjemmesiden indlæses.
Eksempel 1 viser, hvordan man integrerer et JavaScript i et HTML-dokument.
Et godt spørgsmål
Eksempel 1 viser også, hvordan man stiller brugeren et spørgsmål. Det gøres ved hjælp af prompt-funktionen. Denne funktion tager et eller to parametre. Det første er det spørgsmål, der skal stilles. I dette tilfælde “Hvad er dit navn?”. Derefter kan man angive endnu en tekststreng – denne angiver, den tekst, der skal vises i inputfeltet, inden brugeren indtaster noget. I dette tilfælde angives her “Anonym”.
prompt-funktionen returnerer en tekststreng, der indeholder det, som brugeren indtastede. Hvis brugeren vælger annuller, returneres en tom streng (“”).
Et ligeså godt svar
Eksemplet fortsætter med at byde brugeren velkommen til ens hjemmeside. Det gøres ved hjælp af funktionen alert. Udtrykket alert lyder lidt afskrækkende, men funktionen kan bruges til andet end at give advarsler – den kan også bruges til helt almindelige beskeder.
Som det ses af skærmbillederne, får alle vinduer fra JavaScript overskriften Microsoft Internet Exploerr (i Netscape Navigator får de overskriften JavaScript dialog). At man ikke – ligesom i VBScript – kan ændre overskriften på vinduerne, skyldes JavaScript og VBScripts forskellige sikkerhedsopfattelser. JavaScript ser det som en trussel, at man kan ændre overskriften og derved – for eksempel – lede folk til at tro, at de indtaster deres kontonummer i deres homebanking-system, mens de i virkeligheden gør det på en suspekt fyrs hjemmeside.
Et nemt spørgsmål
Nogle spørgsmål kræver ikke, at brugeren indtaster et svar, men bare at vedkommende tager stilling til spørgsmåler. Det kan for eksempel være, om brugeren vil fortsætte en bestemt funktion. Et sådan spørgsmål kan typisk besvares med OK eller Annuller. Funktionen confirm viser en dialogboks med netop disse knapper, og som det ses af eksempel 2 returnerer funktionen enten sandt eller falsk – true eller false – alt efter, om brugeren vælger OK eller Annuller. Hvis brugeren trykker på escape, opfattes det, som om vedkommende valgte annuller.
Dynamiske hjemmesider
En af de interessante muligheder, JavaScript stiller til rådighed, er dynamiske hjemmesider. Dette skal ikke forveksles med dynamisk HTML, der er en helt anden historie, som er blevet gennemgået tidligere i kurset.
Dynamiske hjemmesider vil sige, at hjemmesiden tilpasser sig brugerens valg. Faktisk er det muligt at lave en hjemmeside, som er fuldstændigt genereret af et JavaScript-program. Eksempel 3 viser en funktion, der skriver en fødselsdagshilsen ud i et nyt vindue. Som det ses, kan man i writeln-funktionen angive HTML-kode, som når man skriver HTML-sider. Man kan imidlertid også klare det på en anden måde – det ses af eksempel 4. Det er ved at behandle udskriften som tekststrenge, og herefter kalde bestemte metoder på disse. I dette eksempel er det italics og bold. De svarer henholdsvis til HTML-kommandoerne <I> og <B>. Andre lignede metoder er small, strike, sub, og sup.
Eksemplet her sender udskriften til et nyt vindue, men man kan også udskrive til det vindue, JavaScript-programmet befinder sig i. Så skal man blot skrive document.write eller document.writeln i stedet.
Datoer
Som det blev beskrevet i den første artikel om JavaScript, er det ikke helt så nemt at arbejde med datoer i JavaScript som det er i VBScript. Det er Date-objektet, der i JavaScript bruges til at repræsentere en dato. Man opretter et nyt Date-objekt ved at skrive new Date(). Objektet vil så repræsentere det aktuelle tidspunkt. Hvis man blot vil udskrive det aktuelle tidspunkt er det nemt – så kan man bare udskrive Date-objektet. Dette er vist i eksempel 5. Hvis man vil oprette et Date-objekt, der repræsenterer et andet tidspunkt end det nuværende, skal man angive dette som parameter. Dette kan gøres på flere forskellige måder. For eksempel som en tekststreng, ligesom den Date-objektet selv udskriver – new Date (“December 24, 1998, 00:00:00”). Man kan også nøjes med at angive datoen og intet klokkeslæt. Det gøres i formatet år, måned, dato. Bemærk, at månederne nummereres fra 0. Det vil sige, at new Date(98, 11, 24) angiver juleaften 1998. Endelig kan man vælge at angive både dato og klokkeslæt, men som en række parametre i stedet for én streng: new Date (98, 11, 24, 0, 0, 0). De sidste tre tal angiver tidspunktet som timer, minutter og sekunder.
Det kunne nu også være rart at kunne arbejde med datoer. Især i disse tider, hvor man nærmer sig år 2000, kunne det være rart at vide, hvor lang tid man kan regne med, at sin computer virker. Det kan man gøre – som i eksempel 6 – ved at oprette to Date-objekter. Et med dags dato og et med nytårsdag år 2000. Herefter kan man simpelthen trække de to objekter fra hinanden, og man vil få forskellen på de to tidspunkter – i millisekunder! Herefter kan man selvfølgeligt selv omregne til sekunder, minutter, timer, dage, måneder og år, men man kan også bruge nogle af Date-objektets andre funktioner. Funktionerne getDate, getDay, getHours, getMinutes, getMonth, getSeconds og getYear returnerer alle en del af et tidspunkt. getDate og getDay kræver måske lidt mere forklaring. getDate returnerer datoen, mens getDay returnerer nummeret på ugedagen. Søndag er – ifølge JavaScript – den første dag i ugen, og har derfor nummer 0. Ugen afsluttes med lørdag, der har nummer 6. Som det ses af eksemplet skal man trække 71 fra årstallet. Dette skyldes, at JavaScript opfatter 1971 som år 0.
Tekster
Ligesom VBScript har JavaScript en række funktioner, der gør teksthåndtering lettere. Disse er alle tilknyttet objektet String – det betyder, at de kan udføres på enhver tekststreng. Der er mange af disse funktioner, og det er ikke muligt at beskrive dem alle her. Til gengæld findes de alle sammen i Computer PCs JavaScript-håndbog som kan bestilles ved at bruge kuponen andetsteds i bladet.
charAt-funktionen returnerer et tegn i tekststrengen. Den eneste parameter til denne funktion er positionen på det tegn, der skal returneres.
En anden interessant funktion er indexOf, der returnerer positionen af en anden streng i teksten. Denne funktion bruges til søgning. Hvis man vil se, hvor teksten “and” findes i strengen s, skal man skrive s.indexOf(“and”). Hvis teksten ikke findes, returneres -1.
Metoden substring returnerer en delstreng af hele strengen. Hvis man for eksempel vil have alle tegn fra nummer 3 til nummer 7, skriver man s.substring(3,7).
String-klassen har imidlertid andet end metoder. Den har også properties. Disse tilgås ligesom metoder, blot har de aldrig parametre, og det er derfor unødvendigt at angive parenteserne. Den mest interessante property er length, der angiver længden af tekststrengen.
Eksempel 7 viser forskellige måder at behandle en streng på.
Næste nummer
I næste nummer afsluttes ikke bare JavaScript-kurset, men hele Computer PC’s store Internet-kursus. Den sidste artikel kommer til at handle om, hvordan man integrerer JavaScript-kode med HTML-kode. Det vil blandt andet blive gennemgået, hvordan man skriver JavaScript-programmer, der håndterer formularer og meget mere.
Prøv dig frem
JavaScript er et kompliceret og omfattende sprog, og man bliver ikke professionel på en aften – end ikke med Computer PCs artikler. Formålet med artiklerne er at give et grundlæggende kendskab til sproget – herefter er det op til dig selv at lære resten. Dette lærer man bedst ved at prøve sig frem. Man kan for eksempel se på hjemmesider, der bruger JavaScript og prøve at lære af deres programmer. Man kan også selv gå på opdagelse i sproget. Til begge dele er Computer PCs JavaScript-håndbog en uvurderlig hjælp. Den beskriver nemlig alle funktioner i JavaScript.
Udover opslagsbogen om JavaScript har Computer PC udgivet opslagsbøger om HTML 4 og VBScript. Alle tre hæfter kan bestilles hos Computer PC for kun kr. 59,- (plus porto og eksp. kr. 19,- ) ved at benytte kuponen andetsteds i bladet.
Eksempel 1: Velkomst til en hjemmeside
<HTML>
<HEAD><TITLE>Eksempel 1</TITLE></HEAD>
<BODY>
<SCRIPT Language = JavaScript>
function velkomst()
{
navn = prompt(“Hvad er dit navn?”, “Anonym”);
alert(“Hej ” + navn + “. Velkommen til min hjemmeside”);
}
velkomst();
</SCRIPT>
</BODY>
</HTML>
Eksempel 2: Et simpelt spørgsmål
<HTML>
<HEAD><TITLE>Eksempel s</TITLE></HEAD>
<BODY>
<SCRIPT Language = JavaScript>
function download()
{
if (confirm(“Vil du kopiere hele Internet til din harddisk?”))
alert(“Så væbn dig med tålmodighed”);
else
alert(“Du er da heller ikke med på noget”);
}
download();
</SCRIPT>
</BODY>
</HTML>
Eksempel 3: Fødselsdagshilsen i nyt vindue
<HTML>
<HEAD><TITLE>Eksempel 3</TITLE></HEAD>
<BODY>
<SCRIPT Language = JavaScript>
function nySide(navn, alder)
{
nytVindue = window.open(“”);
nytVindue.document.writeln(“<B>Hej ” + navn + “.</B>”);
nytVindue.document.writeln(“<P>”);
nytVindue.document.writeln(“Tillykke med din <I>” + alder + “-års</I> fødselsdag.”);
}
nySide(“Jens”, 21);
</SCRIPT>
</BODY>
</HTML>
Eksempel 4: Fødselsdagshilsen på en anden måde
<HTML>
<HEAD><TITLE>Eksempel 4</TITLE></HEAD>
<BODY>
<SCRIPT Language = JavaScript>
function nySide(navn, alder)
{
nytVindue = window.open(“”);
s = “Hej ” + navn;
nytVindue.document.writeln(s.bold());
nytVindue.document.writeln(“Tillykke med din “);
s = alder + “-års”;
nytVindue.document.writeln(s.italics());
nytVindue.document.writeln(“fødselsdag.”);
}
nySide(“Jens”, 21);
</SCRIPT>
</BODY>
</HTML>
Eksempel 5: Hvad er klokken?
<HTML>
<HEAD><TITLE>Eksempel 5</TITLE><HEAD>
<BODY>
<SCRIPT Language = JavaScript>
function visDato()
{
dato = new Date();
alert (“Aktuelt tidspunkt: ” + dato);
}
visDato();
</SCRIPT>
</BODY>
</HTML>
Eksempel 6 – Beregning af antal dag til år 2000
<HTML>
<HEAD><TITLE>Eksempel 6</TITLE></HEAD>
<BODY>
<SCRIPT Language = JavaScript>
function til2000()
{
nu = new Date();
toTusinde = new Date (2000,0,1);
forskel = new Date(toTusinde – nu);
alert (“Der er” + forskel.getDate() + “dage, ” + forskel.getMonth() + ” måneder og ” + (forskel.getYear() – 70) + ” år til år 2000″);
}
til2000();
</SCRIPT>
</BODY>
</HTML>
Eksempel 7 – Leg med tekststrenge
<HTML>
<HEAD><TITLE>Eksempel 7</TITLE></HEAD>
<BODY>
<SCRIPT Language = JavaScript>
function text()
{
txt = prompt(“Indtast en tekst”);
st = “”;
for(i = 0; i < txt.length; i = i + 2)
st = st + txt.charAt(i);
alert(st);
alert(“Position af ‘and’ i teksten : ” + txt.indexOf(“and”));
alert(“Bogstaver fra position 3 til 7 : ” + txt.substring(3,7));
}
text();
</SCRIPT>
</BODY>
</HTML>