HTML Olay Kullanma

HTML Etiketine Olay Ekleme

HTML etiketine olay eklemek için iki yöntem mevcut.

1.Yöntem: HTML etiketlerine addEventListener metotu ile olay eklemesi yapılabilir.

2.Yöntem: HTML etiketine olay özelliği ile olay eklemesi yapılabilir.

Örnek: Aşağıdaki örnekte id’si birinci olan etikete tıkladığında(onclick) belirtilen anonim fonksiyon çalışacak ve ekrana uyarı verecektir.


<p id="birinci"> ilk paragraf</p>
<p class="kutu">ikinci pragraf</p>
<p class="kutu">üçüncü paragraf</p>
<p>dördüncü paragraf</p>

<script>

var etiket=document.getElementById("birinci");

etiket.onclick=function(){
alert("birinci paragrafa tıkladı");
}
</script>

<p id="birinci"> ilk paragraf</p>

<p class="kutu">ikinci pragraf</p>

<p class="kutu">üçüncü paragraf</p>

<p>dördüncü paragraf</p>

var etiket=document.getElementById("birinci");

etiket.onclick=function(){

alert("birinci paragrafa tıkladı");

}

</script>

JavaScript Sayı Tek Mi Çift Mi?


<input type="text" onchange="kontrol(this)" value="">
<script>

function kontrol(nesne){

if(nesne.value%2==0)
{
alert(nesne.value+" sayısı çifttir");
}
else if(nesne.value%2==1)
{
alert(nesne.value+" sayısı tektir");
}
else
{
alert(nesne.value+" sayısı değildir");
}


}
</script>

function kontrol(nesne){

if(nesne.value%2==0)

{

alert(nesne.value+" sayısı çifttir");

}

else if(nesne.value%2==1)

{

alert(nesne.value+" sayısı tektir");

}

else

{

alert(nesne.value+" sayısı değildir");

}

</script>

JavaScript Çemberin Çevresi


<input type="text" id="yaricap" placeholder="Yarı çap uzunluğunu girin">
<input type="button" value="Hesapla" id="hesapla">
<script>
//fonksiyonu tanımladık.
function hesapla(){
//text kutusu içindeki değeri okuyup sayi değişkenine aktarıyoruz.
var sayi=document.getElementById("yaricap").value;

//text kutusuna girilen değerler metinsel türdedir. Hesaplama yapabilmek için sayıya çeviriyoruz.
sayi=Number(sayi);
var cevre=Math.PI*sayi*2;
alert("Çemberin:"+cevre.toFixed(2));

}


//hesaplama yapması için hesap butonunu seçiyoruz.
var hesapBtn=document.getElementById("hesapla");

//fonksiyonu olaya bağlıyoruz.
hesapBtn.onclick=hesapla;


</script>

//fonksiyonu tanımladık.

function hesapla(){

//text kutusu içindeki değeri okuyup sayi değişkenine aktarıyoruz.

var sayi=document.getElementById("yaricap").value;

//text kutusuna girilen değerler metinsel türdedir. Hesaplama yapabilmek için sayıya çeviriyoruz.

sayi=Number(sayi);

var cevre=Math.PI*sayi*2;

alert("Çemberin:"+cevre.toFixed(2));

}

//hesaplama yapması için hesap butonunu seçiyoruz.

var hesapBtn=document.getElementById("hesapla");

//fonksiyonu olaya bağlıyoruz.

hesapBtn.onclick=hesapla;

</script>

JavaScript Text Kutusundaki Yazıyı Div İçine Aktarma


<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>TEXT KUTUSUNA GİRİLEN YAZIYI DİV İÇİNE YAZDIRMA</title>
</head>
<style>

</style>

<body>

<input type="text" id="yazi" value="">
<div id="goster"></div>

<script>
var yazi=document.getElementById("yazi");
var goster=document.getElementById("goster");

yazi.onkeyup=function(){

goster.innerHTML=yazi.value;
}
</script>
</body>
</html>

<!doctype html>

<html>

<head>

<title>TEXT KUTUSUNA GİRİLEN YAZIYI DİV İÇİNE YAZDIRMA</title>

</head>

<style>

</style>

<body>

var yazi=document.getElementById("yazi");

var goster=document.getElementById("goster");

yazi.onkeyup=function(){

goster.innerHTML=yazi.value;

}

</script>

</body>

</html>

Tüm JavaScript DOM Olayları

Window Olay Niteliği

onafterprint	onload	onpageshow
onbeforeprint	onmessage	onpopstate
onbeforeunload	onoffline	onresize
onerror	ononline	onstorage
onhashchange	onpagehide

Form Olayları

onblur	oninvalid
onchange	onreset
oncontextmenu	onsearch
onfocus	onselect
oninput	onsubmit

Klavye Olayları

onkeydown

onkeypress

onkeyup

Fare Olayları

onclick	onmouseover
ondblclick	onmouseup
onmousedown	onmousewheel
onmousemove	onwheel
onmouseout

Sürükleme(Drag) Olayları

ondrag	ondragover
ondragend	ondragstart
ondragenter	ondrop
ondragleave	onscroll

Pano Olayları

oncopy

oncut

onpaste

Media Olayları

onabort	onloadeddata	onseeked
oncanplay	onloadedmetadata	onseeking
oncanplaythrough	onloadstart	onstalled
oncuechange	onpause	onsuspend
ondurationchange	onplay	ontimeupdate
onemptied	onplaying	onvolumechange
onended	onprogress	onwaiting
onerror	onratechange

Misc

onshow

ontoggle

HTML Etiketine Olay Ekleme

JavaScript Sayı Tek Mi Çift Mi?

JavaScript Çemberin Çevresi

JavaScript Text Kutusundaki Yazıyı Div İçine Aktarma

Tüm JavaScript DOM Olayları

Window Olay Niteliği

Form Olayları

Klavye Olayları

Fare Olayları

Sürükleme(Drag) Olayları

Pano Olayları

Media Olayları

Misc

Bunu paylaş:

Şunlar da Hoşunuza Gidebilir

Yorum yap X