Javascriptte Olay Fonksiyonları (Events)

Slides:



Advertisements
Benzer bir sunumlar
Javascript Oğuz İNAL.
Advertisements

Javascriptte Olay Fonksiyonları (Events)
Doç. Dr. Cemil Öz SAÜ Bilgisayar Mühendisliği Dr. Cemil Öz.
DYNAMİC HTML EVENT MODELS SİNEM YARDIMCI ÇAKIL SU KIRLI.
İnternet Programlama - 2
PROGRAMLAMA DİLLERİNE GİRİŞ Ders 11: Birden Çok Form ile Çalışma ve Menü Oluşturma Yrd. Doç. Dr. Altan MESUT Trakya Üniversitesi Bilgisayar Mühendisliği.
SUNU HAZIRLAMA PROGRAMI: powerpoint
PROGRAMLAMA DİLLERİNE GİRİŞ Ders 9: Genel Kontroller (1) Yrd. Doç. Dr. Altan MESUT Trakya Üniversitesi Bilgisayar Mühendisliği.
Dünyanın bilgisine açılan pencere... Ya da sadece yeni çağın eğlencesi...
İÇERİK YÖNETİM SİSTEMİ Öğr. Gör. Emine TUNÇEL Kırklareli Üniversitesi Pınarhisar Meslek Yüksekokulu.
Microsoft Office Word 2007 Ders Notları
ROBOTS.TXT NEDIR? PAGERANK NEDIR, NASıL ÇALıŞıR PR değerinin sitelere etkisi 4. hafta.
9. HAFTA 25 Nisan2016. Fonksiyon M-Dosyaları Fonksiyon dosyaları ilk satırda “function” kelimesi bulunan “.m” uzantısı bulunan dosyalardır. MATLAB içinde.
Grafik ve Animasyon-II FLASH CS5 Öğr.Gör. Onur BULUT.
Grafik ve Animasyon-II FLASH CS5 Öğr.Gör. Onur BULUT.
Sevgili 8.sınıf öğrencisi; Kendi yeteneklerin, ilgilerin, değerlerin hakkında bilgi sahibi olmak ve daha doğru lise tercihi yapabilmek için lütfen öncesinde.
Sayfalar için ENTER tuşuna basın veya tıklayın MUTLULUK ELİNDEKİ SAHİP OLDUĞUN DEĞERLERLE HAYALLERİNİN ÇAKIŞMASIDIR. EĞER MUTSUZSAN, EMİN OL Kİ; ELİNDEKİ.
APP INVENTOR Emre ANLAR.
Yrd. Doç. Dr. Altan MESUT Trakya Üniversitesi Bilgisayar Mühendisliği
Dünyanın bilgisine açılan pencere...
İnternet Programlama-I
İnternet Programlama-I
ITEC115 - BİLGİSAYARA GİRİŞ ITEC190 - HUKUK İÇİN BİLGİSAYAR
OLAYLAR (EVENT).
İNTERNET TEKNOLOJİLERİ
EBSCOhost iPhone Uygulaması
FONKSİYONLAR.
Murat Değirmenci MaxiASP.com
DOSYA YÖNETİMİ MUSTAFA TEZCAN MART, 2017.
Kullanıcı Kılavuzu Temel Arama help.ebsco.com.
LOGGER PRO ile GRAFİK ÇİZMEK
PHP İş Başında (Formlarla PHP)
KDV BEYANNAMESİ / MUHTASAR BEYANNAME / KURUMLAR VERGİSİ BEYANNAMESİ / GEÇİCİ VERGİ BEYANNAMESİ’NDE ORTAK ÖZELLİKLER F5 PENCERESİ Beyannamelerde yer alacak.
BM-103 Programlamaya Giriş Güz 2016 (3. Sunu)
TAM SAYILAR.
SKILLFUL SKILLS BOOK DIJITAL KAYNAK.
ULUSAL MESLEKİ BİLGİ SİSTEMİ
Problem Çözme ve Algoritmalar
APARTMANLAR OYUNU NEDİR?
XPEECH S Serisi CDR Kayıtları
Javascript Kullanım Şekilleri.
Portal.itkib.org.tr sayfasına daha önce kayıt olmadıysanız ‘Üye Ol’ linkine tıklayarak lütfen kayıt olunuz.
YARARLANICILAR İÇİN GÖRSEL KULLANIM KILAVUZU
İnternet ve WEB Tanımları Html Temel Etiketleri
VELİLER İÇİN ANKET GİRİŞİ
DENETİM MASASI-2 Aygıtlar ve Yazıcılar
RESİM VE RESİM DÜZENLEME İŞLEMLERİ
Klavye Kullanımı.
Öğretim Görevlisi Emel ALTINTAŞ
KÜMELER HAZIRLAYAN : SELİM ACAR
Kullanıcı Kılavuzu DynaMed Plus support.ebsco.com.
İNTERNETTE ARAMAYI ÖĞRENİYORUM
WEB TASARIMI-HTML FORMLAR SAVAŞ TUNÇER
Bilgisayarlara komut verme Remzi ÖZ
İNTERNET ADRESLERİ VE YAPISI
PROBLEM ÇÖZME VE ALGORİTMALAR
EBSCO Discovery Service (EDS) Akademik Arama Motoru/Keşif Aracı
Bu konudaki her şeyi okuyun Microsoft SharePoint Haberler
Bilgisayar II 26 Nisan-7Mayıs Öğr. Gör. Feyza Tekinbaş.
NİŞANTAŞI ÜNİVERSİTESİ
Bilgisayarım Simgesinin Kullanımı Dosyaların Yönetimi
Bilgisayar Bilimi Koşullu Durumlar.
Sunucu Bilgisayara Eğitim Yazılımı Yüklemek İçin;
Bilgisayar Bilimi Fonksiyon Yazma.
Oturma Düzeni Grafiği Oluşturma
sağlamanın 5 yolu Outlook'un sizin için çalışmasını
JavaScript Javascript , Netscape firması tarafından C dilinden esinlenilerek yazılmıştır Yazılma amacı Html'in sahip olmadığı bazı özelliklerin web sayfalarında.
İST1111 BİLGİSAYAR UYGULAMALARI HTML-3 Form Oluşturma
NİŞANTAŞI ÜNİVERSİTESİ
BİLGİSAYAR MÜHENDİSLİĞİNE GİRİŞ Sayı ve Kodlama Sistemleri
Sunum transkripti:

Javascriptte Olay Fonksiyonları (Events)

onMouseOver, onMouseOut Javascript dünyasında en çok kullanılan iki “event” varsa, birincisi Mouse işaretçisinin bir nesnenin üzerine gelmesi (“MouseOver” olayı), ikincisi ise Mouse isaretçisinin bir nesnenin üzerinden çekilmesi (“MouseOut” olayı) sayılabilir. Bu iki olayı onMouseOver ve onMouseOut yönlendiricileri ile karşılayabiliriz. Gerçekte bu iki olayla, Mouse isaretçisi bir bağlantı satırı veya grafiğinin ve bir grafik haritasının (Map, Area) üzerine geldiği veya üzerinden çekildiği zaman ilgilenebiliriz; çünkü diğer HTML unsurları ve Javascript nesneleri ile Mouse isaretçisinin işaretleme ilişkisi yoktur. Bu olayı ve yönlendirilmesini, şu küçük programda görebiliriz:

onMouseOver, onMouseOut Örneği <HTML> <SCRIPT LANGUAGE="JavaScript"> function faregelince() { window.status = "En guzel site icin burayi tiklayin!"; return true } function faregidince() { window.status = "En guzel siteye gitme firsatini kacirdiniz!" </SCRIPT> </HEAD> <BODY> <A HREF="http://pcworld.com.tr" NAME="bag" onMouseOver="return faregelince()" onMouseOut="return faregidince()">PC World-Türkiye</A> </BODY> </HTML>

onFocus, onBlur Bilgisayarda bir program açıkken, Mouse ile programın başlık çubuğunu tıklayın; çubuğun renginden işletim sisteminin dikkatinin bu programın penceresinde yoğunlaştığını göreceksiniz. Bir de masaüstünde boş bir yeri tıklayın; bu pencere sistemin odak noktası olmaktan çıkacaktır. HTML sayfasında da Browser’in Focus’unu (dikkat odağını) üzerinde topladığı veya odağın çekildiği üç nesne olabilir: Text (Metin) , Textarea( Metinalanı) ve Select(Seç) etiketleri. Çünkü ziyaretçinin sadece bu etiketlerin oluşturduğu nesnelere klavyenin dikkatini çekme hakkı vardır. Bu nesnelerden biri tıklanınca Browser’in focus’u bu nesneye dönmüş, yani “focus” olayı olmuş demektir; bu durumda, biz de bu olayı yönlendiren onFocus’u kullanabiliriz . Aynı mantıkla, ziyaretçi Browser’in focus’unu bu nesneden baska bir yere çektiği zaman bu nesne focus’u kaybeder, “blur” (netlikten çıkma, flulaşma) olayı olur. Bunu da onBlur ile yönlendiririz.

<html> <head>  <title>onFocus,onBlur</title <script language="JavaScript"> function dogru() { document.form1.mesaj.value="Lütfen hata yapmayın!" } function sor() { document.form1.mesaj.value="isminiz alındı" } </script> </head> <body> <form name="form1"  method="post"> <p><h3>Lütfen isminizi yazınız!</h3></p> <input type="text" size="20" name="isim" onfocus="dogru()" onblur="sor()"> <p><input type="text" name="mesaj"></p> </form> </body> </html>

<HTML> <HEAD> <SCRIPT LANGUAGE="JavaScript"> function goster() { document.isimForm.ad.value="Adiniz kayda gecmistir." } function uyar() { document.isimForm.ad.value="Lutfen yanlislik yapmayiniz!" } </SCRIPT> </HEAD> <BODY> <BR> <FORM NAME="isimForm"> <P>Lütfen adinizi yazin ve sayfa üzerinde baska bir yeri tiklayin: <BR><INPUT TYPE="text" NAME="ad" VALUE="Adinizi buraya yaziniz" SIZE=25 onBlur="goster()"> <P>Simdi de asagidaki kutuya mesleginizi yazin: <BR><INPUT TYPE="text" NAME="meslek" VALUE="Mesleginizi buraya yaziniz" SIZE=25 onFocus="uyar()"> </FORM> </BODY> </HTML>

onFocus, onBlur Javascript, üstteki kutuya adınızı yazdıktan sonra başka bir yeri tıkladığınızda olan iş, “ad” isimli metin kutusunun “blur” olayına onBlur’un çağırdığı goster() fonksiyonu ile; alttaki kutuyu mesleğinizi yazmak üzere tıkladığınız anda “meslek” kutusunda olan “focus” olayına da uyar() fonksiyonu ile karşılık veriyor .

Formun unsurları Şimdi bir form içeren sayfa örneği yapalım; Javascript ile formun tamamen doldurulmuş olup olmadığını sınayalım. Böylece ziyaretçinin göndereceği formun eksik olduğunu anlamakta geç kalmamış oluruz . Aşağıdaki kodu kaydedip, Browser’da bir yerini eksik olarak doldurup formu göndermeyi deneyin.

<html> <head> <script type="text/javascript"> function btnCheckForm_onclick() { var myForm = document.form1; if (myForm.txtAge.value == "" || myForm.txtName.value == "") alert("Please complete all the form"); if (myForm.txtName.value == "") myForm.txtName.focus(); } else myForm.txtAge.focus(); alert("Thanks for completing the form " + myForm.txtName.value);

function txtAge_onblur() { var txtAge = document. form1 function txtAge_onblur() { var txtAge = document.form1.txtAge; if (isNaN(txtAge.value) == true) alert("Please enter a valid age"); txtAge.focus(); txtAge.select(); } function txtName_onchange() window.status = "Hi " + document.form1.txtName.value; </script> </head> <body> <form action="" name="form1"> Please enter the following details: <p> Name: <br /> <input type="text" name="txtName" onchange="txtName_onchange()" /> </p> <p> Age: <br /> <input type="text" name="txtAge" onblur="txtAge_onblur()" size="3" maxlength="3" /> </p> <p> <input type="button" value="Check Details" name="btnCheckForm" onclick="btnCheckForm_onclick()"> </form> </body> </html>