1

1ME322 Webbteknik 2 – Lektion 6

Formulär, textsträngaroch en del annat

Rune KörneforsMedieteknik

http://medieteknik.lnu.se/1me322

© 2020 Rune Körneforsrune.kornefors@lnu.se

Vi startar 15.15

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

3

Interaktion och gränssnitt

Funktion Innehåll

Garretts designmodell

Garrett, J. J. (2011) The Elements of User Experience, 2nd edition, New Riders, kap. 5-6

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".

4. Programmera interaktionen• Skriv programkod för dialogen.• Inför variabler och strukturera

eventuellt i fler funktioner.

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.

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

Implementering

Från Lektion 1

4

Formulärelement och händelserElement

• Inmatningsfält

• Text, tal, email, …

• Val

• Meny, skjutreglage, kryssrutor, radioknappar, datum

• Knappar

• button, submit, reset

Referenslista:

https://www.w3schools.com/html/html_form_elements.asp

Händelser

• click

• focus / blur

• change

• input

• submit / reset

• …

Referenslista:

https://www.w3schools.com/jsref/dom_obj_event.asp

lekt6-ex1Användning av

• change för meny

• input för skjutreglage och

fält med tal.

Prova att ändra till change,

för att se skillnaden.

5

Reguljära uttryck

Reguljärt uttryck för datum, t.ex.2018-12-24

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:https://www.w3schools.com/jsref/jsref_obj_regexp.asp

6

Kodning av data

Utgågna funktioner:escape()unescape()

Använd nu istället:encodeURIComponent()decodeURIComponent()

Referenslista för globala funktioner:https://www.w3schools.com/jsref/jsref_obj_global.asp

lekt6-ex3

7

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.

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.

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).

Grön: Helt uppfylltGul: Nästan uppfylltRöd: Delvis uppfyllt

Kräver JavaScript

Bättre med JavaScript

Exemplet

Gretas blommor

Från Webbteknik 1

Redan löst med Google anpassad sökmotor

8

Föra över vald produkt till ordersidan

– Första lösningen

– Andra lösningen

Exemplet

Gretas blommor

buketter.htm

lekt6-ex4a

lekt6-ex4b

order.htm

products.js

order.js

9

Orderformuläret

• Uppdatera datum

• Validering av en del av textfälten

Exemplet

Gretas blommor

lekt6-ex4b

order.htm order.js

10

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ängligbredd och höjd på fönstret

• Sätt värden på width, height, left och top• Visa element med bilden

• Dölj förstorad bild– Händelsehanterare för click på bilden

• Dölj elementet med bilden

Exemplet

Gretas blommor

lekt6-ex4b

buketter.htm

products.css

products.js