Kirsten Ribu - LO130A - Webpublisering 2004 - HiO 1 Mer om Javascript Kirsten Ribu 01.11.04.

Presentasjon om: "Kirsten Ribu - LO130A - Webpublisering 2004 - HiO 1 Mer om Javascript Kirsten Ribu 01.11.04."— Utskrift av presentasjonen:

1 Kirsten Ribu - LO130A - Webpublisering 2004 - HiO 1 Mer om Javascript Kirsten Ribu 01.11.04

2 Kirsten Ribu - LO130A - Webpublisering 2004 - HiO 2 Prosjektoppgaven  Bruk eksempler fra boka (www.javascriptworld.com)www.javascriptworld.com  En annen kilde: www.javascripts.comwww.javascripts.com  Let etter andre kilder på nettet  Husk gjenbruk: Ingen grunn til å skrive javascript-koden fra scratch

3 Kirsten Ribu - LO130A - Webpublisering 2004 - HiO 3 I dag  Window objektet  Datoobjektet  Mer om skjemaer

4 Kirsten Ribu - LO130A - Webpublisering 2004 - HiO 4 window-objektet (1)  window-objektet er toppobjektet til web- leseren (selve web-leseren).  De viktigste underobjekter, egenskaper og metoder til window-objektet er:  document (objekt)  location (objekt)  navigator (objekt)  status (egenskap)  open() (metode)  close() (metode)

5 Kirsten Ribu - LO130A - Webpublisering 2004 - HiO 5 Forts.  window.document-objektet inneholder informasjon som fargevalg, bilder, pekere osv. som er brukt i (X)HTML-dokumentet.  window.location-objektet inneholder informasjon om dokumentets opprinnelse (url).  window.navigator-objektet inneholder informasjon om web-leseren.  window.status refererer til informasjon som er vist på statuslinjen i web-leseren.

6 Kirsten Ribu - LO130A - Webpublisering 2004 - HiO 6 window-objektet (2)  window.open() og window.close() er metoder for å åpne og lukke andre vinduer.  var vindu = window.open(URL, Navn, Liste_av_egenskaper) vil åpne et nytt vindu. Her er URL, Navn og Liste_av_egenskaper tekststrenger og parametre til metoden.  URL er referansen til det (X)HTML-dokumentet som skal vises i vinduet.  Navn er navnet på vinduet.  Liste_av_egenskaper forteller om egenskapene til vinduet og kan f.eks. være tekststrengen "width=600,height=400,scrollbar=yes". Dette vil gi et vindu på 600*400 piksler forsynt med scrollbar. Andre verdier av tekststrengen kan du prøve ut med eksemplet nedenfor.  Hele vindusobjektet blir lagret i objektvariablen vindu. Objektet (vinduet) kan senere lukkes med vindu.close()  Se eksempel open metoden uten parametre og med parametre.uten parametremed parametre

7 Kirsten Ribu - LO130A - Webpublisering 2004 - HiO 7 Spesielle window-objekter  window er toppobjektet i web-leseren.  Hvis window viser et rammedokument (med ) som viser flere andre (X)HTML- dokumenter, så har vi 3 andre vindusobjekter. Disse er forklart nedenfor.  self er alltid det vinduet (den rammen) du er i.  parent er det vinduet (rammedokumentet) som er opphavet til det vinduet (rammen) du er i. Hvis du har rammer innenfor rammer (meget uvanlig og ikke å anbefale), så vil parent.parent kunne være en lovlig objektreferanse.

8 Kirsten Ribu - LO130A - Webpublisering 2004 - HiO 8 Mer………  top er alltid toppobjektet i web-leseren.  Tenk deg et rammedokument med 3 vinduer, et logovindu, et innholdsvindu og et hovedvindu.  Vinduene er merket h.h.v logo, innhold og hoved gjennom en name-parameter i -taggene.  Da kan du fra hovedvinduet referere til innholdsvinduet med parent.innhold og fra innholdsvinduet referere til hovedvinduet med parent.hoved.  Siden du bare har et rammesett kan parent erstattes med top.  Se et eksempel herher  http://www.iu.hio.no/~kirstenr/webpublisering2004/eksempler/r ammer/Vindusobjekter.htm http://www.iu.hio.no/~kirstenr/webpublisering2004/eksempler/r ammer/Vindusobjekter.htm

9 Kirsten Ribu - LO130A - Webpublisering 2004 - HiO 9 Variable i JavaScript  Variabler i JavaScript er av to typer: primitive variable og objektvariable.  Primitive variabler er heltall, desimaltall og logiske variable.  Objektvariabler er strenger, tabeller, datoer og egendefinerte objekter. I tillegg har vi window-objektet med underobjekter.  I JavaScript er det ikke nødvendig å spesifisere variablens type, det fremgår av sammenhengen, og en variabel kan godt skifte type under sin levetid.

10 Kirsten Ribu - LO130A - Webpublisering 2004 - HiO 10 Mer--------  En variabel opprettes straks den refereres til, men det er en god skikk å deklarere dem som følger: var heltall // Ukjent datatype var desimaltall = 3.68 // Dette blir et desimaltall var tekst = "3.68" // Dette blir en streng  For variabelnavn gjelder vanlige regler som i f.eks. programmeringsspråket Java.  Legg merke til at JavaScript skiller mellom små og store bokstaver i variabelnavn.

11 Kirsten Ribu - LO130A - Webpublisering 2004 - HiO 11 Strenger og deres metoder  var str1 = "Dette er" var str2 = "en streng" var str3 = "st"  str1.length vil her returnere verdien 8 siden det er 8 tegn i strengen.  var str4 = str1 + " " + str2 er et eksempel på å legge sammen strenger med operatoren + slik at innholdet i str4 blir til Dette er en streng.  str2.charAt(3) vil her returnere tegnet "s" siden det er det 4. tegnet. Husk at 1. tegn har posisjon 0.  str2.indexOf(str3) søker etter første forekomst av strengen str3 (dvs. "st") i strengen str2 og returnerer derfor verdien (posisjonen) 3.  str2.indexOf(str3,5) søker etter første forekomst av strengen str3 (dvs. "st") fra og med posisjon 5 i strengen str2 og returnerer derfor verdien (posisjonen) -1 siden denne ikke finnes.

12 Kirsten Ribu - LO130A - Webpublisering 2004 - HiO 12 Tall og operatorer  var n = 27 var m = 4 var x = 1.5  +, -, * og / er de vanlige matematiske operatorene. I tillegg finnes % som er restdivisjonsoperator (modulo-operator). Således vil n%m gi verdien 3 siden 27/4 gir 6 med 3 til rest.  Tilordningsoperatorer er =, +=, -=, *=, /=, %=, ++ og --. Til venstre for en slik operator står en variabel og til høyre et matematisk uttrykk. n += 2 har samme betydning som n = n + 2 osv. n++ har samme betydning som n += 1 eller n = n + 1.

13 Kirsten Ribu - LO130A - Webpublisering 2004 - HiO 13 Math-objektet  Matematiske konstanter oppnås gjennom Math- objektet. Eksempler er Math.PI og Math.SQRT2 osv.  Math-objektet inneholder også alle standard matematiske funksjoner som Math.sqrt() osv.  Spesielle matematiske funksjoner finnes også. Math.max() returnerer den største verdien i argumentlisten. Math.round() avrunder et desimaltall til nærmeste heltall. Math.ceil() avrunder opp til nærmeste heltall. Math.floor() avrunder ned til nærmeste heltall. Math.pow(n,m) beregner nm. Math.random() genererer et tilfeldig tall mellom 0 og 1. Math.abs() tar absolutt verdien til et tall.

14 Kirsten Ribu - LO130A - Webpublisering 2004 - HiO 14 Eksempel  http://www.iu.hio.no/~kirstenr/webpubli sering2004/eksempler/javascript/tall.ht ml http://www.iu.hio.no/~kirstenr/webpubli sering2004/eksempler/javascript/tall.ht ml

15 Kirsten Ribu - LO130A - Webpublisering 2004 - HiO 15 Logiske variable og logiske operatorer  var ok = true var lik = (n == m)  Den første variabelen ok settes til den logiske verdien true. Den andre variabelen lik settes til verdien av det logiske uttrykket (n == m).  Logiske konstanter er true og false.  Sammelignings-operatorer er = og >. Her betyr != forskjellig fra (ikke lik).  Logiske operatorer er && (logisk og), || (logisk eller) og ! (ikke, negasjon).  Eksempel Eksempel

16 Kirsten Ribu - LO130A - Webpublisering 2004 - HiO 16 Tabeller og deres metoder  var tab1 = new Array() var tab2 = new Array(10) var tab3 = new Array("hans","petter","ole")  tab1 er et tabell-objekt uten elementer. tab2 er et tabell-objekt med 10 udefinerte elementer. tab3 er et tabell-objekt med 3 definerte elementer.  Egenskapen tab1.length har verdien 0. Egenskapen tab2.length har verdien 10. Egenskapen tab3.length har verdien 3.  Tabellelementer adresseres som tab3[i] der i kan anta verider fra og med 0 til og med tab3.length - 1. Således vil tab3[1] ha verdien "petter".

17 Kirsten Ribu - LO130A - Webpublisering 2004 - HiO 17 Mer………..  Du utvider tab3 med et 4. element med setningen tab3[tab3.length] = "jens". Etter denne setningen vil tab3.length ha verdien 4.  Metoder til tabellelementer er tab3.join(), tab3.reverse() og tab3.sort().  tab3.join("/") kobler en tabell og vil gi strengen "hans/petter/ole". Parameteren "/" blir brukt som skilletegn.  tab3.sort() vil sortere tabellen etter vanlige sorteringsregler.  tab3.reverse() vil sortere tabellen omvendt etter vanlige sorteringsregler.  Eksempel Eksempel

18 Kirsten Ribu - LO130A - Webpublisering 2004 - HiO 18 Mer---------------  str2.lastIndexOf("n") søker etter siste forekomst av strengen "n" i strengen str2 og returnerer derfor verdien (posisjonen) 7.  str2.substring(3,2) henter ut en delstreng av strengen str2 fra og med posisjon 3 og 2 tegn, dvs. delstrengen "st".  str1.split(" ") deler opp strengen str1 i flere delstrenger ut fra et skilletegn (i dette tilfellet et blankt tegn) og legger delstrengene i en tabell. Således vil str1.split(" ")[0] inneholde strengen "Dette" og str1.split(" ")[1] inneholde strengen "er".  Eksempel Eksempel

19 Kirsten Ribu - LO130A - Webpublisering 2004 - HiO 19 Dato-objekter og deres metoder (1)  var d1 = new Date() var d2 = new Date(2000,0,1,0,0,0)  d1 er et dato-objekt som inneholder en tidsangivelse av det øyeblikket den ble opprettet. Alle dato-objekter er statiske, dvs. tiden går ikke framover i datao-objektet.  d2 er et dato-objekt som settes til tidspunktet 1. januar 2000 kl. 00.00.00. Legg merke til at månedene nummereres fra 0 (2. parameter) og dagene går fra 1. Du må ikke angi et klokkeslett i timer, minutter og sekunder. Hvis de utelates blir de satt til 0.

20 Kirsten Ribu - LO130A - Webpublisering 2004 - HiO 20 Mer……………..  d1.getTime() gir deg antall millisekunder siden 1. januar 1970 kl. 00.00.00. Hvorfor akkurat det tidspunktet er valgt, er tilfeldig tror jeg.  d1.getFullYear() gir deg et 4-sifret årstall av inneværende år. NB! Ikke bruk det gamle d1.getYear() som ganske sikkert gir deg trøbbel i Netscape.

21 Kirsten Ribu - LO130A - Webpublisering 2004 - HiO 21 Mer…………….  d1.getMonth() gir deg månedsnummeret der januar er 0 og desember er 11.  d1.getDate() gir deg datoen i måneden på vanlig måte der 1 er den første dagen i måneden.  d1.getDay() gir deg ukedagen der 0 er Søndag og 6 er Lørdag.  d1.getHours() gir deg timen i døgnet (0 - 23).  d1.getMinutes() gir deg minuttene innenfor timen (0 - 59).  d1.getSeconds() gir deg sekundene innenfor minuttet (0 - 59).

22 Kirsten Ribu - LO130A - Webpublisering 2004 - HiO 22 Dato-objekter og deres metoder (2)  Tenk deg dato-objektet var d = new Date(2000,0,31,0,0,0) som er 31.1.2000.  Når du skal manipulere dato-objekter trenger du ikke tenke på hvor mange dager det er i en måned om det er et skuddår osv. Dato-objektet håndterer dette helt selv.  For å gå en dag frem med d så kan det gjøres med d.setDate(d.getDate() + 1)). Du vil da automatisk bli tatt til 1.2.2000 siden en ny d.getDate() vil gi deg 1 og ikke 32. Likedan vil d.getMonth() gi deg 1 (for februar) og ikke fortsatt 0 (for januar) på tross av at det ikke er bedt om forandring av måneden. Ukedagen vil også bli oppjustert.

23 Kirsten Ribu - LO130A - Webpublisering 2004 - HiO 23 Dato etc.  Hvis vi går en måned frem (fra 31.1.2004) med d.setMonth(d.getMonth() + 1)), så skulle en tro en kom til 31.2.2004. Men siden det ikke er mer enn 29 dager i februar (skuddår), blir dette gjort om til 2.3.2000. Enkelt og greit.  Det finnes også metoder som d.setFullyear() (ikke bruk d.setYear()) d.setHours() d.setMinutes() d.setSeconds() d.setTime()  Det finnes ikke d.setDay() siden ukedagen jo er bestemt av datoen.  eksempel eksempel

24 Kirsten Ribu - LO130A - Webpublisering 2004 - HiO 24 setTimeout()-funksjonen  Funksjonen benyttes dersom du ønsker å kalle en (og samme) funksjon gjentatte ganger som f.eks. å oppdatere en klokke som vises på skjermen. I eksemplet under har jeg tenkt meg en klokke som kan startes og stoppes med f.eks. knapper. Koden kan være:

25 Kirsten Ribu - LO130A - Webpublisering 2004 - HiO 25 setTimeout()

26 Kirsten Ribu - LO130A - Webpublisering 2004 - HiO 26 Klokke-eksempel  http://www.iu.hio.no/~kirstenr/webpubli sering2004/eksempler/javascript/klokk en.html http://www.iu.hio.no/~kirstenr/webpubli sering2004/eksempler/javascript/klokk en.html

27 Kirsten Ribu - LO130A - Webpublisering 2004 - HiO 27 Skjemaobjektet (form-tag)  Et skjema er et objekt som kan inneholde elementer som  tekstfelter og tekstbokser for å motta og/eller vise informasjon  radioknapper, avkrysningsbokser og menyvalg for å utføre spesielle valg  trykknapper for at noe skal skje.

28 Kirsten Ribu - LO130A - Webpublisering 2004 - HiO 28 Mer………  Alle slike elementer må i tillegg tilhøre et skjema.  Et skjema defineres i et (X)HTML-dokument med følgende tag: + mer (X)HTML-kode for bl.a. skjemaelementer  action-attributtet er obligatorisk og har til hensikt å fortelle hvilket server-script som skal motta skjemadata.  Vi skal ikke befatte oss med slike script i dette kurset så derfor er attributtet tomt.

29 Kirsten Ribu - LO130A - Webpublisering 2004 - HiO 29 Mer…………  Et skjema kan ha et name-attributt som er en merkelapp på skjemaet.  Et skjemaobjekt tilhører document-objektet og kan derfor refereres til med document.skjema (skjemaets merkelapp).  Hvis skjemaet ikke har name-attributt, så kan det likevel refereres til med document.forms[0] for første skjema og document.forms[1] for andre skjema osv.

30 Kirsten Ribu - LO130A - Webpublisering 2004 - HiO 30 Tekstfelt

31 Kirsten Ribu - LO130A - Webpublisering 2004 - HiO 31 Mer…………..  Verdien av attributtet type sier at det er et tekstfelt. (text)  Attributtet name gir feltet en merkelapp. (sted)  Attributtet value sier hva feltet skal ha som startverdi. (Oslo)  Attributtet size sier hvor mange tegn det skal være plass til i feltet. (20)  Tekstfelt er i et skjema som igjen er i et dokument, og identifiseres derfor med document.skjema.sted (skjemaets og elementets merkelapp).

32 Kirsten Ribu - LO130A - Webpublisering 2004 - HiO 32 Forts.  Hvis elementet ikke har name-attributt kan det identifiseres med document.skjema.elements[0] for første element i skjemaet og document.skjema.elements[1] for andre element osv.  Referanser som document.forms[0].elements[0] er også mulig.  For å lese og endre innholdet av tekstfeltet (value-attributtet) så kan det gjøres med referansen document.skjema.sted.value i et javascript.

33 Kirsten Ribu - LO130A - Webpublisering 2004 - HiO 33 Tekstboks

34 Kirsten Ribu - LO130A - Webpublisering 2004 - HiO 34 Attributtene  Attributtet name gir boksen en merkelapp.  Attributtene cols og rows sier hvor stor tekstboksen skal være.  Tekstbokser er i et skjema som igjen er i et dokument, og identifiseres derfor med document.skjema.kommentar (skjemaets og elementets merkelapp).

35 Kirsten Ribu - LO130A - Webpublisering 2004 - HiO 35 Forts….  Hvis elementet ikke har name-attributt kan det identifiseres med document.skjema.elements[0] for første element i skjemaet og document.skjema.elements[1] for andre element osv.  Referanser som document.forms[0].elements[0] er også mulig.  For å lese og endre innholdet av tekstboksen (value-egenskapen) så kan det gjøres med referansen document.skjema.kommentar.value i et javascript.

36 Kirsten Ribu - LO130A - Webpublisering 2004 - HiO 36 Radioknapper i et skjema  Radioknapper opptrer i grupper der det i hver gruppe er mulig å foreta innbyrdes utelukkende valg.  I (X)HTML-kode ser det slik ut: Kvinne: Mann:  Verdien av attributtet type sier at det er en radioknapp.  Attributtet name gir radioknappene en merkelapp, og alle knapper med samme merkelapp tilhører samme gruppe.  Hver enkelt radioknapp kan tilordnes sin egen verdi gjennom value-attributtet.  En radioknapp (i hver gruppe) bør være merked som checked.

37 Kirsten Ribu - LO130A - Webpublisering 2004 - HiO 37 Radioknapp

38 Kirsten Ribu - LO130A - Webpublisering 2004 - HiO 38 Radioknapper forts..  Radioknapper er i et skjema som igjen er i et dokument, og identifiseres derfor med document.skjema.sex[0] (skjemaets og elementets merkelapp).  Radioknappene er indeksert fra 0 og oppover i en gruppe.  document.skjema.sex[0].checked forteller om knappen er merket eller ikke (true eller false). Verdien kan også endres i et javascript.  Innholdet av value-attributtet til knapp to får du tak i med referansen document.skjema.sex[1].value i et javascript.

39 Kirsten Ribu - LO130A - Webpublisering 2004 - HiO 39 Avkrysningsbokser i et skjema  Avkrysningsbokser gjør det mulig å foreta en eller flere uavhengige ja/nei valg.  I (X)HTML-kode ser det slik ut: Jazz: Pop:

40 Kirsten Ribu - LO130A - Webpublisering 2004 - HiO 40 Avkrtsningsboks:

41 Kirsten Ribu - LO130A - Webpublisering 2004 - HiO 41 Attributter  Verdien av attributtet type sier at det er en avkrysningsboks. (checkbox)  Attributtet name gir avkrysningsboksene en merkelapp. (jazz)  Hver enkelt avkrysningsboks kan tilordnes sin egen verdi gjennom value-attributtet. (jazz)  Avkrysningsbokser er i et skjema som igjen er i et dokument, og identifiseres derfor med document.skjema.jazz (skjemaets og elementets merkelapp).  document.skjema.pop.checked forteller om boksen er merket eller ikke (true eller false).

42 Kirsten Ribu - LO130A - Webpublisering 2004 - HiO 42 Menyvalg i et skjema  Menyvalg er et alternativ til radioknapper der du kan foreta et valg ut fra flere valgmuligheter.  I (X)HTML-kode ser det slik ut:  Velg reisemål: Oslo Bergen Trondheim

43 Kirsten Ribu - LO130A - Webpublisering 2004 - HiO 43 Eksempel

44 Kirsten Ribu - LO130A - Webpublisering 2004 - HiO 44 Eksempel menyvalg  http://www.iu.hio.no/~kirstenr/webpubli sering2004/eksempler/javascript/meny valg.htm http://www.iu.hio.no/~kirstenr/webpubli sering2004/eksempler/javascript/meny valg.htm

45 Kirsten Ribu - LO130A - Webpublisering 2004 - HiO 45 Trykknapper i et skjema  En trykknapp benyttes for å få noe til å skje som f.eks. å starte eller stoppe noe, beregne noe eller oppdatere noe.  En trykknapp fremkommer ved:

46 Kirsten Ribu - LO130A - Webpublisering 2004 - HiO 46 Avsluttende eksempel  Se eksempel herher

47 Kirsten Ribu - LO130A - Webpublisering 2004 - HiO 47

48 Kirsten Ribu - LO130A - Webpublisering 2004 - HiO 48 Ingen forelesning de to neste mandager Siste forelesning:  22. november  Oppsummering  Spørsmål