Javascript
- Javascript i dag -inledning
- Dom - Document object model
- Dom - Hemliga länkar
- Formulärkomponenter
- Morphning av bilder
- HTML 5
Animeringar
Javascript och stilar
Dom - Document object model
Med det så avses att dokument innehåller objekt, eller komponenter, om man så vill. En browser har också objekt, men de går under en annan kategori, browserobjekt.Det enklaste sättet att komma åt komponenter av olika slag är att använda de mängdarrayer, som dokumentet har tillgång till.
T.ex. document.images[0] är lika med webbsidans översta bild, document.forms[0].elements[0] är lika med dokumenters översta formulärkomponent i översta formuläret.
Att loopa igenom ett formulär
Som du kan se ovan, så finns där ett formulär. Det skulle kunna vara ett formulär för registrering i någon webbklubb.
Förmodligen är det viktigt för administratören av klubbregistret att ha uppgifter om förnamn, efternamn och telefon. Så innan uppgifterna
hamnar i databasen skulle man behöva kontrollera att alla uppgifter är med och att uppgifterna är formellt riktiga. Att upgifterna är
riktiga i övrigt är lite svårare att kontrollera. Jag vet inte hur kod, som avslöjar ifyllaren av ett formulär som lögnare skulle se ut.
Det finns två ställen att kontrollera uppgiftern på, klientsidan och serversidan. För att vara riktigt säker, så kanske man skulle behöva göra
kontrollen på båda sidorna. Men det finns ett bra skäl till att göra kontrollen på klientsidan, om man kan, man avlastar servern.
Datan i formuläret ovan skickas helt enkelt inte iväg till servern, om någonting väsentligt saknas. Pröva gärna själ!
Formuläret ovan har en händelsehanterare benämnd onSubmit, vilken inträffar om någon trycker på knappen submit, eller om användare trycker
på returtangenten. Om man skriver "return false" i den händelsen, så kommer inte formulärdatan att skickas. Där kan man då passa på att returnera
värdet från en javascriptsfunktion, som löper igenom formulärfälten och kontrollerar dessa.
Först visas koden till formuläret.
<table width="60%" border="0"> <form method="post" onsubmit="return check();" action=""> <tr> <td width="20%">Förnamn </td> <td width="40%"><input type="text" class="textfield" name="namn"></td> <td><div id="namn"style="font-weight:bold"></div></td> </tr> <tr> <td width="20%">Efternamn </td> <td width="40%"><nput type="text" class="textfield" name="efternamn"></td> <td><div id="efternamn"style="font-weight:bold"></div></td> </tr> <tr> <td width="20%">Telefon</td> <td width="40%"><input type="text" class="textfield" name="numr"></td> <td><div id="numr"style="font-weight:bold"></div></td> </tr> <tr> <td colspan="3"><input type="submit" value="skicka"></td> </tr> </table> </form>
Formulärets händelsehanterare är fetmarkerad och returnerar en javascriptfunktion, som heter check. Koden till den kommer några rader längre ner.
I övrigt så är formuläret placerat i en tabell och de flesta rader har tre kolumner. I den tredje kolumnen har jag lagt in ett block, som har samma id som
textfältets namn i kolumnen bredvid. Tanken är att javafunktionen check ska skriva ut diverse meddelanden i blocket.
Som alternativ, så hade det gått att ge kolumnen ett id istället, men
jag valde den här metoden.
Man kan väl också konstatera att namnen på formulärekomponenterna känns lite krystade, men det beror på att jag vill kunna
referera till dessa via namn pluss en bestämd ändelse, numr blir då numret.
/*
* Funktionen check går igenom formulärelementen
* för att undersöka att dessa är ifyllda. Det görs ingen
* formatkontroll av telefonnumret, vilket kanske borde ha
* skett. Om någonting saknas, skrivs ett meddelande ut i
* avsett block -sak samma förresten om det finns något, bara
* att då är meddelandet ett annat- , formulärkomponenten får
* fokus, vilket innebär att markören hamnar där, sist returneras
* falskt.
* Efterson ett returnuttryck avbryter exekveringen av funktionen, så
* avstannar verksamheten vid felupptäcken. Bollen är åter hos
* användaren.
* Skulle exekveringen gå igenom hela funktionen, vilket naturligtvis
* beror på att användaren varit duktig, så returneras sant.
*/
function check()
{
/*
* Jag börjar med att lagra formuläret i en
* variabel, som jag har kallar form. Det sparar
* en massa skrivande. form är kortare än
* document.forms[i];
*/
form = document.forms[0];
/*
* Formuläret har ett antal formulärkomponenter. För
* att få reda på hur många, kan man använda attributet
* length, eftersom elementen ligger i en array.
* Man kan på så sätt använda en forloop för att löpa
* igenom ett formulär. I nedanstående forloop har jag skrivit
* form.length-1, eftersom sista elementet
* är knappen.
*/
for(i=0;i<form.length-1;i++)
{
/*
* Hämtar hem elementens namn
* och lagrar dessa i en variabel av bekvämlighetsskäl.
*/
namnet=form.elements[i].name;
/*
* Sedan kollas om det står någonting
* i elementen. Man kan komma åt objekt på en
* sida med hjälp av document.getElementById(id)
* På så sätt kan man ställa attributens värde i
* en stilmall eller skriva någonting i objektet med
* innerHTML.
* Funktionen focus() innebär att markören hamnar i eller
* på objektet (Gäller inte alla typer av element)
*/
if(form.elements[i].value=="")
{
document.getElementById(namnet).style["color"]="#FF0000";
document.getElementById(namnet).innerHTML="Du glömde "+namn+"et!";
form.elements[i].focus();
return false;
}
else
{
document.getElementById(namnet).style["color"]="#00FF00";
document.getElementById(namnet).innerHTML="Bra!";
}
}
return true;
}
Jag ska följa upp med ytterligare ett exempel, nämligen hur man kan loopa igenom ett dokuments
samtliga länkar. Tänk dig att du klickar på en länk och kommer till ett ställe som du hade förväntat dig, men
om du samtidigt håller nere tangent "d", så kommer du till ett annat ställe - en hemlig länk. Det är uppgiften
för nästa javascript
Dom - Hemliga länkar