1. Klientside-validering med JavaScript

Transkript

1 Tomas Holt Opphavsrett: Tomas Holt og Stiftelsen TISIP Lærestoffet er utviklet for faget LO192D Web-programmering i ASP 1. Resymé:Leksjonen omhandler hovedsaklig hvordan man bruker klientside-script til å validere input fra bruker. Innhold 1. KLIENTSIDE-VALIDERING MED JAVASCRIPT OM DENNE LEKSJONEN ORINTERINGSSTOFF: KLIENTSIDEVALIDERING AV HTML-SKJEMA JavaScript og HTML-kode JavaScript og semikolon Kontrollstrukturer Funksjoner i JavaScript Variabler Operatorer Sammenlikning Objekthierarkiet Hendelser Debugging Eksempel: Sjekk tall Eksempel radioknapper (radio buttons) Valgbokser (check boxes) Menyer Sjekk om e-post adresse er på lovlig form Hvordan lære mer? REFERANSER Om denne leksjonen Bruk av HTML-skjema er stoff som allerede skal være kjent fra faget LV172D, Publisering på Internett. De som ikke føler seg helt sikre på bruk HTML-skjema må sørge for å se gjennom leksjon 8 fra dette faget på nytt. Denne finnes på Boka omhandler også HTML-skjema i kapittel 8. I tillegg finnes det en oversikt over HTMLskjema på

2 Videre skal vi i denne leksjonen se på klientside-validering av HTML-skjema. I neste leksjon vil temaet være prosessering av HTML-skjemaer på tjenersiden (dvs. med ASP). Vi skal bruke JavaScript for klientside-validering. Dette er et script-språk som vil være nytt for de fleste av dere. Tiden til rådighet i dette kurset er for knapp til å lære dere JavaScript. I dette kurset vil det være viktigere å vise prinsippet med klientside-validering enn å lære dere alt om JavaScript. Vi har derfor valgt å gjøre delen om JavaScript til orienteringsstoff. I dette legger vi at vi ikke forventer at dere kan detaljer om JavaScript, men at dere bør kunne tilpasse eksemplene i denne leksjonen til deres eget formål. Det vil være enkle øvingsoppgaver i bruk av JavaScript for at dere skal få brukt klientside-validering i praksis. Det som er skrevet om JavaScript kan fungere som en innføring i temaet, og det er tips i leksjonen om hvordan du kan lære mer Orinteringsstoff: Klientsidevalidering av HTML-skjema I leksjon 1 ble det grunngitt at det kan være fornuftig å sjekke innholdet i HTML-skjemaer på klientsiden i stedet for å sende all denne informasjonen til tjeneren for at denne skal gjøre det. Vi skal nå se nærmere på klientside-validering, og vi bruker JavaScript for å gjøre dette. JavaScript fungerer stort sett både for Netscape og Internet Explorer. Det kan imidlertid være tilfeller der Internet Explorer oppfører seg annerledes. Grunnen til dette er at Internet Explorer er implementert for JScript som er Microsoft sitt svar på JavaScript. Det er ikke 100% kompabilitet mellom JavaScript og JScript. For å være sikker på av script-koden din fungerer i begge nettleserne må du derfor prøve scriptene i begge nettleserne. JavaScript er et rimelig stort tema. Fordi dette kurset primært er om tjenerside-programmering vil det derfor være begrenset hvor mye JavaScript kan omtales. Denne leksjonen vil gi en kort innføring, men er på ingen måte ment å gi en fullstendig oversikt over JavaScript. Vår bruk av JavaScript vil begrense seg til validering av HTML-skjema. Aktuelle kilde for mer informasjon kan være Netscape sine hjemmesider I slutten av leksjonen finnes en oppsummering av aktuelle ressurser på nett. Det finnes også mange bøker om temaet JavaScript og HTML-kode JavaScript kan plasseres hvor som helst i HTML-koden, og er på følgende form: <SCRIPT language= JavaScript > script-elementer... side 2 av 16

3 Det er viktig å være klar over at gamle nettlesere ikke nødvendigvis støtter JavaScript. En enkel måte å unngå problemet på er å plassere selve script-koden inne i en HTMLkommentar. Slik: <SCRIPT language= JavaScript > <!-- gjem dette scriptet for gamle nettlesere script-elementer.. // kommentaren slutter her --> Du kan selv lage ett script ved å sette inn document.write( Mitt JavaScript ) som scriptelement, og lagre dette som en HTML-fil. Hvis du nå åpner filen i nettleseren ser du at Mitt JavaScript skrives ut JavaScript og semikolon I Java er man nødt til å avslutte setninger med semikolon. Hvis vi f.eks. vil sette en variabel lik en annen variabel gjøres dette slik: tall = sum; I JavaScript har man muligheten til å sløyfe disse semikolonene. Dvs. at i JavaScript vil koden både med og uten semikolonet fungere. Dette gjør at de som er vant til å bruke Java kan fortsette med semikolon som de er vant til, mens de som f.eks. er vant med VBScript kan velge å ikke bruke semikolon. Eksemplene i denne leksjonen bruker begge mulighetene for å illustrere at begge måter fungerer Kontrollstrukturer Kontrollstrukturer fungerer som i Java. I JavaScript som i Java bruker man tegnet { for starten på en blokk og tegnet for slutten på en blokk. F.eks: if (ett_eller_annet){ gjør noe else { gjør noe annet Merk også at alle reserverte ord (som if/else/while/for osv.) må være i liten skrift. JavaScript er følsom for store og små bokstaver. Dette gjelder også for variabler og funksjoner. NAVN er ikke det samme som navn! side 3 av 16

4 Under er et eksempel på bruk av if/else. <SCRIPT language= JavaScript > x = sann ; y = mel ; if (x == y) { document.write( strengene er like ); else{ document.write( strengene er ulike ); Prøv selv å lagre koden i en HTML-fil og åpne denne filen i nettleseren din. Resultatet du da vil se er at strengene er ulike blir skrevet ut. Løkker er en viktig kontrollstruktur. Under vises et eksempel på en for-løkke: for (i=0; i < 5; i++){ document.write( Runde nummer: + i) Denne løkken vil gå 5 runder. Variabelen i vil økes med 1 for hver runde, helt til i = 5, da hopper vi ut av løkka. For hver gjennomgang i løkka vil det skrives ut hvilken runde dette er. Den andre typen løkke som er vanlig er while-løkker. Her er et eksempel: i = 0 while (i<5){ document.write( Runde nummer: + i) i=i+1 Denne løkken vil oppføre seg på samme måte som for-løkken over Funksjoner i JavaScript Bruk av funksjoner i JavaScript er utbredt. En funksjon er analogt med en metode i Java. Selve funksjonsdefinisjonen bør stå i hodet på HTML-filen. Dvs. mellom <HEAD> og </HEAD>. Vi kan så bruke funksjonen i script-elementer senere i HTML-filen. <HTML> <HEAD> <SCRIPT language="javascript"> function skrivut(melding){ document.write(melding); side 4 av 16

5 function skrembruker(melding) { alert(melding); <BODY> <H1> No bli du skræmt ja </H1> <SCRIPT language="javascript"> skrivut("nå skjer det.. "); skrembruker("bang..."); skrivut("<br> Nå har det skjedd.."); </BODY> </HTML> Prøv selv koden over (lager filen med etternavnet.html og åpne den i nettleseren). Du vil da se at du får opp en meldingsboks, der det står bang (det er koden alert() som sørger for å vise en meldingsboks). Kjøringen av script-koden vil da stoppe helt til du trykker ok. Så vil siste rest av koden kjøres Variabler Bruk av variabler er enkelt i JavaScript. Vi trenger ikke definere hvilken type det er snakk om. I koden under lager vi oss to variabler. <SCRIPT> streng = titt tall = 5 Koden over gir oss to (globale) variable. En streng og et tall. Vi kan dermed bruke disse variablene overalt i koden vår. Koden under gir et eksempel på bruk av disse variablene. <HTML> <HEAD> <SCRIPT language="javascript"> streng = "uhu" tall=5 function skrivut(melding){ document.write(melding) <BODY> <H1> No bli du skræmt ja </H1> <SCRIPT language="javascript"> skrivut(streng) tall++ skrivut(tall) side 5 av 16

6 </BODY> </HTML> Operatorer Operatorer fungerer som vi er vant med fra java: x + y (tall) Gir summen av tallene x + y (strenger) Slår sammen de to strengene til en x y Trekker y fra x x * y Ganger x med y x / y Dividerer x med y x % y Modulus x++ Inkrementer x (det samme som x = x+1 ) Sammenlikning Tabellen under viser at sammenlikninger stort sett er som vi er vant med fra java. x == y x!= y x > y x >= y x && y x y sann hvis x er lik y sann hvis x er ulik y sann hvis x er større enn y sann hvis x er større eller lik y sann hvis både x og y er sann sann hvis enten x eller y er sann (eller begge) NB! Legg merke til at strenger sammenliknes med = = (to likhetstegn) Objekthierarkiet Vi har tilgang til et hierarki av standard objekter. Dette hierarkiet er vist under. side 6 av 16

7 Figur 1: Objekthierarki Figuren er hentet fra online-dokumentasjonen på Netscape sine hjemmesider. Denne modellen gjelder kun for Netscape sin nettleser, men presiserer et viktig poeng. Vi har tilgang til endel objekter direkte i script-koden vår. Det som er viktig her er at vi kan få tak i verdiene til de ulike objektene. Du får tak i objektene på vanlig objektorientert måte. Du må oppgi foreldreobjektene til det objektet du skal ha tak i adskilt med punktum. Window skal ikke oppgis. Koden under viser hvordan verdien i et tekstfelt kan hentes ut med uthevet skrift. Funksjonen input kalles når knappen send trykkes (se neste kapittel for hvordan dette gjøres). Legg merke til at vi kaller funksjonen input med this som parameter. Dette gir funksjonen det HTML-skjemaet som vi kaller fra som argument. Mao. så vil tekstform ha verdien til HTMLskjemaet det kalles fra. Koden tekstform.tekst.value vil være verdien til feltet tekst (NAME= tekst ) i skjemaet vi kaller fra. Value er en egenskap (property) til objektet det er snakk om. De ulike typene objekter (knapper, radioknapper osv.) har ulike egenskaper (properties). For vårt tekstfelt bruker vi value til å hente ut verdien. Du kan se de ulike egenskapene objektene kan tilby på side 7 av 16

8 Velg f.eks. Text som er et objekt i JavaScript. Du kan da se metoder og egenskaper som er tilgjengelig. <HTML> <HEAD> <TITLE>Password Check</TITLE> <SCRIPT LANGUAGE="JAVASCRIPT" > function input(tekstform) { if (tekstform.tekst.value == ""){ alert("du må skrive inn! ") else{ alert("du har skrevet inn " + tekstform.tekst.value) </HEAD> <BODY> <FORM onsubmit= input(this) > <P>Skriv inn: <INPUT TYPE="TEXT" NAME="tekst"> <P><INPUT TYPE="SUBMIT" VALUE="Send"> </FORM> </BODY> </HTML> De to figurene under viser hvordan kjøring av koden kan bli. Figur 2: JavaScript side 8 av 16

9 Figur 3: JavaScript med alert Hendelser Det er slik at rene HTML-sider blir utført fra toppen og nedover. JavaScript gir imidlertid mulighet for å endre på denne utførelsen. De ulike komponentene i objekthierarkiet har egne hendelses- håndterere (event handlers). Form-objektet (se objekthierarkiet) har f.eks. en hendelses- håndterer onsubmit. Det var denne som ble brukt i koden i forrige kapittel. Når send knappen blir trykket blir det generert en submit hendelse som onsubmit får beskjed om. Vi utførte da metoden input i dette tilfellet. Her er en oversikt over de viktigste hendelsene: Hendelses-håndterer Hendelse Forklaring onblur blur Feltet mister fokus onchange change Verdien i feltet forandres onfocus focus Feltet får fokus onselect select Velger feltet. Hele feltet blir merket, dvs at skriver du noe så forsvinner det som er der fra før. onsubmit submit Skjemaet sendes onload load Siden lastes onclick click Det klikkes på et element, f.eks. en knapp. Det finnes mange flere hendelser enn beskrevet her, se online-dokumentasjon for mer informasjon. side 9 av 16

10 Vi har nå sett at vi kan bruke en hendelses-håndterer til å få rede på når ting skjer. Vi kan også bruke hendelsene aktivt til å få ting til å skje. F.eks. kan det hende at vi ønsker å markere teksten i et tekstfelt. Koden under bruker hendelsen focus til å sette fokus på et bestemt tekstfelt, og bruker hendelsen select til å markere hele feltet. Prøv koden selv. Da vil du se at hvis du skriver inn samme passord to ganger vil du få beskjeden riktig ellers vil tekstfeltet bekreft passord få fokus, slik at du kan skrive inn bekreftelsen på nytt. <HTML> <HEAD> <TITLE>Passord sjekk:</title> <SCRIPT LANGUAGE="JAVASCRIPT"> function input(tekstform) { if (tekstform.tekst1.value == tekstform.tekst2.value) { alert("riktig ") else { tekstform.tekst2.focus() tekstform.tekst2.select() </HEAD> <BODY> <FORM > <P>Skriv inn passord: <INPUT TYPE="PASSWORD" NAME="tekst1" > <P>Bekreft passord: <INPUT TYPE="PASSWORD" NAME="tekst2"> <INPUT TYPE="BUTTON" VALUE="OK" onclick=input(this.form)> <p> Hvis passordene er like skriv ut ok, ellers vil bekreft passord markeres på nytt </FORM> </BODY> </HTML> Debugging Debugging av JavaScript trenger ikke å være direkte enkelt. Det finnes verktøy som kan gjøre livet litt enklere for oss. Internet Explorer 5 og 6 har et verktøy som kan gi beskjed hvor eventuelle problemer i et script ligger (du må åpne web-siden i nettleseren). Du aktiverer dette verktøyet med: Verktøy/Alternativer for Internett/Avansert og kryss av for en melding for hver skriptfeil eller deaktiver feilsøking i skript. Netscape (6.0) har et tilsvarende verktøy. Dette aktiveres ved: Tasks/Tools/JavaScript Console. side 10 av 16

11 Web-siden inneholder en ordentlig debugger for JavaScript. Dette kan absolutt være et nyttig verktøy, men verktøyet vil ikke gjennomgås i dette kurset Eksempel: Sjekk tall Nå er tiden kommet for å bruke JavaScript til å sjekke input fra brukeren. La oss si at vi vil sjekke at brukeren har tastet inn et tall. Hvis så er tilfelle, vil vi sende dette tallet til en JSP eller ASP på tjenersiden (antar heretter at det er en JSP). Hvis det ikke er et tall så må brukeren taste inn på nytt. Det er noen momenter vi skal merke oss i koden vi lager nå. Det første er at vi skal sende informasjonen til en JSP på tjenersiden. Dette gjør vi som tidligere kjent gjennom ACTION kommandoen i skjemaet. <FORM ACTION= URL >. URL vil skiftes ut med URL en til JSP en det er snakk om. Vi bør også oppgi hva slags metode vi vil bruke når vi sender denne informasjonen. Vi kan enten bruke GET eller POST. Vi bør bruke POST da GET kan gi oss problemer hvis det blir for mange opplysninger som skal sendes. Noen tjenere har ganske lave grenser for hvor mange tegn (opplyninger) som kan sendes på denne måten. Dette er aldri noe problem når vi bruker POST. Jeg kan da bruke følgende til å sende opplysninger fra et skjema til formtest.jsp. <FORM ACTION= METHOD= POST > Jeg vil at koden min skal sjekke om brukeren har tastet inn et tall når det trykkes på knappen send. Hvis vi har en funksjon sjekktall kan vi sjekke tallet før det sendes til tjeneren på følgende måte: <FORM onsubmit=sjekktall(this) ACTION= METHOD= POST > Koden over har en klar svakhet. Den sender opplysningene uansett om det er et tall eller ikke. Dette kan unngås med å endre koden til: <FORM onsubmit= return sjekktall(this) ACTION= METHOD= POST > Tanken bak dette er at submit skjer kun hvis funksjonen sjekktall() returnerer true. Vi må derfor sørge for at sjekktall() returnerer false hvis brukeren ikke har tastet inn et tall, og true når det er et tall. side 11 av 16

12 Vi har et problem til. Hvordan vi kan vite om brukeren har tastet et tall eller noe annet? Det finnes en funksjon parseint() som kan gjøre om en streng til et tall. Denne funksjonen tar basen tallet skal omregnes til (for vanlige tall blir dette 10) og strengen som parametere. I tillegg finnes det en funksjon som heter isnan(), denne kan sjekke om det er et lovlig tall det er snakk om. Koden kan være slik: <HTML> <HEAD> <TITLE>Sjekk nummer</title> <SCRIPT LANGUAGE="JAVASCRIPT"> function ernummer(tallform) { tall = parseint(tallform.tallfelt.value, 10) if(isnan(tall)){ alert("du må skrive inne et tall! ") tallform.tallfelt.focus() tallform.tallfelt.select() else { alert("opplysningene vil nå sendes til tjeneren...") return true </HEAD> <BODY> <FORM onsubmit="return ernummer(this)" ACTION= METHOD= POST > <P>Skriv inn tall: <INPUT TYPE="TEXT" NAME="tallFelt" > <INPUT TYPE="SUBMIT" VALUE="Send" > <p> Hvis du skriver inn et tall og trykker send så sendes det til tjeneren </FORM> </BODY> </HTML> Sørg for å prøve koden i din egen nettleser! Du vil her få en feilmelding etter at opplysningene er sendt til tjeneren. Dette kommer av at vi ikke har laget JSP en som skal ta imot disse opplysningene. Hvis du lager en JSP der du skriver ut nummer mottatt og lagrer filen slik at URL en i eksemplet over stemmer (du må også starte web-tjeneren) så vil du få returnert beskjed fra tjeneren når nummeret er mottatt. side 12 av 16

13 Eksempel radioknapper (radio buttons) Når vi vil at brukeren kun skal kunne velge et av flere alternativer kan det være aktuelt å bruke radioknapper. Radioknapper har en egenskap som heter checked som gir oss muligheten til å finne ut om den aktuelle radioknappen er valgt. <FORM onsubmit=valgtfarge(this) > <INPUT TYPE= RADIO NAME= farge VALUE= hvit > Hvit <INPUT TYPE= RADIO NAME= farge VALUE= svart > Svart <INPUT TYPE= RADIO NAME= farge VALUE= ingen > Ingen <INPUT TYPE= SUBMIT VALUE= Send > </FORM> Vi ønsker å sikre oss at brukeren har valgt en av radioknappene over. function valgtfarge(form){ fargetall = -1 i=0 while(fargetall < 0 && i < form.farge.length){ if (form.farge[i].checked){ fargetall = i alert("du har valgt " + form.farge[i].value) i++ if (fargetall == -1) { alert("du må velge farge") return true Legg merke til hvordan vi sjekker hver enkelt radioknapp (helt til vi finner den som er valgt). De ulike radioknappene nummereres fra null til to (fordi vi har tre radioknapper). Løkka som inneholder form.farge[i].checked sørger for å sjekke hver enkelt av radioknappene etter tur. Når vi finner en knapp som er valgt skriver vi ut hvilken. Du bør selv sette sammen koden over og kjøre den (du trenger noe mer kode enn det som er oppgitt her, men tidligere eksempel har vist hvordan du kan gjøre dette) Valgbokser (check boxes) Samme prinsipp som for radioknapper, men flere valg kan være gjort samtidig Menyer La oss lage en meny der brukeren kan velge hvor gammel han er. side 13 av 16

14 <FORM> <STRONG> Hvor gammel er du? </STRONG> <SELECT NAME= alder > <OPTION VALUE= unge > 0-15 <OPTION VALUE= ungdom > <OPTION SELECTED VALUE= voksen > <OPTION VALUE= godtvoksen > <OPTION VALUE= gammel > </SELECT> </FORM> For at vi skal sende HTML-skjemaet til tjeneren krever vi at alder er større enn 15 år. function valgtalder(form){ if (form.alder.selectedindex == 0) { alert("du må være over 15 år") return true Koden form.alder.selectedindex gir oss et tall som tilsvarer hvor tallet ligger i menyen. Tallet 0 gis dersom brukeren har valgt 0-15 år, tallet 1 gis hvis er valgt osv Sjekk om e-post adresse er på lovlig form Under vises hele koden for en web-side der en oppgir en e-post adresse. Et script sjekker så om e-post adressen er på lovlig form. Koden under er funnet på Internett og forandret til å passe mitt formål (se neste kapittel). <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" " <HTML> <HEAD> <TITLE>E-post</TITLE> <SCRIPT LANGUAGE="JAVASCRIPT" TYPE="TEXT/JAVASCRIPT"> <!-- Hide script from older browsers function valid ( ) { invalidchars = " /:,;" if ( == "") { for (i=0; i<invalidchars.length; i++) { badchar = invalidchars.charat(i) if ( .indexof(badchar,0) > -1) { atpos = .indexof("@",1) if (atpos == -1) { side 14 av 16

15 if > -1) { periodpos = .indexof(".",atpos) if (periodpos == -1) { if (periodpos+3 > .length) { return true function submitit(carform) { if (!valid (carform. .value)) { alert("invalid address") carform. .focus() carform. .select() alert("adressen er på rikitg form") return true // End hiding script --> </HEAD> <BODY BGCOLOR="WHITE"> <H2 ALIGN="CENTER">E-post sjekker </H2> <FORM onsubmit="return submitit(this)" action= URL method= POST > <!--ACTION="URL" bytt URL med dit informasjonen skal sendes --> <INPUT TYPE="TEXT" NAME=" "> <INPUT TYPE="Submit" VALUE="send"> </FORM> </BODY> </HTML> Hvordan lære mer? Du bør nå ha fått greie på det mest grunnleggende og er i stand til å lage enkle JavaScript til å drive klientside-validering. Når du nå skal prøve deg på egenhånd kan det være greit å vite at det allerede finnes mange eksempler på web. Siden inneholder mange eksempler som kan være aktuelle for klientside-validering. Andre websider som tilbyr mye informasjon er samlet i tabellen under. side 15 av 16

16 nuals/2000/javascript/1.3/guide/youare-here.html jsdebug.html /mas/courses/html/html1.html /mas/courses/html/html2.html Dokumentasjon spesielt for klientside JavaScript. Debugger for JavaScript finnes på denne siden. Generell side. Nye verktøy og kunngjøringer finnes ofte her. Siden inneholder oversikt over grunnlegende HTML-elementer Siden inneholder en oversikt over HTML-forms 1.3. Referanser [JavaBok] : Programmering i Java. Else Lervik og Vegard B. Havdal. side 16 av 16