Basal programmering i JS

[04.06.2020] [Nørderier/Teori]

• Basal programmering i JS

Denne guide har været lidt ubrugelig da jeg har skrevet min highlighter en del om. Den skulle være fikset nu for dem der har lyst til at læse den. På et tidspunkt laver jeg nok en ordentlig gennemgang af JavaScript.

Meningen med denne guide er at skabe et grundlag for et "test-miljø" til at teste små programmer i. Det fede ved programmer og herunder funktioner, også kaldet algoritmer, er at vi kan sætte dem til at gøre et eller andet på samme måde gentagne gange. På den måde skal vi bare forklare en maskine hvad den skal gøre én gang, og så kan den gentage det igen og igen i en uendelighed. Sådanne funktioner er meget anvendelige feks. sammen med matematik da vi med dem ikke behøver at gennemløbe lange rækker af tal og den slags.

Så vidt jeg ved er alle de programmeringssprog der findes, stort set ens. De er lavet omkring den samme kombination af variable, funktioner, lister, statements osv. For at lære at programmere er det derfor fint bare at gå i gang med et hvilket som helst sprog. Sprog til styresystemer er dog lidt mere avancerede end dem til internettet da kode skrevet til styresystemer skal compiles. Og det vil jeg ikke her komme ind på. For at vi kan komme i gang med at programmere, vælger jeg i stedet et web-baseret programmeringssprog, og det mest tilgængelige af web-sprogene må nok være JavaScript. JavaScript, eller bare JS fra nu af, arbejder på client-siden af internettet, det betyder at din browser fortolker sproget direkte. Engang kunne det give nogle problemer da browserne var forskellige, men nu er de vist alle rimeligt standardiserede.

JS er valgt, og det eneste det kræver for at lave små JS-programmer, er en browser hvilket alle der læser dette, har. For at skrive kode skal du bruge en tekst-editor – der følger en med alle styresystemer, men hvis du vil have en lidt mere avanceret en end standard Notepad, kan jeg klart anbefale Notepad++ (linkes til længere nede).

Koden i sig selv kan godt være lidt svær at forholde sig til, derfor laver vi aller først et test-miljø. JS fungerer sammen med sproget HTML der egentligt ikke er et sprog til programmering, men nærmere et sprog til at formatere og indsætte elementer i noget der så bliver til et HTML-dokument eller simpelthen en web-side.

Denne guide er ikke en fuldstændig gennemgang af JS og slet ikke af HTML. Hvis du vil læse andre guides til JS, andre web-sprog og HTML, kan jeg klart anbefale siden Afterhourprogramming, den er godt nok på engelsk, men der er en masse gode guides på siden.

• Afterhourprogramming.Com (guides til forskellige web-programmeringssprog)
• Notepad++ (anbefalelsesværdig tekst-editor)

Nu tilbage til emnet. Først laver vi et HTML-dokument, det gøres ved at åbne Notepad++, vælge "filer" og "gem som" og derefter vælge "hyper-text-markuplanguage (html)" som filtype. Gem filen, feks. som "webside.html", evt. på skrivebordet, og vi har nu lavet en webside.

Siden er tom, og det skal laves om – målet er jo at lave et test-miljø til at teste de forskellige elementer i JS. Da der er forskellige browsere, skal den nye side først defineres som værende en HTML side – så kan alle browserne forstå hvad der skal ske med siden når den åbnes. Derfor er det første der skrives i Notepad++, følgende:

Herfter skal browseren have at vide hvilket omfang af teksten der er html. Det gøres ved at skrive de to følgende tags (et tag i HTML er noget imellem to krokodillegab <tag> - et sluttag kendes på en skråstreg før det der står i selve taggen </tag>):

Koden skal udvides så siden har både et "head" og en "body":

Grunden til et hoved og en krop er at browseren skal vide hvad den skal vise, og hvad der er bagvedliggende kode (den bagvedliggende kode kan kaldes for en meta-kode eller metatags).
For at teste siden skriver vi en paragraf (en linje indeholdt i <p> tags) i kroppen, linjen skulle gerne vises i browseren hvis du klikker på html-dokumentet "webside.html" vi gemte før.

Og tjek så lige vores nye side ud!

Det næste der skal ske, er at siden skal have en knap, en test-knap eller et <button> tag, den tilføjes sådan her:

br-tagget betyder bare at der er et linjeskift – browsere kan ikke overføre linjeskift fra koden og til det der vises. Nu er test-miljøet etableret!

Vi skal nu til at programmere. Først indsættes et start- og et sluttag der fortæller at inden for dem er kode. Tagsne hedder script og skrives sådan her:

Egentligt kan script-tags skrives over det hele i dokumentet, men der er nogle funktionsmæssige forbehold, og derfor skriver vi dem lige under test-knappen. OK computer.

Udover de to script-tags har vi tilføjet <div id=”testfelt”></div>. Div er en kasse, den er først og fremmest usynlig, men kan styles til at have alle mulige forskellige slags udseender. Lige nu tjener den bare som et felt vi kan skrive ting i fra vores programmer.

Når vi programmerer, er det først og fremmest vigtigt at vi er klar over hvordan vi indsætter comments. Comments har ikke noget med selve programmet at gøre, men tjener udelukkende til vores overblik over koden. Comments starter med //, efter de to skråstrege skriver vi vores comment. Comments afbrydes ved linjeskift – i notepad++ og i tekstfelterne kendes comments på at de er grønne. Udover comments består programmering groft skitseret af strenge af forskellige slags, variable, funktioner og lister – og det alt sammen i JS går under kategorien objekter.
Altså, for at vise det fra en ende af, variable skrives i JS med var foran navnet på variablen:

Det er kutyme at slutte hver linje med et semikolon, men i JS bliver det faktisk gjort af sig selv hvis vi glemmer det. Det er dog en meget god vane at tilegne sig at sætte semikolonet. Selve navnet på variablen kan enten være store eller små bogstaver eller tal. JS kender forskel på store og små bogstaver, det er derfor vigtigt at vi har styr på navnene. Navnene kan ikke indeholde noget uden for de tre kategorier - feks. mellemrum eller bindestreger eller sådan noget. Variablens indhold kan være et tal, en såkaldt integer, der behøves ikke gåseøjne omkring et tal. Det gør der derimod omkring en streng som "Jeg er en variable – nummer to dog". Hvis gåseøjnene undlades, tror browseren i bedste fald at strengen henviser til en anden variabel. Den tredje variabel er et boolsk udtryk, boolsk udgør mulighederne true eller false. Når vi benytter boolske udtryk, skal der ikke være gåseøjne. Den sidste variabel er sat til at være variabel nummer to, de har altså samme indhold. Som de forskellige variable er nu, er de bare lagret på siden. De bliver ikke skrevet nogen steder. Men det vil vi selvfølgelig gerne have, så vi kan se om de dur. Derfor skal vi have fingre i "testfelt". Da "testfelt" er et objekt, fanges det i JS med .getElement på følgende måde:

Læg mærke til at vi refererer til feltet med endnu en variabel. Variable i JS kan indeholde alt muligt. .innerHTML betyder at vi redigerer hvad der står imellem de to div-tags – hvis der står noget i forvejen, slettes det. Vi kan også skrive en streng til innerHTML, det gør vi blot ved at sætte strengen i gåseøjne: objekt.innerHTML = ”en streng”. Hvis en streng og en variabel skal kombineres, sætter vi et plus-tegn imellem ligesom vi har gjort imellem ”1 + 2 = ” og den første variabel i parentes med de efterfølgende udregninger. Efter at .innerHTML er kaldt, skulle vores nye hjemmeside gerne se sådan her ud:

Fint! Og lad os lave nogle funktioner. For at lave en funktion i JS skriver vi først function efterfulgt af navnet på funktionen efterfulgt af (): function nyFunktion(){}. Navnet på funktionen skal overholde de samme regler som navne på variable. De to krølparanteser angiver indholdet i funktionen, imellem dem skal der stå alt hvad funktionen skal gøre. Funktioner sluttes ikke af med et semikolon. Imellem de to parenteser kan der stå argumenter, hvis funktionen feks. tager ét argument, minder den om de funktioner man havde i skolen, dem man lavede fiskeben til, ax + b = y, hvor x er argumentet. Først laver vi en simpel funktion uden argumenter. Ideen med den er at den skal kunne ”kaldes” og så sker der et eller andet. I JS er der en forudbestemt funktion der hedder alert – den er i sig selv ret træls, men den udmærker sig ved at man lægger mærke til den, det gør man til ting der er træls, derfor bruger vi den her. Da alert er en funktion, skal den sluttes af med (), hvor der i parentesen skal stå ét argument. Da alert er forudbestemt, sætter vi ingen krølparanteser - dens indhold er allerede defineret.

Hermed en funktion i en funktion. Den yderste funktion, den vi selv har lavet og kaldt et navn vi selv har valgt, tager lige nu ingen argumenter. Den stiller altså ingen krav til det den skal udføre. I sig selv er den ret passiv indtil vi kalder den ved at skrive dens navn: nyFunktion(); - uden at skrive function foran. Hvis vi igen skriver function efterfulgt af det navn vi valgte til den første funktion, overskrives den gamle funktion af en ny. Det er værd at lægge mærke til at der er semikolon efter alert() - det er der fordi vi kalder funktionen. Der er ikke semikolon efter krølparanteserne efter function nyFunktion(){indhold...}, og det er der ikke fordi vi definerer funktionen.

Nu når en funktion er indført, kan vi vende tilbage til den knap vi lavede tidligere, for en funktion kan nemlig knyttes til bla. en knap. Med knappen bliver funktionen interaktiv, en bruger kan nu interagere med den:

Som du kan se, har vi tilføjet onclick= til knappen. Når knappen trykkes på, udløses den funktion der står i mellem gåseøjnene. Der skal stå en funktion, og den skal angives med () til sidst, der må gerne høre argumenter til funktionen, for eksempel kan teksten der popper op i alarmboksen, være et argument:

Læg mærke til hvordan argumentet i onclick bliver skrevet i enkelt ' citationer hvor det nede i funktionen er en variabel. Argumentet i funktionen er camoufleret som Argument1 indtil det popper frem via alert. Browseren kan ikke forstå dobbelt-citationer i onclick da den så tror at onclick-indholdet slutter ved det andet dobbeltcitation for så at starte igen osv.

Til sidst kan vi tilføje endnu et bruger-input, på den måde kan brugeren af siden selv vælge hvad der skal stå i pop-up kassen, som et plaster på såret over hvor irriterende et pop-op vindue er:

Der er tilføjet et inputfelt. Det skal have typen input, derudover skal det have en id. I funktionen henter vi informationen fra inputfeltet først ved at hente feltet som et objekt og derefter ved at hente det der er skrevet i feltet, ved at anvende value. Brugeren skriver noget i feltet, brugeren trykker på knappen der aktiverer funktionen der henter inputtet og skriver det ind i pop-up'en – simple as that! Prøv selv:

Nu når vi alligevel har etableret et inputfelt og skrevet et regnestykke, kan vi lige så godt udvide vores lille program med en tjek-funktion. For at brugeren skal have mulighed for at regne stykket, skal vi lave et if-statement, det er en tjekker der eksekverer noget hvis noget er som det skal være, ellers gør tjekkeren ingenting, muligvis noget andet. Lad os se på hvordan et statement fungerer:

Som du kan se, er der blevet ændret lidt i opsætning. Vi har tilføjet en variabel var regn, den er en streng og har altså det indhold der står imellem citationerne. fangFelt.innerHTML sætter vi lig med ”regn”, og herefter har vi funktionen. Den indeholder en variabel brugerInp - denne variabel er sat til at hente value fra feltet ”brugerinput”. Det er vigtigt at der står value efter document.getElementById("brugerinput"). Hvis ikke, tror browseren at den skal behandle et objekt i stedet for en streng. Efter vi har angivet var brugerInp, starter vi et if-statement. Det tjekker om brugerInp er lig med regnestykket (husk at forsteV = 4, så regnestykket kan skrives om til 4 * 2 + 2). De to lighedstegn efter hinanden er ikke en fejl. For at browseren ved at den skal sammenligne de to værdier, skal vi sætte to lighedstegn. Altså så længe de to værdier er tal. Hvis de er strenge, skal der sættes tre lighedstegn. Grunden er at alt i JS med ét lighedstegn er en variabel der pga. lighedstegnet bliver tildelt en værdi. Og det er vi ikke interesserede i når vi skal tjekke. Hvis brugerinputtet opfylder ligheden, vil den linje der er mellem bølgeparenteserne, blive udført. Hvis ikke, vil den næste linje blive udført, den der står efter else.
Prøv evt. at løse stykket. Husk det med regneoperationer og hierarki:

Udover et statementet har vi lavet nogle ”finter” i programkoden. For at vi kan skrive med farve i feltet efter stykket er regnet, har vi tilføjet noget html-kode i JS-koden. Det drejer sig om <font style=\"color:red;\"> hvor især de to sæt gåseøjne er interessante. I JS, og andre programmeringssprog, er gåseøjne beregnet til at skrive strenge imellem. Hvis vi vil skrive gåseøjne inden i en streng, skal vi derfor sætte to bagvendte skråstreger, det hedder at ”escape” gåseøjnene. Hvis vi ikke gør det, tror browseren at strengen slutter efter style for så at begynde igen efter red;. Og da browseren ikke forstår to splittede strenge hvis der ikke er et + imellem dem, gir' den op, og siden vises forkert. Udover de to gåseøjne vil den opmærksomme læser sikkert også klø sig lidt i håret over semikolonet efter red. Det har dog ikke noget med JS at gøre, men istedet med sproget CSS at gøre. CSS er et markupsprog til at style hjemmesiderne, og det vil jeg ikke gå i detaljer med nu.
Normalt er det ikke velset at blande forskellige sprog for meget. Hvis vi vil undgå det i denne situation, kan vi evt. lave to div-felter, skjule dem begge og sætte statementet til at vise det relevante felt. Det husker vi lige til næste gang.

Nu har vi rundet variable, funktioner og endda statements. Så må vi hellere se på nogle lister. Lister, eller Arrays, er nummererede lister hvor hvert nummer (index) kan indeholde en streng eller et objekt, evt. endnu en liste. I JS bliver et array lavet ved at vi sætter en variabel lig med to firkantede parenteser []. I mellem de to parenteser kan der stå hvad listen skal indeholde, eller de kan efterlades tomme. Hvis de står tomme, kan vi senere sætte data ind i listen.

To forskellige måder at lave en liste på. Og her oven i købet en måde at demonstrere dem på:

Til at fræse en liste igennem hurtigt kan vi benytte os af en løkke, på engelsk: loop. Det er en funktion der udfører en ensartet handling x antal gange.

Det er vigtigt at bemærke at vi har skrevet += efter .innerHTML. Det er gjort sådan for at undgå at loopet ved næste gentagelse bare overskriver hvad der allerede står i innerHTML. En anden måde at gøre det på er at skrive testFelt.innerHTML = testFelt.innerHTML + x. x er sat til at starte ved 0, for det gør listen jo også. Det sidste der skal bemærkes, er relationen <= imellem x og tre. Det er det samme som x er mindre end eller lig med hvilket skrives med tegnet ≤. Det betyder at loopet stopper når x er lig med 3 frem for ved den største værdi der er mindre end 3 - i det her tilfælde 2. 3 kommer med andre ord med i loopet.
x er først og fremmest hvor mange omgange loopet kører, men x kan også bruges til at tælle igennem et index i en liste. Smart!
Loopet som eksempel:

Så fik du lært lidt JS. Til sidst vil jeg vise nogle små matematiske tricks i JS. JS har sit eget Math objekt funktion der kan bruges til at foretage mere avancerede matematiske operationen som feks. at opløfte, kvadratrod osv. Men da de basale operationer i matematik er at gange og plusse, andre operationer er bearbejdninger af disse to, kan vi allerede konstruere det meste matematik med det vi har været igennem.

HTML-delen:

Jscript-delen (skal være i script-tags):

Det ser måske unødigt komplekst ud hvilket vi matematikere vist godt kan lide. Nummerisk værdi, eller forskellen eller c = |a – b|, mellem to tal, a og b, er, ja, forskellen. Det ene tal skal trækkes fra det andet, og forskellen, c, skal herefter laves positiv hvis c < 0. Se evt. om du kan gennemskue Nummerisk værdi statementet.
Det andet, Oploeft, gør det samme som at opløfte et tal i et andet, feks a^b. Du kender sikkert operationen allerede. For at konstruere den har jeg benyttet et loop, at opløfte betyder jo at gange tallet a med sig selv b gange, og til det benytter jeg et loop på tallet a b antal gange.
Der er ydermere tilføjet et "rullegardin", en <select> i html-koden. I select-taggen er der tilføjet to <options>. For at få fingre i dem i JS skal vi først indføre en var vaelger = document.getElementById("vaelger").selectedIndex; der genkender det der er valgt af brugeren og udskriver det som et nummer (feks. Option nummer 1). Derefter skal nummeret indsættes i var vaelgOpt = document.getElementById("vaelger").options[vaelger]; som er et array. Til sidst bruger vi value til at finde hvad der står imellem de to options-tag i det valgte den option.

Den ovenstående smøre kan testes her:

Index Del