Elementtien tapahtumia

Sisältää
tehtäviä!

Sivun erilaisille toiminnoille ja elementeille voidaan määritellä erilaisia tapahtumia, esimerkiksi kun osoitin tulee elementin päälle, kun osoitin liikkuu elementin päällä, kun käyttäjä painaa näppäimistön näppäintä jne.

Hiireen liittyviä tapahtumia

Esimerkkejä hiireen liittyvistä tapahtumista:

mouseenter Kun osoitin tulee elementtiin
mouseleave Kun osoitin lähtee elementistä
mousemove Kun osoitin liikkuu elementin sisällä
mousedown Kun hiiren nappi painetaan alas
mouseup Kun hiiren nappi päästetään ylös
click Kun hiiren nappi on painettu
dblclick Kun hiiren nappia "tuplaklikataan" 

<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://www.matikki.fi/guidebook-python/brython/brython380/brython.js"></script>

<title>Brython</title>

<style>

#taulu {
	width:300px;
	height:40px;
	font-size:20px;
	font-weight:bold;
	border:solid 2px #ff0000;
	text-align:center;
	color:#0000ff;
}

</style>

<script type="text/python">
from browser import document

def muutaTyyli(event):
	haku = document["taulu"]
	haku.style.borderColor = "#00ff00"
	haku.text = "tapahtuma tuli"
	
document['taulu'].bind("mouseenter", muutaTyyli)

</script>

</head>

<body onload="brython({debug:1,indexedDB: false})">

<div id="taulu">Jotain tekstiä </div> 

</body>
</html>

Kokeile! Tee edelliseen esimerkkiin funktio, mikä muuttaa tyylin takaisin, kun hiiri lähtee tekstikentästä.

Näppäimistöön liittyviä tapahtumia

keydown Kun näppäin painetaan alas
keyup Kun näppäin päästetään ylös
keypress Kun näppäin tuottaa merkin näyttöön.
Jos esim. Ctrl + h, niin kun h on painettu.		 

<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://www.matikki.fi/guidebook-python/brython/brython380/brython.js"></script>

<title>Brython</title>

<style>

#taulu {
	width:350px;
	height:40px;
	font-size:20px;
	font-weight:bold;
	border:solid 2px #ff0000;
	text-align:center;
	color:#0000ff;
}

</style>

<script type="text/python">
from browser import document

def kirjoita(event):
	haku = document["taulu"]
	koodi = str(event.charCode)		#event.charCode hakee tapahtumasta merkin Unicode-arvon
	merkki = chr(event.charCode)	#muutetaan charCode merkiksi
	haku.text = "Merkin koodinumero: " + koodi + " eli merkki " + merkki
	
document.bind("keypress", kirjoita)

</script>

</head>

<body onload="brython({debug:1,indexedDB: false})">

<div id="taulu">Kirjoita näppäimistöllä </div> 

</body>
</html>

Etsi! Hae hakukoneella hakusanoilla unicode refrence.

Tehtävä 1:

Muuta funktiota siten, että se huomauttaa aina, jos käyttäjä painaa nappia y. Vihje: käytä if-lausetta.

Tehtävä 2:

Kirjoita palindromiohjelma, missä luetaan tekstikentästä teksti ja ohjelma muuttaa merkit päinvastaiseen järjestykseen.

Tehtävä 3:

Kirjoita värivalinta-ohjelma tekstikentälle. Sivulle tulee siis tekstikenttä ja sen alle ainakin viisi pientä ruutua, mitkä ovat eri värisiä. Kun käyttäjä painaa värillistä ruutua, niin tekstikentän teksti muuttuu ruudun mukaiseksi väriksi.