I den här labben ska vi använda oss av en trevlig nyhet i HTML5: Local Storage, för att implementera en sorts lokal gästbok.

Transkript

1 Lokal Gästbok I den här labben ska vi använda oss av en trevlig nyhet i HTML5: Local Storage, för att implementera en sorts lokal gästbok. Gästboken ska fungera som så att man har ett fält där man kan skriva in sitt namn, och ett fält där man kan skriva in ett meddelande. När man trycker på skicka, ska sedan då namnet och meddelandet visas på webbsidan (dvs. ni skapar nya noder i DOM-trädet, på samma sätt som i L2-Miniräknaren). Dessa namn och meddelanden ska sparas i Local Storage, och därmed ska de alltså överleva att man stänger ner sidan och öppnar den igen. När sidan laddas ska alltså eventuella tidigare inlägg (namn+meddelande) visas. För att säkerställa att ni sparar dessa inlägg på ett rimligt sätt, så ska er webbsida även stödja att namnen i de visade inläggen visas på olika sätt: normalt, fetstil, understruket. (Tips och demonstrationsvideo bör förtydliga vad detta innebär och hur ni ska kunna lösa det). Man ska även kunna rensa gästboken, detta ska då ta bort sparade inlägg från både webbsidan (från DOM) samt Local Storage, så om man laddar om sidan ska dessa borttagna inlägg alltså inte visas längre. Ni ska även få testa hur man skriver stilmallar som riktar sig mot specifika typer av enheter, genom att er gästbok ska visas annorlunda om man besöker den från en handhållen enhet. (Återigen, tips och demonstrationsvideo bör förtydliga vad och hur ni ska göra) Om webbläsaren inte stödjer localstorage ska ett meddelande som varnar om detta visas när man laddar sidan, webbsidan ska dock fortfarande gå att använda som en gästbok, men inläggen kommer naturligtvis inte kunna sparas så att de överlever en omladdning av sidan. Local Storage Som ni vet används Local Storage som en associativ array (array med namngivna fält), i stil med: localstorage[ myvalue ]=5; Men ni kan inte använda localstorage som en flerdimensionell array, i stil med: localstorage[ message ][0]= the first message ; 1 (6)

2 localstorage[ message ][1]= the second message ; Istället får ni lagra all relevant information i namnet för fältet, i stil med: localstorage[ message.0 ]= the first message ; localstorage[ message.1 ]= the second message ; Detta kan förstås bli ganska rörigt om man inte använder ett genomtänkt namnschema, ex. så ger ovanstående ingen information om hur många meddelanden som finns lagrade. Så för att lätt kunna loopa igenom alla meddelanden bör vi även ha någon typ av räknare lagrad i localstorage som talar om hur många meddelanden som finns, i stil med: localstorage[ message.length ]=2; localstorage[ message.0 ]= the first message ; localstorage[ message.1 ]= the second message ; Så länge vi ser till att öka message.length när vi lägger till ett meddelande, och minska den när vi tar bort ett inlägg, så kan vi alltså alltid veta hur många meddelanden som finns lagrade. Ni får dock tänka på att om vi inte skapat message.length tidigare så finns den inte, så vid ett första besök till gästboken är alltså message.length inte 0, utan null (ej tilldelad). Ni bör dock även prefix:a era fältnamn med något som säger att de hör till gästboken eftersom ni då minskar risken för en namnkrock om ni skulle använda er kod tillsammans med någon annan kod som också använder localstorage, ex. så att ovanstående skulle bli: localstorage[ guestbook.message.length ]=2; localstorage[ guestbook.message.0 ]= the first message ; localstorage[ guestbook.message.1 ]= the second message ; Möjligt namnschema guestbook.entry.length Antalet inlägg N i localstorage guestbook.entry.x.name Namnet för inlägg X, där X<N guestbook.entry.x.text Meddelandetexten för inlägg X, där X<N guestbook.setting.highlight Gästboksinställning för hur namn ska visas Genom att man separerar ut namn från meddelandetext i inlägg så kan man alltså med enkelhet hantera dessa olika i webbsidan, ex. att namnen läggs i en span med en klass som bestämmer om namnen ska visas normalt, i fetstil 2 (6)

3 eller understrukna. CSS Media Använd CSS media-attributet för att skriva en stilmall som endast gäller för handhållna (handheld) enheter. I denna stilmall skulle ni kunna ge webbsidan en annan layout som bättre passar sig för de oftast lägre upplösningar som handhållna enheter har, det skulle även kunna vara en bra ide att byta ut ev. bakgrundsbilder mot versioner i lägre kvalitet i stilmallen då detta skulle spara bandbredd och möjligen inte ens märkas pga. lägre upplösning på den handhållna enhetens skärm. I den här labben har vi dock inte använt oss av så mycket layout eller bakgrundsbilder, så här räcker det att ni visar att ni kunnat skapa en sådan stilmall i huvudtaget genom att ni ger webbsidan en annan bakgrundsfärg för handhållna enheter. Tips Det kan vara lämpligt att ha en hel del olika funktioner för denna labb, exempelvis en funktion för att: Lägga in ett inlägg i DOM-trädet Lägga in ett inlägg i LocalStorage Läsa ut namn och text från webbsidans formulär, och lägga in i både DOM och LocalStorage Läsa ut ev. inlägg från LocalStorage och lägga in dem i DOM-trädet med lämpliga klasser som märker upp namnen enligt inställning från LocalStorage. Rensa bort alla inlägg från DOM-trädet Rensa bort alla inlägg från LocalStorage Den fjärde funktionen skulle ex. kunna vara lämplig att köras när webbsidan laddats första gången, och om man ser till att den börjar med att ta bort tidigare inlägg från DOM så blir den väldigt användbar, ex. för att byta hur namn ska visas. Återanvänd era mindre funktioner i era större, den tredje funktionen kan ex. med fördel använda sig av de två första. 3 (6)

4 För att hålla reda på antalet inlägg i localstorage så behövde ni som sagt använda någon form av räknare, tänk på att säkerställa att denna räknare har fått ett värde innan ni försöker öka/minska den. Ni kan exempelvis göra detta genom att sätta räknaren till 0 om den är null innan ni ändrar på dess värde. Ni kan fixa så att er lista av uppmärkningssätt av namn visar det aktuella uppmärkningssättet vid ny sidladdning genom att ni använder javascript attributet selectedindex på ert select-element: HTML: <select id="guestbookcontrolhighlight" onchange="## nån lämplig funktion här ##"> <option value="normal">normal</option> <option value="bold">bold</option> <option value="underline">underline</option> </select> Javascript: var sel = document.getelementbyid("guestbookcontrolhighlight"); sel.selectedindex=0; //Normal är förvald sel.selectedindex=1; //Bold är förvald sel.selectedindex=2; //Underline är förvald Ramarna med textbeskrivning som ni kan se i demonstrationsvideon får man genom att man använder ett fieldset-element, enligt: <fieldset> <legend>guestbook Entries</legend>... övrigt innehåll innanför ramen.. </fieldset> Det är förstås inget krav att ni använder dessa dock, utseendet på webbsidan bestämmer ni över själva. Att rensa i localstorage för gästboken bör ju normalt sett bara ta bort de fält som ni skapat själva för gästboken (ex. om webbsidan också skulle haft en inbyggd miniräknare med historik i localstorage, så bör ju en rensning av 4 (6)

5 gästboken inte även rensa miniräknaren), men det viktiga här är att vi lätt kan nollställa gästboken, så localstorage.clear() kan användas. Uppmärkningen av namn går att lösa på ett flertal olika sätt, exempelvis skulle ni kunna lägga namnen i span-element med en klass som bestämmer vilket uppmärkningssätt som ska användas: HTML: <span class="guestbookentrynamebold">test name</span><span>message</span> CSS:.guestbookEntryNameBold { font-weight: bolder; } Eller så skulle ni kunna bestämma uppmärkningen genom att sätta en sådan klass på ett omslutande element, och ha generiska klassnamn för spanelementet med namnet, och sedan utnyttja CSS Selectors. Då alla namn kommer stylas på samma sätt så kan detta kännas som en lämpligare metod (och som bonus så behöver man ju bara ändra klass för ett enda element när man ändrar uppmärkning, istället för att behöva loopa igenom alla spanelement innehållandes namn): HTML: <div class="guestbookentriesunderline">... <span class="guestbookentryname">test name</span><span>message</span>... </div> CSS:.guestbookEntriesUnderline.guestbookEntryName { text-decoration: underline; }.guestbookentriesbold.guestbookentryname { font-weight: bolder; } 5 (6)

6 Ett exempel på hur er sida skulle kunna se ut och fungera: (Mpeg4-video, testad och fungerar med QuickTime, inget ljud, ca 1.3MB) Märk dock att detta bara är ett exempel, ni får gärna göra snyggare/mer avancerade lösningar, så länge som ni fortfarande uppfyller den funktionalitet som krävs i det här dokumentet. Givna filer Inga filer är givna för den här labben. Inlämning Döp er webbsida till index.html, övriga filer (stilmallar och javascript) ger ni lämpliga namn (använd dock inte åäö, kan strula med teckenkodningar). Packa alla era filer i en zipfil, som ska heta lab5.zip, denna zipfil lämnas in via kurssidan på Cambro, senast Fredag 12 augusti :00. Notera att filerna inte ska ligga i någon mapp i zipfilen, utan zipfilen ska endast innehålla filerna själva. Observera också att det är viktigt att filerna har exakt det namn som specificerats i det här dokumentet och att filnamnen bara ska anges med små bokstäver. Eftersom detta möjliggör att vi använder oss av automatiska skript när vi rättar. All HTML/CSS/Javascript ni skriver ska vara korrekt och validerande. 6 (6)