webprogramlama-ders10-javascript [uyumluluk...

� WEB PROGRAMLAMA �

YARD. DOÇ. DR. MEHTAP YALÇINKAYA

DERS NOTLARI / JavaScript’e Giriş

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.


� 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;


� 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


� 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


� İ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.



� 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.


� 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.


JavaScript Kodlarının Yazım Kuralları


JavaScript Kodlarını İsimlendirme


JavaScript Kodlarında Özel İşaret Gösterimi


JavaScript Kodlarında Yorum Kodları


Değişkenler


Değişkenler-Türleri


Değişkenlere De ğer Vermek


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 ;


Değişkenlere De ğer Vermek-Tür Dönü şümleri


Değişkenler-Türler Arası İşlemler


Operatörler- İşlem Öncelik SırasıAritmetik Operatörler


Operatörler- İşlem Öncelik SırasıAtama Operatörleri


Operatörler- İşlem Öncelik SırasıKarşılaştırma Operatörleri


Operatörler- İşlem Öncelik SırasıMantıksal Operatörler


Operatörler- İşlem Öncelik Sırasıİşlem Önceli ği


Çalışma


Kodlama Yapısı

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 ("")

document.writeln ("MErhaba Dünya")

document.writeln ("")

sayac++}


Kodlama Yapısı


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.


Kodlama Yapısı ÖDEV

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.


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.

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.


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.


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.


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.


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.


OLAYLAR (EVENTS) ÖDEV


NESNELER


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.


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 ;


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.


NESNELER


NESNELER

Close Metodu

Prompt Metodu


NESNELER

Open Metodu


NESNELER

Nesneler ile ilgili ders notlarının devamı;

JAVASCRIPT-Nesne.pdf

isimli belgededir.


NESNELER ÖDEV

Kaynaklar� Adım Adım HTML ve XHTML- Faithe Wempen � Fatih HAYRİOĞLU-CSS(Stil Şablonları) Başlangıç

için� Seval ÖZBALCI - Internet Programlama Ders Notu� Umut ÖZTÜRK- CSS giriş� http://fatihhayrioglu.com/z-index/� http://www.aycan.net/css-position-nedir-nasil-

kullanilir/

webprogramlama-ders10-javascript [uyumluluk...

Documents