Javascript – Örnek Event Uygulaması
Ağustos 29, 2022Javascript – Matematiksel İşlem Sınıfları
Ağustos 29, 2022Javascript - Event Handlers (Olay Yöneticileri)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Ömer Turak - Javascript - Code 26</title>
<link rel="stylesheet" href="../css/bootstrap.css">
<link rel="stylesheet" href="../css/bootstrap-theme.css">
</head>
<body>
<div class="container">
<div class="alert alert-success" role="alert">
<h4 class="alert-heading">Javascript Code 26 </h4> Javascript Event Handlers <a href="../index.html">Back Home</a>
</div>
<h2>JavaScript OLAY(EVENT) KAVRAMI</h2>
<a href="" onClick="alert('onClick \nOlayi \n uygulamasi'); return false;">BURAYI TIKLAYINIZ</a>
<hr>
<H3>CİNSİYETİ SEÇİNİZ...</H3>
<FORM name = "ReaderInfo">
<INPUT TYPE="RADIO" NAME="cins" VALUE="KADIN">KADIN<BR>
<INPUT TYPE="RADIO" NAME="cins" VALUE="ERKEK">ERKEK<BR><P>
<INPUT type="button" value="TIKLA" onClick="goster()">
</FORM>
<hr>
<P><B>ONAY(confirm) DİYALOG KUTUSU ÖRNEĞİ</B>
<P>
<FORM>
<INPUT TYPE="button" VALUE=" GELECEĞİ YAZANLAR ANA SAYFASI" onClick="kontrol()">
</FORM>
<hr>
<h2>JavaScript OLAYLARI(EVENTS)</h2>
<a href="" onMouseOver="alert('BU ORNEK \n onMouseOver\n OLAYINI GOSTERIYOR'); return false;">MOUSE GOSTERGESINI BURAYA KONUMLANDIRINIZ</a>
<hr>
<FORM>
<INPUT TYPE=TEXT SIZE=20 onFocus="document.write('FOCUS BURADA');return true">
</FORM>
<hr>
<FORM>
<SELECT NAME="list" SIZE=1 OnChange="location=sec(this)">
<OPTION value="#"> BİR ARAMA MOTORU SEÇİNİZ
<OPTION value="http://www.google.com"> Google
<OPTION value="http://www.yahoo.com"> Yahoo
<OPTION value="http://www.yandex.com"> Yandex
</SELECT>
</FORM>
<hr>
<H2>OnSUBMIT UYGULAMASI</H4>
</FONT>
<FORM NAME="form1" onSubmit="return verikont()">
<B>5 KARAKTER GİRİNİZ:</B>
<INPUT TYPE="text" NAME="kar" SIZE=5>
<P><INPUT TYPE="submit" VALUE="KARAKTERLER GİRİLDİ" NAME="submit1" onClick="document.form1.kar.value=document.form1.kar.value.toUpperCase()">
</FORM>
<script type="text/javascript">
// Olay Yöneticileri (Event Handlers)
/*
* JavaScript event-driven (olay tarafından yönlendirilen) türde programlamaya olanak sağlayan bir dildir.
* Olay yöneticisi bir olay meydana geldiği zaman bir işlemler grubunu harekete geçirebilen bir nesnedir.
* Aşağıdaki tabloda JavaScript olayları ve işlevleri verilmektedir:
*
* Olay Yöneticisi Gerçekleştirdiği İş
* onBlur Bir parola kutusu, metin alanı ya da metin kutusu ilgi odağı olmaktan çıkınca bir eylem grubunu harekete geçirir.
* onChange Bir metin kutusu metin alanı ya da seçim listesindeki bir metin değiştiği zaman ya da kontrol nesnesi odaktan
çıkınca bir eylem grubunu harekete geçirir.
* onClick Bir form düğmesi ya da hipermetin linki tıklanınca bir eylem grubunu harekete geçirir.
* onFocus Bir metin kutusu metin bölgesi ya da seçme listesi ilgi odağı olunca bir eylem grubunu harekete geçirir.
* onLoad Bir document nesnesi tam olarak yüklenince bir eylem grubunu harekete geçirir.
* onMouseMove Fare hareket edince bir eylem grubunu harekete geçirir.
* onMouseOver Fare bir hipermetin linkinin üzerinden geçince bir eylem grubunu harekete geçirir.
* onSelect Bir metin kutusu (text box) ya da metin bölgesi (text area) içindeki metin seçilince bir eylem grubunu harekete geçirir.
* onSubmit Bir form bir sunucuya sunulunca bir eylem grubunu harekete geçirir.
* onUnload Bir document nesnesi yüklenmemişse bir eylem grubunu harekete geçirir.
*
* */
//--------------------------------------------------------------------------------------------------------------
// Olayların Kullanımı
/* Olay tarafından yönlendirilen (event driven) türde programlamaya olanak sağlayan JavaScript dilinde bir olayın program içinde nasıl
* kullanılacağı ile ilişkili basit bir örnek vermek istiyoruz.
*/
// onClick olayı -->> kod yukarıda 17 ve 18. satırda
// oneClick örneği -->> 21. satırda
function goster() {
var m = ""
if (document.ReaderInfo.cins[0].checked) {
m = 'KADIN'
}
if (document.ReaderInfo.cins[1].checked) {
m = 'ERKEK'
}
alert ("SEÇİLEN CİNSİYET: "+m)
}
//--------------------------------------------------------------------------------------------------------------
// OnClick Olayı ve Confirm Diyalog Kutusu
// Confirm (onay) diyalog kutusu ile onclick olayı birlikte kullanılabilir.
function kontrol(){
// Onay kutusundaki stringe ilk değer ataması
str="Geleceği Yazanlar Web sayfasına erişmek istiyor musunuz ?";
/* Kullanıcı OK düğmesini tıklarsa if deyimi koşulu true olacaktır
ve belirlenen hedefe gidilecektir.
Aşağıdaki ifade yerine,
if (confirm(str)==true) ifadesi ya da
if (confirm(str)==1) ifadesi de kullanılabilirdi.
*/
if (confirm(str)){
// Aktif sayfanın URL'ini değiştirir.
location.href="http://www.gelecegiyazanlar.org";
} // end if
} // end function
// kod 29. satırda
//--------------------------------------------------------------------------------------------------------------
// onMouseOver Olayı örneği 36. satır
//--------------------------------------------------------------------------------------------------------------
// onFocus Olayı
/*
* Focus, imlecin o esnada bulunduğu yerdeki nesne anlamındadır. Fare göstergesi bir metin kutusu ya da metin alanı üzerine getirilip tıklanırsa
* onFocus olayı meydana gelir. Örnek bir OnFocus olayını birlikte inceleyelim:
* kod 47. satırda
* Yukarıdaki kod çalıştırılınca gelen sayfada fareyi metin kutusu içine götürüp tıklayınca
* onFocus olayı meydana gelecek ve ekranda "FOCUS BURADA" ifadesi görünecektir.
* */
//--------------------------------------------------------------------------------------------------------------
// OnBlur olayı OnFocus olayının tersidir. Bir başka deyişle, odak kaybedilince meydana gelir.
//--------------------------------------------------------------------------------------------------------------
// OnChange Olayı
/*
* Bir metin kutusu, metin alanı ya da seçim listesindeki bir metin değiştiği zaman ya da kontrol nesnesi odaktan çıkınca bir eylem grubunu harekete geçirir.
* Aşağıdaki örnekte bir seçim listesinde bir seçenek seçilince onChange olayı meydana gelmekte ve kullanıcının seçtiği arama motoru sayfaya gelmektedir:
* kod 53. satırda
*
* */
function sec(s) {
return s.options[s.selectedIndex].value
}
//--------------------------------------------------------------------------------------------------------------
// OnSubmit Olay Yöneticisi
/*
* Submit olayı Submit düğmesiyle form üzerindeki bilgiler sunulduğu zaman meydana gelir. OnSubmit olay yöneticisi
* bu olay meydana gelince bir fonksiyonu tetikleyecektir.
* kod
* */
var veri=false;
function verikont (){
if (document.form1.kar.value.length == 5) {
return true}
else {
alert("TAM OLARAK 5 KARAKTER GİRİNİZ " + document.form1.kar.value +
" KARAKTER GEÇERLİ DEĞİL")
return false}
}
</script>
</div>
</body>
</html>