Javascript Nedir



JAVASCRİPT’DE NESNE KULLANIMI

Bir web sayfası yaratılırken, tarayıcı tarafından sağlanan nesneleri, betik dili tarafından sağlanan(javascript gibi) nesneleri ve HTML öğelerini kullanabilirsiniz

Nesne

Nesne bir paket gibi düşünülebilir. Nesneyi tanımlayan özellikler(değişkenler) ve bu veriler üzerinde çalışan yöntemler(fonksiyonlar) bu paket ya da nesne içinde yer alırlar. Örneğin araba bir nesnedir. Arabanın özellikleri markası, modeli ve rengidir. Arabaların çoğu hareketet(), frenYap(), geriGit() gibi yöntemlere sahiptir

arabaNsne.yapan=”Opel”

arabaNsne.model=”Astra”

…..

**** Nesnelerin özelliklerine erişmek için, nesne adını ve özelliğini belirtmelisiniz

nesneAdı.özellikAdı

Örn:

document.bgColor //bgColor(arka plan rengi) document nesnesinin özelliğidir.

**** Nesnenin yöntemlerine erişmek için nesnenin adını ve istenen yöntemi belirtmelisiniz

nesneAdı.yöntem()

Örn:

Window.close() //bu kodun yazıldığı pencereyi kapatır.

HTML belgesi tarayıcıda görüntülendiğinde sayfadaki öğelere bağlı olarak bir nesne hiyerarşisi yaratır.

Tarayıcı nesneleri- document, window, frame, location vb- nesne hiyerarşisinin en üstündedir. Onların ardından yerleşik Javascript nesneleri (Date,Array,Math vb) gelir. HTML nesneleri ve geçerli belgeyi oluşturan HTML etiketleri en sonda yer alır.

Tarayıcı Nesneleri

Tarayıcı, HTML belgesinin içeriğini görüntülemek için kullanılan bir uygulamadır. Tarayıcı betik içinde erişilebilen ve kullanılabilen bazı nesneleri sunar.

[pic]

[pic] [pic]

window nesnesi: tarayıcı penceresini temsil eder ve pencerenin durumu hakkında bilgileri almak için kullanılabilir. Document nesnesini görüntülemek ve pencerede oluşan olaylara erişim kazanmak için kullanılır.

Tarayıcı bir HTML belgesi açtığında, genel olarak tek bir window nesnesi yaratır. Bununla birlikte bir belge bir ya da daha çok çerçeve tanımlıyorsa tarayıcı asıl belge için bir window nesnesi ve her çerçeve için birer ek window nesnesi yaratır.Ek nesneler, asıl pencerenin alt penceresidir ve asıl pencereden oluşan hareketlerden etkilenebilir. Örneğin asıl pencereyi kapattığında tüm alt pencereler kapanacaktır.

Bazı özellikler

|closed |Pencerenin kapalı olup olmadığını tanımlar |

|defaultStatus |Tarayıcının durum çubuğunda görünen varsayılan mesaj |

|location |Penceredeki belgenin kaynak yolu (URLsi) |

|top |En üsteki ana pencereye başvurur |

|frames |Pencerede bulunan tüm “frame” nesnelerini içeren bir dizi |

|status |Tarayıcının durum çubuğunda görünen geçici mesaj |

Bazı yöntemler

|alert |Uygulama tarafından tanımlanan bir mesajı içeren bir iletişim kutusu görüntüler |

|close |Geçerli tarayıcı penceresini yada Html uygulamasını kapatır |

|open |Yeni bir pencere açar ve belirli bir URL tarafından belirtilen belgeyi yükler |

Örn1:

Ekran Bilgileri

document.write("Ekran Genişliği:"+""+window.screen.width+"");

document.write("Ekran Yüksekliği:"+""+window.screen.height+"");

document.write("Renk Derinliği:"+window.screen.colorDepth);

Örn2: Pencere açma ve kapatma uygulaması

Window nesnesi

var pencere;

function pencereAc()

{

/* window.open([URL][,name][,ozellikler]) */

pencere=window.open("s3.htm","pencere","width=400,height=200,status='PENCERE AÇILDI',menubar=false,titlebar=false,toolbar=false,top=0,left=0,scrollbars=yes");

}

function pencereKapat()

{

if(pencere)

{

if((!pencere.closed))

pencere.close();

}

}

document nesnesi: Belirli bir tarayıcı penceresi içinde HTML belgesini temsil eder ve belge hakkında bilgilere erişmek belge içindeki HTML öğelerini ve metni incelemek, değiştirmek ve olayları işlemek için kullanılır

Bazı özellikler

|alinkColor |Belgedeki tüm etkin köprülerin rengini ayarlar |

|bgColor |Belgenin arka plan rengini ayarlar ya da çıkarır |

|fgColor |Belgenin metin rengini ayarlar ya da çıkarır |

|location |Geçerli URL hakkında bilgileri içerir |

|title |Belgenin başlığını içerir |

|URL |Geçerli belgenin URL’ini ayarlar ya da çıkarı |

Bazı yöntemler

|write |Belirtilen pencere içinde bir belgeye bir yada daha çok html belgesini yazar |

|writeln |Belirtilen pencere içinde bir belgeye bir yada daha çok html belgesini yazar ve satır başı |

| |yapar. |

Örnek:

document

event nesnesi

Tarayıcıda oluşan olayların durumunu tutar. O anda işlenmekte olan olayla(bir fare tıklaması yada tuşa basılması ) ilişkili özellikleri açığa çıkarır.

frame öğesi / Nesne

Çerçeveler bir web tarayıcısının penceresini her biri ayrı ,içeriğe kaydırılabilen bir sayfa görüntüleyen ayrı bölümlere ayırır. Her çerçeve ana pencere içinde ayrı bir penceredir. Windows nesnesi çerçevenin içeriğine erişmek için kullanır

history nesnesi

O andaki tarayıcı oturumu sırasında istemci tarafından ziyaret edilen en son URL’lerin bir listesini sağlar. History nesnesi görüntülenen URL’leri gerçekte görmenize izin vermez . Bununla birlikte , history nesnesi önceki sayfaların listesinde geri gitmenize olanak tanıyan yöntemler sağlar.

history.back(); // bir önceki belgeyi görüntüler

history.go(sayi); //yöntemi tarayıcıdan tarihçe listesindeki belirli bir girişe gitmesini sağlar.

history.go(-2); //iki kere back düğmesine basmışsın gibi olur

history.forward() //bir sonraki belgeyi görüntüler

location nesnesi

Geçerli URL hakkındaki bilgileri tutar.

Bazı özellikler

|href |URL’i ayarlar yada çıkarır |

|url |Belgenin tam adresini verir |

|protocol |Belgenin hangi protokolü kullandığını verir |

|pathname |Belgenin serverdan sonraki göreceli yolunu verir |

Bazı yöntemler

|reload |Geçerli sayfayı yeniden yükler |

navigator nesnesi

Tarayıcı hakkında bilgi sağlar.

Javascript Nesneleri

Javascript doküman içerisinde kullanabileceğimiz hazır nesnelere sahiptir. Tabii ki kendi nesnelerimizi de yaratabiliriz. Sık kullanılan nesnelerden bir kaçı String,Date,Math

String nesnesi

String nesnesi, metin dizgilerini yönetmek ve onlarla çalışmak için kullanır. Değişkenlerde metin dizgisi kullandığımızda bunlar otomotik olarak String nesnesine dönüştürülürler.

var yazi=”merhaba” ;

var yazi=new String(“merhaba”);

Kullanımı

dizgiAdı.özellikAdı

ya da

dizgiAdı.yöntemAdı

Bazı özellikler

|length |Dizginin uzunluğunu verir |

| | |

Bazı yöntemler

|bold |Dizgi metnini koyu yapar |

|charAt |Tek bir karakter döndürür. Bir String nesnesinde belirli bir indexdeki karakteri döndürür. |

|indexOf |Bir String nesnesinde ,bir alt metin dizgisinin göründüğü ilk yerin karakter konumunu |

| |döndürür. |

|lastIndexOf |Bir String nesnesinde ,bir alt metin dizgisinin göründüğü en son yerin karakter konumunu |

| |döndürür. |

|toLowerCase |Metin dizgisini küçük harf kipine dönüştürür |

|toUpperCase |Metin dizgisini büyük harf kipine dönüştürür |

|toString |Metin dizgisinin kendisini döndürür |

|split |Bir metin dizgisini , alt metin dizgilerine ayırır. Bunun sonucunda bir metin dizgi dizisi |

| |oluşur |

| |string.split(separotor) |

|substring |Bir String nesnesi içinde belirli bir konumdaki alt metin dizgisini döndürür. |

| |string.substring(start [,end]) |

HTML nesneleri

Form öğesi | Nesnesi denetimler için bir kap olarak hizmet verir. Belgede ki her form ona karşılık gelen bir form nesnesi yaratır. Belgede birden fazla form olabilir. Formlar “forms” dizisinin öğeleri olarak saklanır. Forms dizisi, sıfır tabanlıdır. Bu nedenle belgedeki ilk form, forms[0] dizin değerine sahiptir, sonraki form forms[1] ocaktır.

Bir formun öğeleri, elements dizisinde saklanır. Bir öğeye erişmek için dizin değerini belirtebilirsiniz

Örneğin document.forms[0].elements[0].value gibi

JAVASCRIPT OLAYLARI

Çoğu nesne tarafından desteklenen sık kullanılan olaylar.

onClick

onClick olayı, kullanıcı fare düğmesini belirli form öğelerinde (düğmeler, onay kutuları, radyo düğmeleri vb) ya da bir bağlantı metni köprü üstünde tıkladığı zaman üretilir.

Örn: Bir butona tıklanmasıyla form kontrol ediliyor, bilgiler eksiksiz girilmişse gönderiliyor

onClick olayı

Ad

Şehir

seçiniz

ankara

istanbul

onChange

onChange olayı , bir form öğesi değiştiğinde oluşur. Bu bir metin denetimin içeriği değiştiğinde ya da bir seçenek listesindeki şık değiştiğinde olabilir. Ancak onChange olayı bir radyo düğmesi ya da onay kutusu tıklandığında üretilmez. Bunun yerine onClick olayı üretilir.

onChange olayı, öğenin değişmesi sonlandığında gönderilir. Bu nedenle bir metin kutusu düzenlenirken bir “change” olayı, sadece düzenleme bittikten sonra kullanıcı metin kutusundan ayrıldığında gerçekleşir

Ornek: Listeden seçtiği elemana göre yeni bir sayfa açan uygulama

seçiniz

gazi

fenerbahce

onFocus

onFocus olayı, bir form öğesi, şimdiki form öğesi haline geldiğinde gönderilir. Bir öğe sadece odak noktası olduğunda kullanıcıdan girdiler alınabilir. Bu kullanıcı fareyi öğenin üzerinde tıkladığında ya da kullanıcı form öğeleri arasında tab tuşu ile gezindiği zaman gerçekleşir.

onBlur

onFocus olayının tersidir. Kullanıcı bir form öğesinden ayrıldığında “onBlur” olayı gerçekleşir.

Ornek: Metin kutusuna odaklandığında kutu arka plan rengi ve yazı rengi değiştiriliyor. Ayrıldığında ise başka renkler atayan bir uygulama

OnBlur onFocus

Adınız

onMouseOver

“onMouseOver” olayı, fare imleci bir öğenin üzerine getirildiğinde üretilir.

onMouseOut

“onMouseOut” olayı, fare imleci bir öğenin üzerinden ayrıldığında üretilir

Örnek: Linklerin üzerinde geldiğinde durum çubuğunda linkle ilgili bilgi çıkartan , ayrıldığında ise durum çubuğundaki yazıyı silen bir uygulama

Linklerim

onLoad

“onLoad” olayı, belgenin yüklenmesi bittiğinde document body nesnesine gönderilir. Ayrıca bir görüntünün yüklenmesi bittiğinde, o görüntüye gönderilir.

Ornk: Resmin yüklendiğini haber veren mesajı ekrana getiren uygulama

Yükleme

onSubmit

“onSubmit” olayı, kullanıcı ( genelde submit düğmesini kullanarak) bir formu gönderdiğinde üretilir. Olay gerçekten formun gönderilme işlemi olmadan önce gerçekleşir.Bu olay için olay işleyicisi false döndürerek gönderilmesini engelleyebilir.

Örnek: Bu uygulamada formu kullanıcının submit düğmesine basmasına rağmen göndermiyoruz.

onSubmit olayı

Ad

Soyad

-----------------------

TARAYICI NESNELERİ

BETİK NESNELERİ

HTML ÖĞELERİ

Şekil:Nesne Hiyerarşisi

Netscape ve Microsoft kendi nesne modellerini geliştirmişlerdir. Bu iki model birbirleriyle uyumlu olmayabilir

Location

Navigator

History

Frames

Event

Document

Window Object

Screen

Şekil: IE Tarayıcı Nesneleri

Şekil: NETSCAPE Tarayıcı Nesneleri

Frame

Location

Mime type

History

Plugin

Navigator

Document

Window

................
................

In order to avoid copyright disputes, this page is only a partial summary.

Google Online Preview   Download