Formulär, textsträngar och en del annat

Transkript

1 1ME322 Webbteknik 2 Lektion 6 Formulär, textsträngar och en del annat Rune Körnefors Medieteknik Rune Körnefors rune.kornefors@lnu.se

2 Agenda JavaScript Interaktion och gränssnitt Formulärelement och händelser Reguljära uttryck Flytta data med get Läsanvisningar BJS Kap 5, repetition Kap 6, strängar och reguljära uttryck Kap 11, formulär EUE Kap 5-6, repetition från Webbteknik 1 2

3 Implementering 3. Skapa gränssnittet Struktur med HTML. Stil och viss stimuli och feedback med CSS. Skal till JavaScript-funktioner som kopplas till händelser och element i gränssnittet. Eventuellt en del programkod för sammanlänkning och uppdatering av element som hör ihop. 4. Programmera interaktionen Skriv programkod för dialogen. Inför variabler och strukturera eventuellt i fler funktioner. 5. Programmera felhantering Testa och se vilka fel användaren kan göra. Optimera hanteringen. Förhindra, rätta, återställa. (se lektion 6 i Webbteknik 1) Feedback på alla händelser. Design Interaktion och gränssnitt 2. Gränssnitt Hur interaktionen ska gå till. Val av element i formuläret. Vilka händelser som krävs. Rita skisser. Rita in pilar med händelser och kopplingar till namn på funktioner. 1. Interaktion Design av dialog mellan användare och program. Vad användaren ska göra. Vad resultat och annan feedback ska bli. Utformas med "papper och penna". Beskriv i punktform på "vanlig svenska". Garretts designmodell Funktion Innehåll Garrett, J. J. (2011) The Elements of User Experience, 2nd edition, New Riders, kap

4 Element Inmatningsfält Text, tal, , Val Meny, skjutreglage, kryssrutor, radioknappar, datum Knappar button, submit, reset Referenslista: Formulärelement och händelser Händelser click focus / blur change input submit / reset Referenslista: lekt6-ex1 Användning av input för skjutreglage och fält med tal. Prova att ändra till change, för att se skillnaden. 4

5 Reguljära uttryck Reguljärt uttryck för datum, t.ex Reguljärt uttryck för referenser i en text, t.ex. (Andersson, 2012) (Andersson, 2012, s.34) (Andersson, Bengtsson, 2012) (Andersson, Bengtsson, 2012, s.34) lekt6-ex2 Referenslista för reguljära uttryck: 5

6 Kodning av data Utgågna funktioner: escape() unescape() Använd nu istället: encodeuricomponent() decodeuricomponent() lekt6-ex3 Referenslista för globala funktioner: 6

7 Exemplet Gretas blommor Från Webbteknik 1 Punkter som görs med JavaScript Kravspecifikation Innehåll - Produkter ska visas med bild, namn och pris. - Produkterna är kategoriserade i buketter, kransar och övrigt. - Veckans erbjudanden ska visas på ingångssidan. - Ingångssidan ska ha foto som visar butiken och öppettider ska anges. - Interiörbilder från butiken samt kort presentation av personalen (förnamn och bild). - Förslag på blommor efter vad de ska användas till, födelsedag, bröllop, begravning. - Karta som visar var butiken finns. - Beställningsformulär där tilläggsavgifter och totalpriset hela tiden visas. Grön: Helt uppfyllt Gul: Nästan uppfyllt Röd: Delvis uppfyllt Bättre med JavaScript Funktionellt - Bilder på produkter ska kunna förstoras. - Man ska kunna beställa buketter och kransar för leverans. - Man ska kunna göra en fritextsökning på webbplatsen. - Man ska kunna kontakta butiken via ett kontaktformulär. Kräver JavaScript Redan löst med Google anpassad sökmotor 7 Teknisk specifikation - Ska fungera både på vanlig dator och mobila enheter med en skärmstorlek ner till 320 pixels bredd. - Ska fungera i webbläsarna Chrome, Firefox, Internet Explorer, Opera och Safari (även 5 år gamla versioner).

8 Exemplet Gretas blommor Föra över vald produkt till ordersidan Första lösningen lekt6-ex4a Andra lösningen lekt6-ex4b buketter.htm products.js order.htm order.js 8

9 Exemplet Gretas blommor Orderformuläret Uppdatera datum Validering av en del av textfälten lekt6-ex4b order.htm order.js 9

10 Exemplet Gretas blommor Förstora bilder Separat img-tagg för den förstorade bilden Fixed positionering i CSS-koden Storlek och placering får justeras i JavaScript-koden nedan. Förstora bild: Händelsehanterare för click på alla produktbilder Bestäm maximal storlek på bilden utifrån tillgänglig bredd och höjd på fönstret Sätt värden på width, height, left och top Visa element med bilden Dölj förstorad bil Händelsehanterare för click på bilden Dölj elementet med bilden buketter.htm lekt6-ex4b products.css products.js 10