Lektion 5, del 1, kapitel 12

Transkript

1 Lektion 5, del 1, kapitel 12 Inlärnings mål Att förstå objekt baserad programmering Att förstå begreppet inkapsling Att kunna använda objektet Math Att kunna använda objektet String Att kunna använda objektet Date Att kunna använd Boolian och Number objekt JavaScript objekt Introduktion Hitintills har vi enbart arbetat med grundläggande strukturell programmering. Vi skall nu se hur vi med hjälp av JavaScript kan påverka och förändra varje enskilt objekt i ett XHTML program. I denna lektion skall vi börja med att titta på några grundläggande objekt i JavaScript. Objekt För att förstå objekt kan man dra paralleller till omvärlden. Allt vi ser omkring oss kan ses som objekt. Om vi betraktar en bil så är själva bilen ett objekt. Storlek, form, färg, vikt mm. Är attribut (egenskaper) till objektet. Acceleration, bromsa, sväng mm. Är metoder (funktioner) till objektet. På samma sätt har objekt i JavaScript egenskaper och metoder. Objektet Math De Allra flesta metoder för matematiska operationer är samlade i objektet Math. Metoderna anropas med objektet följt av önskad metod ex Math.sqrt(tal) för att räkna ut kvadratroten ur talet. Här följer en sammanställning över tillgängliga metoder för objektet Math. Metod Beskrivning Abs ( x ) Absolutvärde av x Ceil ( x ) Avrunda x till minsta heltal inte mindre än x Cos ( x ) Cosinus för talaet x Exp ( x ) Exponenten e x Floor ( x ) Avrundar x till största heltal ej större än x Log ( x ) Naturliga logaritmen för x (bas e x )

2 Max ( x, y ) Returnerar det största av talen x och y Min ( x, y ) Returnerar det minsta av talen x och y Pow ( x, y ) x upphöjt till y (x y ) Round ( x ) x avrundeat till närmaste heltal Sin ( x ) Sinus för talet x Sqrt ( x ) Kvadratroten för talet x Tan ( x ) Tangens för talet x Objektet Math definierar även ett antal matematiska konstanter. Konstant Beskrivning Ungefärligt värde Math.E Euler s konstant 2,718 Math.LN2 Naturliga logaritmen av 2 0,693 Math.LN10 Naturliga logaritmen av10 2,302 Math.LOG2E 2 logaritm av Euler s konstant 1,442 Math.LOG10E 10 logaritm av Euler s konstant 0,434 Math.PI π (pi) 3, Math.SQRT1_2 Kvadratroten av ½ 0,707 Math.SQRT2 Kvadratroten av 2 1,414 Objektet String Vi skall nu introducera objektet String. Strängar är en grundläggande byggsten i alla mordena programmeringsspråk. Alla text strängar är en instans av objektet Sting. En sträng kan innehålla text siffror och olika special tecken. En sträng deklareras med t.ex. var color = blue Detta skapar en stäng med namnet color som innehåller fyra tecken. De vanliga jämförelse operatorerna kan användas på strängar (<, <=, >, >=, ==,!=). Metoder för objektet String String objektet tillhandahåller en mängd metoder för att välja eller söka tecken I strängar, för att slå samman strängar, söka ut del strängar och mycket mer. String tillhanda håller även en mängd metoder för att generera XHTML kod. (index räknas från noll) Metoder: Metod charat ( index ) carcodeat ( index ) concat (string) fromcharcode (value1, value2, ) indexof ( substring, tecken) lastindexof ( Beskrivning Returnerar tecknet vid index, om inget tecken tom stäng. (s o men för unicode) Slår samman en sträng med en annan ex. s1.concat(s2) Konverterar en lista av Unicode värden till en sträng av ASCII tecken Söker igenom strängen efter första förekomst av subträngen och returnerar index till första position i substrängen. Returnerar 1 om strängen inte finns. Som ovan men sökning sker bakifrån.

3 substring, index) slice ( start, end) Returnerar en sträng med innehållet från start till end split ( string ) Delar en sträng array av strängar. Delning sker vid mellanslag och/eller komma. substr ( start, length) Returnerar en sträng som börjar vid start och är length lång. tolowercase ( ) Returnerar en sträng där alla tecken är konverterade till kapitäler. touppercase( ) Returnerar en sträng där alla tecken är konverterade till versaler. tostring ( ) Returnerar källsträngen valueof ( ) Returnerar källsträngen anchor ( name ) Bäddar in källsträngen i ett ankar element <a> </a> med name som namn på länken big ( ) Lägger strängen inom <big> element blinc ( ) Lägger strängen inom <blinc> element bold ( ) Lägger strängen inom <b> element fixed ( ) Lägger strängen inom <tt> element link ( url ) Lägger strängen inom <a> element och sätter sökvägen till url sub ( ) Lägger strängen inom <sub> element sup ( ) Lägger strängen inom <sup> element Detta är några av de metoder som finns för objektet Sting. Studera Figur 12.4 charat, charcodeat, fromcharcode, tolowercace ochtouppercace Figur 12.5 indexof, lastindexof Figur 12.6 split Figur 12.7 XHTML metoder Objektet Date Det finns en mängd metoder för att hantera datum och tid. Jag tänker inte ta upp mer än några få exempel. Det är bättre att slå upp rätt metod när man behöver dem. Metoderna kan utgå från lokal ti eller UTC tid (GMT). De flesta metoderna utgår från lokal tid. Några användbara metoder är : GetDate() som returnerar datum mellan 1 31 GetDay() som returnerar dag från 0 6 där 0 är söndag och 6 är påfallande lördag ToLocalString() som ger nuvarande år månad dag och tid i lokalt tidsformat. De flesta av metoderna för objektet Data visas i figur 12.9 Objektet Boolean och Number

4 Det sista objekten vi skall titta på är Boolean och Number. Dessa definierar metoder för att hantera booleska och numeriska objekt. För att explicit skapa ett Boolean objekt skriver vi var b = new Boolean( true false); De metoder som finns för Boolean är: ToString() som returnerar det värde som representeras av variabeln som en sträng. ValueOf() som returnerar true eller false. För att skapa ett Number objekt skriver vi var n = new Number( nummer); De metoder som finns för Number är: ToString( bas) som returnerar värdet på variabeln som en sträng i det talsystem som vi anger med bas ValueOf( ) returnerar värdet på variabeln Number.MAX_VALUE returnerar det största värde som kan lagras Number.MIN_VALUE returnerar det minsta värde som kan lagras Number.NaN Egenskap som representerar NaN Number.NEGATIVE_INFINITY representerar alla värden mindre än Number.MIN_VALUE Number.POSITIVE_INFINITY representerar alla värden större än Number.MAX_VALUE

5 Del 2, Kapitel 13 Inlärningsmål Att kunna använda objektmodellen för dynamisk HTML Att förstå objekthierarkin i dynamisk HTML Att med hjälp av samlingarna all och children kunna nå alla objekt på en webbsida Att kunna förändra styles dynamiskt Att kunna använda frames samlingen för att manipulera objekt i andra ramar Introduktion Vi skall nu se på objektmodellen för DHTML. Det är med hjälp av denna som vi kan ta kontroll över utformning och egenskaper dynamiskt i XHTML. Att referera till ett objekt Det enklaste sättet för att referera till ett objekt är med hjälp av objektets ID (namn). I figur 13.1 i boken visar ett exempel på hur man kan påverka innehållet i ett paragraf element med egenskapen innertext för id t ptext för att ändra den text som presenteras i webbfönstret. På rad 25 kopplar vi paragrafen till ett ID ptext. Detta utnyttjar vi på rad 16 där vi visar en popp upp ruta som använder värdet på innertext för ptext. På rad 17 ändrar vi värdet på egenskapen innertext för ptext vilket medför att texten som visas i webbläsarfönstret ändras. Jag har på webct lagt upp ett eget exempel som visar användningen av egenskapen innerhtml och ytterhtml. Samlingar och children Samlingar är arrayer av relaterade objekt på en webbsida. Detta innebär att metoder för att hantera arrayer även kan användas för att hantera objektsamlingar. I InternetExplorer är samlingen all mycket central då den innehåller referenser till alla objekt i webbdokumentet. I figur 13.2 visar man hur man kan loopa igenom samlingen för att se vilka objekt som skapats för et webbdokument. På rad 18 defenieras en loop som söker igenom samlingen efter referenser till alla objekt. Som ni ser så använder man sig av all.lenght för att veta antalet objekt. Egenskapen innerhtml likar innertext men hanterar även underelement.

6 I figur 13.3 har man raffinerat detta så att man får ett mer lättläst resultat. Detta har man åstadkommit genom att använda samlingen children. På rad 38 gör man ett anrop till funktionen child och som argument skickar man en referens till objektsamlingen all med index satt till post nummer 4 vilket motsvarar html elementet. På rad 16 börjar vår funktion och som ni ser tar den ett objekt som argument. På rad 22 inleder vi en for loop som testar på children.length. På rad 24 finns en if satts som innehåller ett rekursivt anrop till child. Detta fortsätter tills if satsen blir falsk och vi går in i else satsen vilken tar ut själva elementet. Dynamisk förändring av styles Ett elements style kan med hjälp av JavaScript förändras dynamiskt. Detta sker med document.element.style.egenskap = värde i figur 13.4 visar man detta genom att ändra bakgrunds färg utifrån inmatat värde i en prompt. Figur 13.5 är mycket lika men här ändrar man textsorlek genom att binda ett ID till olika klasser. Dynamisk positionering En annan intressant egenskap som kan förändras dynamiskt är position. Detta åstadkommes genom att ändra ett elements top, left, right och bottom egenskaper. I figur 13.6 demonstreras detta samt dynamisk förändring av text färg, font och fontstorlek. På rad 14 till 19 anger man ett antal variabler som används i scriptet. Funktionen start innehåller ett funktions anrop som kan liknas med en timer. Funktionen anropar funktionen run med 100 millisekunders mellanrum. I funktionen run på rad 28 ökar vi count med speed, därefter på rad 30 testar vi om count är jämt delbart med 200. Det är den vid 0 och 200 och vi går in i if satsen om ändrar riktning, färg och font. På rad 42 ändrar vi font storlek, rad 43 ändrar position och på rad ändrar vi utskriften på skärmen. Samlingen frames Farmaes erbjuder ofta en lösning på design problem. Vid en del tillfällen vill vi från en frame komma åt resurser i eller skriva till en annan frame. För att göra detta måste vi gå via parent. I figur 13.7 och 13.8 visar man hur detta går till. Figur 13.7 är en index fil som skapar ett dokument med två ramar. En benämnd upper och en benämnd lower. I upper laddas filen top.html (fig 13.8), lower är från början tom.

7 Figur 13.8 innehåller en funktion som skriver en inmatad text till den undre framen i fig Detta sker med parent.frames( lower ).document.write( text ); Objektet navigator Detta objekt har ni redan stiftat bekantskap med på en labb. Navigator är ett objekt som finns i alla webbläsare. Detta innehåller bl.a. information om webbläsaren och systemet. Detta kan användas tex. För att ladda olika stilmallar beroende på vilken webbläsare som körs. Figur 13.9 visar hur man kan hämta webbläsar typ och version med detta objekt. Summering Objekten i DHTML är organiserade i en hierarkisk struktur som är olika beroende på vilken webbläsare som körs. I följand bild visas objektstrukturen i InternetExplorer 4 -