Download præsentationen
Præsentation er lastning. Vent venligst
Offentliggjort afTilde Petersen Redigeret for ca. et år siden
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
Lignende præsentationer
© 2024 SlidePlayer.dk Inc.
All rights reserved.