Sündmusatribuudid

Atribuutide tunnis väitsin, et igale HTML elemendile lubatud atribuudid leiad, kui vajutad W3schools'i HTML siltide tabelis (http://www.w3schools.com/tags/default.asp) sildi nimega linki vasakpoolses (Tag pealkirjaga) veerus.

Näiteks http://www.w3schools.com/tags/tag_td.asp <td elemendi lehekülje lõpust võib leida ka sündmusatribuutide (Event Attributes) tabeli.

- Mis need on?

Üksikasjalikuma sündmuste loendi leiab selliselt lehelt http://www.w3schools.com/tags/ref_eventattributes.asp (HTML / XHTML Standard Event Attributes).

Aga võtame näiteks sellise koodi:

<table width="400px" onmouseover="this.width=parseInt(this.width)/2+'px' ;" onmouseout="this.width=parseInt(this.width)*2+'px' ;">
        <tr>
        	<td style="border-style:solid;border-width:2px;">
KÄI HIIREGA SIIN LAHTRIS JA MINE SEEPEALE TABELI PIIRIDEST JÄLLE VÄLJA!
        	</td>

        	<td>
+
        	</td>

        </tr>

        <tr>
        	<td>
+
        	</td>

        	<td style="border-style:solid;border-width:2px;">
+
        	</td>

        </tr>

      </table>

Väike hoiatus!

Igasugune kood või programm, mille sa oma arvutis käivitad, võib tekitada ennustamatut kurja, kui sa ise täpselt ei tea, mille sa käivitad.

Mina vastutan ainult enda tegude eest.

Kes täpselt sellele Wikiversity lehele midagi kirjutas, seda saad uurida lehe ajaloost, kui vajutad ülaserva [ history ] linki.

Timo

Kahjuks ei luba Wikiversity oma lehti sündmustega saboteerida ja see kood tuleb katsetamiseks mõnda eraldi faili salvestada. Kood peaks looma tabeli, mis muudab oma laiust, kui sellest hiirega üle käia.

Nõnda võime veebilehitsejale öelda, et ta peab lugeja (ehk külastaja) mingi määratud tegevuse korral lehe väljanägemist muutma. Seda uurime täpsemalt Javascripti tundides. Võtsin selle näite lihtsalt lõõgastavaks vahepalaks, et õppuritel liiga igavaks ei läheks.

Mina panin oma saavutuse sellele aadressile: http://www.hot.ee/vikiylikool/Syndmusatribuudid.html

Aga vaatame pisut tabeli atribuute:

<table 
	width="400px" 
	onmouseover="this.width=parseInt(this.width)/2+'px' ;" 
	onmouseout="this.width=parseInt(this.width)*2+'px' ;">
       ...

width="400px" ütleb, et selle tabeli laius olgu 400 pikslit. Arusaadav!
Järgmine on juba keerulisem.

	onmouseover="
		this.width=parseInt(this.width)/2+'px' ;
	"

onmouseover=" ütleb, et juhul, kui arvutihiir (cursor) satub selle tabeli kohale (mouse over), siis peab prauser tegema seda, mis on öeldud võrdusmärgile järgnevate jutumärkide vahel.

Mida seal on öeldud?

this on see sama HTML element, mille sildi (HTML tag) sisse on see atribuut kirjutatud.
this.width on selle elemendi width-atribuudi väärtus ehk selle tabeli laius, mis on algseisus 400 pikslit.
parseInt( ... ) on Javascript'iks nimetatud programmeerimiskeele meetod, mis teeb sulgude vahel olevast asjast täisarvu.
- Praegusel juhul ta teeb täisarvu selle HTML elemendi width-atribuudi väärtusest, mis on algselt 400px. parseInt( "400px" ) on 400.
parseInt(this.width)/2 jagab elemendi laiuse pooleks.
parseInt(this.width)/2+'px' jagab elemendi laiuse pooleks ja täpsustab, et mõõtühikuteks jäävad endiselt pikslid.
Seevastu parseInt(this.width)*2+'px' korrutaks elemendi laiuse kahega täpsustades, et mõõtühikuteks jäävad endiselt pikslid.
; semikoolon lõpetab Javascript'i käsu.
this.width=parseInt(this.width)*2+'px' ; ütleks niisiis, et taolise sündmuse järel on see element kaks korda laiem, kui vahetult enne seda sündmust.

Kui see nõrganärvilisemad õppurid juba kaameks ehmatas, siis võin lohutada, et järgmises tunnis tegeleme taas lihtsama asjaga.

Ülesanne

1. Katseta erinevaid sündmusi ^[1] !
2. Leia veel mõni atribuut peale laiuse (width), mida sündmusatribuudi abil muutes saaksime silmaga kuidagi nähtava tulemuse!

Vihje saad häda korral sellelt samalt lehelt siin, kui vaatad tema "lähtekoodi" ^[2] .

- - Paranda alati vead (, kui neid on), et failid valideeruksid ^[3] ! Kasuta sellist standardit:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
	<html lang="et" xml:lang="et" xmlns="http://www.w3.org/1999/xhtml">
		<head>
			<meta http-equiv="content-type" content="text/html;charset=utf-8" />
			<title> Sündmusatribuudid </title>

		</head>
		<body>
Oma kood kirjuta siia!
		</body>
	</html>

Viited

[1] HTML / XHTML Standard Event Attributes

[2] Source code

[3] Markup Validation Service

[1]

[2]

[3]