{"id":129,"date":"2008-10-22T14:59:13","date_gmt":"2008-10-22T12:59:13","guid":{"rendered":"http:\/\/www.kristiansborg.dk\/bibliotek\/?page_id=129"},"modified":"2008-10-22T14:59:13","modified_gmt":"2008-10-22T12:59:13","slug":"l%c3%a6r-javascript-2-videre-med-javascript","status":"publish","type":"page","link":"https:\/\/www.kristiansborg.dk\/bibliotek\/artikler\/it\/l%c3%a6r-javascript-2-videre-med-javascript\/","title":{"rendered":"L\u00e6r Javascript 2: Videre med Javascript"},"content":{"rendered":"

I forrige nummer gennemgik Kristian Hansen<\/em> de grundl\u00e6ggende begreber i JavaScript-programmering. Denne gang ser han p\u00e5, hvordan man kan forbedre sin hjemmeside ved at kombinere de indbyggede JavaScript-funktioner med sine egne.<\/p>\n

Efter at have l\u00e6st forrige afsnit af JavaScript-kurset skulle man kunne skrive sine egne funktioner. De funktioner, der blev gennemg\u00e5et i det afsnit, var imidlertid ikke s\u00e6rligt avancerede. Denne gang vil det blive gennemg\u00e5et, 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\u00e5et – de er nemme at bruge, og s\u00e5 er man fri for at programmere det hele selv.<\/p>\n

Afpr\u00f8vning af sine funktioner<\/strong><\/p>\n

Der er imidlertid ikke meget ved at skrive en funktion, hvis man ikke kan f\u00e5 lov til at se, hvordan den virker. Samarbejdet mellem HTML-dokumenter og JavaScript-funktioner vil blive gennemg\u00e5et i detaljer i n\u00e6ste afsnit – dette afsnit vil bare forklare, hvordan man s\u00e6tter programmet ind i et HTML-dokument og afpr\u00f8ver det.<\/p>\n

Til at lave HTML-dokumentet kr\u00e6ves en HTML-editor. Har man ikke en rigtig HTML-editor, kan man n\u00f8jes 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\u00e5 regne med, at visse funktioner enten ikke kan bruges eller opf\u00f8rer 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\u00e5 m\u00e5nedens cd, og Netscape Navigator 4 kan hentes p\u00e5 http:\/\/www.netscape.com. \u00c6ldre versioner af de to browsere kan ogs\u00e5 bruges, men s\u00e5 skal man forvente, at mange JavaScript-funktioner ikke kan bruges.<\/p>\n

N\u00e5r 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\u00f8lgende er et program skrevet i et scriptsprog. I dette tilf\u00e6lde et sproget JavaScript, og man skriver derfor <SCRIPT Language = JavaScript>. Herefter kan man skrive de funktioner, der udg\u00f8r programmet, og endeligt afslutte scriptsektionen med at kalde en eller flere af funktionerne. Som s\u00e5 mange andre HTML-kommandoer, skal <SCRIPT>-kommandoen afsluttes – det g\u00f8res med <\/SCRIPT>. De kommandoer, der st\u00e5r inde i <SCRIPT>-kommandoen, men ikke inde i en funktion, udf\u00f8res s\u00e5 snart hjemmesiden indl\u00e6ses.<\/p>\n

Eksempel 1 viser, hvordan man integrerer et JavaScript i et HTML-dokument.<\/p>\n

\"Funktionen<\/p>\n

Et godt sp\u00f8rgsm\u00e5l<\/strong><\/p>\n

Eksempel 1 viser ogs\u00e5, hvordan man stiller brugeren et sp\u00f8rgsm\u00e5l. Det g\u00f8res ved hj\u00e6lp af prompt-funktionen. Denne funktion tager et eller to parametre. Det f\u00f8rste er det sp\u00f8rgsm\u00e5l, der skal stilles. I dette tilf\u00e6lde “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\u00e6lde angives her “Anonym”.<\/p>\n

prompt-funktionen returnerer en tekststreng, der indeholder det, som brugeren indtastede. Hvis brugeren v\u00e6lger annuller, returneres en tom streng (“”).<\/p>\n

Et liges\u00e5 godt svar <\/strong><\/p>\n

Eksemplet forts\u00e6tter med at byde brugeren velkommen til ens hjemmeside. Det g\u00f8res ved hj\u00e6lp af funktionen alert. Udtrykket alert lyder lidt afskr\u00e6kkende, men funktionen kan bruges til andet end at give advarsler – den kan ogs\u00e5 bruges til helt almindelige beskeder.<\/p>\n

Som det ses af sk\u00e6rmbillederne, f\u00e5r alle vinduer fra JavaScript overskriften Microsoft Internet Exploerr (i Netscape Navigator f\u00e5r de overskriften JavaScript dialog). At man ikke – ligesom i VBScript – kan \u00e6ndre overskriften p\u00e5 vinduerne, skyldes JavaScript og VBScripts forskellige sikkerhedsopfattelser. JavaScript ser det som en trussel, at man kan \u00e6ndre overskriften og derved – for eksempel – lede folk til at tro, at de indtaster deres kontonummer i deres homebanking-system, mens de i virkeligheden g\u00f8r det p\u00e5 en suspekt fyrs hjemmeside.<\/p>\n

Et nemt sp\u00f8rgsm\u00e5l<\/strong><\/p>\n

Nogle sp\u00f8rgsm\u00e5l kr\u00e6ver ikke, at brugeren indtaster et svar, men bare at vedkommende tager stilling til sp\u00f8rgsm\u00e5ler. Det kan for eksempel v\u00e6re, om brugeren vil forts\u00e6tte en bestemt funktion. Et s\u00e5dan sp\u00f8rgsm\u00e5l 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\u00e6lger OK eller Annuller. Hvis brugeren trykker p\u00e5 escape, opfattes det, som om vedkommende valgte annuller.<\/p>\n

\"Funktioner<\/p>\n

Dynamiske hjemmesider<\/strong><\/p>\n

En af de interessante muligheder, JavaScript stiller til r\u00e5dighed, er dynamiske hjemmesider. Dette skal ikke forveksles med dynamisk HTML, der er en helt anden historie, som er blevet gennemg\u00e5et tidligere i kurset.<\/p>\n

Dynamiske hjemmesider vil sige, at hjemmesiden tilpasser sig brugerens valg. Faktisk er det muligt at lave en hjemmeside, som er fuldst\u00e6ndigt genereret af et JavaScript-program. Eksempel 3 viser en funktion, der skriver en f\u00f8dselsdagshilsen ud i et nyt vindue. Som det ses, kan man i writeln-funktionen angive HTML-kode, som n\u00e5r man skriver HTML-sider. Man kan imidlertid ogs\u00e5 klare det p\u00e5 en anden m\u00e5de – det ses af eksempel 4. Det er ved at behandle udskriften som tekststrenge, og herefter kalde bestemte metoder p\u00e5 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.<\/p>\n

Eksemplet her sender udskriften til et nyt vindue, men man kan ogs\u00e5 udskrive til det vindue, JavaScript-programmet befinder sig i. S\u00e5 skal man blot skrive document.write eller document.writeln i stedet.<\/p>\n

Datoer<\/strong><\/p>\n

Som det blev beskrevet i den f\u00f8rste artikel om JavaScript, er det ikke helt s\u00e5 nemt at arbejde med datoer i JavaScript som det er i VBScript. Det er Date-objektet, der i JavaScript bruges til at repr\u00e6sentere en dato. Man opretter et nyt Date-objekt ved at skrive new Date(). Objektet vil s\u00e5 repr\u00e6sentere det aktuelle tidspunkt. Hvis man blot vil udskrive det aktuelle tidspunkt er det nemt – s\u00e5 kan man bare udskrive Date-objektet. Dette er vist i eksempel 5. Hvis man vil oprette et Date-objekt, der repr\u00e6senterer et andet tidspunkt end det nuv\u00e6rende, skal man angive dette som parameter. Dette kan g\u00f8res p\u00e5 flere forskellige m\u00e5der. For eksempel som en tekststreng, ligesom den Date-objektet selv udskriver – new Date (“December 24, 1998, 00:00:00”). Man kan ogs\u00e5 n\u00f8jes med at angive datoen og intet klokkesl\u00e6t. Det g\u00f8res i formatet \u00e5r, m\u00e5ned, dato. Bem\u00e6rk, at m\u00e5nederne nummereres fra 0. Det vil sige, at new Date(98, 11, 24) angiver juleaften 1998. Endelig kan man v\u00e6lge at angive b\u00e5de dato og klokkesl\u00e6t, men som en r\u00e6kke parametre i\u00a0 stedet for \u00e9n\u00a0 streng: new Date (98, 11, 24, 0, 0, 0). De sidste tre tal angiver tidspunktet som timer, minutter og sekunder.<\/p>\n

Det kunne nu ogs\u00e5 v\u00e6re rart at kunne arbejde med datoer. Is\u00e6r i disse tider, hvor man n\u00e6rmer sig \u00e5r 2000, kunne det v\u00e6re rart at vide, hvor lang tid man kan regne med, at sin computer virker. Det kan man g\u00f8re – som i eksempel 6 – ved at oprette to Date-objekter. Et med dags dato og et med nyt\u00e5rsdag \u00e5r 2000. Herefter kan man simpelthen tr\u00e6kke de to objekter fra hinanden, og man vil f\u00e5 forskellen p\u00e5 de to tidspunkter – i millisekunder! Herefter kan man selvf\u00f8lgeligt selv omregne til sekunder, minutter, timer, dage, m\u00e5neder og \u00e5r, men man kan ogs\u00e5 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\u00e6ver m\u00e5ske lidt mere forklaring. getDate returnerer datoen, mens getDay returnerer nummeret p\u00e5 ugedagen. S\u00f8ndag er – if\u00f8lge JavaScript – den f\u00f8rste dag i ugen, og har derfor nummer 0. Ugen afsluttes med l\u00f8rdag, der har nummer 6. Som det ses af eksemplet skal man tr\u00e6kke 71 fra \u00e5rstallet. Dette skyldes, at JavaScript opfatter 1971 som \u00e5r 0.<\/p>\n

Tekster<\/strong><\/p>\n

Ligesom VBScript har JavaScript en r\u00e6kke funktioner, der g\u00f8r teksth\u00e5ndtering lettere. Disse er alle tilknyttet objektet String – det betyder, at de kan udf\u00f8res p\u00e5 enhver tekststreng. Der er mange af disse funktioner, og det er ikke muligt at beskrive dem alle her. Til geng\u00e6ld findes de alle sammen i Computer PCs JavaScript-h\u00e5ndbog som kan bestilles ved at bruge kuponen andetsteds i bladet.<\/p>\n

charAt-funktionen returnerer et tegn i tekststrengen. Den eneste parameter til denne funktion er positionen p\u00e5 det tegn, der skal returneres.<\/p>\n

En anden interessant funktion er indexOf, der returnerer positionen af en anden streng i teksten. Denne funktion bruges til s\u00f8gning. Hvis man vil se, hvor teksten “and” findes i strengen s, skal man skrive s.indexOf(“and”). Hvis teksten ikke findes, returneres -1.<\/p>\n

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).<\/p>\n

String-klassen har imidlertid andet end metoder. Den har ogs\u00e5 properties. Disse tilg\u00e5s ligesom metoder, blot har de aldrig parametre, og det er derfor un\u00f8dvendigt at angive parenteserne. Den mest interessante property er length, der angiver l\u00e6ngden af tekststrengen.<\/p>\n

Eksempel 7 viser forskellige m\u00e5der at behandle en streng p\u00e5.<\/p>\n

N\u00e6ste nummer <\/strong><\/p>\n

I n\u00e6ste 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\u00e5et, hvordan man skriver JavaScript-programmer, der h\u00e5ndterer formularer og meget mere.<\/p>\n

Pr\u00f8v dig frem <\/strong><\/p>\n

JavaScript er et kompliceret og omfattende sprog, og man bliver ikke professionel p\u00e5 en aften – end ikke med Computer PCs artikler. Form\u00e5let med artiklerne er at give et grundl\u00e6ggende kendskab til sproget – herefter er det op til dig selv at l\u00e6re resten. Dette l\u00e6rer man bedst ved at pr\u00f8ve sig frem. Man kan for eksempel se p\u00e5 hjemmesider, der bruger JavaScript og pr\u00f8ve at l\u00e6re af deres programmer. Man kan ogs\u00e5 selv g\u00e5 p\u00e5 opdagelse i sproget. Til begge dele er Computer PCs JavaScript-h\u00e5ndbog en uvurderlig hj\u00e6lp. Den beskriver nemlig alle funktioner i JavaScript.<\/p>\n

Udover opslagsbogen om JavaScript har Computer PC udgivet opslagsb\u00f8ger om HTML 4 og VBScript. Alle tre h\u00e6fter kan bestilles hos Computer PC for kun kr. 59,- (plus porto og eksp. kr. 19,- ) ved at benytte kuponen andetsteds i bladet.<\/p>\n

Eksempel 1: Velkomst til en hjemmeside<\/strong><\/p>\n

<HTML><\/p>\n

<HEAD><TITLE>Eksempel 1<\/TITLE><\/HEAD><\/p>\n

<BODY><\/p>\n

<SCRIPT Language = JavaScript><\/p>\n

\u00a0<\/p>\n

function velkomst()<\/p>\n

{<\/p>\n

\u00a0 navn = prompt(“Hvad er dit navn?”, “Anonym”);<\/p>\n

\u00a0 alert(“Hej ” + navn + “. Velkommen til min hjemmeside”);<\/p>\n

}<\/p>\n

\u00a0<\/p>\n

velkomst();<\/p>\n

\u00a0<\/p>\n

<\/SCRIPT><\/p>\n

\u00a0<\/p>\n

<\/BODY><\/p>\n

<\/HTML><\/p>\n

Eksempel 2: Et simpelt sp\u00f8rgsm\u00e5l <\/strong><\/p>\n

<HTML><\/p>\n

<HEAD><TITLE>Eksempel s<\/TITLE><\/HEAD><\/p>\n

<BODY><\/p>\n

<SCRIPT Language = JavaScript>\u00a0\u00a0<\/p>\n

function download()<\/p>\n

{<\/p>\n

\u00a0 if (confirm(“Vil du kopiere hele Internet til din harddisk?”))<\/p>\n

\u00a0\u00a0\u00a0 alert(“S\u00e5 v\u00e6bn dig med t\u00e5lmodighed”);<\/p>\n

\u00a0 else<\/p>\n

\u00a0\u00a0\u00a0 alert(“Du er da heller ikke med p\u00e5 noget”);<\/p>\n

}<\/p>\n

\u00a0<\/p>\n

download();<\/p>\n

<\/SCRIPT><\/p>\n

<\/BODY><\/p>\n

<\/HTML><\/p>\n

Eksempel 3: F\u00f8dselsdagshilsen i nyt vindue <\/strong><\/p>\n

<HTML><\/p>\n

<HEAD><TITLE>Eksempel 3<\/TITLE><\/HEAD><\/p>\n

<BODY><\/p>\n

<SCRIPT Language = JavaScript><\/p>\n

\u00a0<\/p>\n

function nySide(navn, alder)<\/p>\n

{<\/p>\n

\u00a0 nytVindue = window.open(“”);<\/p>\n

\u00a0<\/p>\n

\u00a0 nytVindue.document.writeln(“<B>Hej ” + navn + “.<\/B>”);<\/p>\n

\u00a0 nytVindue.document.writeln(“<P>”);<\/p>\n

\u00a0 nytVindue.document.writeln(“Tillykke med din <I>” + alder + “-\u00e5rs<\/I> f\u00f8dselsdag.”);<\/p>\n

}<\/p>\n

\u00a0<\/p>\n

nySide(“Jens”, 21);<\/p>\n

<\/SCRIPT><\/p>\n

\u00a0<\/p>\n

<\/BODY><\/p>\n

<\/HTML><\/p>\n

Eksempel 4: F\u00f8dselsdagshilsen p\u00e5 en anden m\u00e5de <\/strong><\/p>\n

<HTML><\/p>\n

<HEAD><TITLE>Eksempel 4<\/TITLE><\/HEAD><\/p>\n

<BODY><\/p>\n

<SCRIPT Language = JavaScript><\/p>\n

\u00a0<\/p>\n

function nySide(navn, alder)<\/p>\n

{<\/p>\n

\u00a0 nytVindue = window.open(“”);<\/p>\n

\u00a0<\/p>\n

\u00a0 s = “Hej ” + navn;<\/p>\n

\u00a0 nytVindue.document.writeln(s.bold());<\/p>\n

\u00a0 nytVindue.document.writeln(“Tillykke med din “);<\/p>\n

\u00a0 s = alder + “-\u00e5rs”;<\/p>\n

\u00a0 nytVindue.document.writeln(s.italics());<\/p>\n

\u00a0 nytVindue.document.writeln(“f\u00f8dselsdag.”);<\/p>\n

}<\/p>\n

\u00a0<\/p>\n

nySide(“Jens”, 21);<\/p>\n

<\/SCRIPT><\/p>\n

\u00a0<\/p>\n

<\/BODY><\/p>\n

<\/HTML><\/p>\n

Eksempel 5: Hvad er klokken? <\/strong><\/p>\n

<HTML><\/p>\n

<HEAD><TITLE>Eksempel 5<\/TITLE><HEAD><\/p>\n

<BODY><\/p>\n

<SCRIPT Language = JavaScript><\/p>\n

\u00a0<\/p>\n

function visDato()<\/p>\n

{<\/p>\n

\u00a0 dato = new Date();<\/p>\n

\u00a0 alert (“Aktuelt tidspunkt: ” + dato);<\/p>\n

}<\/p>\n

\u00a0<\/p>\n

visDato();<\/p>\n

<\/SCRIPT><\/p>\n

<\/BODY><\/p>\n

<\/HTML><\/p>\n

Eksempel 6 – Beregning af antal dag til \u00e5r 2000 <\/strong><\/p>\n

<HTML><\/p>\n

<HEAD><TITLE>Eksempel 6<\/TITLE><\/HEAD><\/p>\n

<BODY><\/p>\n

<SCRIPT Language = JavaScript><\/p>\n

\u00a0<\/p>\n

function til2000()<\/p>\n

{<\/p>\n

\u00a0 nu = new Date();<\/p>\n

\u00a0 toTusinde = new Date (2000,0,1);<\/p>\n

\u00a0 forskel = new Date(toTusinde – nu);<\/p>\n

\u00a0<\/p>\n

\u00a0 alert (“Der er” + forskel.getDate() + “dage, ” + forskel.getMonth() + ” m\u00e5neder og ” + (forskel.getYear() – 70) + ” \u00e5r til \u00e5r 2000″);<\/p>\n

}<\/p>\n

\u00a0<\/p>\n

til2000();<\/p>\n

\u00a0<\/p>\n

<\/SCRIPT><\/p>\n

<\/BODY><\/p>\n

<\/HTML><\/p>\n

Eksempel 7 – Leg med tekststrenge <\/strong><\/p>\n

<HTML><\/p>\n

<HEAD><TITLE>Eksempel 7<\/TITLE><\/HEAD><\/p>\n

<BODY><\/p>\n

<SCRIPT Language = JavaScript><\/p>\n

\u00a0<\/p>\n

function text()<\/p>\n

{<\/p>\n

\u00a0 txt = prompt(“Indtast en tekst”);<\/p>\n

\u00a0<\/p>\n

\u00a0 st = “”;<\/p>\n

\u00a0 for(i = 0; i < txt.length; i = i + 2)<\/p>\n

\u00a0\u00a0\u00a0 st = st + txt.charAt(i);<\/p>\n

\u00a0\u00a0\u00a0<\/p>\n

\u00a0 alert(st);<\/p>\n

\u00a0<\/p>\n

\u00a0 alert(“Position af ‘and’ i teksten : ” + txt.indexOf(“and”));<\/p>\n

\u00a0<\/p>\n

\u00a0 alert(“Bogstaver fra position 3 til 7 : ” + txt.substring(3,7));<\/p>\n

}<\/p>\n

\u00a0<\/p>\n

text();<\/p>\n

\u00a0<\/p>\n

<\/SCRIPT><\/p>\n

\u00a0<\/p>\n

<\/BODY><\/p>\n

<\/HTML><\/p>\n","protected":false},"excerpt":{"rendered":"

I forrige nummer gennemgik Kristian Hansen de grundl\u00e6ggende begreber i JavaScript-programmering. Denne gang ser han p\u00e5, hvordan man kan forbedre sin hjemmeside ved at kombinere de indbyggede JavaScript-funktioner med sine egne. Efter at have l\u00e6st forrige afsnit af JavaScript-kurset skulle man kunne skrive sine egne funktioner. De funktioner, der blev gennemg\u00e5et i det afsnit, var […]<\/p>\n","protected":false},"author":2,"featured_media":0,"parent":30,"menu_order":0,"comment_status":"closed","ping_status":"open","template":"","meta":{"_monsterinsights_skip_tracking":false,"footnotes":""},"class_list":["post-129","page","type-page","status-publish","hentry"],"aioseo_notices":[],"aioseo_head":"\n\t\t\n\t\n\t\n\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t