Afsluttende JavaScript<\/p>\n
\u00a0<\/p>\n
I denne sidste artikel i Computer PCs JavaScript-kursus fort\u00e6ller Kristian Hansen<\/em>, hvordan man kan lade JavaScript-programmer styre formularer og i \u00f8vrigt integrere dem med sine HTML-dokumenter.<\/p>\n De tidligere afsnit af dette JavaScript-kursus har gennemg\u00e5et, hvordan man skriver sine egne JavaScript-funktioner og programmer, og hvordan man g\u00f8r brug af de, der allerede findes i JavaScript, men det har altid v\u00e6ret enkeltst\u00e5ende programmer. I denne del af kurset vil det blive gennemg\u00e5et, hvordan man knytter sine JavaScript-funktioner til HTML-dokumenterne.<\/p>\n Formularer<\/strong><\/p>\n F\u00f8r scriptsprogene blev opfundet, skulle man bruge et CGI-program til at h\u00e5ndtere formularer. Stadigv\u00e6k er det ikke alting, scriptene kan klare, men n\u00e5r det kommer til at kontrollere indholdet af formularen, er scriptsprogene ret uovertrufne.<\/p>\n Der er ikke store forskelle mellem en formular, der skal h\u00e5ndteres af CGI, og en formular, der skal h\u00e5ndteres af eksempelvis JavaScript. Blot skal man v\u00e6re opm\u00e6rksom p\u00e5, at alle elementer i formularen – ogs\u00e5 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\u00f8res. Her er formularen – i tr\u00e5d med sund fornuft – kaldt formular. De to checkbokse, som brugeren kan markere, hedder henholdsvis lyd og billeder. S\u00e6rlig opm\u00e6rksomhed skal imidlertid rettes p\u00e5 den linie, hvor knappen bliver oprettet. Udover navn og titel skal der angives, hvilken JavaScript-funktion der skal udf\u00f8res, n\u00e5r man trykker p\u00e5 knappen. I dette tilf\u00e6lde er det visSide.<\/p>\n Objekter<\/strong><\/p>\n Form\u00e5let med visSide-funktionen er at evaluere brugerens valg. For at kunne g\u00f8re det, er det n\u00f8dvendigt fra JavaScript-programmet at kunne bruge de informationer, der findes i formularen. Heldigvis optr\u00e6der selve formularen som et objekt, og som det er blevet gennemg\u00e5et tidligere, kan indholdet af objekter tilg\u00e5s ved at skrive objekt-navnet efterfulgt af et punktum. Objektet er i dette tilf\u00e6ldet formularens navn – formular. Herefter skal man angive navnet p\u00e5 det element i formularen, man \u00f8nsker 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\u00e5g\u00e6ldende checkboks er markeret eller ej. Det vil sige, at man for at se, om brugeren har markeret billeder-feltet, skal skrive formular.billeder.checked.<\/p>\n Dette foretages i visSide-funktionen. I den f\u00f8rste sammenligning bruges det kryptiske dobbelt-og-tegn. Det angiver blot, at begge betingelser skal v\u00e6re opfyldt (logisk og). Hvis blot en af betingelserne skulle have v\u00e6ret opfyldt (logisk eller), skulle man have angivet || i stedet. Bortset fra det er det relativt simpelt ved hj\u00e6lp af en r\u00e6kke if-s\u00e6tninger at finde ud af, hvilken side, der skal vises. Herefter er sp\u00f8rgsm\u00e5let 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 \u00f8jeblikket, og ved at tildele denne variabel en v\u00e6rdi, 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\u00e6ldet.<\/p>\n Mere om formularer<\/strong><\/p>\n Formularer best\u00e5r imidlertid ikke kun af knapper og checkbokse, og det vil v\u00e6re for omfattende at gennemg\u00e5 alle de forskellige elementer her. Dog kan det siges, at man p\u00e5 langt de fleste, kan angive, at der skal udf\u00f8res JavaScript-funktioner, n\u00e5r en bestemt begivenhed indtr\u00e6ffer. Et eksempel er ved hj\u00e6lp 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\u00e6re indlysende. Dog skal m\u00e5ske OnBlur og OnFocus beskrives yderligere. OnBlur udf\u00f8res, n\u00e5r et felt ikke l\u00e6ngere er markeret. For eksempel hvis brugeren flytter mark\u00f8ren ved hj\u00e6lp af musen eller ved hj\u00e6lp af tabulatorknappen. OnFocus bliver udf\u00f8rt, n\u00e5r feltet atter modtager mark\u00f8ren.<\/p>\n De forskellige elementer, HTML stiller til r\u00e5dighed i formularer, er temmelig forskellige, og derfor bliver deres opbygning som JavaScript-objekter ogs\u00e5 forskellig. Det er s\u00e5ledes 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\u00e5 bruges, og ogs\u00e5 deres v\u00e6rdi tilg\u00e5s gennem value-variablen.<\/p>\n Eksempel 2 viser, hvordan man kan bede brugeren indtaste navn og adresse, og hver gang et felt forlades kontrollere, om feltet er udfyldt.<\/p>\n Eksemplet viser ogs\u00e5, hvordan focus-metoden kan bruges. Den kan kaldes p\u00e5 alle objekter i en formular og s\u00f8rger for, at mark\u00f8ren flyttes hen til feltet. I dette eksempel bruges den til at sikre, at brugeren ikke kan forlade et felt, f\u00f8r det er udfyldt.<\/p>\n Goddag og farvel<\/strong><\/p>\n Hvis man gerne vil have en funktion udf\u00f8rt, s\u00e5 snart ens side bliver indl\u00e6st, 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\u00f8res. Hvis man gerne vil have en funktion udf\u00f8rt, n\u00e5r brugeren forlader ens side, kan man bruge OnUnload. Eksempel 3 viser, hvordan man kan sige p\u00e6nt goddag og p\u00e6nt farvel til brugeren.<\/p>\n Fading<\/strong><\/p>\n OnLoad og OnUnload kan ogs\u00e5 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\u00f8res. Eksemplet indeholder to funktioner – fadeIn og fadeOut – der henholdsvis bruges, n\u00e5r siden indl\u00e6ses, og n\u00e5r den forlades. fadeIn genneml\u00f8ber en for-l\u00f8kke startende ved 0, der er farven sort. Herefter l\u00e6gges den hexadecimale v\u00e6rdi 010101 til hver gang. Det vil sige, at farven for hvert genneml\u00f8b af l\u00f8kken bliver en gr\u00e5tone lysere. Grunden, til at der arbejdes med hexadecimale v\u00e6rdier, er, at JavaScript arbejder med farver p\u00e5 samme m\u00e5de som HTML. Det er muligt at angive farver som decimaltal, men det er lidt nemmere at f\u00f8lge med i de hexadecimale. Inde i selve l\u00f8kken foretages \u00e6ndringen af baggrundsfarven. Det sker ved at \u00e6ndre v\u00e6rdien af document.bgColor. Dette svarer til den bgcolor, der kan s\u00e6ttes i BODY-kommandoen.<\/p>\n Funktionen fadeOut har den modsatte effekt. Her startes fra hvid og fades mod sort.<\/p>\n Det afsluttende eksempel<\/strong><\/p>\n Ligesom VBScript-kurset afsluttes ogs\u00e5 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\u00e5r mark\u00f8ren forlader disse felter kontrolleres det, at der er indtastet noget i dem, og i hastigheds tilf\u00e6lde kontrolleres det ogs\u00e5, at det, der er indtastet, er et tal. Det g\u00f8res ved hj\u00e6lp af en funktion med et kryptisk navn – isNaN. Det betyder is not a number og angiver, om den tekst, funktionen f\u00e5r med som parameter, ikke er en talv\u00e6rdi.<\/p>\n N\u00e5r brugeren klikker p\u00e5 Opdat\u00e9r-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\u00e6tte korrekt, selvom brugeren v\u00e6lger at \u00e6ndre indholdet af formularen. F\u00f8rst n\u00e5r brugeren igen trykker p\u00e5 Opdat\u00e9r, vil indholdet af formularen medf\u00f8re \u00e6ndringer i statuslinien.<\/p>\n Til slut i startClick-funktionen kaldes setTimeout-funktionen p\u00e5 window-objektet. Denne funktion s\u00f8rger for at udf\u00f8re en anden funktion efter et givent interval. I dette tilf\u00e6lde er det funktionen scroll(), der skal kaldes, og derfor angives denne som f\u00f8rste parameter. Funktionens anden parameter er det antal millisekunder, der skal g\u00e5, f\u00f8r funktionen kaldes. Her angives hastighed, da denne variabel jo indeholder den hastighed, brugeren indtastede i formularen.<\/p>\n Det er scroll-funktionen, der foretager selve arbejdet. Det er her, statuslinien opdateres. F\u00f8rst 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\u00e5 starter man forfra – ellers skal der vises et tegn mere end sidste gang. Denne kontrol foretages af funktionens indledende if-s\u00e6tning. 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\u00e6rdi. Det sidste, der foretages i funktionen er et kald af setTimeout for at sikre, at metoden bliver kaldt igen.<\/p>\n Videre med JavaScript og Java<\/strong><\/p>\n Computer PCs JavaScript-kursus er nu slut, men det betyder ikke, at man er f\u00e6rdig med at l\u00e6re. Allieret med Computer PCs JavaScript-opslagsh\u00e6fte kan man selv g\u00e5 p\u00e5 opdagelse i sproget, pr\u00f8ve sig frem og derved blive endnu bedre til JavaScript. H\u00e6ftet kan – sammen med opslagsh\u00e6fter om HTML 4 og VBScript – bestilles p\u00e5 kuponen andetsteds i bladet.<\/p>\n Hvis man gerne vil videre med mere alvorlig programmering som eksempelvis Java, kan man bruge den Java-compiler, der ligger p\u00e5 denne m\u00e5neds cd-rom. Den er udviklet af Sun, der har defineret Java-sproget, og er fuldst\u00e6ndig gratis at bruge. Der er masser af information – og ogs\u00e5 en online l\u00e6rebog – p\u00e5 Javas officielle hjemmeside: http:\/\/www.javasoft.com. Derudover findes der en masse litteratur – b\u00e5de i trykt form og p\u00e5 Internet – der g\u00f8r det nemt at l\u00e6re at programmere i Java. Derudover skal man jo ikke glemme, at selvom JavaScript og Java ikke har ret meget til f\u00e6lles, er det jo altid en fordel at have l\u00e6rt et andet programmeringssprog, n\u00e5r man skal l\u00e6re et nyt. Derfor: Held og lykke med udviklingen af JavaScript og Java-programmer!<\/p>\n Eksempel 1 <\/strong><\/p>\n <HTML><\/p>\n <HEAD><TITLE>Eksempel 1<\/TITLE><HEAD><\/p>\n <SCRIPT Language = JavaScript><\/p>\n \u00a0<\/p>\n function visSide()<\/p>\n {<\/p>\n \u00a0 if (formular.lyd.checked && formular.billeder.checked)<\/p>\n \u00a0\u00a0\u00a0\u00a0\u00a0 location.href = “lyd_og_billeder.html”;<\/p>\n \u00a0 else<\/p>\n \u00a0 if (formular.lyd.checked)<\/p>\n \u00a0\u00a0\u00a0\u00a0\u00a0 location.href = “lyd.html”;<\/p>\n \u00a0 else<\/p>\n \u00a0 if (formular.billeder.checked)<\/p>\n \u00a0\u00a0\u00a0\u00a0\u00a0 location.href = “billeder.html”;<\/p>\n \u00a0 else<\/p>\n \u00a0\u00a0\u00a0\u00a0\u00a0 location.href = “kedelig.html”;<\/p>\n }<\/p>\n \u00a0<\/p>\n <\/SCRIPT><\/p>\n \u00a0<\/p>\n <BODY><\/p>\n <FORM NAME = formular><\/p>\n Vil du både have lyd og billede på siden?<\/p>\n Det kan gøre siden langsommere at indlæse.<\/p>\n <P><\/p>\n <INPUT TYPE = CheckBox NAME = billeder>Billeder<BR><\/p>\n <INPUT TYPE = CheckBox NAME = lyd>Lyd<BR><\/p>\n <INPUT TYPE = Button NAME = ok VALUE = “Vis siden” ONCLICK = “visSide();”><\/p>\n <\/FORM><\/p>\n <\/BODY><\/p>\n <\/HTML><\/p>\n \u00a0<\/p>\n Eksempel 2 <\/strong><\/p>\n <HTML><\/p>\n <HEAD><TITLE>Eksempel 2<\/TITLE><\/HEAD><\/p>\n \u00a0<\/p>\n <SCRIPT Language = JavaScript><\/p>\n \u00a0<\/p>\n function kontrollerNavn()<\/p>\n {<\/p>\n \u00a0 if (formular.navn.value == “”)<\/p>\n \u00a0 {<\/p>\n \u00a0\u00a0\u00a0 alert(“De skal indtaste Deres navn”);<\/p>\n \u00a0\u00a0\u00a0 formular.navn.focus();<\/p>\n \u00a0 }<\/p>\n }<\/p>\n \u00a0<\/p>\n function kontrollerAdresse()<\/p>\n {<\/p>\n \u00a0 if (formular.adresse.value == “”)<\/p>\n \u00a0 {<\/p>\n \u00a0\u00a0\u00a0 alert(“De skal indtaste Deres adresse”);<\/p>\n \u00a0\u00a0\u00a0 formular.adresse.focus();<\/p>\n \u00a0 }<\/p>\n }<\/p>\n \u00a0<\/p>\n function knappeClick()<\/p>\n {<\/p>\n \u00a0 kontrollerNavn();<\/p>\n \u00a0 kontrollerAdresse();<\/p>\n }<\/p>\n \u00a0<\/p>\n <\/SCRIPT><\/p>\n \u00a0<\/p>\n <BODY><\/p>\n <FORM NAME = formular><\/p>\n <TABLE><\/p>\n <TD>Navn:<\/TD><\/p>\n <TD><INPUT TYPE = Text NAME = navn OnBlur = kontrollerNavn();><\/TD><\/p>\n \u00a0<\/p>\n <TR><\/p>\n \u00a0<\/p>\n <TD>Adresse:<\/TD><\/p>\n <TD><INPUT TYPE = Text NAME = adresse OnBlur = kontrollerAdresse();><\/TD><\/p>\n \u00a0<\/p>\n <TR><\/p>\n <TD COLSPAN = 2><CENTER><INPUT TYPE = Button NAME = ok VALUE = OK OnClick = knappeClick();><\/CENTER><\/TD><\/p>\n <\/TABLE><\/p>\n <\/FORM><\/p>\n <\/BODY><\/p>\n <\/HTML><\/p>\n \u00a0<\/p>\n Eksempel 3<\/strong><\/p>\n <HTML><\/p>\n <HEAD><TITLE>Eksempel 3<\/TITLE><\/HEAD><\/p>\n \u00a0<\/p>\n <SCRIPT Language = JavaScript><\/p>\n \u00a0<\/p>\n function velkommen()<\/p>\n {<\/p>\n \u00a0 alert(“Velkommen til min hjemmeside. Jeg h\u00e5ber, du m\u00e5 hygge dig…”);<\/p>\n }<\/p>\n \u00a0<\/p>\n function farvel()<\/p>\n {<\/p>\n \u00a0 alert(“Tak for bes\u00f8get. Kom snart igen.”);<\/p>\n }<\/p>\n \u00a0<\/p>\n <\/SCRIPT><\/p>\n \u00a0<\/p>\n <BODY OnLoad = velkommen(); OnUnload = farvel();><\/p>\n \u00a0<\/p>\n Tjah…det var s\u00e5 den hjemmeside…<\/p>\n <\/BODY><\/p>\n <\/HTML><\/p>\n \u00a0<\/p>\n Eksempel 4 <\/strong><\/p>\n <HTML><\/p>\n <HEAD><TITLE>Eksempel 4<\/TITLE><\/HEAD><\/p>\n <BODY OnLoad = fadeIn(); OnUnload = fadeOut();><\/p>\n \u00a0<\/p>\n <SCRIPT Language = JavaScript><\/p>\n \u00a0<\/p>\n function fadeIn()<\/p>\n {<\/p>\n \u00a0 for (farve = 0; farve < 0xFFFFFF; farve = farve + 0x010101)<\/p>\n \u00a0\u00a0\u00a0 document.bgColor = farve;<\/p>\n }<\/p>\n \u00a0<\/p>\n function fadeOut()<\/p>\n {<\/p>\n \u00a0 for (farve = 0xFFFFFF; farve > 0; farve = farve – 0x010101)<\/p>\n \u00a0\u00a0\u00a0 document.bgColor = farve;<\/p>\n }<\/p>\n \u00a0<\/p>\n <\/SCRIPT><\/p>\n \u00a0<\/p>\n <\/BODY><\/p>\n <\/HTML><\/p>\n \u00a0<\/p>\n Eksempel 5 <\/strong><\/p>\n <HTML><\/p>\n <HEAD><TITLE>Det afsluttende eksempel<\/TITLE><\/HEAD><\/p>\n \u00a0<\/p>\n <SCRIPT Language = JavaScript><\/p>\n \u00a0<\/p>\n \/\/ Globale variable<\/p>\n \u00a0<\/p>\n s = “”;<\/p>\n scrollTekst = “”;<\/p>\n hastighed = 0;<\/p>\n \u00a0<\/p>\n \/\/ Slut p\u00e5 globale variable<\/p>\n \u00a0<\/p>\n function kontrollerTekst()<\/p>\n {<\/p>\n \u00a0 if (indstillinger.tekst.value == “”)<\/p>\n \u00a0 {<\/p>\n \u00a0\u00a0\u00a0 alert(“Indtast venligst en tekst, inden De forlader feltet.”);<\/p>\n \u00a0\u00a0\u00a0 indstillinger.tekst.focus();<\/p>\n \u00a0 }<\/p>\n }<\/p>\n \u00a0<\/p>\n function kontrollerHastighed()<\/p>\n {<\/p>\n \u00a0 if (indstillinger.hastighed.value == “”)<\/p>\n \u00a0 {\u00a0<\/p>\n \u00a0\u00a0\u00a0 alert(“Indtast venligst en hastighed, inden De forlader feltet.”);<\/p>\n \u00a0\u00a0\u00a0 indstillinger.hastighed.focus();<\/p>\n \u00a0 }<\/p>\n \u00a0<\/p>\n \u00a0 if (isNaN (indstillinger.hastighed.value))<\/p>\n \u00a0 {<\/p>\n \u00a0\u00a0\u00a0 alert(“Indtast venligst hastigheden ved hj\u00e6lp af tal.”);<\/p>\n \u00a0\u00a0\u00a0 indstillinger.hastighed.focus();<\/p>\n \u00a0 }<\/p>\n }<\/p>\n \u00a0<\/p>\n function startClick()<\/p>\n {<\/p>\n \u00a0 s = “”;<\/p>\n \u00a0 scrollTekst = indstillinger.tekst.value;<\/p>\n \u00a0 hastighed = indstillinger.hastighed.value;<\/p>\n \u00a0 window.setTimeout (“scroll();”, hastighed);<\/p>\n }<\/p>\n \u00a0<\/p>\n function scroll()<\/p>\n {<\/p>\n \u00a0\u00a0<\/p>\n \u00a0 if (s.length == scrollTekst.length)<\/p>\n \u00a0\u00a0\u00a0 s = “”;<\/p>\n \u00a0 else<\/p>\n \u00a0\u00a0\u00a0 s = scrollTekst.substring(0, s.length + 1);<\/p>\n \u00a0<\/p>\n \u00a0\u00a0\u00a0\u00a0\u00a0<\/p>\n \u00a0 window.status = s;<\/p>\n \u00a0<\/p>\n \u00a0 timeOut = window.setTimeout (“scroll();”, hastighed);<\/p>\n }<\/p>\n \u00a0<\/p>\n <\/SCRIPT><\/p>\n \u00a0<\/p>\n <BODY><\/p>\n <FORM NAME = indstillinger><\/p>\n <TABLE><\/p>\n <TD>Indtast den tekst, der skal vises i statusvinduet<\/TD><\/p>\n <TD><INPUT TYPE = Text NAME = tekst SIZE = 50 VALUE = “Dette er det afsluttende eksempel…” OnBlur = kontrollerTekst();><\/TD><\/p>\n \u00a0<\/p>\n <TR><\/p>\n \u00a0<\/p>\n <TD>Indtast hastigheden i millisekunder<\/TD><\/p>\n <TD><INPUT TYPE = Text NAME = hastighed SIZE = 50 VALUE = 250 OnBlur = kontrollerHastighed();><\/TD><\/p>\n \u00a0<\/p>\n <TR><\/p>\n \u00a0<\/p>\n <TD COLSPAN = 2><CENTER><\/p>\n <INPUT TYPE = Button NAME = opdater VALUE = “Opdater” OnClick = startClick();><\/p>\n <\/TD><\/p>\n <\/TABLE><\/p>\n <\/BODY><\/p>\n <\/HTML><\/p>\n","protected":false},"excerpt":{"rendered":" Afsluttende JavaScript \u00a0 I denne sidste artikel i Computer PCs JavaScript-kursus fort\u00e6ller Kristian Hansen, hvordan man kan lade JavaScript-programmer styre formularer og i \u00f8vrigt integrere dem med sine HTML-dokumenter. De tidligere afsnit af dette JavaScript-kursus har gennemg\u00e5et, hvordan man skriver sine egne JavaScript-funktioner og programmer, og hvordan man g\u00f8r brug af de, der allerede findes […]<\/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-132","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