Föreläsning i webbdesign Textsträngar och formulär i JavaScript Rune Körnefors Medieteknik 1 2012 Rune Körnefors rune.kornefors@lnu.se
Antag a4 variabeln s innehåller följande text s = "pics/small/bridge.jpg" Textsträngar index" 0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 p i c s / s m a l l / b r i d g e. j p g Några egenskaper och funkfoner längd = 21" s.length ger antal tecken, dvs 21 i deha exempel s.charat(i) ger tecknet i posifon i, t.ex. ger s.charat(7) tecknet "a" s.indexof(c) ger index för första förekomsten av tecknen i c, t.ex. ger s.indexof("/") värdet 4. Om tecknen inte finns, så ges värdet - 1, t.ex. ger s.indexof("large") värdet - 1 s.lastindexof(c) ger index för sista förekomsten av tecknet i c, t.ex. ger s.lastindexof("/") värdet 10 s.substring(i,k) ger en sträng med tecknen i posifon i Fll och med posifonen före k, t.ex. ger s.substring(11,17) strängen "bridge" s.substring(i) ger en sträng med tecknen från posifon i och resten av textsträngen, t.ex. ger s.substring(11) strängen bridge.jpg s.split(c) delar upp strängen vid skiljetecknet i c och ger en array, t.ex. ger s.split("/") en array som ["pics","small","bridge.jpg"] Kombinera deha: Filnamnet i strängen kan erhållas med s.substring(s.lastindexof("/")+1) 2
Från föreläsning F11 index" 0 1 2 3 4 värde 1 värde 2 värde 3 Array (vektor/lista) En Array är en lista av element. Elementen indexeras från 0 och uppåt. En variabel skapas som en Array: längd = antal element" a = new Array(); // En Array med dynamiskt antal element a = []; // En Array med dynamiskt antal element b = ["red","blue","green"]; // En Array med tre element med värdena inom parenteserna Referera Fll eh element i en Array: a[3] = 27; // Det cärde elementet i a får värdet 27 x = b[1]; // x Flldelas värdet av det andra elementet i b Exempel på egenskaper och metoder: a.length // Antal element (värden) i a b.join(":") // Ger textsträngen "red:blue:green" McGrath, M. (2009) JavaScript in easy steps, fourth edijon, In Easy Steps, s.60f 3
Exempel: ta ut delsträngar Exemplet innehåller stringvar.split(tecken) Delar vid varje förekomst av tecknet och lägger in delsträngarna i en array. arrayvar.join(tecken) Lägger samman alla delar i arrayen och lägger in in tecknet i tecken mellan dem. Resultatet blir en textsträng. stringvar.lastindexof(tecken) Ger posifon för sista förekomsten av eh tecken. stringvar.substring(pos1,pos2) Tar ut delsträngen från pos1 Fll pos2. stringvar.substring(pos1) Tar ut delsträngen från pos1 Fll slutet av strängen. ex3" 4
Exempel: stränghantering i formulär Justera och kontrollera namn och postnummer Namn Dubbla blanktecken i namn ersähs med eh blanktecken Stad Konvertera Fll endast versaler Postnummer Får endast bestå av siffror och ska vara fem tecken String- funkfoner som används: stringvar.indexof(tecken) Ger index Fll första posifonen av tecken stringvar.substring(pos1,pos2) och substring(pos) Se föregående exempel stringvar.tolowercase() Konverterar alla versaler Fll gemener stringvar.touppercase() Konverterar alla gemener Fll versaler stringvar.charat(i) Ger tecknet i posifon i ex4" 5
Skicka formulär submit- knapp <form acfon="mohagare" method="hur data skickas"> <input type="submit" value="skicka"> </form> method="post" Formulärets innehåll skickas i datablocket i hhp- protokollet method="get" Formulärets innehåll skickas i url:en 6
mailto- referens Data skickas Fll en epost- adress med en mailto- referens i acfon- ahributet <form acfon="mailto:namn@e.post" method="post"> + Enkel teknik som inte kräver någon extra resurs på servern Webbläsaren försöker öppna användarens epost- program Alla datorer har inte något sådant, speceiellt i offentliga datorer, t.ex. på bibliotek. Ingen bekrärelse ges då formuläret skickas 7
Skicka via e4 program på servern I deha exempel används grafstjänsten formfixer.com för ah skicka formulärets innehåll Fll en epost- adress Dvs eh program på servern formfixer.com anropas (eh annat exempel på en liknande grafstjänst är www.emailmeform.com) + Fungerar överallt + Då formuläret skickas går man vidare Fll en sida där en bekrärelse kan ges. ex5" 8
Skickad data Innehållet i det mail som erhålls blir enligt vidstående. DeHa email innehåller informafon från dih formulär På sidan: hhp://medieteknik.lnu.se/ex5/form.htm Från IP: 82.197.234.2 Klockslag: 20:11, 17/11 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - s_email: rune.kornefors@lnu.se s_retur: hhp://medieteknik.lnu.se/ex5/acknowledge.htm room: familjerum,950 persons: 4 nights: 3 extra: Internet,40 date: 2012-12- 24 name: Rune Körnefors street: Min gata 12 zipcode: 34567 town: STADEN - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - Frågor & Synpunkter gå Fll hhp://formfixer.com" 9