 |
JavaScript-skolan
Math, Date och String |
 |
2. Math
3. Date
4. String
5. Övningar
Obs!
Alla exempel och facituppgifter öppnas i ett nytt fönster!
1. Inledning
På den här sidan skall jag ge en introduktion till JavaScript-objekten Math, Date och String. Dessa har jag redan nämnt då jag pratade om objekt på de två första sidorna.
Här skall vi titta närmare på hur man kan använda dessa tre objekt för att göra beräkningar, använda datum och tid, samt omvandla text.
2. Math
Objektet Math innehåller såväl egenskaper som metoder, vilka motsvarar ett stort antal matematiska funktioner och konstanter. Här är några enkla exempel:
| JavaScript-kod | Förklaring | Kategori |
| Math.PI | konstanten pi | Egenskap |
| Math.SQRT2 | Roten ur 2 | Egenskap |
| Math.max | Största talet i en serie | Metod |
| Math.min | Minsta talet i en serie | Metod |
| Math.pow | Upphöjt till 10 | Metod |
| Math.round | Avrundat till närmaste heltal | Metod |
| Math.random | Genererar ett slumptal | Metod |
Egenskaperna skrivs alltså med stora bokstäver och metoderna med små.
Exempel 1
En cirkels omkrets beräknas genom formeln "2 gånger pi gånger radien". För att räkna ut omkretsen med hjälp av ett script skriver jag:
<script language="JavaScript">
<!--
function omkrets() {
radie = prompt("Ange radien för
cirkeln i centimeter");
alert("Omkretsen är "
+ 2 * Math.PI * radie + " cm");
}
-->
</script>
+
<form name="form1">
<input type="button"
name="Submit" value="Beräkna
omkretsen!" onClick="omkrets()">
</form>
Titta på exemplet i praktiken >
Här använder vi alltså egenskapen Math.PI för att generera konstanten pi, som sedan införlivas i beräkningen.
Bilden
visar gången i hur det hela
fungerar. Föst klickar besökaren
på knappen för att starta
scriptet. Knappen aktiverar funktionen
via onClick-kommandot.
Besökaren
skriver in omkretsen i centimeter
och...
...klickar
på Ok-knappen...
...och
scriptet med alert-rutan körs
och visar resultatet. Observera att
JavaScript inte använder kommatecken
utan en punkt. Detta tittade vi på
sidan om satser, datatyper och värden.
Läs
mer >
Som du ser är resultatet ganska svårtytt. För att avrunda svaret till närmaste heltal måste vi lägga till ytterligare kod:
Exempel 2
<script language="JavaScript">
<!--
function omkrets() {
radie = prompt("Ange radien för
cirkeln i centimeter");
alert("Omkretsen är "
+ Math.round(2 * Math.PI * radie)
+ " cm");
}
-->
</script>
Titta på exemplet i praktiken >
Som du ser använder jag mig här av metoden Math.round och sätter det som skall avrundas inom parentes.
I många fall har egenskaperna också metoder. Math.SQRT2 har en metod som skrivs Math.sqrt(värde), där värdet är det som metoden beräknas på:
Exempel 3
<script language="JavaScript">
<!--
function SummanBlir() {
var Talet = prompt("Ange ett
tal");
alert("Roten ur talet blir "
+ Math.sqrt(Talet));
}
-->
</script>
+
<body onLoad="SummanBlir()">
Titta på exemplet i praktiken >
Som du ser använder j
3. Date
Objektet Date är betydligt svårare att använda och det av olika anledningar. Först och främst utgår man ifrån datorns tid, snarare än någon enhetlig eller allmän tid. Det betyder att man ibland måste ta hänsyn till vilken tidszon besökaren har.
En annan svårighet är att tid i datorn inte räknas på samma sätt som med "vanliga" tal. Det går 60 sekunder på en minut, 60 minuter på en timma, 24 timmar på ett dygn, 7 dagar på en vecka och ungefär 52 veckor på ett år.
Inte nog med detta, för datorn räknar dessutom tid i millisekunder (tusendelar av sekunder, förkortas "ms"), med start från den 1 januari 1970 GMT (Greenwich Mean Time).
För att ta reda på vilken tid jg har i datorn skriver jag som följer:
Exempel 4
<script language="JavaScript">
<!--
var AngeTiden = new Date();
alert("Klockan i datorn visar
" +
AngeTiden.getHours() + ":"
+
AngeTiden.getMinutes() + ":"
+
AngeTiden.getSeconds() + ":"
+
AngeTiden.getMilliseconds()
);
-->
</script>
Titta på exemplet i praktiken >
Som du ser påminner detta om hur man använde sig av arrayer. Vi har en variabel som skall ha värdet "newDate()", alltså ett nytt objekt. Detta skapas sedan i alert-kommandot och raderna där variabeln får värden genom metoderna som börjar med "get".
Med
+ läggs de olika delarna samman.
För att få en formatering av tiderna har jag lagt in ett kolontecken mellan varje del.
Alert-boxen skall visas automatiskt när sidan laddas. Något onLoad skall alltså inte behövas.
Här visar jag hur det ser ut i en version av Internet Explorer (version 5.2 för Mac OS X). Som du ser måste också parenteserna avslutas korrekt för att scriptet skall fungera.
En svårighet är i exemplet att objektet Date måste tilldelas en variabel för att kunna användas:
Exempel 5
<script language="JavaScript">
<!--
var WhichYear = new Date();
alert(WhichYear.getFullYear());
-->
</script>
Titta på exemplet i praktiken >
Här har jag använt metoden "getFullYear", som visar årtalet med fyra siffror. Metoden "getYear" är mer osäker och räknar oftast från år 1900 och framåt. I min webbläsare visades därför att året var 104, när jag skrev detta 2004.
Det sätt man anger ett nytt datum kan se ut på många olika sätt:
var NyttDatum
= new Date(yy, mm, dd) // År,
månad, dag
var NyttDatum = new Date(yy, mm, dd,
mm, ss) // År, månad,
dag, minut, sekund
var NyttDatum = new Date("Month
dd, yyyy") // Månad, dag,
år
var NyttDatum = new Date("Month
dd, yyyy, hh:mm:ss") // Månad,
dag, år, timma, minut, sekund
Dessa olika sätt att formatera representerar också två olika sätt att presentera tiden. Första två exemplen ger en kommaseparerad lista med data, medan de två senare ger en enda lång sträng.
Vi skall senare se på olika sätt att använda tid. Här vill jag bara visa några fler exempel:
Exempel 6
<script language="JavaScript">
<!--
var AngeTiden = new Date();
alert(AngeTiden.getTime());
-->
</script>
Titta på exemplet i praktiken >
Ger tiden i millisekunder, beräknat från 1/1 1970.
Exempel 7
<script language="JavaScript">
<!--
var HittaDag = new Date();
alert(HittaDag.getDay());
-->
</script>
Titta på exemplet i praktiken >
Datorn räknar dagarna med start från söndag, som får värdet "0". Får du upp siffran 4 är det alltså detsamma som torsdag.
4. String
Objektet "String" är det jag tidigare kallat "sträng" och är alltså en text som står innanför citationstecken. Vi har redan sett många exempel på sådana, t.ex:
var Text = "Hej!";
Den mer formellt korrekta syntaxen ser emellertid ut så här:
var Text = new String("Hej!");
Det finns en lång rad metoder för att läsa in, manipulera och formatera textsträngar. Här skall vi titta på några enkla exempel, som använder metoderna "toUpperCase" och "toLowerCase".
Exempel 8
<script language="JavaScript">
<!--
var TillVersaler = prompt("Skriv
in text med små bokstäver!");
alert(TillVersaler.toUpperCase());
-->
</script>
Titta på exemplet i praktiken >
Scriptet formaterar om text till versaler (uppercase), enligt följande schema:
Besökaren
skriver in en text med små bokstäver
och...
...klickar
på Ok. Webbläsaren kör
resten av scriptet, där texten
som skrivits in formateras om.
Alert-rutan
visar resultatet: texten har omformats
till versaler.
Ok-rutan
gör bara att man kommer vidare.
Men man kan ju också tänka
sig att hela processen sker dolt,
så att det besökaren skriver
in formateras om så som man
själv vill ha det.
På motsvarande sätt kan man formatera om versaler till gemener (lowercase):
Exempel 9
<script language="JavaScript">
<!--
var TillGemener = prompt("Skriv
in text med stora bokstäver!");
alert(TillGemener.toLowerCase());
-->
</script>
Titta på exemplet i praktiken >
Man kan också göra ett script som formaterar om texten i ett formulär till gemener. Här är ett förslag:
Exempel 10
<script language="JavaScript">
<!--
function TillGemener() {
var field = document.forms[0].omvandlare;
field.value = field.value.toLowerCase();
}
-->
</script>
+
<form onSubmit="return
false">
<input name="omvandlare"
type="text" onChange="TillGemener()"
value="SKRIV TEXT MED VERSALER!">
<input type="button"
name="Submit" value="Omvandla
här!">
</form>
Titta på exemplet i praktiken >
Scriptet inleds med att en funktion skapas. På första raden i funktionen omformas det längre uttrycket "document.forms[0].omvandlare" till det enklare "field", ett trick som ofta används av programmerare.
På nästa rad letar funktionen upp den del av formuläret som heter "omvandlare", i det här fallet input-elementet. Dess värde omformas till gemener med metoden toLowerCase.
Scriptet körs inte via något vanligt kommando. onSubmit="return false" används för att motverka att man kör scriptet om och om igen. Det är först med onChange="TillGemener()" som funktionen letas upp. Förklaringen till att man gör så här är att det fungerar bättre än att köra scriptet via skicka-knappen.
5. Övningar
Övning
1
Skapa ett script som räknar ut
arean för en cirkel. Formeln
är radien gånger radien
gånger pi. Avrunda svaret till
närmaste heltal.
Övning
2
Använd exempel 2 ovan och försök
klura ut hur man skulle kunna avrunda
summan!
Övning
3
Skapa ett script som visar månaden
och året i din dator. Använd
metoderna getMonth och getFullYear.
Försök komma runt problemet
med att månadens namn inte visas!
Övning
4
Skapa ett formulär som omvandlar
versaler till gemener när det
skickas.
Övning
5
Metoderna Math.max och Math.min används
om en lista av värden och skrivs
Math.max(1, 2, 3, 4), där värdet
4 returneras. Försök göra
ett script där besökaren
matar in fem värden via prompt-rutor
och där en alert-ruta sedan meddelar
vilket värde som var det högsta
och det lägsta!