Introduktion til Javascript – Grundlæggende Webdesign, F2004. Introduktion til Javascript.

Præsentationer af emnet: "Introduktion til Javascript – Grundlæggende Webdesign, F2004. Introduktion til Javascript."— Præsentationens transcript:

1 Introduktion til Javascript – Grundlæggende Webdesign, F2004. Introduktion til Javascript

2 Introduktion til Javascript – Grundlæggende Webdesign, F2004. JavaScript - hvad er det? •JavaScripts er et script-sprog som afvikles af browseren

3 Introduktion til Javascript – Grundlæggende Webdesign, F2004. JavaScript - hvad er det? •JavaScripts er et script-sprog som afvikles af browseren •Tilføjer mere dynamik og interaktivitet på ens sider Billeder kan ombyttes når man flytter musen over dem Formularer kan påvirke hinanden efterhånde som de anvendes Udregninger kan udføres uden at man skal lave kompliceret webprogrammering

4 Introduktion til Javascript – Grundlæggende Webdesign, F2004. JavaScript - hvad er det? •JavaScripts er et script-sprog som afvikles af browseren •Tilføjer mere dynamik og interaktivitet på ens sider Billeder kan ombyttes når man flytter musen over dem Formularer kan påvirke hinanden efterhånde som de anvendes Udregninger kan udføres uden at man skal lave kompliceret webprogrammering •Man kan udrette meget med meget lidt programmering. Lige som med HTML kan det anvendes bare man har tekstbehandlig og en browser.

5 Introduktion til Javascript – Grundlæggende Webdesign, F2004. JavaScript - hvad er det? •JavaScripts er et script-sprog som afvikles af browseren •Tilføjer mere dynamik og interaktivitet på ens sider Billeder kan ombyttes når man flytter musen over dem Formularer kan påvirke hinanden efterhånde som de anvendes Udregninger kan udføres uden at man skal lave kompliceret webprogrammering •Man kan udrette meget med meget lidt programmering. Lige som med HTML kan det anvendes bare man har tekstbehandlig og en browser. •Selvom Javascript er let at arbejde med, er det et komplet programmeringssprog. Så efterhånden som man lærer mere, lærer man samtidigt det basale ved det meste computer programmering, så som Java, C++, Perl osv.

6 Introduktion til Javascript – Grundlæggende Webdesign, F2004. JavaScript - hvad er det? •JavaScripts er et script-sprog som afvikles af browseren •Tilføjer mere dynamik og interaktivitet på ens sider Billeder kan ombyttes når man flytter musen over dem Formularer kan påvirke hinanden efterhånde som de anvendes Udregninger kan udføres uden at man skal lave kompliceret webprogrammering •Man kan udrette meget med meget lidt programmering. Lige som med HTML kan det anvendes bare man har tekstbehandlig og en browser. •Selvom Javascript er let at arbejde med, er det et komplet programmeringssprog. Så efterhånden som man lærer mere, lærer man samtidigt det basale ved det meste computer programmering, så som Java, C++, Perl osv. •Danner sammen med CSS og DOM’en det der kaldes DHTML (Dynamisk HTML)

7 Introduktion til Javascript – Grundlæggende Webdesign, F2004. Placering af koden •Koden placeres på to måder - i et -tag: Kan placeres overalt i HTML-koden, men placeres normalt i -tag'et

8 Introduktion til Javascript – Grundlæggende Webdesign, F2004. Placering af koden •Koden placeres på to måder - i et -tag: Kan placeres overalt i HTML-koden, men placeres normalt i -tag'et - eller i en såkaldt eventhandler En lille kodestump man sætter på et tag (normalt -tag'et) Eksempel: Klik her! ( Kommandoen "alert('eek!')” er et metodekald som er indbygget i JS og åbner en dialog boks med et udråbstegn, den anførte tekst og en ’Ok’ knap)

9 Introduktion til Javascript – Grundlæggende Webdesign, F2004. Placering af koden •Koden placeres på to måder - i et -tag: Kan placeres overalt i HTML-koden, men placeres normalt i -tag'et - eller i en såkaldt eventhandler En lille kodestump man sætter på et tag (normalt -tag'et) Eksempel: Klik her! ( Kommandoen "alert('eek!')” er et metodekald som er indbygget i JS og åbner en dialog boks med et udråbstegn, den anførte tekst og en ’Ok’ knap) •De mest brugte EventHandlers: - onMouseOver: Når musen køres over - onMouseOut: Når musen køres væk igen - onClick: Når man klikker Men der er flere. Antallet af brugbare eventhandlers, bestemmet af hvilken browser siden skal ses i. Jo ældre browsere, jo færre eventhandlers kan man benytte.

10 Introduktion til Javascript – Grundlæggende Webdesign, F2004. Funktioner •Funktioner er en måde at genbruge kode-stykker

11 Introduktion til Javascript – Grundlæggende Webdesign, F2004. Funktioner •Funktioner er en måde at genbruge kode-stykker •Man skriver dem en gang (i et -tag eller i -tag'et), men kan kalde det flere gange fra en EventHandler

12 Introduktion til Javascript – Grundlæggende Webdesign, F2004. Funktioner •Funktioner er en måde at genbruge kode-stykker •Man skriver dem en gang (i et -tag eller i -tag'et), men kan kalde det flere gange fra en EventHandler OPGAVE: Skrive dette stykke kode i -tag'et: function besked() { alert('Hej DHTML!'); }...og lav herefter en eventHandler med denne kode:

13 Introduktion til Javascript – Grundlæggende Webdesign, F2004. Popup-vindue 1 •Nu laver vi et Javascript som rent faktisk kan bruges til noget: Et popup-vindue

14 Introduktion til Javascript – Grundlæggende Webdesign, F2004. Popup-vindue 1 •Nu laver vi et Javascript som rent faktisk kan bruges til noget: Et popup-vindue •Selvom det er let at åbne vinduer i HTML, er det samtidigt lidt ufleksibelt, idet at browseren bestemmer hvorledes vinduet skal se ud.

15 Introduktion til Javascript – Grundlæggende Webdesign, F2004. Popup-vindue 1 •Nu laver vi et Javascript som rent faktisk kan bruges til noget: Et popup-vindue •Selvom det er let at åbne vinduer i HTML, er det samtidigt lidt ufleksibelt, idet at browseren bestemmer hvorledes vinduet skal se ud. •JS giver kontrol over dette. Her er hvordan: window.open("URL","name","features"); - Denne stump kode åbner et vindue med websiden ’URL’ i. Altså den kaldte side. - I den anden parameter giver man vinduet et navn (ligesom når vi kalder siden via et target). - Den tredje parameter definerer vinduets egenskaber. Man kan bestemme vinduets størrelse, placering, udvalg af knapper mm. Skrives der ikke noget her, åbnes siden i et standard browser vindue med det sædvanlige udvalg af knapper.

16 Introduktion til Javascript – Grundlæggende Webdesign, F2004. Popup-vindue 1 •Nu laver vi et Javascript som rent faktisk kan bruges til noget: Et popup-vindue •Selvom det er let at åbne vinduer i HTML, er det samtidigt lidt ufleksibelt, idet at browseren bestemmer hvorledes vinduet skal se ud. •JS giver kontrol over dette. Her er hvordan: window.open("URL","name","features"); - Denne stump kode åbner et vindue med websiden ’URL’ i. Altså den kaldte side. - I den anden parameter giver man vinduet et navn (ligesom når vi kalder siden via et target). - Den tredje parameter definerer vinduets egenskaber. Man kan bestemme vinduets størrelse, placering, udvalg af knapper mm. Skrives der ikke noget her, åbnes siden i et standard browser vindue med det sædvanlige udvalg af knapper. •OPGAVE Skriv dette stykke kode i -tag'et: function popup() { window.open('http://www.dr.dk', 'popupvindue', 'width=800, height=510, scrolling=auto'); }...og så lav en eventHandler med denne kode:

17 Introduktion til Javascript – Grundlæggende Webdesign, F2004. Popup-vindue 2 •Funktioner kan også tage imod data når de bliver kaldt

18 Introduktion til Javascript – Grundlæggende Webdesign, F2004. Popup-vindue 2 •Funktioner kan også tage imod data når de bliver kaldt •Nu laver vi funktionen om så man selv kan bestemme hvilken side der skal loades:

19 Introduktion til Javascript – Grundlæggende Webdesign, F2004. Popup-vindue 2 •Funktioner kan også tage imod data når de bliver kaldt •Nu laver vi funktionen om så man selv kan bestemme hvilken side der skal loades: •Koden skrives om så den ser således ud: function popup(adresse) { window.open(adresse, 'popupvindue', 'width=800, height=510, scrolling=auto'); }

20 Introduktion til Javascript – Grundlæggende Webdesign, F2004. Popup-vindue 2 •Funktioner kan også tage imod data når de bliver kaldt •Nu laver vi funktionen om så man selv kan bestemme hvilken side der skal loades: •Koden skrives om så den ser således ud: function popup(adresse) { window.open(adresse, 'popupvindue', 'width=800, height=510, scrolling=auto'); }...og lav så den anden kode om til:

21 Introduktion til Javascript – Grundlæggende Webdesign, F2004. Lidt om DOM (Document Object Model) •DOM’en er det ’værktøj’ JavaScript bruger til at beskrive websider, og det er det helt centrale for alt JavaScript programmering •Nu har vi prøvet at åbne et vindue. Vil man herefter ind og manipulere enkelte dele indeni et vindue, skal man have fat i JS’s DOM. •For at bedst at kunne beskrive hvad DOM’en er, kan det hjælpe med lidt viden omkring objekt- orienteret programmering (OOP). •Et objekt i OOP er en slags data-“pakke”: En samling af egenskaber (variabler) og metoder (funktioner) alle tilhørene den samme klasse med et bestemt navn. •F.eks. kan man forestille sig et objekt der hedder ”bil”. Man kunne sige at bil-objektet besidder flere egenskaber, f.eks.: mærke, model, årgang og farve. Man kunne endda også sige at bilen besidder nogle metoder, f.eks.: start(), stop() og bak(). •Selvom bil her er et fiktivt eksempel, kan man se at dets egenskaber og metoder alle relaterer til et almindelig kendt tema. •I Javascript kan man lave sine egne objekter til obevaring af data, men det er dog mere almindeligt at anvende de mange ”indbyggede” objekter som gør det muligt at arbejde med, manipulere og tilgå ens webside(r) og web-browser. •Denne beholdning af eksisterende objekter kaldes DOM’en (Document Object Model)

22 Introduktion til Javascript – Grundlæggende Webdesign, F2004. Lidt om DOM (Document Object Model) •DOM’en er et hieraki af alle de objekter som er ”indbygget” i Javascript. De fleste af disse objekter er direkte relateret til websidens eller webbrowserens karakteristika. •Grunden til at ”inbygget” står i citationstegn er fordi at DOM’en teknisk set ikke hører direkte sammen med Javascript, da den officielle specifikation af JS ikke inkluderer DOM’en. •Dette medfører at der de forskellige browserproducenter har udviklet hver deres DOM, som (selvfølgelig) ikke er helt identiske. •Desuden er DOM’en ikke en intern del af JS fordi den teoretisk set kan tilgåes fra andre script- sprog også (såsom PHP eller ASP). •JS siges dog altså i daglig tale at bestå af selve Javascript-sproget samt DOM’en - en objekt struktur som JS kan tilgå for kunne manipulere websiden eller webbrowseren.

23 Introduktion til Javascript – Grundlæggende Webdesign, F2004. Lidt om DOM (Document Object Model) •Her nedenfor kan ses en grafisk en høj-niveau oversigt over Mozillas DOM… Microsofts DOM er større og indeholder hele Mozillas DOM samt yderligere objekter. På nuværende tidspunkt kan man altså tilgå flere objekter med JS i Explorer end i Mozilla. Men mon ikke Mozilla kommer efter det? 

24 Introduktion til Javascript – Grundlæggende Webdesign, F2004. Lidt om DOM (Document Object Model) •Eksempel: Window En af egenskaberne ved et vindue er dets navn, ordene i statusbaren forneden, URL-adressen på det dokument der er åben i siden og dokumentet selv. Hvis man f.eks. vil lave noget om ved status-baren, kan man gøre således: Hvor går dette link hen? Koden return true sikrer and browseren ikke overskriver den tekst man vil have istedet (’Til forsiden!’) •Den del der er fremhævet med blåt er altså objektet Window, og med punktumet kan man tilgå de metoder og felter der allerede er definineret i objektet. Her er status et felt som repræsenterer statusbaren. •Et andet eksempel: switchImage (i Dreamweaver)