PD – kursusgang 3 Introduktion til Java Script. Mål Viden om hvordan JavaScripts indlejres i HTML dokumenter Viden om programmering i JavaScript  Erklæring.

Præsentationer af emnet: "PD – kursusgang 3 Introduktion til Java Script. Mål Viden om hvordan JavaScripts indlejres i HTML dokumenter Viden om programmering i JavaScript  Erklæring."— Præsentationens transcript:

1 PD – kursusgang 3 Introduktion til Java Script

2 Mål Viden om hvordan JavaScripts indlejres i HTML dokumenter Viden om programmering i JavaScript  Erklæring og brug af variable  Typer og værdier  Løkker og Selektion  Funktioner Viden om anvendelse af DOM Viden om ”event-programmering”

3 Et simpelt eksempel Ved hjælp af JavaScript kan vi tilføje ”dynamik” og ”interaktion” til vores projekthjemmeside:  En smart fold ud menu  Simpel form validering Link

4 Hvad er JavaScript? JavaScript giver os mulighed for at indlejre ”programmer” i HTML dokumenter Bruger interaktion  Vi kan reagere på hændelser (events)  Vi kan validere bruger input Dynamisk indhold  Vi kan dynamisk ændre et HTML dokument  Vi kan ligefrem animere et HTML dokument JavaScript er stort set et rigtigt programmeringssprog

5 Klient-side afvikling af JavaScripts Web-server JavaScript WWW Web-browser HTML Page...... Web-klient

6 Indlejring af JavaScripts Vi indlejrer JavaScripts ved hjælpe af tag’et … Vi kan placere JavaScripts i  Header  Body  Eller begge steder Eksterne JavaScripts (.js) indlejres ved hjælp af attributten ”src”

7 Hvordan laver vi et JavaScript? Det grundlæggende  Variable  Tildeling/Assignment  Operatorer  Typer  Hjælpere JavaScripts  Simpel Interaktion  Selektion og Gentagelse  Funktioner Dynamisk HTML  DOM  Events

8 Det grundlæggende

9 Variable En variabel er en beholder for information vi ønsker at huske/gemme Variabel erklæring: For at kunne referer til de informationer vi har gemt navngiver vi vores variable var etNavn = ”Florian Pilz”; Vi kan nu bruge eller manipulere denne information ved at referer til information via etNavn etNavn ”Florian Pilz”

10 Tildeling/Assignment Et assignment er når vi tildeler en variabel en værdi var etNavn = ”Florian Pilz”; Et assignment er en kommando Kommandoer afsluttes ALTID med semikolon ; etNavn ”Florian Pilz”

11 Operatorer Vi kan manipulere værdier ved at udføre operationer på dem  +, -, /, *, ++, --, % En operator er ikke i sig selv en kommando, men en assigenment er:  t = 7 + 4;  t = 7.3 * 5;  t = (5+7) * 3.6;  a++; er det samme som a = a + 1;

12 Numre – heltal og reelle tal Heltal (integer)  – 7, 8, -1, 87345 Reelle tal (float)  7.2, -7.5, 7e12 var etTal = 8; var etAndetTal = 17 + etTal;

13 Boolske værdier En boolsk værdi er enten  true, eller  false var enBool = false; var enAndenBool = true; enBool = 7==5; - giver false enBool = 7>5; - giver true

14 Tekststrenge En string er en række af tegn omgivet af ” eller ’’ var etEfternavn = ”Pilz”; var etFornavn = ”Florian”; var etNavn = etFornavn + ” ” + etEfternavn ; etNavn ”Florian Pilz”

15 Tools / Metoder Strings var str = ”Florian Pilz”; var len = str.length; - giver 14 str.charAt(5); - giver ”s” Math  cos, sin, pi, tan, abs, log, … Number Date

16 JavaScripts

17 Simpel Interaktion (1) Alert alert(”Hejsa”); Confirm var svar = confirm(”Ok eller Cancel?”); if (svar==true) alert(”Der blev valgt Ok”); else alert(”Der blev valgt Cancel”); Link

18 Simpel Interaktion (2) Prompt var svar = prompt(”Hvad er dit navn?”); alert(”Hej ” + svar + ”!”); Document.write var svar = prompt(”Hvad er dit navn?”); document.write(”Hej ” + svar + ”!”); Link

19 Selektion (1) var a = 3; … a = a + 2; … if (a==5) { document.write(’a er 5’); } else { document.write(’a er ikke 5’); } Hvis dette udsagn er sandt, så udfør disse kommandoer, ellers udfør disse kommandoer. Udsagnet skal være boolsk  Altså sandt eller falsk else kan undlades Link

20 Selektion (2) var a = 3; … a = a + 2; … if (a==5) { document.write(’a er 5’); } Hvis dette udsagn er sandt, så udfør disse kommandoer. Udsagnet skal være boolsk ( Altså sandt eller falsk)

21 Sammenligninger Vi har følgende muligheder når vi vil danne udsagn ”5”!==5, 4!==4!==Strengt ikke lig med ”5”===5, 4===4===Strengt lig med 5>=5, 5>=7, ’florian’>=’Pilz’>=Større end eller lig med 5<=5, 5<=7, ’florian’<=’Pilz’<=Mindre end eller lig med 5>5, 5>7, ’florian’>’Pilz’>Større end 5<5, 5<7, ’florian’<’Pilz’<Mindre end 7!=5, 17!=17, ’florian’!=’Pilz’!=Ikke lig med 5==5, ’florian’==’Pilz’==Lig med Link

22 … var a = 0; … while (a<5) { a = a +1; } … Løkker – while løkken Så længe udsagn er sandt, så udfør kommandoer Link Udsagnet skal være boolsk ( Altså sandt eller falsk)

23 … var sum = 0, count; for (count = 0; count <=10; count ++) { sum = sum + count; } … Løkker – for løkken 1.Vi starter med værdien x i variablen v. 2.Hvis v ikke overskrider grænsen g, så udfør kommandoer, ellers stop. 1.Tæl v op med y, og gå til punkt 2. Udsagnet skal være boolsk ( Altså sandt eller falsk) count = 0; Link

24 Funktioner (1) En funktion er en navngivet indkapsling af kommandoer function fun() { document.write(”Vores første funktion”); } … fun(); Link

25 Funktioner (2) Funktioner kan tage parametre som så fungerer som ”lokale”-variable function fun(tekst) { document.write(tekst); } … fun(”Vores anden funktion”); Link

26 Funktioner (3) Funktioner kan returnere værdier function udregn(tal1,tal2) { return tal1*tal2; } … var etAndetTal = udregn(5,17); - giver 85 Link

27 Scope regler (1) Globalt scope  Variable som erklæres uden brug af var x=5;  En sådan global variabel kan tilgås overalt i et HTML dokument  Globalt scope frarådes oftes – så brug var. Lokalt scope  En variabel erklæret i en funktion, med var, kan kun bruges den funktionen

28 Scope regler (2) Head function print(tekst) { var lokalTekst = ”Lokal Tekst”; globalTekst = ”Global Tekst”; document.write(tekst); } Body var bodyTekst = ”Body Tekst”; print(bodyTekst); print(globalTekst); print(lokalTekst); Link

29 Fejl i Scripts Tjek at web-browseren er sat til at vise fejlbeskeder Brug fejlbeskeder – så læs dem grundigt Typiske fejl  Variabel ikke erklæret  Funktion ikke erklæret  Funktion findes ikke i document, Date, Math osv. Så tjek at alle funktioner og variable er stavet rigtigt!

30 Dynamisk HTML

31 Dokumenter set som et træ (1) Et simpelt dokument Overskrift Tekst i en paragraf Budget September Oktober Mad 1500,- 1500,- Link

32 Dokumenter set som et træ (2) document head body h1 p tr th table title th ”Budget””September””Oktober””1500,-” ”Mad” tr td th ”Tekst i en paragraf” ”Overskrift” ”Et simpelt dokument” Rod Knude

33 Document Object Model (1) DOM er endnu en specifikation fra W3C DOM definerer et interface mellem HTML dokumenter og applikations programmer Via DOM kan vi  tilgå,  manipulere,  og tilføje, vilkårlige elementer i et HTML dokument

34 DOM element adgang Definition af et element vha. id attribute Adgang til et element med et id document.getElementById(”et_id”); var felt = document.getElementById(”info”);

35 Document Object Model (2) HTML elementer repræsenteres af objekter i DOM Et HTML elements attributter repræsenteres af properties i det givne objekt Andre interessante properties .innerHTML .style (.style.color,.style.cssText, osv.)

36 DOM element adgang (3) var felt = document.getElementById(”infofelt”); felt.innerHTML = ”Noget tekst her!”; felt.style.color = ”red”; ObjektProperty Link

37 Events

38 Events (1) Et event er en øjeblikkelig hændelse – typisk som resultat af en brugers handling  Klik med mus  Bevæge musecursor henover et bestemt sted  Bede om at få vist et dokument En event-handler er en lille programstump som bliver udført når en bestemt hændelse er sket Link

39 Events (2) onloadload onfocusfocus onerrorerror onclickclick onchangechange onblurblur onabortabort onunloadunload onsubmitsubmit onselectselect onresizeresize onresetreset onmouseovermouseover onmouseoutmouseout Event handlers specificere i attributter: Tjek referencen på nettet

40 Lad os så set på et eksempel function load_event () { alert("Dokumentet er nu hentet!"); }.. unload_event, click_event, blur_event.. function focus_event () { var felt = document.getElementById("infofelt"); felt.innerHTML = "<<<< Focus her"; } <body onload="load_event();" onunload="unload_event();"> Klik her! Link 2Link 1

41 DOM element adgang (1) Dokumenter i dokumenter (frames) parent.frames[1].document.getElementById(”et_id”); menuindhold frameset 01

42 Form validering (1) I vores notesblok på vores projektgruppe-side vil vi sikre at der rent faktisk bliver indtastet et navn  Først giver vi en fejlbesked  Så sætter vi fokus på det manglende felt i form’en  Dernæst skal vi blokere så det ikke bliver sendt en e-mail hvis der er opstået en fejl For at stoppe web-browseren i at udføre en standard handling skal en event-handler blot returnere false Link

43 Form validering (2) function checkForm() { var felt = document.getElementById("navn"); if (felt.value=="") { alert("Du har ikke indtastet et navn!”); felt.focus(); return false; } else { return true; } <form method="post" enctype="text/plain" onsubmit="return checkForm();" action="mailto:odin@cs.aau.dk?subject=Note fra hjemmeside"> Header Body