{"id":126,"date":"2008-10-22T14:47:51","date_gmt":"2008-10-22T12:47:51","guid":{"rendered":"http:\/\/www.kristiansborg.dk\/bibliotek\/?page_id=126"},"modified":"2008-10-22T14:47:51","modified_gmt":"2008-10-22T12:47:51","slug":"l%c3%a6r-javascript-1-grundl%c3%a6ggende-javascript","status":"publish","type":"page","link":"https:\/\/www.kristiansborg.dk\/bibliotek\/artikler\/it\/l%c3%a6r-javascript-1-grundl%c3%a6ggende-javascript\/","title":{"rendered":"L\u00e6r Javascript 1: Grundl\u00e6ggende Javascript"},"content":{"rendered":"

Kristian Hansen<\/em> forts\u00e6tter nu Computer PCs store Internet-kursus. Denne gang giver han en introduktion til JavaScript.<\/p>\n

Tidligere i dette kursus er det blevet beskrevet, hvordan man kan g\u00f8re sine hjemmesider mere interessante med VBScript. Denne artikel og de to n\u00e6ste i kurset vil beskrive JavaScript, der ogs\u00e5 er et scriptsprog.<\/p>\n

Java og JavaScript<\/strong><\/p>\n

For at sl\u00e5 det fast en gang for alle: den st\u00f8rste lighed mellem Java og JavaScript er navnene. Java er et fuldt programmeringssprog, hvor man blandt andet kan udvikle fuldst\u00e6ndige applikationer. Java-programmer skal kompileres, hvilket vil sige, at man skal have et specielt program – en compiler – for at skrive dem. JavaScript derimod er et scriptsprog. De programmer, der skrives i JavaScript skal fortolkes af andre programmer – interpreters – som for eksempel Internet-browsere. For at skrive JavaScript-programmer beh\u00f8ver man ingen compiler.<\/p>\n

Syntaksen i JavaScript minder lidt om syntaksen i Java, men p\u00e5 den anden side ogs\u00e5 om syntaksen i andre programmeringssprog, som for eksempel C++. Man kan lave mange ting i Java, som man ikke kan lave i JavaScript, og JavaScript har ogs\u00e5 nogle funktioner, der ikke findes i Java.<\/p>\n

Browseren<\/strong><\/p>\n

Som n\u00e6vnt kan JavaScript-programmer for eksempel vises i en browser. Det er imidlertid ikke alle browsere, der underst\u00f8tter JavaScript, men de to mest udbredte – Internet Explorer og Netscape Navigator – g\u00f8r. Desv\u00e6rre underst\u00f8tter de ikke helt JavaScript p\u00e5 samme m\u00e5de, men mere om det senere i kurset.<\/p>\n

\"Hvis<\/p>\n

F\u00e6lles for begge browsere er det imidlertid, at brugeren selv kan v\u00e6lge, om JavaScripts skal udf\u00f8res eller ej. I Internet Explorer 4 g\u00f8res det fra menuen Vis, hvor punktet Internet-indstillinger viser en dialogboks med blandt andet sikkerhedsindstillinger. Hvis man v\u00e6lger selv at definere sine sikkerhedsindstillinger, kan man blandt andet angive, om JavaScript skal v\u00e6re aktivt.<\/p>\n

\"I<\/p>\n

I Netscape Navigator 4 skal man v\u00e6lge Pr\u00e6ferencer fra Rediger-menuen. I den dialogboks der vises, skal man v\u00e6lge Avanceret i listen i til venstre. Der vil nu blive vist en r\u00e6kke punkter i h\u00f8jre side af dialogboksen – et af disse er Aktiv\u00e9r JavaScript.<\/p>\n

Brugen<\/strong><\/p>\n

JavaScript kan b\u00e5de bruges p\u00e5 www-servere og klienter (browsere). Denne artikel vil koncentrere sig om klienterne – det vil sige, hvordan man kan indbygge JavaScript i sine HTML-dokumenter for at f\u00e5 en mere sp\u00e6ndende hjemmeside.<\/p>\n

Ligesom VBScript kan JavaScript skrives direkte i HTML-dokumenterne.<\/p>\n

Sproget<\/strong><\/p>\n

Stort set er programmering programmering – ligegyldigt hvilket sprog, man bruger. Der er en masse udtryk, der er de samme. Derfor kan det anbefales, at man starter med at l\u00e6se artiklen Grundl\u00e6ggende VBScript i Computer PC 3\/98. Denne artikel vil naturligvis forklare, hvordan de forskellige udtryk overf\u00f8res til JavaScript og l\u00e6ses den alene, vil man alligevel ende med at have et godt indblik i, hvordan JavaScript fungerer.<\/p>\n

Funktioner<\/strong><\/p>\n

En funktion er en samling af kommandoer, der tilsammen udf\u00f8rer en opgave. Det kan for eksempel v\u00e6re at beregne arealet af et rektangel. I VBScript skelnes mellem funktioner og procedurer, hvor funktioner returnerer en v\u00e6rdi – ligesom matematiske funktioner – mens procedurer ingen returv\u00e6rdi har. Denne adskillelse findes ikke i JavaScript – her kaldes begge typer for funktioner. Procedurer opfattes som funktioner, der ingenting returnerer. En funktion indledes med ordet function. Herefter f\u00f8lger navnet p\u00e5 funktionen, hvorefter parametrene angives i parentes. Parametrene er de v\u00e6rdier, der skal inds\u00e6ttes i den formel, funktionen definerer. For at blive ved areal-eksemplet vil parametrene v\u00e6re h\u00f8jde og bredde. Hvis en funktion ikke beh\u00f8ver nogen parametre, s\u00e6ttes en tom parentes efter funktionsnavnet.<\/p>\n

For at angive, at de kommandoer, der definerer funktionen, h\u00f8rer sammen, omkranses de af to kr\u00f8llede parenteser – { og }. De kr\u00f8llede parenteser bruges mange steder i JavaScript til at angive, at flere linier h\u00f8rer sammen. Efter den indledende parentes, angives de kommandoer funktionen skal udf\u00f8re. I dette tilf\u00e6lde er det en simpel beregning. At der st\u00e5r return f\u00f8r beregningen angiver, at det er denne v\u00e6rdi funktionen skal returnere. Areal-eksemplet er vist i eksempel 1.<\/p>\n

Semikolonerne<\/strong><\/p>\n

Som det ses i eksempel 1, skal alle kommandoer i JavaScript afsluttes med et semikolon for at angive, at der er tale om en afsluttet kommando. S\u00e5 skulle man tro, at hvis man satte et semikolon efter hver linie, ville alt v\u00e6re godt, men s\u00e5dan er det desv\u00e6rre ikke. Det er nemlig ikke alt, der regnes for en kommando. For eksempel er starten af en funktion – funktionshovedet – ikke en kommando. Generelt kan man tage det som en tommelfingerregel, at linier, der kan efterf\u00f8lges af en indledende kr\u00f8llet parentes, ikke er kommandoer.<\/p>\n

Variabler<\/strong><\/p>\n

Variabler er en vigtig del af ethvert programmeringssprog. De parametre, der sendes med til en funktion, er \u00e9n slags variable, men man kan godt have brug for andre og flere variable. Hvis man vil oprette en ny variabel i en funktion, kan man bare bruge den. Hvilket navn, man v\u00e6lger at give den, er helt op til en selv – blot skal man lade v\u00e6re med at give den samme navn som en funktion – det g\u00e6lder b\u00e5de funktioner, man selv har defineret, og funktioner, der er en del af JavaScript.<\/p>\n

Variabler kan indeholde al mulig information – tekster, heltal, decimaltal og datoer. Tal kan man bare skrive – blot skal man huske, at punktum bruges som decimalkomma – mens tekster skal omkranses af anf\u00f8rselstegn (“tekst”) eller apostroffer (‘tekst’). I VBScript kan man desuden angive datoer ved hj\u00e6lp af #dato#. Det kan man ikke i JavaScript – det vil senere i kurset blive gennemg\u00e5et, hvordan man h\u00e5ndterer datoer i JavaScript.<\/p>\n

Brug af variabler<\/strong><\/p>\n

Der er imidlertid ikke meget ved at kunne gemme en v\u00e6rdi i en variabel, hvis man ikke kan bruge den til noget. Det, man oftest bruger dem til, er at se, om en given betingelse er opfyldt. Mener man for eksempel, at personer, der vejer over 200 kilo, er overv\u00e6gtige, kan man gemme deres v\u00e6gt i en variabel, og derefter enten skrive “Du er slank” eller “Du er overv\u00e6gtig” baseret p\u00e5 v\u00e6rdien af variablen. Eksempel 2 viser, at man g\u00f8r det ved hj\u00e6lp af if-kommandoen. Efter if angives et udtryk, hvis sandhedsv\u00e6rdi afg\u00f8r, om den f\u00f8lgende kommando skal udf\u00f8res. I dette tilf\u00e6lde er udtrykket vaegt > 200. Hvis dette er sandt, udf\u00f8res den n\u00e6ste linie, der s\u00e6tter teksten “Du er overv\u00e6gtig” ind i variablen besked. Hvis man har brug for at f\u00e5 flere linier udf\u00f8rt, kan kr\u00f8llede parenteser bruges til at samle dem. else angiver, at den efterf\u00f8lgende linie eller blok af linier skal udf\u00f8res, hvis udtrykket ikke er sandt. Det er alts\u00e5 aldrig muligt at b\u00e5de linien efter if og efter else bliver udf\u00f8rt.<\/p>\n

if for viderekomne<\/strong><\/p>\n

Hvis man har brug for at kontrollere en variabel for flere forskellige v\u00e6rdier, kan man g\u00f8re det ved hj\u00e6lp af en r\u00e6kke if-s\u00e6tninger. Det er bare v\u00e6sentligt nemmere at bruge en swith-case i stedet. En switch-case svarer til Select-Case i VBScript. Eksempel 3 viser, hvordan switch-case kan bruges til at bestemme hvilken medalje en given placering medf\u00f8rer. Som det ses, skal switch efterf\u00f8lges af en kr\u00f8llet parentes – det er for at angive, at der er flere case-s\u00e6tninger knyttet til switch-s\u00e6tningen. Hver af de v\u00e6rdier, der skal kontrolleres p\u00e5, f\u00e5r sin egen case-s\u00e6tning. Efter kolonet kan man skrive de programlinier, der skal udf\u00f8res, hvis variablen har den p\u00e5g\u00e6ldende v\u00e6rdi. Bem\u00e6rk, at man ikke skal samle disse linier med kr\u00f8llede parenteser, selvom de h\u00f8rer sammen. Efter case-s\u00e6tninger udf\u00f8res alle s\u00e6tninger, indtil break-kommandoen. Derfor er det s\u00e6rdeles vigtigt at huske break-kommandoen efter hver case-s\u00e6tning. Ellers vil linierne for de efterf\u00f8lgende cases ogs\u00e5 blive udf\u00f8rt. Det er ikke n\u00f8dvendigt at have en break-kommando efter den sidste case – derefter er der jo ingen linier, der kan risikere at blive udf\u00f8rt. Eksemplet viser ogs\u00e5, at man kan – i stedet for en case-s\u00e6tning – kan bruge ordet default. Det angiver, at de efterf\u00f8lgende programlinier skal udf\u00f8res, hvis ingen af de andre cases udf\u00f8res.<\/p>\n

L\u00f8kker<\/strong><\/p>\n

L\u00f8kker bruges til at gentage den samme programstump – stort set – flere gange i et program. Sammenlignet med VBScript har JavaScript ikke ret mange l\u00f8kkestrukturer, men alligevel har de stort set den samme funktionalitet. Eksempel 4 viser de forskellige l\u00f8kketyper i JavaScript. I b\u00e5de while og do-while l\u00f8kkerne skal variablerne s\u00e6ttes til 0 uden for l\u00f8kken. Sammen med while angives k\u00f8rselsbetingelsen – det er den betingelse, der skal v\u00e6re opfyldt for at programlinierne inde i l\u00f8kken udf\u00f8res. I dette eksempel er k\u00f8rselsbetingelsen tal < 10. Det vil sige, at l\u00f8kken bliver k\u00f8rt, s\u00e5 l\u00e6nge tal har en v\u00e6rdi, der er mindre end 10. Som det ses, er den eneste forskel p\u00e5 while og do-while placering af while-udtrykket. I while-strukturen s\u00e6ttes while f\u00f8rst, mens do-while-strukturer indledes med do og afsluttes med while. Kontrollen af k\u00f8rselsbetingelsen foretages ved while-kommandoen. Det vil sige, at indholdet af en do-while-l\u00f8kke bliver udf\u00f8rt, inden k\u00f8rselsbetingelsen kontrolleres f\u00f8rste gang. Man er s\u00e5ledes altid sikker p\u00e5, at do-while-l\u00f8kken bliver udf\u00f8rt en gang – denne garanti har man ikke ved while-l\u00f8kker.<\/p>\n

For-l\u00f8kken er anderledes end while og do-while. Den er designet specielt til de tilf\u00e6lde, hvor en l\u00f8kke skal k\u00f8re, mens en variabel t\u00e6lles op. Den variabel, der bliver talt op kaldes – logisk nok – for t\u00e6ller-variablen. I dette eksempel er t\u00e6ller-variablen tal. Efter ordet for er det muligt at angive tre ting, der alle samles i en parentes og adskilles med semikolon. Den f\u00f8rste er en initaliseringsdel, der udf\u00f8res inden l\u00f8kken k\u00f8res f\u00f8rste gang. I dette tilf\u00e6lde bruges initialiseringsdelen til at s\u00e6tte tal til 0. I den n\u00e6ste del angives k\u00f8rselsbetingelsen – som ved while og do-while er k\u00f8rselsbetingelsen tal < 10. K\u00f8rselsbetingelsen evalueres inden l\u00f8kkens start – svarende til evalueringen af en k\u00f8rselsbetingelse i en while-s\u00e6tning. Den sidste del af for-l\u00f8kken angiver en kommando, der skal udf\u00f8res som det sidste i hvert genneml\u00f8b af l\u00f8kken – i dette tilf\u00e6lde er det en opt\u00e6lning af tal.<\/p>\n

Tabeller<\/strong><\/p>\n

En af de ting, computere er rigtigt gode til, er at tygge sig igennem en enorm m\u00e6ngde tal og foretage den samme beregning p\u00e5 dem alle sammen. Derfor er det smart, at man kan gemme disse tal i tabeller. I programmeringssammenh\u00e6ng hedder disse tabeller arrays. Eksempel 5 viser, hvordan et array oprettes og bruges. Man laver en variabel til et array ved at s\u00e6tte den lig med new Array(). I parentesen skrives st\u00f8rrelsen p\u00e5 arrayet – det svarer til antallet af pladser i tabellen. Man tilg\u00e5r de forskellige pladser – elementer – i tabellen ved at angive pladsens position i kantede parenteser efter navnet p\u00e5 tabellen. Som det ses af eksempel 5, hedder den f\u00f8rste plads 0 og den sidste 5. Generelt har det sidste element i et array positionen en mindre en st\u00f8rrelsen p\u00e5 arrayet.<\/p>\n

Objekt-orienteret programmering<\/strong><\/p>\n

Ligesom VBScript bygger JavaScript til en hvis grad p\u00e5 den objekt-orienterede tankegang. Objekt-orienteret programmering er et s\u00e6rdeles omfattende emne, men det er kun en meget begr\u00e6nset del af det, det er n\u00f8dvendigt at have kendskab til for at kunne forst\u00e5 og bruge JavaScript. Det, der er vigtigt at forst\u00e5, er, at et objekt er en samling af funktioner og variable. Alle objekter har en navn, og man skal bruge dette navn for at tilg\u00e5 objektets indhold. Hvis et objekt ved navn person har en variabel, der hedder alder, kan denne tilg\u00e5s ved at skrive person.alder.<\/p>\n

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

Denne del af kurset skulle gerne have lagt fundamentet for programmering i JavaScript. I n\u00e6ste nummer vil det blive gennemg\u00e5et, hvordan man laver visuelle programmer i JavaScript, og hvordan man s\u00e6tter sine JavaScript-programmer ind i HTML-koden.<\/p>\n

K\u00e6rt barn har mange navne <\/strong><\/p>\n

JavaScript er det navn Netscape valgte at give deres scriptsprog, da de opfandt det. Siden har European Computer Manufacturers Association (ECMA) standardiseret det og givet det navnet ECMA-script. Microsoft har valgt at implementere en del af JavaScript – og nogle enkelte nye funktioner – i Internet Explorer under navnet J-script.<\/p>\n

Store og sm\u00e5 bogstaver <\/strong><\/p>\n

I mods\u00e6tning til VBScript kan JavaScript kende forskel p\u00e5 store og sm\u00e5 bogstaver. Det vil sige, at funktionen areal er forskellig fra funktionen Areal. Det samme g\u00e6lder variabler og kommandoer. Alle kommandoer – if, for, while og s\u00e5 videre – skal skrives med sm\u00e5t. Hvis man f\u00e5r en fejl om, at en given funktion ikke eksisterer, er det en god ide at starte med at kontrollere, at man har skrevet funktionsnavnet fuldst\u00e6ndigt rigtigt.<\/p>\n

Eksempel 1: Beregning af areal i JavaScript <\/strong><\/p>\n

function areal (hojde, bredde)<\/p>\n

{<\/p>\n

\u00a0 return hojde * bredde;<\/p>\n

}<\/p>\n

\u00a0<\/p>\n

Eksempel 2: V\u00e6gtkontrol <\/strong><\/p>\n

function vaegtKontrol (vaegt)<\/p>\n

{<\/p>\n

\u00a0 if (vaegt > 200)<\/p>\n

\u00a0\u00a0 \u00a0besked = “Du er overv\u00e6gtig”;<\/p>\n

\u00a0 else<\/p>\n

\u00a0\u00a0\u00a0 besked = “Du er slank”;<\/p>\n

}<\/p>\n

\u00a0<\/p>\n

EKSEMPEL 3: Bestemmelse af medaljer <\/strong><\/p>\n

function medalje (placering)<\/p>\n

{<\/p>\n

\u00a0 switch (placering)<\/p>\n

\u00a0 {<\/p>\n

\u00a0\u00a0\u00a0 case 1 : besked = ‘guld’;<\/p>\n

\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 break;<\/p>\n

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

\u00a0\u00a0\u00a0 case 2 : besked = ‘s\u00f8lv’;<\/p>\n

\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 break;<\/p>\n

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

\u00a0\u00a0\u00a0 case 3 : besked = ‘bronze’;<\/p>\n

\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 break;<\/p>\n

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

\u00a0\u00a0\u00a0 default : besked = ‘ingen medalje’;<\/p>\n

\u00a0 }<\/p>\n

\u00a0<\/p>\n

\u00a0 return besked;<\/p>\n

}<\/p>\n

\u00a0<\/p>\n

EKSEMPEL 4: L\u00f8kker i JavaScript <\/strong><\/p>\n

function whileEksempel()<\/p>\n

{<\/p>\n

\u00a0 tal = 1;<\/p>\n

\u00a0 sum = 0;<\/p>\n

\u00a0 while (tal < 10)<\/p>\n

\u00a0 {<\/p>\n

\u00a0\u00a0\u00a0 sum = sum + tal;<\/p>\n

\u00a0\u00a0\u00a0 tal = tal + 1;<\/p>\n

\u00a0 }<\/p>\n

\u00a0<\/p>\n

\u00a0 return sum;<\/p>\n

}<\/p>\n

\u00a0<\/p>\n

function doWhileEksempel()<\/p>\n

{<\/p>\n

\u00a0 tal = 1;<\/p>\n

\u00a0 sum = 0;<\/p>\n

\u00a0 do<\/p>\n

\u00a0 {<\/p>\n

\u00a0\u00a0\u00a0 sum = sum + tal;<\/p>\n

\u00a0\u00a0\u00a0 tal = tal + 1;<\/p>\n

\u00a0 }<\/p>\n

\u00a0 while (tal < 10);<\/p>\n

\u00a0<\/p>\n

\u00a0 return sum;<\/p>\n

}<\/p>\n

\u00a0<\/p>\n

function forEksempel()<\/p>\n

{<\/p>\n

\u00a0 sum = 0;<\/p>\n

\u00a0 for (tal = 0; tal < 10; tal++)<\/p>\n

\u00a0\u00a0\u00a0 sum = sum + tal;<\/p>\n

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

\u00a0return sum;<\/p>\n

}<\/p>\n

\u00a0<\/p>\n

EKSEMPEL 5: Arrays <\/strong><\/p>\n

function arrayEksempel()<\/p>\n

{<\/p>\n

\u00a0 karakterer = new Array(6);<\/p>\n

\u00a0 karakterer[0] = 7;<\/p>\n

\u00a0 karakterer[1] = 6;<\/p>\n

\u00a0 karakterer[2] = 11;<\/p>\n

\u00a0 karakterer[3] = 10;<\/p>\n

\u00a0 karakterer[4] = 10;<\/p>\n

\u00a0 karakterer[5] = 9;<\/p>\n

\u00a0<\/p>\n

\u00a0 sum = 0;<\/p>\n

\u00a0 for (taeller = 0; taeller < 6; taeller = taeller + 1)<\/p>\n

\u00a0\u00a0\u00a0 sum = sum + karakterer[taeller];<\/p>\n

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

\u00a0 return sum \/ 6;<\/p>\n

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

Kristian Hansen forts\u00e6tter nu Computer PCs store Internet-kursus. Denne gang giver han en introduktion til JavaScript. Tidligere i dette kursus er det blevet beskrevet, hvordan man kan g\u00f8re sine hjemmesider mere interessante med VBScript. Denne artikel og de to n\u00e6ste i kurset vil beskrive JavaScript, der ogs\u00e5 er et scriptsprog. Java og JavaScript For at […]<\/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-126","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