JavaScript. nedarvning.

Transkript

1 JavaScript er et sprog, der kan give en hjemmeside mere funktionalitet og gøre den interaktiv, så den reagerer på læsernes handlinger. CGI (Common Gateway Interface) har hidtil været de protokoller, man brugte til at skabe interaktion på WWW. Med JavaScript er der kommet et sprog, som kan meget af det samme som CGI-programmer, men som er lettere at lære. JavaScript er udviklet af Netscape og hed oprindelig LiveScript. Som navnene antyder, minder Java og JavaScript om hinanden. Man kan betragte JavaScript som en letvægts-udgave af Java. Der er dog også store forskelle mellem JavaScript og Java. Tabellen herunder opsummerer de vigtigste forskelle. JavaScript Fortolket kode. Objektbaseret. Bruger indbyggede objekter. Kode integreret i HTML-dokumenter. Variabler erklæres ikke. Dynamisk binding. Referencer til objekter kontrolleres under afvikling. Java Kompileret kode. Objektorienteret. Applets består af objektklasser med nedarvning. Applets adskilt fra HTML-dokumenter som class-filer. Variabler og deres type skal erklæres. Statisk binding. Referencer til objekter skal være i orden ved kompilering. En Java-applet skal kompileres til en separat class-fil og uploades til en WWW-server, før den kan køres. JavaScript-kommandoer indtastes direkte i et HTML-dokument side om side med HTML-koderne. Java er striks med variabel-kontrol, hvor JavaScript er mere fleksibel. Java har mange kommandoer, hvor JavaScript har relativt få kommandoer. Java kræver et solidt kendskab til programmering. JavaScript er nemmere at lære, og selv med et par simple kommandoer kan en hjemmeside få et vældigt løft. En fordel ved JavaScript er, at det kan hjælpe til at nedsætte presset på WWW-servere. Normalt er det CGI-programmer, der kontrollerer, om formularer er indtastet korrekt. Efter en læser har udfyldt en formular og trykket på Submit-knappen, sendes formularen til et CGI-program, der bruger noget af serverens processor-tid på at kontrollere formularen. Har læseren begået en fejl i sin indtastning, får han/hun det at vide af CGI-programmet og skal indtaste formularen på ny. Når det er sket, skal CGI-programmet igen kontrollere formularen, og igen koster det kostbar tid på en travl WWW- 338

2 server. JavaScript kan bruges til at kontrollere, om en formular er udfyldt korrekt. Kontrollen sker lokalt på læserens computer via nogle JavaScriptkommandoer. CGI-programmet skal slet ikke aktiveres. En anden fordel er, at kontrollen er meget hurtigere end hvis formularen skal over en modemforbindelse til et CGI-program på en WWW-server. For at JavaScript skal virke, kræver det, at browseren har en fortolker, der kan udføre JavaScript-kommandoer. Netscape Navigator 2.0, 2.02 og 3.0 har en JavaScript-fortolker. Microsoft er også hoppet på JavaScript-vognen med Internet Explorer 3.0. Hvilke browsere kan vise JavaScript? Netscape Navigator og Microsoft Internet Explorer sidder på 90%-95% af browser-markedet, så fra slutningen af 1996, hvor de nye versioner af Navigator og Explorer er ude på markedet, kan langt størsteparten af læserne udnytte JavaScript. Struktur i HTML-dokumenter Et JavaScript-program markeres i et HTML-dokument med Script-koden, der er en containerkode. Som hovedregel bør JavaScript-programmer ligge mellem og sammen med eventuelle Meta- og Title-koder. Grunden er, at JavaScript-kommandoer ikke skal kunne vises i dokumentet og derfor ikke bør være i Body-sektionen. Der er dog undtagelser fra reglen. Et JavaScript-program kan sagtens udføres, selv om det ligger i Bodysektionen, og enkelte JavaScript-kommandoer skal befinde sig sammen med andre almindelige HTML-koder. Man bør kode sine HTML-dokumenter defensivt, så ældre browsere ikke viser rå JavaScript-kommandoer på skærmen. Det undgår man ved at indtaste almindelige HTML-kommentarkoder omkring selve JavaScript-programmet. Før programmet indtaster man tegnene . Den generelle struktur for JavaScript er vist her:  De almindelige HTML-koder. 339

3 Script-koden kan indeholde Language-attributten, der specificerer det sprog, som det efterfølgende program er skrevet i. Den eneste anden mulighed udover JavaScript er LiveScript, men det er tvivlsomt, om LiveScript bliver understøttet i fremtidige versioner af Navigator, og Microsoft Internet Explorer understøtter ikke LiveScript. Det vil sjældent gøre nogen skade at udelade Language-attributten, men den er god at have med for en sikkerheds skyld. Hvis der i fremtiden udvikles nye script-sprog, vil det blive Language-attributtens opgave at fortælle browserne, hvilket sprog der er tale om. Mellem tegnene  kommer programlinjerne til JavaScript-programmet, og man slutter programmet af med slutkoden. Derefter afslutter man Head-sektionen med slutkoden. Bemærk, at det kun er god programmeringsskik at anbringe JavaScript-programmer i Head-sektionen. Det er ikke strengt nødvendigt, og heller ikke altid muligt. Hello world det første program Lad os få noget JavaScript kodet! Her er et Hello world-program. I Java- Script er det noget mere simpelt end i Java. Herunder ses et JavaScriptprogram inde i Head-sektionen.  <Body Bgcolor=White> Tekst fra Body-sektionen. write er en metode, der knytter sig til objektet document. write udskriver simpelthen en tekst på skærmen. I Netscape Navigator ser det ud som vist her. 340

4 I Microsoft Internet Explorer 2.0, der ikke kan fortolke JavaScript, kommer "Hello world" ikke ud. Man skal altid huske kommentarkoderne i sine JavaScript-programmer. Man har som regel en beklagelig tendens til at glemme dem, og det bevirker, at ældre browsere sprøjter rå JavaScript-kode ud i hovedet på den sagesløse læser. document.write("hello world.") <Body Bgcolor=White> Tekst fra Body-sektionen. Herunder kan man se, hvad der sker i Explorer 2.0, hvis kommentarkoderne ikke er med. 341

5 Variabler Vi starter i det små med variabler og variabeltyper. JavaScript er meget fleksibel med hensyn til variabeltyper. Det er ikke nødvendigt at angive, om en variabel skal være af typen tekst, heltal eller reelt tal. Man definerer en variabel ved at tildele den en værdi: sum = 15 Variabelnavne Variabelnavne skal starte med et bogstav eller tegnet _ (underscore). Efterfølgende tegn kan også være tal (0-9). Her er eksempler på gyldige variabelnavne: _kasse_antal TAELLER55 _2_mennesker_paa_en_strand Ingen_æbler_på_oeen JavaScript accepterer æ og å i variabelnavne, men ikke ø! Det kan dog være en idé at undgå den danske tegn i variabelnavne. Andre browsere vil måske være mere strenge over for de danske tegn, og der er ingen grund til at udfordre skæbnen. JavaScript er følsom med hensyn til store og små bogstaver. De nedenstående variabelnavne er alle forskellige: TAELLER Taeller taeller Lokale og globale variabler 342 Lokale variabler bruges inde i funktioner. Nøgleordet var benyttes til at erklære en lokal variabel.

6 var x = 20 var tekst2 = "Star Trek" Globale variabler bruges overalt i et HTML-dokument med et JavaScriptprogram. Globale variabler erklæres ved at give dem en værdi. x = 20 tekst2 = "Star Trek" Det er en hjælp at erklære globale variabler i starten af et program. Det gør programmet nemmere at læse og vedligeholde for forfatteren. Det nedenstående HTML-dokument erklærer nogle variabler og udskriver dem på skærmen. document.bgcolor="#ffffff" personnavn = "Peter Holm Svendsen" Taeller = 2 broek = 3.10 document.write(personnavn + " ") document.write(taeller + " ") document.write(broek + " ") Tekst fra Body-sektionen. Linjen document.bgcolor="#ffffff" giver siden en hvid baggrundsfarve. Bemærk Br-koderne i de tre document.write-linjer. De sender tre linjeskift til browseren. Det er denne måde, at laver almindelige HTML-koder på. Man sætter dem i en document.write-metode med anførselstegn omkring. 343

7 Betingede udtryk og operatorer Et betinget udtryk sammenligner to eller flere variabler. Afhængig af sammenligningen bliver en variabel tildelt en af to værdier. Betingede udtryk har syntaksen: Variabel = (Sammenligning)? Værdi1 : Værdi2 Hvis sammenligningen er sand, bliver Variabel tildelt Værdi1. Hvis den er falsk, bliver Variabel tildelt Værdi2. Herunder ses et eksempel, hvor det undersøges, om variablen Alder er mindre end eller lig med 18. Hvis sammenligningen er sand, bliver variablen Vurdering tildelt værdien "Skrid! Du er for ung". Hvis sammenligningen er falsk, bliver Vurdering tildelt værdien "Kom indenfor". Umiddelbart kan det lyde mærkeligt at tildele værdier til tekstvariabler. Man er vant til at betragte værdier som tal. Det kan tage lidt tid at vænne sig til, at en variabel f.eks. har værdien "Jens". document.bgcolor="#ffffff" Alder = 10 Vurdering = (Alder <= 18)? "Skrid! Du er for ung" : "Kom indenfor" document.write(vurdering) Sådan ser det ud i Netscape Navigator. 344

8 En operator kan sammenligne to eller flere variabler eller ændre en variabels værdi. JavaScript har almindelige operatorer som plus, minus, multiplikation og division, men der er mange andre. Operatorer bruges sammen med operander. En operand er typisk en variabel eller en konstant. Tag nedenstående udtryk som eksempel: x + y Her er x og y operander, og + er operator. Tildelende operatorer En tildelende operator tildeler en værdi til venstre operand baseret på værdien af operatorens højre operand. Herunder ses eksempler på tildelinger: x += y x -= y x *= y x /= y x %= y Addition. Det samme som x = x + y Subtraktion. Det samme som x = x - y Multiplikation. Det samme som x = x * y Division. Det samme som x = x / y Modulus. Det samme som x = x % y Disse operatorer er brugt i nedenstående HTML-dokument. Første operand (x1, x2, x3, x4 og x5) har værdien 7 i alle tilfælde. Anden operand (y) har værdien 3 i alle tilfælde. document.bgcolor="#ffffff" y = 3 x1 = x2 = x3 = x4 = x5 = 7 x1 += y document.write(x1 + " ") x2 -= y document.write(x2 + " ") x3 *= y document.write(x3 + " ") x4 /= y document.write(x4 + " ") x5 %= y document.write(x5 + " ") 345

9 Læg mærke til værditildelingen af x1, x2 etc. Det er nemmere end at indtaste dem som x1 = 7, x2 =7 etc. Her er resultatet. Aritmetiske operatorer JavaScript har de almindelige fire standardoperatorer addition (+), subtraktion (-), multiplikation (*) og division (/). Der er dog flere operatorer. De kan gøre livet lidt nemmere, når man programmerer i JavaScript. Modulus Modulus dividerer to værdier med hinanden og returnerer resten af divisionen. ModResultat = 8 % 3 Ovenstående operation returnerer resultatet 2, fordi 3 går op i 8 to gange og der er 2 til rest. Forøgelse Man forøger en variabel med 1 ved at bruge to plustegn (++) før eller efter variablen. Sættes ++ før operanden som i ++a, forøges a med 1 og resultatet returneres. Sættes ++ efter operanden som i a++, returneres a og derefter forøges a med 1. a = ++b b forøges med 1, og resultatet tildeles a. a = b++ a sættes lig b. Derefter forøges b med 1 De to plustegn kan også bruges på en enkelt operand. Det vil sige, at det ikke er nødvendigt at tildele variablens værdi til en anden variabel. 346

10 document.bgcolor="#ffffff" x = 3 document.write(x + " ") x++ document.write(x + " ") x++ document.write(x + " ") x sættes lig 3 og forøges med 1 to gange. Her er resultatet. Formindskelse Formindskelse sker med to minustegn (--) før eller efter variablen. Reglerne er de samme som for forøgelse. a = ++b b formindskes med 1, og resultatet tildeles a. a = b++ a sættes lig b. Derefter formindskes b med 1 Fortegnsskift Man skifter fortegn på en variabel med et enkelt minustegn (-). Svar = -y Hvis y har værdien 5, får Svar værdien

11 Logiske operatorer Denne gruppe operatorer kaldes også boolske operatorer. Operatorerne returnerer en logisk værdi, der kan være enten true eller false. Logiske operatorer bruges f.eks. sammen med if-sætningen. And And-operatoren skrives med to og-tegn (&&). And sammenligner to eller flere udtryk og returnerer true, hvis de alle er sande. x == 2 && y == 3 Or Or-operatoren skrives med to lodrette streger ( ). Or sammenligner to eller flere udtryk og returnerer true, hvis blot en af udtrykkene er sande. x == 2 y == 3 Not Not-operatoren skrives med et udråbstegn (!). Not bytter rundt på det logiske resultat af en sammenligning. Hvis et udtryk er sandt, vil Not gøre det falsk og omvendt. Man skal huske at sætte parenteser omkring det udtryk, man vil bruge Not på. Ellers risikerer man et forkert resultat. Det nedenstående dokument illustrerer brugen af &&, og!. document.bgcolor="#ffffff" Alder = 16 if (Alder >= 18 && Alder <= 30) document.write("du får ungdomsrabat "); if (Alder < 18 Alder > 30) document.write("du får ikke ungdomsrabat "); if (!(Alder >= 18)) document.write("du er under 18 år "); 348

12 Første if-sætning returnerer true, hvis Alder er større end eller lig med 18 og mindre end eller lig med 30. Anden if-sætning returnerer true, hvis Alder er under 18 eller over 30. Tredje if-sætning indeholder en Not-operator, og da de har en tendens til at "vende verden på hovedet", gennemgår vi den i flere trin. Den inderste parentes undersøger, om Alder er større end eller lig 18. I dette tilfælde er Alder lig 16, så den inderste parentes returnerer false. Herefter evalueres Not-operatoren, og da første parentes er false, bliver hele udtrykket true og teksten "Du er under 18 år " udskrives. Her er outputtet fra HTML-dokumentet. Sammenlignende operatorer En sammelignende operator bruges til, nå ja, at sammenligne to operander, f.eks. to variabler. Herunder ses eksempler på alle sammenlignende operatorer. a > b a >= b a < b a <= b a == b a!= b a større end b a større end eller lig med b a mindre end b a mindre end eller lig med b a lig med b a forskellig fra b HTML-dokumentet demonstrerer, at man kan anbringe udtryk direkte i document.write-sætninger. De udskriver "true" eller "false" på skærmen afhængig af, om udtrykket er sandt eller falsk. 349

13 document.bgcolor="#ffffff" Antal = 20 document.write(antal == 20); document.write(" "); document.write(antal >= 15); document.write(" "); document.write(antal <= 10); document.write(" "); document.write(antal!= 30); Pas især på med lig med-operatoren. Den skrives med to lighedstegn (==). Hvis man kun skriver ét lighedstegn (=), tror JavaScript, at man forsøger at tildele en værdi til en variabel. Resultatet vises her. Strengoperatorer Tekststrenge kan adderes med plustegnet (+). tekst1 = "Nørre " tekst2 = "Sundby" tekst3 = tekst1 + tekst2 Resultatet er, at tekst3 får værdien "Nørre Sundby". 350