http://w3.msi.vxu.se/multimedia Medieteknologi Webbprogrammering och databaser MEB725, 5p (7,5 ECTS) Klientprogrammering JavaScript Program på flera sidor Rune Körnefors Innehåll Variabler i JavaScript Överföra data mellan webbsidor Cookies I denna lektion studerar vi överföring av data från en webbsida till en annan. Tre metoder introduceras. Till denna lektion hör filerna för exempel 1 till 3. 1
Variabler i JavaScript Lokala Existerar endast i den funktion där den tilldelas function one() one() {{ var var a = 5; 5; }} Globala Existerar i hela sidans kod Kan t.ex. tilldelas i en funktion och användas i en annan Lokal för sidan Upphör då man lämnar sidan b = 4; 4; function one() one() {{ a = 5; 5; }} function two() two() {{ c = a + b; b; }} 2 I de flesta programspråk, så även JavaScript, använder man variabler för att spara data. Man skiljer på lokala och globala variabler. Lokala variabler tilldelas i en funktion och existerar endast i den funktionen. Detta görs i JavaScript genom att lägga till nyckelordet var framför tilldelningen. ------- Utesluter man nyckelordet var, så blir variabeln global, vilket innebär att den kan användas mellan funktioner och i flera funktioner. Den kan alltså tilldelas i en funktion och utnyttjas i en annan. Men även globala variabler är i viss mån lokala, eftersom de endast existerar så länge webbsidan med programmet finns i webbläsaren. Variablerna är alltså lokala för sidan. Går man till en annan sida, finns inte längre den förra sidans program kvar och dess variabler existerar inte längre. 2
Program uppdelat på flera sidor Behov av datahantering Flytta data Det användaren gör på en sida behövs på en annan sida T.ex. produktlista och varukorg Fyller i ett formulär eller gör val genom att klicka på bilder, länkar, etc. på en sida, som sedan sammanställs på en annan sida Spara data Val/inställningar som görs på en sida, ska fortfarande gälla, då man kommer tillbaks till sidan, eller ska kanske gälla på flera sidor T.ex. inloggningskod eller namn- och adressuppgifter i formulär T.ex. en sida med objekt som kan visas/döljas de objekt som visades ska finnas kvar då man kommer tillbaks 3 Har man ett program uppdelat på flera sidor, har man behov av att kunna hantera data mellan sidorna. Man behöver kunna flytta med sig data från en sida till en annan. Användaren kanske fyller i data i ett formulär på en sida och de val som gjordes kanske ska sammanställas eller utnyttjas på en annan sida. ------- Man har också behov av att spara data. En del data kanske endast behöver sparas under en session. T.ex. ska kansk val eller inställningar som görs gälla så länge man befinner sig på webbplatsens sidor. Det kan också finnas behov av att spara data mellan sessioner. Val man gjort då man befann sig på webbplatsen, ska kanske finnas kvar nästa gång man kommer till webbplatsen, även om man avslutat webbläsaren och kanske haft datorn avstängd mellan tillfällena. 3
Flytta data Data kan överföras från en sida till en annan på något av följande sätt 1. Parametrar i URL:en 2. Användning av ramar i HTML. Data överförs i globala variabler i dokumentet med ramspecifikationen 3. En cookie som sparas på användarens dator 4 För att flytta data från en sida till en annan, ska vi studera tre sätt. 1. Man kan flytta data via adressen till nästa sida genom parametrar i url:en. 2. Har man byggt upp webbplatsen med ramar, finns alltid dokumentet med ramspecifikationen (dvs det med frameset- och frame-taggarna) kvar i webbläsaren. Då kan man ha globala variabler där. 3. Man kan också använda sig av en teknik kallad cookies för att spara data på användarens dator. Man kan inte spara något hur som helst på användarens dator, men en cookie är en textsträng som är kopplad dels till den webbläsare som används och dels till den webbplats som sparar den. 4
Parametrar i URL:en Data skickas från en sida till en annan med parametrar i slutet av sidans adress http://www.vxu.se/sida.htm?parametrar Parametrarna En sträng med tecken Kan skrivas hur man vill, men skrivs ofta som: Parameterns namn = värde Har man flera parametrar åtskiljs de av &-tecken T.ex. par1=värde1&par2=värde2& Ibland (ofta?) utesluts parameternamnen 5 Skickar man med data i adressen till nästa sida, lägger man till ett frågetecken i url:en följt av den data man vill skicka med. Parametrarna ligger sist i adressen och är alltså en textsträng. Har man andra datatyper, t.ex. en Array, måste de först konverteras till en textsträng. På sidan där man har datan får man skriva ett program för att sätta ihop textsträngen med parametrarna. På den mottagande sidan får man också ha ett program som plockar ut parametrarna från url:en. Parametersträngen brukar bestå av en följd av parameternamn och värden åtskiljda av &-tecken. Detta har du kanske sett i sökmotorer och webbutiker. Det kan bli långa, kryptiska adresser, men fördelen är att man får med parametrarna, om man väljer att spara ett bokmärke. Det kan vara användbart för att t.ex. spara en sökning i en sökmotor. Handlar det bara om ett fåtal parametrar och alltid samma parametrar i samma ordning, så kan man ibland förenkla programmet genom att utesluta parameternamnen och endast skicka över värdena. 5
Funktionerna escape och unescape Om parametrarna kan innehålla specialtecken som t.ex. åäö, blanktecken och en del andra tecken (t.ex.? och &), måste man omvandla strängen till hexadecimala koder (t.ex. %F6) i ISO-8859 (Latin1) Detta görs med funktionen escape Omvandling tillbaks igen sker med unescape Exempel: escape( En grön vårdag! ) blir En%20gr%F6n%20v%E5rdag%21 6 Konstiga tecken som åäö och andra tecken med speciell betydelse i url:en, såsom? och &, ställer till problem om de ingår i parametrarnas värden. Om sådana tecken kan ingå i värdena, måste man först konvertera dem till teckenkoder, innan de läggs in i parametersträngen. Detta görs med funktionen escape. På den mottagande sidan konverterar man sedan tillbaks parametrarna med funktionen unescape. En textsträng med specialtecken kan därför se konstig ut i url:en, men det är som det ska vara. 6
Exempel 1 Överföring av data ifrån ett formulär till en annan sida med parametrar i URL:en page1.htm En parametersträng där parametrarna åtskiljs med & Parameternamn tas ej med Escape för konvertering av specialtecken T.ex.: page2.htm?gul&bl%e5&b page1.htm page2.htm Unescape för konvertering till ursprungliga tecken igen Utskrift på sidan T.ex.: gul blå b page2.htm 7 Tekniken med att överföra data i url:en ska nu studeras i ett exempel. Studera filerna för detta exempel, innan du går vidare till nästa metod. 7
Ramar och globala variabler Dokumentet med ramspecifikationen Finns alltid kvar även när man byter sida i en ram Globala variabler i detta dokument finns alltså kvar Ger en struktur där ramspecifikationen är roten Struktur om man har två ramar top top Referenser: vram vram Uppåt från vram eller hram till ramspecifikationen: parent Från t.ex. vram till hram: parent.hram (alt. parent.frames[1]) hram hram Har man en struktur där man behöver gå två steg upp använder man referensen parent.parent. Man kan också använda referensen top, för att komma högst upp. 8 Den andra metoden, som vi här tar upp, för att överföra data från en webbsida till en annan bygger på att man skapat sin webbplats med ramar. Har man ramar skapas en trädstruktur där varje ram utgör en nod i trädet. Roten (översta noden) utgörs av dokumentet med ramspecifikationen, där man har sina frameset- och frame-taggar. Dokumentet med ramspecifikationen finns alltid kvar i webbläsaren, även om man byter dokument i ramarna.vill man spara data som ska användas i flera olika dokument, kan man göra det i globala variabler i dokumentet med ramspecifikationen. För att referera uppåt i trädet kan man använda parent. Har man t.ex. en struktur med två ramar, såsom i bilden ovan, och t.ex. en variabel kallad x i ramspecifikationsdokumentet, kan man referera till denna med parent.x, i dokumenten i ramarna. Det är också möjligt att skriva top.x. Vill man gå ner i en annan ram, så använder man ramens namn. Om man t.ex. i strukturen ovan har ett formulär kallat myform ii dokumentet i hram och i det formuläret har ett textfält kallat text, kan man i dokumentet i vram referera till det med parent.vram.myform.text.value för att komma åt textfältets innehåll. 8
Exempel 2 Överföring av data ifrån ett formulär till en annan sida med globala variabler i ramspecifikationen index.htm index.htm ramspecifikation Global variabel för att lagra formulärets data page1.htm page1.htm Sparar formulärets data i den globala variabeln page2.htm Hämtar data ifrån den globala variabeln left.htm leftframe rightframe page2.htm left.htm Ingen JavsScript-kod i detta exempel endast utfyllnad för den vänstra ramen 9 Exempel 2 visar växlar man mellan page1.htm och page2.htm i samma ram. Båda dokumenten finns alltså inte i webbläsaren samtidigt och man kan inte i det ena dokumentet komma åt data som finns i det andra. För att föra över data från page1.htm till page2.htm används en global variabel i dokumentet index.htm. Studera nu filerna för detta exempel, innan du går vidare. 9
Spara data Data kan sparas på följande sätt 1. Användning av ramar i HTML. Data sparas i globala variabler i dokumentet med ramspecifikationen Data finns endast kvar under en session, dvs så länga dokumentet är kvar i webbläsaren 2. En cookie som sparas på användarens dator Data kan sparas mellan olika sessioner 10 Behöver man endast spara data under en session och använder sig av ramar, går det utmärkt att använda globala variabler, så som det visades i exempel 2. Om man inte använder ramar eller behöver spara data mellan olika sessioner, så kan man använda sig av cookies. 10
Cookies Webbsidan kommer ihåg info mellan olika sidor och olika sessioner Lagras i klientdatorn Cookie-filen Endast den domän som skapat cookien kan använda den 11 En cookie är en textsträng som man ger ett namn och sparar. Vid ett annat tillfälle kan man sedan läsa in strängen igen. Webbläsaren har en s.k. cookie-fil där webbsidorna kan spara textsträngar. Cookiefilen kan vara implementerad på olika sätt i olika webbläsare; det kan vara en enda textfil eller den kan vara uppdelad i flera olika textfiler. Men, detta behöver man inte bry sig om, utan det sköter webbläsaren. I JavaScript referar man till cooki-filen med ett cookie-objekt (document.cookie). Av säkerhetsskäl är åtkomsten i cookie-filen begränsad till den domän där webbsdian med programmet finns. En webbsida i en domän kan alltså inte avläsa en cookie i en annan domän. Den som skapar cookien kan dessutom begränsa åtkomsten ännu mer till en bestämd sökväg inom domänen, t.ex. till en katalog för en webbplats eller t.o.m. en enskild fil. 11
Cookies En cookie består av: domain t.ex. msi.vxu.se eller.vxu.se ej endast toppdomän path t.ex. /multimedia/kurser/ eller multimedia/kurser/meb725/schema.htm kan också vara tom, / name t.ex. kurs value t.ex. kod,termin expire date tid i GMT (Greenwich-tid) då cookien ska upphöra secure true/false 12 En cookie består utav ett antal komponenter, varav namn och namn och värde alltid måste finnas. Namn är det som identifierar cookien och namn bestäms enligt samma regler som för variabler i programspråk, dvs endast bokstäver i engelska alfabetet, siffror och _. Värdet är en textsträng som utgör cookiens innehåll. Mellan namn och värde har man ett likhetstecken och mellan de olika komponenterna har man ett semikolon. Om dessa tecken kan ingå i cookiens värde, måste värdet omvandlas med escape-funktionen, innan det sparas. För säkerhets skull bör man använda escape även då andra tecken, såsom åäö, etc. kan ingå i värdet. Domän och sökväg begränsar åtkomsten av cookien. Man kan begränsa detta inom den domän som webbsidan med programmet som hanterar cookien finns. men det går inte att öppna upp, så att man utökar domänen. Det är inte alltid man bryr sig om att specificera dessa delar, utan de sätts automatiskt av webbläsaren. Upphörandedatum sätter man för att begräsna hur länge cookien ska finnas. Hela cooki-filen är begränsad i storlek, så webbläsaren kan inte hantera hur många cookies som helst. Därför bör man begränsa tiden för cookien, så att den inte sparas onödigt länge och tar upp plats i onödan. Sätter man inget upphörandedatum alls, så tas cookien bort då webbläsaren avslutas. Vad som annars är lämplig tid att spara en cookie varierar från fall till fall. Ibland kanske bara en vecka och ibland ett år eller två. Secure anger om cookien endast får användas under vad som anses av webbläsaren vara säkra förhållanden. men vi går inte in närmare på det här. 12
Exempel 3 Överföra och spara data med en cookie page1.htm Då sidan laddats in: Om en cookie finns, fylls formulärets med dess data Då man klickar på knappen för nästa sida: Spara formulärets data i cookien page2.htm Hämta cookien och skriv ut värdena page1.htm page2.htm cookie_script.js En del JavaScript-kod som länkas in till html-filerna Används, eftersom en del funktioner används på båda sidorna 13 Exempel 3 innehåller samma formulär som i exempel 1 och 2, fast i detta fall ska datan sparas i en cookie, för att kunna överföras till nästa sida. Studera nu filerna till detta exempel. 13