DOM (Document Object Model) är modellen efter vilken en webbläsaren är uppbyggd. Alla objekt/element i webbläsaren finns hierarkiskt ordnade i DOM.

Transkript

1 JavaScript del1 Syftet med detta häfte är att sammanfatta det viktigaste i JavaScript så kort och koncist som möjligt men ändå tillräckligt omfattande för att ge god kännedom om en av de vanligaste teknikerna för att skapa mer avancerade webbsidor. Kursdeltagarna ska med detta häfte som stöd kunna göra avancerade webbsidor, förstå den bakomliggande tekniken samt ha god kännedom om prestandaoch säkerhetsaspekter. Innehåll (JavaScript): JS del1 : Introduktion, historik, bakgrund, egenskaper, objekt, variabler, villkor och loopar. Operatorer, jämförelser och logiska operatorer. Alert- och Promptfunktionerna. JS del2 : Formulär. Funktioner och returvärden. Händelsehantering. Infogning av JS-kod. JS del3 : Mer om Objekt. DOM. JS del4 : Stränghantering JS del5 : Cookies JavaScript bakgrund och egenskaper JavaScript uppfanns av Netscape och hette från början LiveScript. Microsoft har en egen variant av JavaScript som heter JScript, vilket är i stort sett identiskt. Det har syntaktiska likheter med Java (som kommer från SUN) - men de skiljer sig markant. Java är ett fullfjädrat objektorienterat programmeringsspråk som är plattformsoberoende. JavaScript är ett scriptspråk med begränsad funktionalitet men med mycket stark texthantering och ett antal inbyggda objekt. Skriptspråk som utvidgar HTML och medför möjlighet till interaktiva sidor. Interpreterande (tolkande), måste provköras för att upptäcka felaktigheter. Måste bäddas in i HTML-kod, eller refereras till från HTML-kod. Begränsad funktionalitet (saknar t.ex. filhantering). JS är alltså webbläsarbaserat (tolken är inbyggd i webbläsaren och koden körs alltså lokalt på användarens dator). Detta medför att vissa program kan köras lokalt hos surfaren istället för på servern (t.ex. indatakontroll). Dvs man flyttar intelligens från servern till klienten vilket medför att webbservern avlastas samt man får minskad trafik mellan webbserver och klient. Case-sensitive, JavaScript skiljer på stora och små bokstäver. Nyaste JS-versionen är JS1.5 Hur en webbplats är uppbyggd En webbplats kan bestå av ett antal olika delar, både på klientsidan och på serversidan. Kommunikationen mellan klient och server sker med HTTP (HyperText Transfer Protocol). HTML (HyperText Markup Language) är grundstommen i webbplatsen. Med HTML struktureras informationen på ett logiskt sätt. Informationen delas in i stycken, rubriker, listor, tabeller etc. Med CSS (Cascading Style Sheets) läggs färg, typografi och layout till den logiska struktur som byggts upp med HTML. JavaScript ger möjlighet till interaktivitet och dynamik i det annars statiska gränssnittet som utgörs av HTML och CSS DOM (Document Object Model) är modellen efter vilken en webbläsaren är uppbyggd. Alla objekt/element i webbläsaren finns hierarkiskt ordnade i DOM. OBS! Det finns andra teknologier än de vi använder i denna kurs. Dessa arbetar på serversidan. T.ex.finns ASP (Active Server Pages) som fungerar på ungefär samma sätt som PHP, och som är bättre lämpat för vissa miljöer/plattformar. Valet av databas görs även baserat på den miljö/plattform man arbetar i.

2 Exempel I Skriv in koden nedan och spara filen som ett.htm(.html)-dokument. Öppna dokumentet i en webbläsare och konstatera vad som händer. Lägg märke till punktnotationen (dvs punkten mellan document och write) som används för ropa på metoden write i objektet document. JavaScript-koden bäddas alltså in i HTML-koden men göms i en HTML-kommentar (talar om för webbläsaren att detta inte ska tolkas som HTML-kod). Observera att du måste gömma HTML-kommentarens slut för JavaScript-tolken (dvs föregås av //) eftersom precis som HTML inte förstår JavaScript-kod, förstår inte JavaScript HTML. Det går att utesluta HTML-kommentaren med risk att vissa webbläsare spårar ur. <HEAD> <TITLE>JavaScript - Exempel I</TITLE> <HEAD> <BODY> <SCRIPT LANGUAGE="JavaScript">  </SCRIPT> </BODY> Objekt - vad är det? paket med färdiga typer som innehåller variabler och funktioner variabler = egenskaper objektet har funktioner = objektets metoder egenskaper och metoder nås mha punktnotation. document.write("mitt första javascript!!"); Här ropar vi på objektet document och använder metoden write för att skriva ut den textsträng vi önskar. Egenskaperna (datat) medför alltså att objekt har (och kan komma ihåg) tillstånd (genom datat som finns i dess variabler). Punktnotationen används alltså för både egenskaper och metoder efter det aktuella objektets namn. Texten "Mitt första javascript!!" som ska skrivas ut kallas inparameter till metoden. Skillnaden mellan metoder och egenskaper är att metoder gör något med ett objekt, medan en egenskap är något som objektet har. Variabler JavaScript är löst typat - variabler deklareras sällan C++ & Java är exempel på hårt typade språk (Alla variabler måste deklareras och kan bara innehålla värden av den deklarerade typen) Detta är OK i JS (men ej i C++ eller Java): lejon = 17 lejon = Me Tarzan, you Jane JavaScript-tolkaren i webbläsaren konverterar automatiskt variabeln till rätt datatyp. oldmeny = igår åt jag tigrar oldmeny innehåller: igår åt jag 19 tigrar Deklaratationen var lejon = 17 fungerar likadant men visar tydligare att lejon är en variabel. Variabelnamnet utgör en referens till värdet som finns i de aktuella minnescellerna. Vill du veta innehållet i Lejon kan du t ex skriva document.write( Lejon är: + Lejon) i din kod. Tilldelning sker med = tecknet, mer om detta längre fram.

3 Variabelnamn Får ej inledas med siffra Måste inledas med _ eller bokstav Får ej innehålla å, ä, ö, mellanslag eller, samt. JS är case sensitive; variabeln Antal är inte lika med variabeln antal döp variabler med gemener men är det ett långt variabelnamn som består av flera ord så kan det underlätta att skriva första bokstaven i de inre orden som en versal, t ex kattermedstorsvans Reserverade ord break, case, catch, continue, delete, do, else, if, for, function, if, new, return, switch, throw, try, while, with Reserverade ord har en speciell betydelse i språket JavaScript, och därför kan de inte användas som variabelnamn. Om man ska skriva strängen. En himla massa roliga program i en sträng så skriver man document.write( En himla massa roliga \ program\ ) dvs vi använder s k Escape-tecken för att kunna skriva tecken som man normalt inte kan skriva. \ = citationstecken inne i sträng \\ = backslash; Kommentarer När vi skriver kod ska vi i vanlig ordning kommentera och dokumentera koden så att det är lätt för en oinsatt programmerare att sätta sig in och förstå den. Kommentarer i JavaScript skrivs på följande vis: // kortare kommenterar på en rad eller /* Längre kommentarer som kan spänna över flera rader */ Indentering Indentering är ett sätt att strukturera kod med indrag så att den blir lätt att läsa och se var olika delar startar och slutar t.ex: <html> <head> <title>test</title> </head> <body> <form> <input type= button value= tryck onclick= alert('du lyckades') > </form> </body> </html> Boolean kan returneras av metoder. Null är ett värde som inte innehåller någonting, det kan returneras av några metoder.

4 Mer om värden till variabler och fler typer Booleska variabler En variabeltyp som bara kan ha värdet TRUE eller FALSE (sann eller falsk). Ett tal kan representeras som ett heltal (4, 2021) eller ett flyttal (6.23, 0.435). Undefinied En datatyp som skapas utan att tilldelas ett värde, därför av odefinierad typ. Strängar Datatypen för text. Ex: "Jag kan flyga, jag är inte rädd Vektorer eller Arrays kan också kallas fältvariabler. Eftersom vektorer är så vanliga så finns det inbyggda objekt vars specialitet är att just handskas med dessa. (Mer om hur man skapar en vektor längre fram) En vektor kan innehålla element av blandade datatyper i JavaScript. Tilldelning För att tilldela variabler värden i JavaScript så anger man variablens namn följt av = och sedan värdet. Eftersom JavaScript är s.k löst typat är t.ex följande tillåtet: var summa=25; var text= Jag är ; var summatext=summa+text; (detta kallas för konkatenering(dvs ihopslagning)) document.write(summatext+"år".); Texten som skrivs ut är: Jag är 25 år. Tilldelning = ska skiljas från == jämförelse vanligt nybörjarfel If (variabel == 1) { document.write( Du variabeln är ett ) Operatorer +, -, *, / Plus, minus, multiplikation och division fungerar som vanligt. % Modulus-operatorn (%) ger resten vid division. x = 28 % 18 // ger x = 10 antal = antal + 1; är samma som antal+=1; är samma som antal++; Obs ++ ökar bara med 1. antal = antal -1; är samma som antal-=1; är samma som antal--; Obs -- minskar bara med 1. Jämförelser < mindre än; 32 < 16 är falskt > större än; 32 > 16 är sant >= större än eller lika med <= mindre än eller lika med == lika med === lika med och av samma typ!= skilt från!== skilt från och av samma typ Logiska operatorer! (negering) och (eller) och && (och) fungerar bara i logiska uttryck Operanderna på båda sidorna ska vara logiska, dvs ha värdet true eller false. Kombinationer av logiska operatorer och jämförelser. T ex ((1<2)&&(3!=3)) ger värdet false

5 Villkor IF-satsen I JavaScript som med all annan programmering är det viktigt att kunna göra olika saker beroende på resultatet av ett villkor. IF-satsen utför en eller flera satser om villkoret är sant annars kan andra satser utföras. Ex: if (tal1<tal2) { document.write("tal1 är mindre än tal2"); else { document.write("tal2 är mindre än tal1"); If-sats med flera kontroller Man kan utelämna tecknena { och om man bara har en sats. Ett tips är att ändå alltid sätta satsen mellan { och eftersom man i efterhand enkelt kan fylla på med fler satser utan att för den saken ändra för mycket eller få syntax-fel. Genom att använda kombinationen else if kan man kontrollera, och skilja på, flera olika villkor. if (villkor1){ document.write("villkor1 är sant"); else if (villkor2){ document.write("villkor2 är sant"); else if (villkor3){ document.write("villkor3 är sant"); else if (villkor4){ document.write("villkor4 är sant"); Om man vill kontrollera om flera villkor är sanna samtidigt kan man nästla dem: if (villkor1){ if(villkor2) { if(villkor3) { document.write("villkor 1-3 är alla sanna"); else { document.write("ett eller flera av villkoren 1-3 är ej sanna"); Loopar Loopar användas när man upprepar satser flera gånger. Det finns 4 sätt att göra detta på; for-loopen while-loopen do-while-loopen rekursiva funktioner For-loopen används när man vet exakt hur många gånger loopen ska köras. for(startvärde; villkor; förändring) {satser; Ex.: for (i = 0; i<10; i++) { document.write("ett varv till!<br>"); Vi ser att loopen kommer köras exakt 10 gånger.

6 While-loopen används när man inte vet hur många gånger loopen ska köras. while (villkor1) { if (villkor2) continue; // nytt varv satser; // bör påverka villkor1 if (villkor3) break; // gå ur loopen Break - gå ur loopen; fortsätt med satsen efter loopen Continue - börja omedelbart på nästa varv i loopen Ex.: while(input!="sluta") { input = window.prompt(); Loopen kommer att fortsätta be om värden tills man fyller i "sluta". (window.prompt är en inbyggd funktion som ger användaren en ruta att fylla i text i, och levererar texten till variabeln (input) när användaren trycker "OK") Om input innehöll värdet 'sluta' redan från början, skulle exemplet inte läsa in något nytt värde, utan direkt gå ur loopen innan det hunnit hända någonting. För att motverka detta finns do-while-loopen. Do-while-loopen används när man vet om att en while-loop ska köras minst en gång. var rad = 0; do{ document.write("rad nummer: " + rad); rad ++; while (rad < 10) break och continue kan även användas här Ex.: do { input = window.prompt(); while(input!="sluta") Kontrollerar villkoret efter att satserna utförs, istället för före. Dialogrutor meddelanderutor(fönster) Alert Är en meddelande-ruta som skrivs ut med ett utropstecken. Meddelandet stoppar JavaScript exekveringen tills det att användaren konfirmerat (kvitterat) att denne har läst meddelandet genom att klicka OK. Detta är ett sätt att varna eller informera användaren. Prompt Är en meddelande-ruta där användaren får möjlighet att skriva in en textsträng. När användaren lämnar prompt-rutan och trycker OK så returneras strängen användaren skrivit in. Om användaren trycker på Avbryt så returneras ett värde av datatypen null tillbaka. Confirm Är en meddelande ruta som skrivs ut med ett frågetecken, användaren måste trycka på OK eller Avbryt. Är en boolesk funktion vilken returnerar true om OK och false om Avbryt tryckts in.