Javascript
- Javascript i dag -inledning
- Dom - Document object model
- Dom - Hemliga länkar
- Formulärkomponenter
- Morphning av bilder
- HTML 5
Animeringar
Javascript och stilar
Kalender
Allt du behöver göra för att få igång den här kalendern är följande:
<link href="kalenderstil.css" rel="stylesheet" type="text/css">
Sedan kan länka in javscriptskoden.
<script src="kalender.js"></script>
När man klickar på kalendern, så anropas en callback, som heter catchDate(Date), där datum är av typen MyDatum (obs! inte standardklassen Date). Det är därför lämpligt att man skapar callbacken.
<div id="kalender"></div>
Siste men inte minst, så anropar man funktionen createCalendar. Det kan man t.ex. göra från bodyinstruktionens händelsehanterare onLoad.
<body onLoad="createCalendar();">
Den här gången valde jag att skapa nytt. Verktygen har varit javascript, block och stilmallar.
För att kunna återanvända kod, så bör man skriva den så generell som möjligt. Den bör vidare helst ligga i filer, som är avskilda från användningssidan, d.v.s. den bör helst kunna länkas in och implementeras med så få åtgärder som möjligt.
Det finns inget hokus pokus i exemplet ovan, utan du har full insyn i hur lösningen ser ut. Studera källkoden i kalender.js och i någon utsträckning även i kalender.css.
- Ladda ner en zipfil
- Packa upp zipfilen i samma map, som din sida
- Lägga till lite kod enligt nedan
<link href="kalenderstil.css" rel="stylesheet" type="text/css">
Sedan kan länka in javscriptskoden.
<script src="kalender.js"></script>
När man klickar på kalendern, så anropas en callback, som heter catchDate(Date), där datum är av typen MyDatum (obs! inte standardklassen Date). Det är därför lämpligt att man skapar callbacken.
<script>
function catchDate(datum)
{
alert(datum);
alert("År: " + datum.getYear());
alert("Månad: " + datum.getMonth());
alert("Månad (heltal): " + datum.getMyIntMonth());
alert("datum: " + datum.getDate());
}
</script>
Sedan så placerar man kalendern på sin sida, genom att lägga dit en div, med id "kalender".
<div id="kalender"></div>
Siste men inte minst, så anropar man funktionen createCalendar. Det kan man t.ex. göra från bodyinstruktionens händelsehanterare onLoad.
<body onLoad="createCalendar();">
Eftersom den här kalendern har totats ihop av Morgan Augustsson, så har han naturligtvis upphovsrätt till denna, men du får lov att använda den utan ersättning, om du inte har tänkt använda den för något kommersiellt ändamål.
Om kalendern
Det finns väl hos de flesta programmerare en önskan om att kunna återanvända kod. Kalendern ovan är en konkretiserad sådan önskan. Jag har ofta suttit i diverse projekt, där det har funnits behov av en kalender. Då kan man välja mellan att hämta hem något från nätet, använda en active-x kontroll, skapa en java-applet eller hitta på någonting nytt.Den här gången valde jag att skapa nytt. Verktygen har varit javascript, block och stilmallar.
För att kunna återanvända kod, så bör man skriva den så generell som möjligt. Den bör vidare helst ligga i filer, som är avskilda från användningssidan, d.v.s. den bör helst kunna länkas in och implementeras med så få åtgärder som möjligt.
Det finns inget hokus pokus i exemplet ovan, utan du har full insyn i hur lösningen ser ut. Studera källkoden i kalender.js och i någon utsträckning även i kalender.css.