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 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 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 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) 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 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: [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://formfixer.com" 9
© Copyright 2024