Föreläsning i webbdesign Textsträngar och formulär i JavaScript Rune Körnefors Medieteknik 1 © 2012 Rune Körnefors [email protected] Antag a4 variabeln s innehåller följande text s = "pics/small/bridge.jpg" index" 0
1
2
3
4
5
6
7
8
Textsträngar 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
längd = 21"
•  Några egenskaper och funkFoner –  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 ﬁnns, 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 Array (vektor/lista) Från föreläsning F11 index"
0
1
2
värde 1 värde 2 värde 3
3
4
…
…
längd = antal element"
•  En Array är en lista av element. Elementen indexeras från 0 och uppåt. •  En variabel skapas som en Array: a = new Array(); a = [];
b = ["red","blue","green"];
// En Array med dynamiskt antal element // En Array med dynamiskt antal element // En Array med tre element med värdena inom parenteserna •  Referera Fll eH element i en Array: a[3] = 27;
x = b[1];
// Det cärde elementet i a får värdet 27 // x Flldelas värdet av det andra elementet i b •  Exempel på egenskaper och metoder: a.length
b.join(":")
// Antal element (värden) i a // 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 siﬀror 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) ex4"
–  Ger tecknet i posiFon i 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:[email protected]" 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 oﬀentliga 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 formﬁxer.com för aH skicka formulärets innehåll Fll en epost-‐adress –  Dvs eH program på servern formﬁxer.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: [email protected] 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://formﬁxer.com"
9