Betik Dili (JavaScript )
� Betik dili web sayfalarında dinamik içerik sağlamak ve kullanıcıylailetişim kurmak için kullanılan istemci tarafında çalışan bir dildir.
� Html etiketleri arasında tanımlanarak kullanılabilir.
� 1995 yılında Brendan Eich tarafından geliştirilmiştir.
� Javascript dilini, C dilinin web sayfalarına uyarlanmış basit sürümüolarak düşünülebilirsiniz. Javascript dili isim benzerliğine rağmen Java ilebirbirinden bağımsız, farklı dillerdir. Java gerçek bir programlama dilidir.Javascript ise bir script dildir.
� Javascript dili C, Java, Perl, Python, Self dillerinden etkilenmiş vegeliştirilmiştir. JScript, JScript.NET, Objective-J, TIScript dillerininoluşturulması için kullanılmış ve gelişmesine yardımcı olmuştur.
� Javascript dili 1.0 versiyonundan başlayarak 1.8.5 versiyonunaulaşmıştır. Script kodlarını web editör uygulamasında ya da notepadkullanarak oluşturup düzenleyebilirsiniz.
Betik Dili (JavaScript )
� Başlangıçta sadece Netscape tarafından desteklenen dil, şimdi tümtarayıcılar tarafından desteklenmekte ve kullanılmaktadır. Temel scriptkomutları her tarayıcıda çalışmasına rağmen ileri düzey komutlar bazıtarayıcılar tarafından tam olarak desteklenmemektedir.
� Script komutlarının browser üzerinde çalışıp çalışmamasını güvenlikaçısından kullanıcının belirlemesi sağlanmıştır. İsteyen browserayarlarından script kullanımını kapatabilir.
HTML’e JavaScript Kodlarını Tanıtma
� Script kodlarını html’e tanıtmak için;
Betik Dili (JavaScript )
� Type parametresi script blokları arasında yazılacak kodların türünübelirtir. Language parametresi ile javascript kodlarının sürümünü belirtir.Tüm tarayıcılarda sorunsuz çalışması için javascript seçmek doğruolacaktır.
HTML’e JavaScript Kodlarını Tanıtma
Betik Dili (JavaScript )
� JavaScript kodları sayfa içerisinde 3 bölümde kullanılabilir;
� Birinci yol script kodlarını head etiketleri arasına yazarakkullanmaktır . Head etikletleri arasında yazılan kodlar sayfa yüklenmedenderlenecektir. Sayfamızda gerçekleşen olaylar karşısında (düğmetıklanması vb.) kodların çalışmasını istiyorsak gerekli fonksiyonları vedeğişkenleri bu bölümde yazmamız gereklidir.
JavaScript Kodlarının HTML’deki Konumu
Betik Dili (JavaScript )
� İkinci yol script kodlarını body etiketleri arasına yazarakkullanmaktır. Body etiketleri arasına yazılan script kodları sayfayüklendiğinde otomatik olarak derlenip çalışacaktır.
JavaScript Kodlarının HTML’deki Konumu
Betik Dili (JavaScript )
� Script çalıştırmanın diğer bir yolu *.js uzantılı olarak kaydettiğimizharici bir js dosyasını sayfaya dahil edip kodları çalıştırmaktır.
� Web sayfasına harici javascript dosyası dahil etmek için;
� Script kodlarını yazarak ilkKod.js şeklinde kaydedelim.
JavaScript Kodlarının HTML’deki Konumu
� Web editör programını çalıştırarak yeni bir html sayfası oluşturun.
� Script komutunun src parametresini kullanarak oluşturduğunuz jsdosyasını aşağıdaki şekilde web sayfasına dahil ediniz.
Oluşturduğumuz js dosyası ve html dosyası farklı klasörlerde ise js dosyasının htmldosyasına göre adresi src parametresi içerisinde belirtilmek gerekir. Html sayfasınıçalıştırdığımızda, ekranda sola dayalı olarak “ilk JavaScript Kodlarım ” ifadesiyazdırılacaktır.
Betik Dili (JavaScript )
Değişkenlere De ğer Vermek
Yeni bir html sayfası açıp, sayı, string ve boolean türünde değişkenler tanımlayıp rastgele değerler aktaralım ;
Betik Dili (JavaScript )
Kodlama Yapısı
"Merhaba Dünya" yazısı 7 defa yazılacak ve her defasında büyüklüğü artacaktır.
var sayac=1
while (sayac <= 7){
document.writeln ("<font size=" + sayac + " >")
document.writeln ("<b><p>MErhaba Dünya</b></p>")
document.writeln ("</font>")
sayac++}
Betik Dili (JavaScript )
Kodlama Yapısı Fonksiyonlar
Girilen sayının karesini hesaplayan ve uygulamaya sayısal değer olarak dahileden bir fonksiyon yazalım.
Script etiketleri arasında karesi isminde bir fonksiyon tanımlayalım. Fonksiyonumuzdışarıdan tek parametre alsın.
Dışarıdan aldığı x değerini fonksiyon, kendi içerisinde kare alma işlemini yapsın.
Hesapladığı kare değerini fonksiyon dışına veri olarak göndermek için returnkomutunu kullanalım.
Betik Dili (JavaScript )
OLAYLAR (EVENTS)
İnternet sayfamızdaki her şey olaylarla gözlenebilir. Farenin herhangi bir yeretıklaması klavyeden bir şeyler yazılması, sayfanın yüklenmesi vb. eylemlerolaylarla kontrol edilebilir. Olayların gerçekleşmesi ile yazılmış fonksiyonlarıntetiklenmesi sağlanır.
Olay yöneticileri, olay gerçekleştiğinde hazırladığımız fonksiyonları tetiklememizisağlar. Kullanımı basittir. Html etiketlerine olay yöneticisi eklerken etiketikapatmadan
komut satırı eklenir.
Html etiketlerinin neredeyse tamamına uygulanabilir. Örneğin <a> etiketine olay yöneticisi eklersek yazım şu şekilde olacaktır.
Betik Dili (JavaScript )
OLAYLAR (EVENTS)
onClick Olayı html etiketlerinin üstüne tek tıklandığında gerçekleşen olay
Sahneye eklediğimiz düğmeye tıklama sonucu uyarı veren script kodu
// Fonksiyonumuz ekrana düğme tıklandı// uyarısını versin.
Fonksiyonumuz hazır. Artık body etiketleri arasına düğme oluşturmak için gereklihtml komutlarını yazıp olayımızı düğme etiketinin içerisinde tanımlayabiliriz.
Betik Dili (JavaScript )
OLAYLAR (EVENTS)
onDblClick Olayı html etiketlerinin üstüne çift tıklandığında gerçekleşen olay
<a href="http://nucleus.istanbul.edu.tr/~bilg3" ondblclick="alert ('Ders Notları açılıyor..')"> Ders Notları</a>
onLoad Olayı Sayfamızdaki herhangi bir nesnenin tamamen yüklenme olayını temsil eder. Body,img,frame ve frameset etiketlerinde kullanılabilir.
Resim yüklenmesine göre kontrol ettirseydik <img> etiketi içerisine yazmamız gerekirdi.
Betik Dili (JavaScript )
OLAYLAR (EVENTS)
onUnLoad Olayı Nesnenin kaldırılması olayını gözler. Body etiketi içerisine parametre olarak yazılırsa sayfanın kapatılma olayını gözlemiş oluruz.
onFocus Olayı Sayfa üzerinde html elemanı işlem yapılmak üzere seçildiğinde yani o nesneye odaklanıldığında çalışan olay tipidir.
Metin kutusunun içine yazı yazmaya çalıştığımızda artık uyarı verecektir.
Betik Dili (JavaScript )
OLAYLAR (EVENTS)
onBlur OlayıSeçilen html nesnesinin seçilme özelliğini kaybettiğinde çalışan olaydır. Seçilmiş eleman seçimden çıkartılmışsa tetiklenir.
onMouseOver Olayı Html nesnesinin üstüne gelme olayını gözleyen olaydır.
onMouseOut Olayı Farenin nesne üzerinden ayrılması olayıdır.
onMouseMove Olayı Fare nesne üzerinde gezdirildiğinde meydana gelen olaydır.
onMouseDown Olayı Fare nesne üzerinde basıldığı anda gerçekleşen olaydır. Click ile farkı click olayının bırakılma eylemidir.
onMouseUp Olayı Farenin basılı olan tuşu bırakma olayıdır.
Betik Dili (JavaScript )
OLAYLAR (EVENTS) ÖDEV
onKeyDown Olayı Klavyeden tuşa basma olayıdır. Metin kutusu nesnesinde klavyeden tuşa basıldığında olay dinleyicisi çalışır.
Klavyeden basılan tuşu ekranda göstermek için;
Klavyeden basılan tuşu tespit etmek için olayın event özelliğini ve keyCodekomutunu kullanacağız.
Event.keyCode basılan tuşun ascii kodunu okuyacaktır.
String.fromCharCode ile okunan ascii değeri tuşun ismine çevirecektir.
Betik Dili (JavaScript )
OLAYLAR (EVENTS)
onSelect OlayıMetin kutuları içerisindeki yazı seçildiğinde meydana gelen olaydır.
onResize Olayı Tarayıcı penceresinin boyutunu değiştirdiğinde gerçekleşen olaydır. Body etiketine yazılır.
Betik Dili (JavaScript )
NESNELER
Tarayıcının alt kısmındaki, durum çubuğunda gösterilen mesajdır. Script komutları arasında herhangi bir yere yazılabilir. Tarayıcıların bir kısmı bu özelliği desteklememektedir.
Betik Dili (JavaScript )
NESNELER
Alert Metodu
Daha önceki örneklerde defalarca kullandığımız alert kullanıcıyı bilgilendirmek için uyarı pencereleri oluşturur. Gereksiz yere kullanmaktan kaçınmak gerekir.
Ekranda 10 defa uyarı kutusu oluşturacak script kodları için ;
Betik Dili (JavaScript )
NESNELER
Confirm Metodu
Yapılan işlem sonucu onay kutusu oluşturur. Onay kutusunun sonucu bir booleanolarak geri döner. True ya da false şeklinde alınan cevap ile programın akışı belirlenir.
Sayfaya eklediğimiz kapat düğmesine basıldığında sayfayı kapatmak için onay isteyen script kodları için;
Head etiketleri arasında, düğmeye basıldığında çalışmak üzere bir fonksiyonoluşturalım.
Fonksiyonumuz düğmeye bastığında bir onaylama penceresi oluştursun. Kullanıcının vereceği cevaba göre sayfayı kapatıp kapatmamaya karar versin.
Onaylama kutusu için karar isminde bir boolean değişken oluşturalım. Confirmkutusundan gelecek true yada false bilgisi bu değişkene atanacak.
Betik Dili (JavaScript )
NESNELER
Nesneler ile ilgili ders notlarının devamı;
JAVASCRIPT-Nesne.pdf
isimli belgededir.