Arşiv
Date SetTimeOut ve String Nesnesi
Date() Nesnesi:
Date() nesnesi adından da anlaşılacağı gibi tarih ve saat ile ilgili işlemlerde kullanılan bir nesnedir. Date nesnesi kullanıcının bilgisayarında ki tarih ve saat ayarlarından faydalanarak çalışır.
Date() nesnesi tek başına kullanıldığında o an ki tarih ve saati; haftanın günü, ay, gün, saat , yerel saatin UCTden farkı, yıl şeklinde; “Tue Apr 9 02:07:56 UTC+0300 2002” formatında verir.
| Metot | Değer | Açıklama |
| getTime() | 0 – …… | O an ki tarihin 1 Ocak 1970 ‘den milisaniye olarak farkını verir. |
| getYear() | 1970 – …… | O an ki tarihin yıl değerini verir. |
| getMonth() | 0 – 11 | O an ki tarihin ay değerini verir. |
| getDate() | 1 – 31 | O an ki tarihin gün değerini verir. |
| getDay() | 0 – 6 | O an ki haftanın gün değerini verir. |
| getHours() | 0 – 23 | O an ki saatin saat değerini verir. |
| getMinutes() | 0 – 59 | O an ki saatin dakika değerini verir. |
| getSeconds | 0 – 59 | O an ki saatin saniye değerini verir. |
| getTimezoneOffset | 0 – …. | Yerel saatin Greenwich saatinden fakını dakika cinsinden verir. |
Örnek: O an ki zamanı “saat:dakika:saniye” cinsinden veren bir JavaScript yazalım.
<html>
<script>
function saat()
{
var zaman,saat,dakika,saniye
zaman = new Date()
saat = zaman.getHours()
dakika = zaman.getMinutes()
saniye = zaman.getSeconds()
document.form1.T1.value = saat+”:”+dakika+”:”+saniye
setTimeout(‘saat()’,100)
}
</script>
<body onload=saat()>
<center>
<p><b>Date() Nesnesi Örneği</b></p>
<form name=”form1″>
<input name=”T1″>
</form>
</body>
</html>
Not: Yukarıda da belirttiğimiz gibi Date() nesnesi, kullanıcının zaman ve tarih ayarlarına göre çalışır. Yani kullanıcının bilgisayarında saat ve tarih ne ise, sayfada o değerleri görür. Okunan değerin server saati ile alakası yoktur. Bu durum bir iyi bir de kötü sonuç doğurur.
– Kullanıcının gördüğü değerler kendi ayarları olduğu için, kullanıcı hangi ülkede olursa olsun kendi saat ve tarih ayarlarını görecektir.
– Kullanıcının bilgisayarındaki tarih ve saat değerleri yanlışsa, sayfada da yanlış değerler görülür.
SetTimeout() Komutu :
SetTimeout() komutu JavaScripte zamanlama işlemleri için kullanılır. Örneğin belli zaman periyotlarında belli komut kümelerini çalıştırmak yada işlem akışında zamansal gecikme sağlamak için kullanılır.
Komut belirilen komutların, milisaniye cinsinden verilenen zaman sonunda çalıştırılması mantığı ile çalışır. Genllikle kullanılacak komutlar bir function içine yerleştirilir ve setTimeout() komutu ile bu function çağrılır. Kullanım formatı aşağıdaki gibidir.
setTimeout(‘komutlar’,zaman)
Örnek: 0,5 saniyelik peryotlarla sonsuza doğru 1’er 1’er sayan scripti yazalım.
<html>
<script>
var x = 0
function say()
{
document.form1.T1.value=x
x=x+1
setTimeout(‘say()’,500)
}
</script>
<body onload=say()>
<center>
<p><b>setTimeout() Komutu Örneği</b></p>
<form name=”form1″>
<input name=”T1″>
</form>
</body>
</html>
clearTimeout() Komutu : clearTimeout() komutu, setTimeout() komutu ile başlatılan zamanlamayı sıfırlamak ve zaman periyodu ile çalışan komutları iptal etmek için kullanılır.
Bu komutlar bir arada kullanılırken genellikle setTimeout() komutu bir değişkene atanır ve clearTimeout() komutu ile bu değişken ile birlikte kullanılır. setTimeout() komutunun atandığı değişken var komutu ile tanımlanmadan da çalışır.
Örnek: Yukarıdaki örnekte yaptığımız scripte buton kontrolü ile çalıştırılıp, durdurulabilme özelliği ekleyelim.
<html>
<script>
var x = 0
function say()
{
document.form1.T1.value=x
x=x+1
sayac=setTimeout(‘say()’,500)
}
function dur()
{
clearTimeout(sayac)
}
</script>
<body>
<center>
<p><b>clearTimeout() Komutu Örneği</b></p>
<input type=”button” value=”Başlat” onclick=say()>
<input type=”button” value=”Durudur” onclick=dur()><br>
<form name=”form1″>
<input name=”T1″>
</form>
</body>
</html>
String Nesnesi:
String nesnesi, JavaScripte metinler üzerinde işlem yapmak için kullanılır. Yazı formatındaki yada değişkene atanmış bir metinin font, punto ve link gibi bir çok özelliği string nesnesinden faydalanılarak değiştirilebilinir.
Aşağıdaki tabloda String nesnesinin bazı özellikleri verilmiştir.
| Metot | Açıklama |
| fontsize(x) | String nesnesinin font büyüklüğünü ayarlamak için kullanılır. |
| bold() | String nesnesine bold özelliği vermek için kullanılır. |
| italics() | String nesnesine italic özelliği vermek için kullanılır. |
| sub() | String nesnesini ‘ örnek ‘ şekline çevirmek için kullanılır. |
| sup() | String nesnesini ‘ örnek ‘ şekline çevirmek için kullanılır. |
| anchor(link) | String nesnesine link vermek için kullanılır. |
| charAt(x) | String nesnesinin x ‘inci karakterini verir |
| substring(x,y) | String nesnesinin x ‘inci karakterinden y ‘inci karakterine kadar olan kısmını verir. |
| toLowerCase() | String nesnesini küçük harfe çevirir. |
| toUpperCase() | String nesnesini büyük harfe çevirir. |
| split(x) | String nesnesini x ‘inci karakteri ayraç olarak kabul edip parçalara ayırır. |
| indexOf(x,y) | y’ inci karakterden başlayarak string içinde x metnini arar. |
Örnek: Küçük harflerle girilen metni büyük harflere çeviren bir script yazalım.
<html>
<script>
function cevir()
{
var a
a=document.form1.T1.value
document.form1.T2.value=a.toUpperCase()
}
</script>
<body>
<center>
<p><b>String Nesnesi Örneği</b></p>
<p>Lütfen küçük harflerle bir metin giriniz.</p>
<form name=”form1″>
<input name=”T1″><br>
<input type=”button” value=”Tıklayın!” onclick=cevir()><br>
<input name=”T2″>
</form>
</body>
</html>
Window Nesnesi Olaylari
Window Nesnesi
Window nesnesi, genelde istenilen özelliklere sahip bir pencere açıp, kapatmak için kullanılır. Açtığımız bu yeni pencerenin içriğinde istediğimiz değişikliği yapabiliriz.
window.open: Belirtilen özelliklere sahip bir pencere açmak için kullanılır. Komutun kullanım formatı aşağıdaki gibidir:
window.open komutundan sonra açılan ilk tırnak içine açılmak istenen sayfanın adı yazılır( Örneğin, ‘deneme.htm’ gibi). İkinci açılan tırnak içerisine pencereye verilecek isim girilir (Örneğin, ‘pencere1’ gibi). açılan sontırnak içerisine ise ise pencerenin özellikleri girilir (Örneğin, ‘width=100 , height=150 , toolbar=0 , menu=1 ‘ gibi).
*window.open(‘açılmak istenen sayfa’,’açılacak pencerey verilen isim’,’penceerenin özellikleri’)
Pencere özellikleri ile ilgili parametreler:
| Parametre | Değer | Anlamı |
| width | sayı | Pencerenin genişliği |
| height | sayı | Pencerenin yüksekliği |
| top | sayı | Üstten boşluk (x koordinatı) |
| left | sayı | Soldan boşluk (y koordinatı) |
| fullscreen | yes – no yada 1 – 0 | Tam ekran görüntüleme |
| toolbar | yes – no yada 1 – 0 | Kontrol cubuğu |
| scrollbars | yes – no yada 1 – 0 | Kaydırma çubukları |
| menu | yes – no yada 1 – 0 | Menü çubuğu |
| location | yes – no yada 1 – 0 | Adres çubuğu |
| status | yes – no yada 1 – 0 | Durum çubuğu |
window.close(): Window.close() komutu yardımı ile üzerinde bulunduğumuz sayfayı yada kendi açtığımız bir pencereyi kapata biliriz.
‘window.close()’ komutu direk olarak kullanıldığında üzerinde bulunduğumuz sayfayı kapatmaya çalışır bu nedenle kullanıcıya kendiliğinden sayfayı kapatmak isteyip istemediğini sorar.
Kendi açtığımız pencereyi kapatmanın en kolay yolu açtığımız pencereyi bir değişkene atamaktır. Daha sonra;
window.değişken.close() komutunu kullanarak açtığımız pencereyi kapatabiliriz.
Örnek: Daha önce yaptığımız ‘deneme.htm’ adındaki sayfamızı window nesnesi yardımıyla pencerede açtıralım.
<html>
<script language=”javascript”>
function ac()
{
pen=window.open(‘deneme.htm’,’pen1′,’width=100,height=100,toolbar=0,scrollbars=0,menu=0,location=0,status=0′)
}
function kapat()
{
window.pen.close
}
</script>
<body>
<center>
<p><b>Window Nesnesi Örneği.</b></p>
<input type=”button” value=”Pencere Aç” onclick=”ac()”>
<input type=”button” value=”Tıklayın!..” onclick=”kapat()”>
</body>
</htm>
Not: Yukarıdaki örnekte oluşturduğumuz pencere “deneme.htm” isminde bir sayfa açıyor. Kendi bilgisayarınızda da scripin tam olarak çalışması için, herhangi bir sayfaya “deneme.htm” ismi verrip yada bu isimde basit bir “html” hazırlayıp script ile aynı klasör içine koyunuz. Aksi taktirde açılan pencere içinde “sayfa bulunamıyor” hatası görülecektir.
window.name: O anda açık olan bencerenin ismini verir. Eğer komutla bir pencere açılmamışsa üzerinde bulunduğumuz sayfanın adını verir.
window.status: Üzerinde bulunulan sayfanın durum çubuğuna yazı yazdırmak için kullanılır.
window.DefaultStatus: Durum çubuğunun sabit değ
Olaylar
Olaylar JavaScript ile programlamada çok önemli bir yer tutarlar. Kullanıcının sayfa üzerinde yaptığı işlemleri algılamak ve bunun karşılığında gerekli komut satırlarını işler duruma getirmek için kullanılırlar. Kullanıcıyla etkileşim içerisinde olan tüm JavaScriptlerde olaylardan faydalanılır.
| Olay | Anlamı |
| onLoad | Sayfanın yüklenmesi durumu. |
| onUnload | Sayfadan ayrılma durumu. |
| onAbort | Sayfa yüklenmesinin kullanıcı tarafından durdurulması durumu. |
| onEror | Yüklenme sırasında hata oluşması durumu. |
| onClick | İlgili nesnenin tıklanması durumu. |
| onMouseOver | Farenin ilgili nesne üzerine gelmesi durumu. |
| onMouseOut | Farenin ilgili nesne üzerinden ayrılması durumu. |
| onFocus | Kullanıcının ilgili nesneye gelmesi durumu. |
| onBlur | Kullanıcının ilgili nesneden ayrılması durumu. |
| onSelect | Kullanıcının ilgili nesneyi seçmesi durumu. |
| onChange | Kullanıcının ilgili nesne içeriğinde değişiklik yapması durumu. |
| onSubmit | Submit butonuna basılması durumu. |
| onReset | Reset butonuna basılması durumu. |
Yukarıdaki tabloda belirttiğimiz olaylar genellikle bir fonksiyona yönlendirme yapmak için kullanılırlar.
Örnek: Sayfamızı ziyaret eden kullanıcıya, sayfa açılır açılmaz “hoşgeldin” sayfamızdan ayrılırken de “Gülegüle” diyecek bir script yazalım.
<html>
<script language=”javascript”>
function ac()
{
alert(“Sayfamıza Hoş Geldiniz.”)
}
function kapat()
{
alert(“Gülegüle!… Sayfamızı ziyaret ettiğiniz için teşekkür ederiz.”)
}
</script>
<body onload=”ac()” onunload=”kapat()”>
<center>
<p><b>Olaylar Örneği.</b></p>
</html>
Komutlar ve Döngüler
İF()… ELSE KOMUTLARI
if() Komutu: “if” kelimesi İngilizce de “eğer” anlamına gelmektedir. JavaScript’deki anlamı da tam olarak budur. Yani JavaScript’te if() komutu; eğer verdiğim koşul doğruysa süslü parantezler “{…}” içindeki komutları uygula anlamına gelmektedir.
if komutunun kullanım formatı;
if(…) ‘burada ki parantezler içerisine gerçekleşmesini istediğiniz koşul yazılır.
{….} ‘süslü parentezler arasına yukarıda verdiğimiz koşul sağlandığı zaman çalıştırılmasını istediğimiz komutlar yazılır.
Örneğin, “x” adında değeri dışarıdan girilebilir bir değişen tanımlamış olalım ve “x” değişkeninin değeri “1” olduğunda karşımıza içinde BilimVeTeknoloji.Com yazan bir alert kutusu çıksın.
Bu için “if(x==1)” komutunu kullanarak eğer x=1 ise süslü parantezler arasındaki komutları çalıştır dememiz gerekiyor. “x” değişkenine “1” değeri girildiğinde if komutu bizi süslü parantezler içine gönderir. Ve burada ki “{alert(“BilimVeTeknoloji.Com”)}” komutu sayesinde karşımıza içerisinde BilimVeTeknoloji.Com yazısı olan bir alert kutusu çıkar.
if(x==1)
{
alert(“BilimVeTeknoloji.Com”)
}
* Burada dikkat etmemiz gereken en önemli şey, karşılaştırma yaparken iki “=” işareti kullanıyor olmamız (x==1). Eğer tek “=” kullansaydık, “x” değişkenini 1’e eşitlenecek ve her durumda süslü parantez içerisindeki komutları çalışacaktı.
Evet if() komutu sayesinde verdiğimiz koşul gerçekleştiğinde istediğimiz komutların çalışmasını sağladık. Peki bu koşulun geçekleşmemesi durumunda tanımladığımız başka komutların çalışmasını istiyorsak bunu nasıl sağlarız? İşte bu noktada else komutu devreye giriyor.
else Komutu: else komutu daima if() komutu ile birlikte kullanılır. if() komutuyla belirlenen koşul gerçekleşmediği taktirde else komutu içerisinde belirlenen komutlar çalışır.
if() komutunu işlerken yaptığımız örneğe devam edelim; yukarıdaki örnekte “x” değişkeni “1” değerini aldığı taktirde BilimVeTeknoloji.Com metinini içeren bir alert kutusu açılıyordu. Şimdi de “x” değişkenine birden başka bir değer girildiğinde etkin olacak bir mesaj yazalım.
İlk olarak “else” komutunu kullanarak “x” değişkeninin 1’den başka bir değer alması durumunda etkin olacak komutlar hazırlayalım. Yukarıdaki if() komutu x’in 1’e eşit olması durumunda etkin olduğu için bu örneğe ekleyeceğimiz else komutu x eşit değilse 1’e anlamı taşıyacaktır. x eşitdeğil 1 durumunda else komutu ile birlikte süslü “{…..}” parantezler arasına yazılan komutlar etkin olacaktır.
else
{
alert(“lütfen değişkene ‘1’ değerini giriniz.”)
}
Örnek :
<html>
<head>
<script language=”javascript1.2″>
function load()
{
var x
x=document.form1.T1.value
if(x==1)
{
alert(“BilimVeTeknoloji.Com”)
}
else
{
alert(“lütfen değişkene ‘1’ değerini giriniz.”)
}
}
</script>
</head>
<body>
<center>
<p><b>if()…else Komutu Örneği</b></p>
<br>Lütfen bir sayı giriniz….
<form name=”form1″>
<input name=”T1″>
<input type=”button” value=”Tıklayın!..” onclick=”load()”>
</form>
</body>
</html>
DÖNGÜLER
For() Döngüsü: for() döngüsü, belirtilen değişkenin değeri, belirlelen sınırlar arasında olduğu sürece istenilen komutların işlenmesini sağlamak için kullanılır. for() döngüsünde kullanılacak olan değişkenin önceden tanımlanmasına gerek yoktur. For() döngüsü kullanacağı değişkeni kendisi tanımlar ve belirlenen peryotla değerini değiştirir.
Örnek: 0’dan başlayıp 10’a kadar 1’er 1’er artarak değer alan x değişkeni elde edmek için for() döngüsünü şu şekilde kullanabiliriz.
<htm>
<script language=”javascript”>
function dongu()
{
for(x=0;x<10;x=x+1)
{
alert(x)
}
}
</script>
<body>
<center>
<p><b>For() Döngüsü Örneği.</b></p>
<input type=”button” value=”Tıklayın!..” onclick=”dongu()”>
</body>
<htm>
Yukarıdaki örnekte for() döngüsü içerisine yazdığımız “x=0” komutu ile “x” değişkeninin başlangıç değerinin “0” olduğunu, “x<10” komutu ile de x değişkeninin bitiş değerinin “9” olduğunu belirtmiş oluyoruz. “x=x+1” komutu ise değişkenin değerinin 1’er 1’er artacağını gösteriyor. Süslü parantezler içine yazdığımız “alert(x)” komutu ise bize x’in değerini alert kutusu içinde gösterilmesini sağlıyor.
While() Döngüsü: While() öngüsü, belirtilen şart geçerli olduğu sürece istenilen komutların işlenmesini sağlamak için kullanılır. While() döngüsünde kullanılacak olan değişkenin daha önceden tanımlanması zorunludur. Aynı zamanda değişkenin değeri farklı bir komut yardımı ile değiştirilmelidir.
Örnek: Yukarıdaki örnekte yaptığımız işlemin aynısını while() komutunu kullanarak şu şekilde yapabiliriz.
<htm>
<script language=”javascript”>
function dongu()
{
var x
x=0
while(x<10)
{
alert(x)
x=x+1
}
}
</script>
<body>
<center>
<p><b>While() Döngüsü Örneği.</b></p>
<input type=”button” value=”Tıklayın!..” onclick=”dongu()”>
</body>
<htm>
İşlemler ve Nesneler
Mantıksal ve Matematiksel İşlemler
Karşılaştırmalar : Karşılaştırma işlemleri genellikle scripte koşul vermek için kullanılır. Değerler koşula uygunsa sonuç “true”, değilse “false” dir.
JavaScrip’te karşılaştırma operatörleri tablosu ;
| Operatör | Adı | Anlamı |
| == | Eşit | Sol ve sağdaki değerler biribirlerine eşitse |
| != | Eşitdeğil | Sol ve sağdaki değerler birbirlerine eşitdeğilse |
| < | Küçük | Soldaki değer sağdaki değerden küçüse |
| > | Büyük | Soldaki değer sağdaki değerden büyükse |
| <= | Küçük yada eşit | Soldaki değer sağdaki değere eşit yada küçükse |
| >= | Büyük yada eşit | Soldaki değer sağdaki değere eşit yada büyükse |
Mantıksal İşlemler : Mantıksal işlemler genelde birden fazla karşılaştırma işlemi arasında bağ kurmak içim kullanılır. Örneğin iki koşul arasında “||” operatörü kullanıldığında sağdaki yada soldaki koşullardan herhangi birinin sonucu “true” (doğru) ise mantıksal işlemin sonucunda “true” dir.
JavaScrip’te mantıksal işlem operatörleri tablosu ;
| Operatör | Adı | Anlamı |
| && | Ve (and) | Sol ve sağdaki koşulların her ikiside doğruysa |
| || | Veya (or) | Sol ve sağdaki koşullardan herhangi biri doğruysa |
| ! | Değil | Verilen koşul doğru ise |
Not: Karşılaştırma işlemleri ve mantıksal işlemler hakkındaki örnekleri if() komutunu incelerken kullanacağız.
Matematiksel İşlemler : Dört işlem (toplama, çıkartma, çarpma ve bölme) için kullanılan basit matematiksel ifadelerdir.
JavaScrip’te matematiksel işlem operatörleri tablosu ;
| Operatör | Adı | Anlamı |
| + | toplama | Sol ve sağdaki değerleri birbirine ekler. |
| – | çıkarma | Soldaki değerden sağdaki değerleri çıkarır. |
| * | çarpma | Sol ve sağdaki değerleri birbiri ile çarpar. |
| / | bölme | Soldaki değeri sağdaki değere böler. |
Math Nesnesi: JavaScript’te karmaşık matematiksel işlemler Math nesnesi yardımı ile kullanılır. Math nesnesi temel matematiksel işlemlerin yanı sıra yararlı birkaç karşılaştırma işlemi de içermektedir. Bu ek işlemler çok kolaylıklar sağlar. Örneğin girilen iki sayıdan hangisinin büyük olduğunu Math.max() komutu yardımı ile kolayca görebiliriz.
Math nesnesi işlem operatörleri tablosu ;
| Operatör | Adı | Anlamı |
| PI | “pi”sayısı | “pi” sayısının tam değerini verir. |
| E | “e”sayısı | “e” sayısının tam değerini verir. |
| sqrt(x) | karekök | x’sayısının karekök değeri. |
| log(x) | logaritma | x’sayısının karekök değeridir. |
| pow(x,y) | x^y | x üzeri y sayısının değeri. |
| sin(x) | sinüs | x’sayısının sinüs değeri. |
| cos(x) | cosinüs | x’sayısının cosinüs değeri. |
| tan(x) | tanjant | x’sayısının tanjant değeri. |
| asin(x) | arcsinüs | x’sayısının arcsinüs değeri. |
| acos(x) | arccosinüs | x’sayısının arccosinüs değeri. |
| atan(x) | arctanjant | x’sayısının arctanjant değeri. |
| abs(x) | tamkısım | x’sayısının tamkısımını döndürür |
| max(x,y) | büyük sayı | x ve y sayılarından büyük olanın değeri |
| min(x,y) | küçük sayı | x ve y sayılarından küçük olanın değeri |
| ceil(x) | büyük tam sayı | x’sayısından büyük en yakın tamsayı değeri |
| floor(x) | küçük tam sayı | x’sayısından küçük ve en yakın tamsayı değeri |
| round(x) | tam sayı | x’sayısına en yakın tam sayı değeri. |
| random() | rasgele sayı | “0” ile”1″ arasında rasgele bir sayı değeri |
| exp(x) | sayı | x’sayısının kendisi |
Kullanım Şekli: Yukarıdaki tabloda verdiğimiz komutlar tek başlarına kullanılamazlar. Muhakkak Math nesnesi ile birlikte kullanılmalıdırlar.
Math.komut ‘ Örneğin Math.sin(30)
* Math komutunun ilk harfi muhakkak büyük olmalıdır. “math” şeklindeki bir yazım ilk harfi küçük olduğu için çalışmayacaktır.
* Aynı şekilde yukarıdaki tabloda verilen operatörler aynen tabloda verildiği gibi küçük harfle yazılmalıdır. Herhangi bir karakteri büyük harfle yazılırsa script çalışmaz.
Örnek: Girilen sayısının karekökünü bulan bir script;
<htm>
<script language=”javascript”>
function kok()
{
alert(‘9 un karekökü= ‘+Math.sqrt(9))
}
</script>
<body>
<center>
<p><b>Math Nesnesi Örneği</b></p>
<input type=”button” value=”Tıklayın!..” onclick=”kok()”>
</body>
</htm>
Documet Nesnesi Ve Form Nesneleri
Document Nesnesi: JavaScrip’te document nesnesi üzerinde bulunduğumuz sayfa anlamına gelir. Document nesnesi kullanılarak üzerinde bulunduğumuz sayfanın özelliklleri değiştirilebilir.
| Operatör: | Anlamı: |
| title | Sayfanın başlığı |
| bgcolor | Sayfanın ardalan rengi |
| fgcolor | Sayfanın yazı rengi |
| linkColor | Sayfanın link rengi |
| alinkColor | Üzerinde bulunulan link rengi |
| vlinkColor | Ziyaret edilmiş link rengi |
| location | Sayfanın URL’si |
| lastmodified | Sayfanın son güncellendiği tarih |
| write() | Sayfa içerisine yazı yazmak için kullanılır |
| clear() | Sayfanın JavaScriptle eklenen içeriğini temizler. |
Location Nesnesi : O an üzerinde bulunan web sayfası manasına gelmektedir. Özellikleri aşağıdaki tabloda verilmişti.
| Özellik: | Açıklama: |
| href | Üzerinde bulunulan sayfanın URL’sini verir |
| protocol | Üzerinde bulunulan sayfanın Protokol türünü verir |
| reload() | Üzerinde bulunulan sayfanın yeniden yüklenmesini sağlar. |
History Nesnesi : Daha önce ziyaret edilen sayfaları hafızasında tutan ve istenildiğinde bu sayfalardan birine dönüşü sağlayan bir nesnedir.
| Özellik: | Açıklama: |
| length | Ziyaret edilen toplam sayfa sayısını verir |
| go(x) | Ziyaret edilmiş x’inci sayfaya gidiş dönüş kullanılır |
| back() | Ziyeret edilen bir önceki sayfaya dönüş için kullanılır. |
| foward() | Ziyeret edilen bir sonraki sayfaya dönüş için kullanılır. |
örneğin, history.back() ‘bir önceki sayfaya dönüş için kullanılır.
Form Nesneleri: HTML dilinde veri yollamak amacı ile formlar kullanılır. Form içerisinde textarea, textbox, password, submit, checkbox ve radio gibi nesneler yer alır. Forma ziyaretçi tarafından girilen bilgiler “post” yada “get” metodları kullanılarak CGI, ASP gibi form yakalama özelliği olan bir dosyaya yönlendirilebilir. Ziyaretçi defterlerinde ve anketlerde genellikle form nesnesinden yararlanılır.
JavaScript genellikle form içindeki herhangi bir nesnenin içeriğini kontrol edebilmek ve değiştirmek için kullanılır.
kulanım şekli; document.Formİsmi.Nesneİsmi.Özellik
İsterseniz şimdi form nesnesini ve form nesnesi içinde yer alan nesnelerin JavaScript tarafından değiştirile bilen özelliklerini inceleyelim.
Form Nesneleri: Formlar daha önce de belirttiğimiz gibi ziyaretçi tarafından girilen bilgileri başka bir dosyaya yönlendirmek amacı ile kullanılırlar nesnelerdir.
| Özellik: | Açıklama: |
| name | formun adı |
| value | formun içeriği |
| action | formun yönlendirileceği sayfanın yeri ve adı |
| methot | form yöntemi “Get” yada “Post” |
| lenght | form içindeki nesne sayısı |
| elements | form içinde kullanılan nesneler |
Form nesnesi bir çok yardımcı nesne ile birlikte kullanılır bu nesneler <form> </form> tagları arasına yerleştirilir ve form herhangi bir dosyaya yönlendirildiğinde tüm bu nesnelerin değeride yönlendirilmiş olur.
HTML dilinden tanıdığınız bu nesneleri ve özelliklerini kısaca inceleyelim.
| Nesne: | Anlamı: |
| select | Seçim listesi |
| text | Yazı kutusu |
| password | Parola kutusu |
| textarea | Yazı alanı |
| button | Buton |
| submit | Form onaylama butonu |
| reset | Form temizleme butonu |
| checkbox | Seçim kutusu (Çoklu seçme özelliği) |
| radio | Seçim kutusu (Tek seçme özelliği) |
| image | Resim |
| href | Link |
JavaScript dilinde bu form nesnelerinin olaylara karşı duyarlılığı sıksık kullanılır ve bizi asıl ilgilendiren bu nesnelerin duyarlılık gösterdiği olaylardır.
| Nesne: | Özellikler: |
| select | onclick,onblur,onchange,onfocus |
| text | onclick,onblur,onchange,onfocus,onselect |
| password | onclick,onblur,onchange,onfocus,onselect |
| textarea | onclick,onblur,onchange,onfocus,onselect |
| button | onclick |
| submit | onclick,onsubmit |
| reset | onclick,onreset |
| checkbox | onclick,onchange,onchecked |
| radio | onclick,onchange,onchecked |
| image | onclick,onmouseover,onmouseout,oneror,onabort |
| href | onclick,onmouseover,onmouseout |
Yukarıdaki olaylar dediğimiz özellikler sonraki derslerimizde daha ayrıntılı bir şekilde anlatılacak.
Mesaj Kutuları Değişkenler
Mesaj Kutuları
Alert Kutusu: Alert kutusu uyarı mesajları vermek için kullanılır. Mesaj kutuları içinde en çok kullanılanı alert kutusudur. Bu kutu bir ünlem işareti, yazdığınız mesaj ve bir tamam butonundan oluşur.
alert(deşğişken) yada alert(“Masj buraya yazılır”)
Örnek:
<html>
<script language=”javascript”>
function mesaj()
{
alert(“ilk örneğimiz çalışıyor”)
}
</script>
<body>
<center>
<p><b>Alert Kutusu Örneği</b></p>
<input type=”button” value=”Tıklayın!..” onclick=”mesaj()”>
</body>
</html>
Confirm Kutusu: Confirm kutusu genelde yapılacak olan işlem hakkında kullanıcıya soru sormak için kullanılır. Bir soru işareti, mesajınız, bir Tamam ve bir İptal butonlarından oluşur.
* Bu mesaj kutusuyla verilen mesajın cevabı bir değişkene atanarak değişik işlemler yapılabilir.
– Cevap olarak, “Tamam” butonunun tıklanması değişkene “1” değerini atar.
– “İptal” butonunun tıklanması ise değişkene “0” değerini atar. (Pencerenin köşesinden kapatılması, “İptal” butonuna basmak ile aynı işlevi görür)
confirm(Değişken) yada confirm(“mesaj buraya yazılır”)
Örnek:
<html>
<script language=”javascript”>
function mesaj()
{
var a
a = confirm(“Tamam yada İptali tıklayın.”)
if (a==1)
{
alert(“Tamam tuşunu tıkladınız.”)
}
if (a==0)
{
alert(“İptal tuşunu tıkladınız.”)
}
}
</script>
<body>
<center>
<p><b>Confirm Kutusu Örneği</b></p>
<input type=”button” value=”Tıklayın!..” onclick=”mesaj()”>
</body>
</html>
Not: Bu örnekte “if (a==1)” kısmıyla başlayan satırdan scripti kapattığımız satıra kadar olan kısımda if() komutu yardımı ile karşılaştırma yapıyoruz. Şimdilik bu bölüm sizi alakadar etmiyor sadece scriptin anlaşılır olması için eklenmiştir. Ayrıca var a şeklinde kullanılan satır “a” isminde bir değişken tanımlamak için kullanılmıştır. Şimdilik bu kısımlara takılmayın ilerleyen derslerde bunlar ayrıntılı olarak anlatılacak.
Prompt() Mesaj Kutusu : Prompt mesaj kutusu diğer mesaj kutularından farklı olarak kullanıcının değer girişi yapabildiği bir kutudur. Yani kullanıcıya verilen mesaj karşılığında bir değer girmesi istenir. Değişkene atanan bu değer script içinde isteğe göre değerlendirile bilinir.
değişken = prompt(‘mesaj’,’örnek’)
Örnek:
<html>
<script language=”javascript”>
function mesaj()
{
var a
a = prompt(“Adınızı Giriniz”,”Adınız”)
alert(a+” JavaScript Öğrenmeye başladın artık!”)
}
</script>
<body>
<center>
<p><b>Confirm Kutusu Örneği</b></p>
<input type=”button” value=”Tıklayın!..” onclick=”mesaj()”>
</body>
</html>
Değişkenler
Değişken : Değişken, JavaScript de dahil olmak üzere tüm programlama dillerinde kullanılan, içeriği tamamen isteğe bağlı olarak atanan ve programcı tarafından ihtiyaca göre oluşturulan nesnelerdir. Değişkenin içeriği metin yada sayı olabilir.
JavaScripte Değişken Kullanımı : JavaScript’te değişken kullanmak için ilk olarak, değişken isminin “var” komutu kullanılarak belirtilmesi gerekir. (Evet bu değişkeni önceden belirtme işi çok gıcık ama napalım gülü seven dikenine katlanır). Hemen değişkeni belirtirken yada daha sonra script içerisinde değişkene bir değer atanabilir. Eğer değişken tanıtılmadan içeriğine bir değer atanılmaya çalışırsa script çalışmaz.
var gezegen
gezegen = “mars”
yada
var gezegen = “mars” ‘ Bu örneklerde değişkenimiz “gezegen”, değeri “mars” tır.
* Bir var komutu ile birden çok değişken tanımlana bilir.
var okul,sınıf,no ‘burada var komutu okul,sınıf ve no olmak üzere üç değişken oluşturduk.
Örnek:
<html>
<script language=”javascript”>
function deneme()
{
var mesaj
mesaj = “örneğimiz çalışıyor”
alert(mesaj)
}
</script>
<body>
<center>
<p><b>Değişken Örneği</b></p>
<input type=”button” value=”Tıklayın!..” onclick=”deneme()”>
</body>
</html>
JavaSdript Değişkenlerinin Özellikleri:
– JavaScrip’te değişken kullanılmadan önce “var” komutu ile tanımlanmalıdır.
– JavaScrip’te değişkene atanan değer ” ” yada ‘ ‘ imleri arasına yazılır.
– Küsuratlı sayısal değerler “.” (nokta) ile gösterilir. 3.5 ( “,” virgül kullanılmaz.)
– JavaScrip’te değişken algılanırken büyük küçük harf ayrımı yapılır. Örneğin “okul” ile “Okul” kelimeleri JavaScript tarafından iki farklı değişken olarak algılanır.
Değişken Çeşitleri
Boolean Değişkeni : Bu değişkenler iki farklı değer alabilen değişkenlerdir. Bu değişkenin “true” değerini alması değişkenin geçerli yada kullanıla bilir olduğu, “false” değerini alması ise geçersiz yada kullanılamaz olduğu anlamına gelir. Ayrıca “false” yerine “0”, “true” yerine “1” değerleri de kullanıla bilir. Bu değişkeni ilerde bazı örneklerde kullanacağız.
Global Değişken : Global değişken, diğer değişkenler gibi hemen hemen tüm programlama dillerinde kullanılır. Kullanım amacı; Bir fonksiyon içinde tanımladığımız bir değişken başka bir fonksiyon için geçerli değildir. Yani bir fonksiyonda tanımlayıp kullandığımız bir değişkeni başka bir fonksiyonda kullanmak için yeniden tanımlayıp değer atamamız gerekir. Ama bazı durumlarda aynı değişkenin bir çok fonksiyonda kullanılması gerekebilir. Yani değişkene verdiğimiz değerin tüm fonksiyonlarda geçerli olması ve değerinin değiştirilebilmesi istenebilir. Bu durumda global değişkene ihtiyaç duyulur.
JavaScrip’te global değişken kullanımı çok kolaydır. Yapmanız gereken tek şey, global değişken olarak kullanmak istediğiniz değişkeni fonksiyon içinde degil de hemen scripti tanımladıktan sonra yani fonksiyon açmadan tanımlamaktır. Yani hiç bir ek komuta gerek yoktur. Bu şekilde tanımladığınız bir değişkeni script içindeki tüm fonksiyonlarda tekrar tanımlamaya gerek kalmadan kullana bilirsiniz.
Örnek:
<html>
<script language=”javascript”>
var sayi = ’10’
function deneme1()
{
alert(“1. fonksiyon, global değişken =”+sayi)
}
function deneme2()
{
alert(“2. fonksiyon, global değişken =”+sayi )
}
</script>
<body>
<center>
<p><b>Global Değişken Örneği</b></p>
<p>Fonsiyon 1</p>
<input type=”button” value=”Tıklayın!..” onclick=”deneme1()”><br>
<p>Fonsiyon 2</p>
<input type=”button” value=”Tıklayın!..” onclick=”deneme2()”>
</body>
</html>
Array (Dizi) Değişken : Diğer tüm değişken türleri sadece bir tek değer alabilmekteydi. Ama dizi değişkende birden fazla değer tek değişken içinde tutulabilir. Dizi değişken oluşturmak için diğer değişkenler gibi önce değişkenin adı “var” komutu ile tanımlanır. Daha sonra “new Array()” komutu ile değişkene değerler atanır.
* Dikkat edilmesi gereken en önemli unsur “Array” komutunun ilk “A” harfi mutlaka büyük harfle yazılmalıdır. Küçük a yazılırsa script çalışmaz.
var degisken
degisken = new Array(deger1,deger2,deger3,deger4….)
Dizi değişkenin değerleri okunurken degişken[0], degişken[1], degişken[2] şeklinde okunur. Burada dikkat edilmesi gereken en önemli unsur. ilk değerin [0] olarak tutuluyor olmasıdır, sonra sırası ile [1], [2] … şeklinde devam eder.
Örnek:
<html>
<script language=”javascript”>
function dizi_degisken()
{
var gezegenler
gezegenler = new Array(“merkur”,”venus”,”dunya”,”mars”,”jupiter”)
alert(“değişkenleriniz = “+gezegenler[0]+gezegenler[1]+gezegenler[2]+gezegenler[3]+gezegenler[4])
}
</script>
<body>
<center>
<p><b>Dizi Değişken Örneği.<b></p>
<input type=”button” value=”Tıklayın!..” onclick=”dizi_degisken()”>
</body>
</html>
Dınınım…
Radical Brain 
Son Yorumlar