Web programlamanın olmazsa olmazı haline gelen, AJAX uygulamalarının bel kemiği olan, sağladığı birçok kolaylıkla Web’de pekte sarsılmayacak bir şekilde yerini almış olan, nesne yönelimli bir dil olan (OOP), basitleştirilmiş JAVA dili olmayan, web sayfaları etkileşimi için tasarlanmış olsa da kullanım alanları genişletilebilir olan, VBScript gibi paspal ve IE bağımlısı olmayan bir dil olmayan =) , gelişmiş tüm tarayıcılarda çalışan bir web programlama dilidir.
Kısmet olursa sonuna dek, ta ki nesne yönelimlerine kadar kullanımlara haiz olana dek burada derslerimiz devam edecektir. Yani a’dan z’ye her konuya temas edeceğiz. Aşağıda yazan notu lütfen dikkate alınız!
NOT: Bu konu altına ben haricinde kimsenin ileti yazmaması rica olunur. Aksi halde bölüm yönetici tarafından silinecektir. Sorulmak istenen sorular PM vasıtasıyla tarafıma iletilebilir. Teşekkürler..
---
“Netscape Navigator 2.0 ile birlikte geliştirilen JavaScript dili başlangıçta sadece istemci taraflı (client-side) yorumlanan (interpreted) bir dildir. Aralık 1995 tarihinde, C dilinin tarayıcılara uyarlanmış hali diyebileceğimiz JavaScript piyasaya sürüldü. Web sayfalarında dinamik içerik sağlamak ya da kullanıcıyla iletişim kurmak için kullanılmaktadır.
Ad benzerliğine rağmen ’Java’ ile ilişkili değildir. Yaygın yanlışlardan biri JavaScript’in basitleştirilmiş Java olarak tanımlanmasıdır.
Başlangıçta sadece Netscape tarayıcıları üstünde çalışan JavaScript artık tüm yaygın ağ taraycıları tarafından desteklenmekte. Microsoft JavaScript’e benzer bir dil olan JScript’i geliştirdi. Microsoft Internet Explorer her iki dili de desteklerken standart olmayan JScript eklentileri diğer tarayıcılar üstünde çalışmamaktadır.”
Buraya kadar olan kısım wikipedia’dan alıntıdır, yazılması elzem olmamasına karşın neyle uğraştığımızın bilinmesi açısından faydalı olabilir.
Öncelikle temin etmeniz gerekenler;
Firefox Web Taracısı --> indir (HTML ve JS gösterimde web standartlarını uygular, fire verme ihtimali çok düşüktür)
Firebug Firefox eklentisi --> indir (JS’i çalıştırdığınız zaman detaylı bilgi alabilirsiniz, hata durumlarında hata ayrıntıları sayesinde hatayı gidermeniz kolaylaşır)
Bunun yanı sıra temel anlamda HTML / XHTML bilgisine sahip olmanız sizin için bir + olacaktır.
---
* JavaScript HTML arasına gömülerek yazılır. ********> etiketi kullanılarak kodlama başlatılır ve </script> etiketi ile de betiğin sonlandığı belirtilir.
* ******** type=”text/javascript”> veya ******** language=”javascript”> gibi uzun ifadelere genelde ihtiyaç duyulmaz ama kendi araştırmalarımda rastladığım odur ki, betik kodlamaları google, youtube, flikers, last.fm, yahoo gibi sitelerde ******** type=”text/javascript”> şeklinde başlatılmıştır. Fakat ********></script> şeklinde kullanımında da kodumuz çalışacaktır.
Örnek:
******** type= text/javascript >
********.write( Hello Africa! );
</script>
* Arzu edilirse eski sürüm tarayıcıları JavaScript’i desteklemiyor olmasından dolayı zarar görmesin diye koruma altına alabiliriz. Yalnız bunun son zamanlar pek hükmü kalmamıştır.
Örnek:
******** type=”text/javascript”>
<!--
********.write( Hello Africa! );
//-->
********>
* ********.write standart bir JS uyglamasıdır ve kendisine yüklenen değiştirge(parametre)’ler, yukarıdaki her iki kodun çıktısı da “Hello Africa!” şeklinde olacaktır.
* İfadeleri noktalı virgülle (
sonlandırma; Geleneksel programlamada ifadeleri ; ile sonlandırma var olduğundan çoğu programcıda bu geleneği devam ettirmektedir, şahsen ben PHP’den alışkın olduğumdan tüm kod demeçlerimi ; ile sonlandırırım. Fakat bu JS’de tamamen programcının önceciliğine kalmıştır, kullanılsa da kullanılmasa da kod çalışacaktır.
********.write( Hello Africa! );
ile
********.write( Hello Africa! )
arasında hiçbir fark yoktur. İkisi de aynı çıktıyı verir. “Hello Afrika!”
* // işaretleri yorum yapılan tek satırlarda kullanılır, çoklu yorum satırlarında /**/ kullanılır. Fakat /**/ sadece çoklu yorum satırlarına mahsus değildir, tek satırda da kullanılabilir.
******** type=”text/javascript”>
/* birinci satır
ikinci satır
üçüncü satır */
********.write( Hello Africa! );
/*tekli yorum satırı*/
//tekli yorum satırı
********>
* <head></head> etiketi arasına yazılan JS çağrıldığı zaman çalışır.
* <bOdy></bOdy> etiketi arasına yazılan JS sayfa yüknenince çalışır.
* Her iki etiket arasına istediğiniz kadar kod öbeği yazabilirsiniz fakat harici JS dosyalarını kullanmanız HTML kodlamada sayfanıza daha sade bir görünüm kazandıracak ve hata yapma ihtimalinizi daha aza indirgeyecektir. Bu harici dosyaları da <head> yada <bOdy> arasında kullanabilirsiniz.
Örnek;
<html>
<head>
******** src= "> ******** type="text/javascript">
....
</script>
</head>
<bOdy>
******** src= "> ******** type="text/javascript">
....
</script>
</bOdy>
* w3school'da bahsi atlanmış bir konuyuda belirtmek isterim ki;
JS kodlarını HTML nesnelerine de doğrudan yüklenebilir.
<a href= "sil.php?id=319" onClick="return confirm('Veriyi silmek istiyor musunuz?')">Sil</a>
Fakat bunu çoklu kullanımlarda pek tavsiye etmiyorum zira önceden bir betik öbeğinde bir function yazarak bunu HTML nesnelerinde onClick="return Onay()" şeklinde yazmak sayfamızı daha sade yapacak ve yüklenme esnasında kolaylık sağlayacaktır.
---
Örnek;
Yukarıda ki örnek güvenlik sebebiyle forum tarafından tekrar biçimlendirildiğinden düzgün görüntülenmedi, tekrar biraz değiştirerek yazıyorum.
<html>
<head>
******** src=`harici.js`></script>
******** type=`text/javascript`>
//kodlar
</script>
</head>
<bOdy>
******** src=`harici.js`></script>
******** type=`text/javascript`>
//kodlar
</script>
</bOdy>
Değişkenler
* Değişkenler veri depolama - taşıma işlemlerini üstüne alan nesnelerdir. JS'de var ifadesiyle tanımlanır (var İngilizce'deki variable kelimesinin kısaltılmışıdır.).
Örnek;
var Deg = 'Merhaba, ben Deg. Görevim bu tırnaklar arasındaki yazıyı değer olarak taşımaktır.';
********.write(Deg);
* JS büyük-küçük harfe duyarlı bir dildir (Case-Sensitive), yani Deg değişkeni ile DEG değişkeni farklı değişkenlerdir. Bu yüzden değişkenleri tanımlarken dikkatli olmak gerekir!
* Herhangi bir işlev (function) içinde tanımlanmış olan bir değişken sadece o işlevin elemanıdır ve başka işlev tarafından kullanılamaz, bu da aynı isimde ama farklı işlevler içinde değişkenler tanımlamanıza imkan sağlar.
Tüm işlevler tarafından tanınmasını istediğimiz değişkenleri işlevlerin öncesine yazmak gerekir. Bunlara genel değişkenler diyebiliriz ve var ifadesine ihtiyac duymazlar.
Örnek;
GenelDeg = 'Ben genel bir değişkenim ve tüm işlevler tarafından kullanılabilirim.<br>';
function Islev1() {
var Deg = 'Ben Islev1 adlı işlevin değişkeniyim<br>';
********.write(GenelDeg);
********.write(Deg);
}
function Islev2() {
var Deg = 'Ben Islev2 adlı işlevin değişkeniyim<br>';
********.write(GenelDeg);
********.write(Deg);
}
//işlevlerimizi çağırıp çalıştıralım
Islev1();
Islev2();
* Değişken tanımlamasında tek tırnak ' yada çift tırnak " kullanmak pek fazla bir fark arz etmez. (Ben kodlarımın byte hesabını bile yaptığımdan genelde tek tırnak kullanırım). Tek dikkat edilmesi gereken değişken değeri içinde tırnak kullanılacaksa bunu ters taksim \\ işareti ile savmanız gerekir, aksi halde betiğiniz hata verecektir.
Örnek;
//yanlış
var Deg = 'Ramazan'ı Şerif';
//doğru
var Deg = 'Ramazan\\'ı Şerif';
var Deg = "Ramazan'ı Şerif";
* Bir değişkene bir başka değişkenleri atamak mümkündür.
Örnek;
var Deg1 = 'Ramazan\\'ı Şerif';
var Deg2 = 'iniz mübarek olsun.';
var Deg3 = Deg1 + Deg2;
********.write(Deg3);
Ama değişken tanımlamalarında
var Deg1 = '1';
var Deg2 = '2';
var Deg3 = Deg1 + Deg2;
********.write(Deg3);
ile
var Deg1 = 1;
var Deg2 = 2;
var Deg3 = Deg1 + Deg2;
********.write(Deg3);
farklı sonuçlar verecektir, ilerde STRING'leri gördükten sonra daha anlaşılır olacaktır bu kısım.
İşlemciler
Hesap İşlemcileri
+ : Toplama
x = 2;
y = 1;
********.write(x + y)
//çıktısı 3
- : Çıkarma
x = 2;
y = 1;
********.write(x - y)
//çıktısı 1
* : Çarpma
x = 2;
y = 1;
********.write(x * y)
//çıktısı 2
/ : Bölme
x = 2;
y = 1;
********.write(x / y)
//çıktısı 2
% : Yüzde
x = 2;
y = 1;
********.write(x % y)
//2'nin 1'e bölünmesinden kalanı --> çıktısı 0
---
Atama İşlemcileri
=
x = y anlamı x = y
+
x += y anlamı x = x + y
-
x -= y anlamı x = x - y
*
x *= y anlamı x = x * y
/
x /= y anlamı x = x / y
%
x %= y anlamı x = x % y
---
Karşılaştırma İşlemcileri
= : Eşittir
3 == 5 //yanlış
% : Eşittir (tip olarak da yoklamasını yapar)
x = 3;
y = '3';
x == y; //doğru
x === y; //yanlış
!= : Eşit değildir
3 != 5 //doğru
< : Küçüktür
3 < 5 //doğru
> : Büyüktür
3 > 5 //yanlış
<= : Küçüktür ve/veya eşittir
3 <= 5 //doğru
>= : Büyüktür ve/veya eşittir
3 >= 5 //yanlış
---
Mantıksal İşlemciler
&& : Ve
|| : Yada
! : Değil (Yok)
---
String İşlemcisi
* Değişkenleri bir birine eklemek için kullanılır.
x = 'Merhaba';
y = 'Afrika!';
q = x + y;
//çıktısı MerhabaAfrika!
//veya araya boşluk koyacaksak
q = x +' '+ y;
//çıktısı Merhaba Afrika!
---
Şartlı İşlemciler ( ? ve : )
* if ve else kullanmak istemediğiniz zamanlarda çok kullanışlı olan bu işlemcileri aşağıdaki gibi kullanabilirsiniz. a'nın değerini değiştirince alacağınız cevapta farklı olacaktır.
var a = 1;
var b = (a == 1) ? 'doğru' : 'yanlış';
********.write(b);
Eğer parantez içindeki şart doğruysa soru işaretinden (?) sonraki tırnak işaretinin içeriği b'nin değerine atanacaktır, eğer parantez içindeki şart yanlışsa iki nokta (
işaretinden sonraki tırnak işaretinin içeriği b'ye değer olarak atanacaktır
Özel Yazı İşaretleri
* Özel yazı işaretlerinin JS tarafından anlaşılabilmesi için ters taksim (backslash) dediğimiz işaretin kullanılması gerekir.
' --> tek tırnak (single quote)
" --> çift tırnak (double quote)
& --> ile ifadesi (ampersand)
--> ters taksim (backslash)
n --> (new line)
r --> satır başına dön (carriage return)
t --> Tab tuşunun HTML içinde bıraktığı boş alan (tab)
* Not: satır atlamak işaretiyle örneğin alert işlevi ile açılan uyarı penceresinde mümkün olabilir, fakat HTML'de <br> etiketini kullanmak gerekir.
Şart İfadeleri (if, else, if ... else if)
* Bu ifadeler şartların değişme durumuna bağlı olarak betiğe farklı işler yaptırma amacıyla kullanılır.
var Bugun = 'Bugünü bilen bir değişken';
if (Bugun == 'Pazartesi')
********.write('Bugün haftanın ilk günüdür.')
else
********.write('Bugün haftanın ilk günü değildir.')
* Eğer if veya else'den sonra bir satırdan fazla kod yazılacaksa bu öbekleme olur ki {} işaretleri içine yazmanız gerekir. Süslü parantez bulunmadığı zaman betik if / else'den sonraki ilk satıra göre çalışmasına devam edecektir.
var Bugun = 'Bugünü bilen bir değişken';
if (Bugun == 'Pazartesi') {
********.write('Bugün haftanın ilk günüdür.')
********.******** = 'pazartesi.php';
} else {
********.write('Bugün haftanın ilk günü değildir.')
********.******** = 'nereye gitmek isteniyorsa...';
}
* if ... else if ... else
var Bugun = 'Bugünü bilen bir değişken';
if (Bugun == 'Pazartesi') {
********.write('Bugün haftanın ilk günüdür.')
********.******** = 'pazartesi.php';
} else if (Bugun == 'Salı') {
********.write('Bugün haftanın ikinci günüdür.')
********.******** = sali.php';
} else {
********.write('Bugün haftanın diğer günlerinden biridir.')
********.******** = 'nereye gitmek isteniyorsa
Switch
* Switch mantığı da aynen if şartlandırmasındaki gibidir. Eğer case şart koşulan değeri yakalarsa break switch'i durduracaktır.
var Deg = 5;
switch (Deg) {
case 5:
********.write('Değerimiz 5')
break;
case 6:
********.write('Değerimiz 6')
break;
case 0:
********.write('Değerimiz 0')
break;
default:
********.write('Deg değişkenin değeri değiştikçe betiğin yazacağı değerde değişir')
}
Popup Kutuları
alert() : Uyarı Kutusu
alert('Uyarı iletisi.');
veya
var Deg = 'Uyarı iletisi.';
alert(Deg);
* CW'da profil güncelleme sayfasının en altındaki kırmızı alanda bulunan şifre kısmını boş bırakıldığında uyarı vermek için kullanılıyor.
---
confirm() : Onay Kutusu
confirm('Onay iletisi.');
veya
var Deg = 'Onay iletisi.';
confirm(Deg);
* CW'da bu script ile PM sayfasında iletilerin silinmesi için onay isteniyor.
""Seçilen mesaj(lar)ı silmek istediğinizden emin misiniz?" Onay iletisidir.
return ifadesiyle kullanılır.
return confirm('Veriyi silmek istiyor musunuz?')
---
prompt() : İstem Kutusu
prompt('İstem iletisi.', 'Varsayılan değer');
İşlevler (function)
* JS'de kendi işlevlerimizi oluşturup bunları istediğimiz şekilde kullanabiliriz.
- İşlev isimleri ancak alt çizgi (_) veya harflerle başlayabilir ve devamında rakam alabilir.
- İşlev isimlerinde alert, go, focus gibi JS bünyesinde bulunan hazır işlev adlarını kullanmak betiklerinizde hatalara yol açabilir!
//1. ve en yaygın olan yazım şekli
function Islev1() {
var Deg = "Islev1'in değişkeni";
alert(Deg);
}
//2. yazım
Islev1 = function () {
var Deg = "Islev1'in değişkeni";
alert(Deg);
}
//çağırma
<input type="button" value="İşlevi çağır" onclick="Islev1()">
* İşlevler durağan komutlar olduğundan bazen sayfa yüklenmesiyle veya bunun gibi herhangi bir müdahele olmadan çalışmasını istediğimiz durumlarda aşağıdaki yazımları kullanırız.
//1. yazım
window.onload = function() {
var Deg = "Islev1'in değişkeni";
alert(Deg);
}
//2. yazım
function Islev1() {
var Deg = "Islev1'in değişkeni";
alert(Deg);
}
window.onload = Islev1(); //Islev1 şeklinde de yazılabilir
* İşlevlerimiz bağımsız değişkenlere (argument) de tabi olarak çalıştırılabilir ve bir işlev birden fazla bağımsız değişken alabilir.
function Islev(Ileti) {
alert(Ileti)
}
<input type="button" value="1. ileti!" onclick="Islev('1. (değişken) ileti!')">
<input type="button" value="2. ileti!" onclick="Islev('2. (değişken) ileti!')">
* İşlevler sayısal sonuçlar elde etmek amacıyla da kullanılabilir.
function Carp(Deg1, Deg2) {
Sonuc = Deg1 * Deg2;
return Sonuc;
}
<input type="button" value="Çarp" onclick="alert(Carp(2, 2))">
Döngüler
* Döngüler belirtilen şart yerine gelinceye yada belirlenen sayı tamamlanıncaya dek betiğin çalışması için kullanılır.
* for belirlenen sayıya kadar ulaşıncaya kadar döner.
* while bellirlenen şart gerçekleşene kadar döner.
-Araçlar : (++ ->değeri bir artırır, -- ->değeri bir eksiltir)
for
* Belirlenen sayıyı buluncaya kadar döner.
-Bu kod i değişkeni 5'ten küçük olduğu halde 4'ü buluncaya kadar dönecektir.
for (i = 0; i < 5; i++) {
********.write(i + '<br>');
}
---
for ... in
* for in ifadesi dizi elemanlarının yinelemeleri (iteration) için kullanılır.
-Bu kod dizi içindeki elemanları teker teker alıp sırasıyla yazdıracaktır.
var Dizi = new Array();
Dizi[0]= 'Deg1';
Dizi[1]= 'Deg2';
Dizi[2]= 'Deg3';
for (var Yaz in Dizi) {
********.write([Yaz] + '<br>');
}
---
while
* Belirlenen şart yerine gelinceye dek döner.
-Bu kod i değişkeni 5'ten küçük olduğu halde 4'ü buluncaya kadar dönecektir.
var i = 1;
while (i < 5) {
********.write(i + '<br>');
i = i + 1; //i'yi bir artırarak devam et, i++ şeklinde de yazılabilir
}
---
do ... while
* Belirlenen şart yerine gelinceye dek döner. Kullanımı while ile hemen hemen aynıdır.
-Bu kod i değişkeni 5'ten küçük olduğu halde 4'ü buluncaya kadar dönecektir.
var i = 1;
do {
********.write(i + '<br>');
i = i + 1; //i'yi bir artırarak devam et, i++ şeklinde de yazılabilir
}
while (i < 5)
---
* Döngüleri durdurmak ve devam ettirmek için ayrıca iki ifade vardır.
break
* Belirli bir şart vuku bulduğunda break döngüyü durdurur.
-Bu kodda döngü i’nin değerini 3 yaptığında döngü duracaktır.
for (i = 1; i < 5; i++) {
if (i == 3) {break};
********.write(i);
}
continue
* break'ın durdurduğu döngüyü devam ettirir.
-Bu kodda herhangi bir iş yapmaz, çünkü duran bir döngü yoktur.
for (i = 1; i < 5; i++) {
if (i == 3) {continue};
********.write(i);
}
Olaylar (Events)
* Olaylar JS tarafından anlaşılabilen sayfa kıpraşımları =) yada hareketleridir diyebiliriz. Sayfanın yüklenmesi, bir butona tıklanması, bir formun yollanılması gibi şeylerde sayfa üzerinde gerçekleşen olaylardır.
Mesela bir onClick olayını kullanarak
<input type="button" onClick="alert('Amanın!')"> gibi bir kod yazabiliriz.
- onabort = resim dosyasının yüklenmesinin yarıda kesilmesi olayı
- onblur = bir nesnenin odaklamasının kaybolması, onfocus'un tersi
- onchange = bir alanın içeriğinin değiştirilmesi
- onclick = fare ile bir nesneye tıklama
- ondblclick = fare ile bir nesneye iki kez tıklama
- onerror = bir belge veya görüntü dosyasının yüklenme hatası
- onfocus = bir nesne odaklamayı alması, onblur'un tersi
- onkeydown = bir klavye tuşuna basılması
- onkeypress = bir klavye tuşuna basılması veya tuşun basılı tutulması
- onkeyup = bir klavye tuşunun serbest bırakılması
- onload = bir belge veya görüntü dosyasının yüklenmesinin tamamlanması
- onmousedown = bir fare tuşunun tıklanması
- onmousemove = farenin oynatılması
- onmouseout = farenin bir nesne üzerinden çekilmesi
- onmouseover = farenin bir nesne üzerine getirilmesi
- onmouseup = bir fare tuşunun serbest bırakılması
- onreset = sıfırlama (reset) düğmesinin tıklanması
- onresize = bir pencere (window) veya çerçeve (frame) nin yeniden boyutlanmasın
- onselect = sayfadaki bir yazının seçilmesi
- onsubmit = yollama (submit) düğmesinin tıklanması
- onunload = kullanıcın sayfayı kapatması/çıkması
with
* with ifadesi JS'in yazılımda sağladığı kolaylıklardan bir tanesidir. with ile mesela boş alan denetimi yapmak istediğimiz bir form adını sürekli şarlandırma öbeği içine yazmak zorunda kalmayız.
-Bu fuzuli yere kod yazılan örnek
function FormDenetim(Form) {
if (!Form.Ad) {
alert('Lütfen Ad kısmını doldurun!');
return false;
} else if (!Form.EPosta) {
alert('Lütfen E-Posta kısmını doldurun!');
return false;
} else if (!Form.Aciklama) {
alert('Lütfen Açıklama kısmını doldurun');
return false;
} else {
return true;
}
}
-Bu ise with kullanılarak gereksiz yazımların olmadığı örnek
function FormDenetim(Form) {
with (Form) {
if (!Ad) {
alert('Lütfen Ad kısmını doldurun!');
return false;
} else if (!EPosta) {
alert('Lütfen E-Posta kısmını doldurun!');
return false;
} else if (!Aciklama) {
alert('Lütfen Açıklama kısmını doldurun');
return false;
} else {
return true;
}
}
}
! işareti ile yok(mu?) şartını koyarak doldurulması gereken alanların denetimi gerçekleştiriyoruz, with ifadesini kullanarak betiğimizi byte değeri daha düşük, daha okunaklı, sade ve tabi ki hata ihtimali daha az olacak şekle sokuyoruz.
try ... catch
* İstisna yönetimidir. Hata denetimi yapmanızı ve hata durumunda başka bir uygulamaya geçebilmenizi sağlar.
try {
//buraya yapılasını istediğiniz uygulamayı yazarsınız
}
ola ki bir hata meydana gelirse catch devreye girer ve kendi bünyesi içindeki kodu uygulamaya koyar.
catch (e) {
//yedekteki yazım buraya geçirilir
}
- Mesela bir sayfamız var ve bu sayfaya erişildiği zaman ziyaretçinin başka sayfa yönlendirilmesini istiyoruz. (o zaman sayfa yüklenince deyimini yani window.onload kullanacağız)
- Sayfa yüklenince betik try ile index2.htm sayfasına gitmek isteyecektir, şu halde try kısmı çalışır.
- Fakat ********.replace ifadesi bozuk yazılırsa (********.replaces gibi) catch hatayı yakalayacak ve kendi bünyesindeki yazımı çalıştıracaktır.
window.onload = function() {
try {
********.replace('index2.htm');
}
catch (e) {
********.write('Yönlendirmede hata meydana geldi, <a href=index2.htm>Burayı tıklayarak sayfaya ulaşabilirsiniz</a>');
}
}
* try ... catch yapılarına kendi yazdığımız işlevleri de geçirebiliriz.
* Soru : catch içindeki e ne işe yarar?
* Cevap : Bu hatanın tanımlanmasıdır, yani bir hata yakalarsan adını e koy demektir. e a'da olabilir HaciKilinc'ta olabilir. Sadece yazılımlarda bazı kolaylamalara gitmek durumunda olduğumuzdan bu tür kısa deyimleri kullanırız.
* try bir komutu yerine getiremedi diye catch ile illa başka bir komut uygulamak zorunda değilizdir, catch içini boş bırakarak betiği durdurabiliriz.
try {
//birşey yampaya çalış
}
catch (e) {
//hata olursa hiç birşey yapma
}
---
throw
* İstisna yönetimi aracıdır (öyle olmazsa böyle yap, böyle de olmazsa şöyle yap gibi).
var x = prompt('1 ile 10 arasında bir rakam girin.', '')
try {
if(x > 10)
throw 'Hata 1';
else if(x < 0)
throw 'Hata 2';
else if(isNaN(x))
throw 'Hata 3';
}
catch(e) {
if(e == 'Hata 1')
alert('Girdiğiniz sayı 10 dan büyük olamaz!');
if(e == 'Hata 2')
alert('Girdiğiniz sayı 0 dan küçük olamaz!');
if(e == 'Hata 3')
alert('Rakam girmeniz gerekir!');
}
onerror
* try ... catch ifadesiyle bu denetimi yapabiliyorken onerror olayı aracılığıyla da hata denetimi yapılabilmektedir. Bu eski JS standardıdır.
* Bu kullanım için öncelikle hataları kullanacak olan bir işlev oluşturmamız gerekir. Daha sonradan hata meydana gelmesi halinde onerror olayı işlevimize çalışması için komut gönderecek ve işlev görevini icra edecektir.
onerror = HataGoster;
function HataGoster(Hata, Konum, Satir) {
var Ileti;
Ileti = 'Görüntülemekte olan sayfada hata oluştu. Ayrıntılar aşağıdaki gibidir.nn'
Ileti += 'Hata: ' + Hata + 'n';
Ileti += 'Konum: ' + Konum + 'n';
Ileti += 'Satır: ' + Satir;
alert(Ileti)
return true
}
function Deneme() {
//Hello adında bir işlev olmadığından hata oluşacak
Hello('Hello Afrika!');
}
Hatırlatmalar
* JS küçük büyük harfe duyarlıdır, işlev ve değişken adlarını tanımlarken buna dikkat etmek gerekir. Degisken ile DEGISKEN aynı değildir.
* JS yazımdaki boşlukları dikkate almaz, yani;
var Deg='Değer1';
var Deg = 'Değer1'; aralarında fark yoktur. Yazımı daha okunaklı hale getirmek için boşukları kullanabilirsiniz.
* String türündeki bir bir yazımda string içinde kalmak şartıyla satır atlayabilirsiniz.
********.write('Hello
Africa!')
Fakat
********.write
('Hello Africa!') şeklinde bir kullanım söz konusu olamaz
Nesneler (Object)
* JS nesne yönelimli bir dildir buda bize kendi nesnelerimiz tanımlamamıza, veri türlerini belirlememize imkan sağlar. Kendi nesnelerimi oluşturmayı kısmet olur olursa ilerde göreceğiz. Şimdi Js bünyesindeki nesnelerle devam ediyoruz.
* Nesneler sadece bir özel veri tipidir. Kendilerine ait özellik veri yönemleri vardır.
Özellikler
Örnek String nesnesinin length özelliğini kullanıyoruz.
var Deg = 'Hello Afrika!';
********.write(Deg.length);
//çıktısı 13
Yöntem
Örnekte String nesnesine toUpperCase() yöndetimini kullanıyoruz.
var Deg = 'Hello Afrika!';
********.write(Deg.toUpperCase());
//çıktısı HELLO AFRICA!
---
String Nesneleri
* Çok yazı verilerini depolamak için kullanılır.
var Deg = 'Bu bir String nesnesidir.';
* Şimdi String nesnesinin yöntem (method) diye adlandırılan işlemcilerini görelim.
anchor() : HTML çapaları oluşturur. (İsimlendirilmesi gerekir - 'Capam' isimdir. İsimlendirilmediği zaman name='undefined' olarak kalır).
var Deg = 'Hello';
********.write(deg.anchor('Capam'));
//HTML çıktısı <a name="Capam">Hello</a>
big() : string'i büyük yazı etiketinde görüntüler.
var Deg = 'Hello';
********.write(Deg.big());
//HTML çıktısı <big>Hello</big>
blink() : yanıp sönen yazı oluşturur ama Internet Explorer'da çalışmaz. Çalışanını ilerde yapıcaz =).
var Deg = 'Hello';
********.write(Deg.blink());
//HTML çıktısı <blink>Hello</blink>
bold() : String'i kalın yazıyla gösterir.
var Deg = 'Hello';
********.write(Deg.bold());
//HTML çıktısı <b>Hello/b>
charAt() : Belirtilen mevkideki karakteri çıkarır (mevki belirtmek zorunludur).
var Deg = 'Hello';
********.write(Deg.charAt(1));
//çıktısı e
charCodeAt : Belirtilen mevkideki karakterin UNICODE karşılığını çıkarır (mevki belirtmek zorunludur).
var Deg = 'Hello';
********.write(Deg.charCodeAt(1));
//çıktısı 101
concat() : İki stringi birleştirir.
var Deg1 = 'Hello';
var Deg1 = 'Afrika!';
********.write(Deg1.concat(Deg2));
//çıktısı Hello Afrika!
fixed() : String'i teletype şekliyle görüntüler.
var Deg = 'Hello';
********.write(Deg.fixed());
//HTML çıktısı <tt>Hello</tt>
fontcolor() : String'e belirlenen rengi atar.
var Deg = 'Hello';
********.write(Deg.fontcolor('red'));
//HTML çıktısı <font color="red">Hello</font>
fontsize() : String'e belirlenen font boyutunu atar.
var Deg = 'Hello';
********.write(Deg.fontcolor('7'));
//HTML çıktısı <font size="7">Hello</font>
fromCharCode() : UNICODE değerleri string'e çevirir.
********.write(String.fromCharCode(65,66,67))
//çıktısı ABC
indexOf() : Belirtilen değerin string iiçinde 0'ncı noktadan kaçıncı noktada olduğu gösterir. Belirtilen değer yoksa -1 sonucunu dönderir.
var Deg = 'Hello Afrika';
********.write(Deg.indexOf('Hello') + '<br>')
********.write(Deg.indexOf('Amerika') + '<br>')
********.write(Deg.indexOf('Afrika'))
//çıktısı sırayla 0, -1, 6
italics() : String'i italik şekille yazıdırır.
var Deg = 'Hello';
********.write(Deg.italics());
//HTML çıktısı <i>Hello</i>
lastIndexOf() : Yakınen indexOf() yöntemi gibidir.
var Deg = 'Hello Afrika';
********.write(Deg.indexOf('Hello') + '<br>')
********.write(Deg.indexOf('Amerika') + '<br>')
********.write(Deg.indexOf('Afrika'))
//çıktısı sırayla 0, -1, 6
link() : String'i linke çevirir.
var Deg = 'Hello';
********.write(Deg.link('http://www.Cyber-Warrior.org'));
//HTML çıktısı <i>Hello</i>
match() : Belirtilen değerin string içinde olup olmadığına bakar. Değeri bulursa değeri yazar, bulamassa null sonucunu dönderir.
var Deg = 'Hello!';
********.write(Deg.match('Hello') + '<br>')
********.write(Deg.match('Amerika') + '<br>')
********.write(Deg.match('Hello!'))
//çıktısı sırayla Hello, null, Hello!
replace() : String içinde bir değeri bulup yerine başka bir değer yazar (aranacak ve aranın yerine konulucak değeri bu işlemciye yüklemek gerekir. Küçük-büyük harf dikkase almaması için i belirteci işlemciye geçirilir. Geniş aramada g belirteci ile arama yaptırılır, geniş aramada küçük-büyük harfe duyarsız bir şekilde gi belirteci ile arama yaptırılır).
var Deg = 'Hello';
********.write(Deg.replace(/Hello/, 'Afrika'));
//çıktısı Afrika
var Deg = 'Hello';
********.write(Deg.replace(/hello/i, 'Afrika'));
//çıktısı Afrika
var Deg = 'Hello';
Deg += 'Afrika';
Deg += 'Hello Amerika';
********.write(Deg.replace(/Hello/g, 'Hi'));
//çıktısı Hi Afrika Hi Amerika
var Deg = 'Hello';
Deg += 'Afrika';
Deg += 'Hello Amerika';
********.write(Deg.replace(/hello/gi, 'Hi'));
//çıktısı Hi Afrika Hi Amerika
search() : Belirlenen bir değeri string içinde arar, bulursa 0'dan bulunduğu mevkii yazar, bulamassa -1 sonucunu döndürür (küçük-büyük harf duyarsızlığı için i belirteci kullanılır).
var Deg = 'Hello';
********.write(Deg.search(/hello/));
//çıktısı -1
var Deg = 'Hello';
********.write(Deg.search(/hello/i));
//çıktısı 0
slice() : String'i belirlenen yerden böler.
var Deg = 'Hello Afrika';
********.write(Deg.slice(6));
//çıktısı Afrika
veya
var Deg = 'Hello Afrika';
********.write(Deg.slice(6, 10));
//çıktısı Afri
small() : String'i küçük yazı şekliyle yazar.
var Deg = 'Hello';
********.write(Deg.small());
//HTML çıktısı <small>Hello</small>
split() : String'i belirlenen yerden böler (bölünmenin temel alınacağı belirteç işlemciye geçirilir).
var Deg1 = 'Hello Afrika';
var Deg2.split(' '));
********.write(Deg2[0]);
//çıktısı Hello
********.write(Deg2[1]);
//çıktısı Afrika
strike() : String'in üstünü çizerek yazar.
var Deg = 'Hello';
********.write(Deg.strike());
//HTML çıktısı <strike>Hello</strike>
sub() : String'i subscript şelinde yazar.
var Deg = 'Hello';
********.write(Deg.sub());
//HTML çıktısı <sub>Hello</sub>
sup() : String'i superscript şelinde yazar.
var Deg = 'Hello';
********.write(Deg.sup());
//HTML çıktısı <sup>Hello</sup>
substr() : String'in belirlenen aralıklardaki değerlerini yazar. (NOT: bu yöntem sorun çıkardığı için tavsiye edilmiyor. KULLANMAYIN!. Bunun yerine substring() kullanın.)
var Deg = 'Hello';
********.write(Deg.substr(3));
//çıktısı lo
var Deg = 'Hello';
********.write(Deg.substr(1, 3));
//çıktısı ell
substring() : String'in belirlenen aralıklardaki değerlerini yazar.
var Deg = 'Hello';
********.write(Deg.substring(3));
//çıktısı lo
var Deg = 'Hello';
********.write(Deg.substring(1, 3));
//çıktısı ell
toLowerCase() : String'in küçük harflerde yazar.
var Deg = 'HELLO';
********.write(Deg.toLowerCase());
//çıktısı hello
toUpperCase() : String'in büyük harflerde yazar.
var Deg = 'hello';
********.write(Deg.toUpperCase());
//çıktısı HELLO
---
length() : String'in değer uzunluğunu verir.
var Deg = 'Hello';
********.write(Deg.length);
//çıktısı 5
Date Nesnesi
* Date nesnesi tarih ve zamanlarla ilgili çalışmalarda kullanılır.
* İçinde Yıl, Gün, Ay, Saat, Dakika, Saniye, Salise verilerini tutan daha doğrusu betiğin çalıştığı makinada bu verilerin
nerede olduğunu bilen ve bulup getiren bir nesnedir.
* Tüm tarihlerde İngilizce isimlerler temel alınır ve bu isimlerin baştan 3 harfi yazılır (günler ve aylarda - örn: Cuma -
Fri).
---
Date() : Bugünün tarihini ve zamanı verir.
********.write(Date())
//çıktısı şuan için Sat Sep 15 2007 00:38:52 GMT+0300 (GTB Yaz Saati)
getDate() : Günü verir ve günü 1-31 arasından bir sayı olarak yansıtır. Date
nesnesine bağımlı çalışır.
var T = new Date()
********.write(T.getDate())
-Kendi tanımladığımız tarihide getDate() ile alabiliriz.
var T = new Date('July 21, 1983 01:15:00')
********.write(birthday.getDate())
//çıktısı 21
getDay() : Haftanın gününü verir ve bu günü 0-6 arasında bir rakamla belirtir.
var T = new Date();
********.write(T.getDay());
//çıktısı 6 (bugün cumartesi)
-Biz sayı şeklinde olan günlere gerçek adlarını verebiliriz.
var T = new Date();
var Gun = new Array(7);
Gun[0] = 'Pazar';
Gun[1] = 'Pazartesi';
Gun[2] = 'Salı';
Gun[3] = 'Çarşamba';
Gun[4] = 'Perşembe';
Gun[5] = 'Cuma';
Gun[6] = 'Cumartesi';
********.write('Bugün günlerden ' + Gun[T.getDay()])
getMonth() : Ayı verir ve bunu 0-11 arası bir rakam ile belirtir.
var T = new Date();
********.write(T.getMonth());
//çıktısı 8
-Biz sayı şeklinde olan aylara gerçek adlarını verebiliriz.
var T = new Date();
var Ay = new Array(12);
Ay[0] = 'Ocak';
Ay[1] = 'Şubat';
Ay[2] = 'Mart';
Ay[3] = 'Nisan';
Ay[4] = 'Mayıs';
Ay[5] = 'Haziran';
Ay[6] = 'Temmuz';
Ay[7] = 'Ağustos';
Ay[8] = 'Eylül';
Ay[9] = 'Ekim';
Ay[10] = 'Kasım';
Ay[11] = 'Aralık';
********.write('Aylardan ' + Ay[T.getMonth()] + ' ayındayız.');
getFullYear() : Yılı 4 haneli rakam olarak verir.
var T = new Date();
********.write(T.getFullYear());
//çıktısı 2007
-Kendi belirlediğimiz verilere görede sonuç döndürebilir.
var T = new Date('July 21, 1983 01:15:00');
********.write('Ben' + T.getFullYear() +' yılında doğdum);
getYear() : Yılı 2 haneli rakam olarak verir (çok fazla kullanılmaz, FF'de sorun çıkarır. KULLANMAYIN!. bunun yerine
getFullYear() kullanın).
getHours() : Saati verir.
var T = new Date();
********.write(T.getHours());
var T = new Date('July 21, 1983 01:15:00');
********.write(T.getHours());
//çıktısı 1
getMinutes() : Dakikaları verir.
var T = new Date();
********.write(T.getMinutes());
var T = new Date('July 21, 1983 01:15:00');
********.write(T.getMinutes());
//çıktısı 15
getSeconds() : Saniyeyi verir.
var T = new Date();
********.write(T.getSeconds());
var T = new Date('July 21, 1983 01:15:00');
********.write(T.getSeconds());
//çıktısı 0
getMilliseconds() : Saliseyi (Milisaniye) verir.
var T = new Date();
********.write(T.getMilliseconds());
var T = new Date('July 21, 1983 01:15:00');
********.write(T.getMilliseconds());
//çıktısı 0
getTime() : 1 Ocak 1970 geceyarısı (1.1.1970 00:00:00) tarihinden bu yana geçmiş olan zamanı salise cinsinden verir.
(Forma yeni ileti göndereceğiniz zaman "Önizleme yap" mak için açılan pencerede ?ID=1189879523090 gibi)
var T = new Date();
********.write('1970.01.01 tarihinden bu yana' + T.getTime() + 'salise geçti');
*
Yukarıdaki getDate() ile getMilliseconds() arasındaki
tüm yöntemlere UTC (Universal Coordinated Time) ekleyerek uluslar arası tarih/zaman sonuçlarını elde edilir.
getDate --> getUTCDate() gibi.
*
parse() : Belirtilen tarih String'ini salise cinsine çevirir.
var Bugun = new Date.parse('Sep 15, 2007');
********.write(Bugun);
//çıktısı 1189803600000
setDate() : Belirlenen Ay değerine göre tarihi kurar.
var Bugun = new Date();
Bugun.setDate(15); //bugün ayın 15'i
********.write(Bugun);
//çıktısı Sat Sep 15 21:21:21 UTC+0300 2007
setMonth() : Ayı kurar. (yazım olarak iki değer alır, birincisi ayı belirtir - zorunludur. ikincisi günü belirtir,
keyfidir ama belirtilmediğinde hali hazırdaki günü alır).
var T = new Date();
T.setMonth(0); //0 ocak ayıdır, gün olarak 15 yani bugünü alır
********.write(T);
//çıktısı Mon Jan 15 21:36:36 UTC+0200 2007
var T = new Date();
T.setDate(0,20); //ocak'ın 20'si
********.write(T);
//çıktısı Sat Jan 20 21:31:04 UTC+0200 2007
setFullYear() : Yılı kurar (yıl, ay, gün değerlerini alır. yıl değeri mecburidir, ay ve gün keyfidir).
var T = new Date();
T.setFullYear(2000);
********.write(T);
//çıktısı Fri Sep 15 21:42:48 UTC+0300 2000
var T = new Date();
T.setFullYear(2000, 8, 16);
********.write(T);
//çıktısı Sat Sep 16 21:45:20 UTC+0300 2000
setYear() : Sözde setFullYear() ile aynı işe yarar ama hatalara neden olur. KULLANMAYIN!. Bunun yerine
setFullYear() kullanın.
setHours() : Saati kurar (saat değerini belirtmek zorunludur, dakika, saniye, salise keyfidir).
var T = new Date();
T.setHours(15);
********.write(T);
//Sat Sep 15 15:23:36 UTC+0300 2007
var T = new Date();
T.setHours(15,30,00);
********.write(T);
//Sat Sep 15 15:30:00 UTC+0300 2007
setMinutes() : Dakikayı kurar (dakika belirtisi gerekir, saniye ve salise keyfidir).
var T = new Date();
T.setMinutes(1);
********.write(T);
//Sat Sep 15 22:01:39 UTC+0300 2007
setSeconds() : Saniyeyi kurar (saniye belirtisi zorunlu, salise keyfidir).
var T = new Date();
T.setSeconds(1);
********.write(T);
//Sat Sep 15 22:29:01 UTC+0300 2007
setMilliseconds() : Saliseyi kurar.
var T = new Date();
T.setMilliseconds(1);
********.write(T);
setTime() : Salise cinsindeki bir tarih/zaman değerini String'e çevirir. (çalışmak için tarih/zaman salise cinsini
ister).
var T = new Date();
T.setTime(1564221);//1.1.1970 tarihinin salise cinsidir
********.write(T);
//çıktısı Thu Jan 1 02:26:04 UTC+0200 1970
var T = new Date();
T.setTime(1126731600000);//bugünün salise cinsi
********.write(T);
//çıktısı Sat Sep 15 00:00:00 UTC+0300 2007
-Bu yöntemler 1970 senesinin Ocak 1 (00:00) tarihini temel alarak çalışmaktadır. Peki 1970 öncesi nasıl olur. Salisenin
başına eksi (-) işareti koyarız.
var T = new Date();
T.setTime(-28349233200000); //Malazgirt Savaşı tarihi, Cuma'yı Cumartesiye bağlayan gece
********.write(T);
//çıktısı Sat Aug 26 00:00:00 UTC+0300 1071
*
Yukarıdaki setDate() ile setMilliseconds() arasındaki
tüm yöntemlere UTC (Universal Coordinated Time) ekleyerek uluslar arası tarih/zaman kurulur.
setDate() --> setUTCDate() gibi.
*
toString() : Date nesnesini String'e çevirir (yani saliseyi yazıya çevirir
diyebiliriz).
var T = new Date();
********.write(T.toString());
//çıktısı Sat Sep 15 23:13:38 UTC+0300 2007
UTC() : Her zaman olduğu gibi 1970'i temel alarak String (yazı cinsi) halindeki
Date nesnesini saliseye çevirir (yıl, ay, gün belirtmek mecburi, saat, dakika, saniye,
salise belirtmek ise keyfidir).
var T = new Date.UTC(1921,7,22);//Sakarya Meydan Muharebesi
********.write(T);
//çıktısı -1526169600000
toLocaleString() : Date nesnesini yerel saate çevirir (dilini de çevirir).
var T = new Date();
********.write(T.toLocaleString());
//çıktısı 15 Eylül 2007 Cumartesi 23:35:33
-Kendi belirlediğimiz bir tarih/zamanı da yerele çevirir.
-Ancak IE7 de 1601 senesinden öncesini çevirmiyor, galiba bir IE7 kusuru bulduk =)
var T = new Date('July 16, 622'); //Hicret'in 1. günü
********.write(T.toLocaleString());
//çıktısı 16 Temmuz 0622 Salı 00:00:00 (saat belirtilmediğinden 00:00:00 verdi)
* Bu kısmı yazarken önizleme alamadığım içim makalede hatalı yazımlar olmuş olabilir. Date
nesnesi için bu adrese bakabilirsiniz.
Array Nesnesi
* Tek bir değişken içinde birden fazla değer depolamak için kullanılır. Dizi anlamına gelir.
var Deg1 = 'Ali';
var Deg2 = 'Veli';
yerine
var Dizi = new Array('birinci değer', 'ikinci değer');
yada
var Dizi = new Array();
Dizi[0] = 'Ali';
Dizi[1] = 'Veli';
şeklinde yazım mümkündür.
* Ancak Array ölçüsünü denetim altında tutmak istenilirse Array() nesnesine içerik adeti sayısınca bir değer geçirilir.
var Dizi = new Array(2); //bu dizi 2 değer alır
Dizi[0] = 'Ali';
Dizi[1] = 'Veli';
---
Array yöntemleri
concat() : Birden fazla Array'i birleştirir.
var Dizi1 = new Array(2);
Dizi[0] = 'Ali';
Dizi[1] = 'Veli';
var Dizi2 = new Array(2);
Dizi[0] = 'Kerem';
Dizi[1] = 'Alp';
********.write(Dizi1.concat(Dizi2))
//çıktısı -> Ali,Veli,Kerem,Alp
join() : JS'de dizilerden veri çekmek istenildiğinde araya JS virgül (,) işareti koyar. Fakat bu virgülleri temizlemek için de join() ile bir çözüm sunar. İstediğimiz bir karakter ile bu virgülü değiştirebiliriz. Ancak join()'nin asli görevi dizideki tüm öğeleri tek bir String nesnesine atamaktır.
var Dizi = new Array(3);
Dizi[0] = 'Ali';
Dizi[1] = 'Veli';
Dizi[2] = 'Kerem';
********.write(Dizi.join()); //Ali,Veli,Kerem
********.write('<br>');
********.write(arr.join('.')); //Ali.Veli.Kerem
pop() : Dizinin en sonuncu öğesini siler ve sildiği öğeyi döndürür. pop() kullanıldıktan sonra dizinin son öğesi artık kullanılamaz. shift()'in tersidir.
var Dizi = new Array(3);
Dizi[0] = 'Ali';
Dizi[1] = 'Veli';
Dizi[2] = 'Kerem';
********.write(Dizi); //Ali,Veli,Kerem
********.write('<br>');
********.write(Dizi.pop()); //Kerem
********.write('<br>');
********.write(Dizi); //Ali,Veli
push() : Dizi sonuna bir öğe ekler yeni dizi boyutunu döndürür. Değer olarak ilk öğe ismini ister, 2. 3. ... öğeler keyfidir.
var Dizi = new Array(3);
Dizi[0] = 'Ali';
Dizi[1] = 'Veli';
Dizi[2] = 'Kerem';
********.write(Dizi); //Ali,Veli,Kerem
********.write('<br>');
********.write(Dizi.push('Hacı Kılınç')); //4, yeni boyut
********.write('<br>');
********.write(Dizi); //Ali,Veli,Kerem,Hacı Kılınç
reverse() : Dizinin sıralanma şeklini tersine dönderir.
var Dizi = new Array(3);
Dizi[0] = 'Ali';
Dizi[1] = 'Veli';
Dizi[2] = 'Kerem';
********.write(Dizi); //Ali,Veli,Kerem
********.write('<br>');
********.write(Dizi.reverse()); //Kerem,Veli,Ali
shift() : Dizinin en ilk öğesini siler ve sildiği öğeyi döndürür. shift() kullanıldıktan sonra dizinin ilk öğesi artık kullanılamaz. pop()'ın tersidir.
var Dizi = new Array(3);
Dizi[0] = 'Ali';
Dizi[1] = 'Veli';
Dizi[2] = 'Kerem';
********.write(Dizi); //Ali,Veli,Kerem
********.write('<br>');
********.write(Dizi.shift()); //Ali
********.write('<br>');
********.write(Dizi); //Veli,Kerem
slice() : Dizi öğelerini belirteci esas alarak siler. Başlangıç belirteci mecburi, bitiş belirteci keyfidir.
var Dizi = new Array(3);
Dizi[0] = 'Ali';
Dizi[1] = 'Veli';
Dizi[2] = 'Kerem';
********.write(Dizi); //Ali,Veli,Kerem
********.write('<br>');
********.write(Dizi.slice(1)); //Veli,Kerem
********.write('<br>');
********.write(Dizi); //Ali,Veli,Kerem
var Dizi = new Array(5)
Dizi[0] = 'Ali';
Dizi[1] = 'Veli';
Dizi[2] = 'Kerem';
Dizi[3] = 'mub@rek';
Dizi[4] = 'Mahmut';
********.write(Dizi); //Ali,Veli,Kerem,mub@rek,Mahmut
********.write('<br>');
********.write(Dizi.slice(2,4)); //Kerem,mub@rek
********.write('<br>');
********.write(Dizi); //Ali,Veli,Kerem,mub@rek,Mahmut
sort() : Dizi öğelerini sıralar.
-A'dan Z'ye.
var Dizi = new Array(3);
Dizi[0] = 'Ali';
Dizi[1] = 'Veli';
Dizi[2] = 'Kerem';
********.write(Dizi1); //Ali,Veli,Kerem
********.write('<br>');
********.write(Dizi1.sort()); //Ali,Kerem,Veli
-Küçükten büyüğe (yanlıştır)
var Dizi = new Array(3);
Dizi[0] = '28';
Dizi[1] = '2';
Dizi[2] = '7';
********.write(Dizi); //28,2,7
********.write('<br>');
********.write(Dizi.sort()); //2,28,7
-Sayıları doğru sıralamk için kendi işlevimizi yazıyoruz ve aşağıda kullanıyoruz
function DogruSirala(x, y) {
return x - y;
}
-Küçükten büyüğe (doğrudur)
var Dizi = new Array(3);
Dizi[0] = '28';
Dizi[1] = '2';
Dizi[2] = '7';
********.write(Dizi); //28,2,7
********.write('<br>');
********.write(Dizi.sort(DogruSirala)); //2,7,28
splice() : Dizi öğesi(öğeleri) silinip yerine başka öğe(öğeler) konulacağı yada sadece yeni öğenin(öğelerin) belirli bir sıraya ekleneceği zaman kullanılır. Kaçıncı öğe silinecekse yada yeni öğe nereye konulacaksa belirtilmek zorundadır. Kaç elaman silineceğinin belirtilmesi keyfidir.
var Dizi = new Array(4);
Dizi[0] = 'Ali';
Dizi[1] = 'Veli';
Dizi[2] = 'Kerem';
Dizi[3] = 'Mert';
********.write(Dizi); //Ali,Veli,Kerem,Mert
********.write('<br>');
//2. öğeden sonra 0 tane öğe sil ve 'Hacı'yı ekle
Dizi.splice(2,0, 'Hacı');
********.write(Dizi); //Ali,Veli,Hacı,Kerem,Mert
yada
********.write(Dizi); //Ali,Veli,Kerem,Mert
//2. öğeden sonra 1 öğeyi sil ve yerine 'Mahmut'u koy
Dizi.splice(2,1, 'Mahmut');
********.write(Dizi); //Ali,Veli,Mahmut,Mert
toString() : Dizi öğelerini bir String'e çevirir ve sonuca döner.
var Dizi = new Array(4);
Dizi[0] = 'Ali';
Dizi[1] = 'Veli';
Dizi[2] = 'Kerem';
Dizi[3] = 'Mert';
********.write(Dizi.toString()); //Ali,Veli,Kerem,Mert
unshift() : Dizinin başına belirtece göre yeni bir öğe ekler. IE'de gerektiği gibi çalışmaz, dizinin boyutunu (uzunluğunu) değiştirir ve yeni boyutu döndürür.
var Dizi = new Array(4); //boyut belirlemedik!
Dizi[0] = 'Ali';
Dizi[1] = 'Veli';
Dizi[2] = 'Kerem';
Dizi[3] = 'Mert';
********.write(Dizi); //Ali,Veli,Kerem,Mert
********.write('<br>');
Dizi.unshift('Hacı'); //4, yeni boyut
********.write('<br>');
********.write(Dizi); //Hacı,Ali,Veli,Hacı,Kerem,Mert
length : Dizi boyutunu verir (bir anlamda dizi içinde kaç adet eleman varsa onları sayar).
var Dizi = new Array(4); //boyut belirlemedik!
Dizi[0] = 'Ali';
Dizi[1] = 'Veli';
Dizi[2] = 'Kerem';
Dizi[3] = 'Mert';
********.write(Dizi.length); //4 adet öğe mevcut
Boolean Nesnesi
* true yada false sonucunu verir. Mantıksal bir ifadedir.
* Boolean nesnesi başlangıcında bir değer almamışsa yada değer 0, -0, null, '', false, undefined, NaN ise false sonucunu dönderir.
-Tümünün çıktısı false olacaktır.
var B1 = new Boolean();
var B2 = new Boolean(0);
var B3 = new Boolean(-0);
var B4 = new Boolean('');
var B5 = new Boolean(null);
var B6 = new Boolean(NaN);
var B7 = new Boolean(false);
var B8 = new Boolean(undefined);
********.write(B1 + '<br>');
********.write(B2 + '<br>');
********.write(B3 + '<br>');
********.write(B4 + '<br>');
********.write(B5 + '<br>');
********.write(B6 + '<br>');
********.write(B7 + '<br>');
********.write(B8);
-Tümünün çıktısı true olacaktır.
var B1 = new Boolean(true)
var B2 = new Boolean('true')
var B3 = new Boolean('false')
var B4 = new Boolean('CW')
********.write(B1 + '<br>');
********.write(B2 + '<br>');
********.write(B3 + '<br>');
********.write(B4);
Math Nesnesi
* Riyaziye (matematik) işlemleri yapabilmenize imkan sağlar.
* JS içerisinde sabit 8 adet riyaziye değeri taşır, bunlara erişim Math nesnesi ile olur. İşlem yaptırmak için bu sabit değerlerin başına diğer yöntemlerdeki uygulamalarda olduğu gibi Math nesnesi konur.
* NaN ifadesinin anlamı NOT A NUMBER yani SAYI DEĞİL demektir.
Math.E
//çıktısı 2.718281828459045
Math.PI
//çıktısı 3.141592653589793
Math.SQRT2
//çıktısı 1.4142135623730951
Math.SQRT1_2
//çıktısı 0.7071067811865476
Math.LN2
//çıktısı 0.6931471805599453
Math.LN10
//çıktısı 2.302585092994046
Math.LOG2E
//çıktısı 1.4426950408889634
Math.LOG10E
//çıktısı 0.4342944819032518
---
Yöntemler
sqrt() : karekök, sqrt(x), x sayısının karekök değeri.
********.write(Math.sqrt(0)) //0
********.write(Math.sqrt(1)) //1
********.write(Math.sqrt(9)) //3
********.write(Math.sqrt(0.64)) //0.8
********.write(Math.sqrt(-9)) //NaN
log() : logaritma. log(x), x'in logaritması.
********.write(Math.log(2.7183)) //1.0000066849139877
********.write(Math.log(2)) //0.6931471805599453
********.write(Math.log(1)) //0
********.write(Math.log(0)) //-Infinity
********.write(Math.log(-1)) //NaN
pow() : power, pow(x,y) x^y, x üzeri y sayısının değeri.
********.write(Math.pow(0,0)) //1
********.write(Math.pow(0,1)) //0
********.write(Math.pow(1,1)) //1
********.write(Math.pow(1,10)) //1
********.write(Math.pow(2,3)) //8
********.write(Math.pow(-2,3)) //-8
********.write(Math.pow(2,4)) //16
********.write(Math.pow(-2,4)) //16
sinüs() :sinüs, sin(x) x sayısının sinüs değeri.
********.write(Math.sin(3)) //0.1411200080598672
********.write(Math.sin(-3)) //-0.1411200080598672
********.write(Math.sin(0)) //0
********.write(Math.sin(Math.PI)) //1.2246063538223772e-16
********.write(Math.sin(Math.PI/2)) //1
cos() : cosinüs, cos(x), x sayısının cosinüs değeri.
********.write(Math.cos(3)) //-0.9899924966004454
********.write(Math.cos(-3)) //-0.9899924966004454
********.write(Math.cos(0)) //1
********.write(Math.cos(Math.PI)) //-1
********.write(Math.cos(2 * Math.PI)) //1
tan() : tanjant, tan(x), x sayısının tanjant değeri.
********.write(Math.tan(0.50)) //0.5463024898437905
********.write(Math.tan(-0.50)) //-0.5463024898437905
********.write(Math.tan(5)) //-3.380515006246586
********.write(Math.tan(10)) //0.6483608274590866
********.write(Math.tan(-5)) //3.380515006246586
********.write(Math.tan(-10)) //-0.6483608274590866
asin() : arcsinüs, asin(x), x sayısının arcsinüs değeri
********.write(Math.asin(0.64)) //0.6944982656265559
********.write(Math.asin(0)) //0
********.write(Math.asin(-1)) //-1.5707963267948965
********.write(Math.asin(1)) //1.5707963267948965
********.write(Math.asin(2)) //NaN
acos() : arccosinüs, acos(x), x sayısının arccosinüs değeri.
********.write(Math.acos(0.64)) //0.8762980611683406
********.write(Math.acos(0)) //1.5707963267948965
********.write(Math.acos(-1)) //3.141592653589793
********.write(Math.acos(1)) //0
********.write(Math.acos(2)) //NaN
atan() : arctanjant, atan(x), x sayısının arctanjant değeri.
********.write(Math.atan(0.50)) //0.4636476090008061
********.write(Math.atan(-0.50)) //-0.4636476090008061
********.write(Math.atan(5)) //1.373400766945016
********.write(Math.atan(10)) //1.4711276743037347
********.write(Math.atan(-5)) //-1.373400766945016
********.write(Math.atan(-10)) //-1.4711276743037347
atan2() : arctanjant2, değeri bilinmeyen x ve y noktalarının açısını -PI ve PI radyanları (bkz. radian) arasında bir sayısal değer döndürür.
********.write(Math.atan2(0.50,0.50)) //0.7853981633974483
********.write(Math.atan2(-0.50,-0.50)) //-2.356194490192345
********.write(Math.atan2(5,5)) //0.7853981633974483
********.write(Math.atan2(10,20)) //0.4636476090008061
********.write(Math.atan2(-5,-5)) //-2.356194490192345
********.write(Math.atan2(-10,10)) //-0.7853981633974483
abs() : tamkısım, abs(x), x sayısının tamkısımını döndürür.
********.write(Math.abs(7.25)) //7.25
********.write(Math.abs(-7.25)) //7.25
********.write(Math.abs(7.25 - 10)) //2.75
********.write(Math.abs(0.102000)) //0.102
max() : büyük sayı, max(x,y), x ve y sayılarından büyük olanın değeri.
********.write(Math.max(5,7)) //7
********.write(Math.max(-3,5)) //5
********.write(Math.max(-3,-5)) //-3
********.write(Math.max(7.25,7.30)) //7.3
min() : küçük sayı, min(x,y), x ve y sayılarından küçük olanın değeri.
********.write(Math.min(5,7)) //5
********.write(Math.min(-3,5)) //-3
********.write(Math.min(-3,-5)) //-5
********.write(Math.min(7.25,7.30)) //7.25
ceil() : büyük tam sayı (yuvarlar), ceil(x), x sayısından büyük en yakın tamsayı değeri.
********.write(Math.ceil(0.60)) //1
********.write(Math.ceil(0.40)) //1
********.write(Math.ceil(5)) //5
********.write(Math.ceil(5.1)) //6
********.write(Math.ceil(-5.1)) //-5
********.write(Math.ceil(-5.9)) //-5
floor() : küçük tam sayı (yuvarlar), floor(x), x sayısından küçük en yakın tamsayı değeri.
********.write(Math.floor(0.60)) //0
********.write(Math.floor(0.40)) //0
********.write(Math.floor(5)) //5
********.write(Math.floor(5.1)) //5
********.write(Math.floor(-5.1)) //-6
********.write(Math.floor(-5.9)) //-6
round() : tam sayı, round(x), x sayısına en yakın tam sayı değeri.
********.write(Math.round(0.60)) //1
********.write(Math.round(0.50)) //1
********.write(Math.round(0.49)) //0
********.write(Math.round(-4.40)) //-4
********.write(Math.round(-4.60)) //-5
round() : rasgele sayı, her çalışmasında "0" ile "1" arasında rasgele bir sayı değeri verir.
********.write(Math.random()) //0.3578453.........
exp() : Math.E alakalı bişi, tam çözmüş değilim.
********.write(Math.E) //2.718281828459045
-
********.write(Math.exp(1)) //2.718281828459045
********.write(Math.exp(-1)) //0.36787944117144233
********.write(Math.exp(5)) //148.4131591025766
********.write(Math.exp(10)) //22026.465794806718
HTML DOM Nesneleri
* DOM nedir, ne işe yarar önce wikipedia'da yazılı olan şu yazıyı dikkatle okuyun, bu makale zaten uzun olacağından buraya yazmıyorum, neticede oradaki benim yazımdır. -->******** object Model.
* Biz web programcıları için en fazla önem arz eden konu bu olsa gerek. Zira HTML saylarımız üzerinde gerekli yerlere müdalelerimizi bu nesneler aracılığıyla yaparız. Hatta yeri gelir mesela PHP programlar yazarken PHP'den istediğiniz başarımı alamadığınız durumlarda JS'e bu eksik kısmı tamamlatırırız.
-Mesela bu betikte header işlevi sorun çıkardı diyelim.
if (isset($_POST[Sil])) {
mysql_query("DELETE FROM ".$Tablo." WHERE Id='".$_POST[Id]."'");
header ('********: ?Sayfa='.$_GET[Sayfa].'');
}
-İşte o zaman JS bize bir seçenek sunar.
if (isset($_POST[Sil])) {
mysql_query("DELETE FROM ".$Tablo." WHERE Id='".$_POST[Id]."'");
echo '********>********="?Sayfa='.$_GET[Sayfa].'";</script>';
}
Gördüğünüz gibi bu sorunumuzu çözecektir.
* HTML DOM JavaScript'e has bir kurum değildir. VBScript, Java gibi dillerde de kullanılabilir.
---
window Nesnesi
* JS yapısının en başında gelir ve kullanıcının tarayıcı penceresini simgeler.
- window Nesnesi Derlemeleri
* Genelde başlarına window nesnesi geçirilerek uygulamaya alınırlar.
frames[] : pencere içindeki tüm frame'leri belirtir.
********.write(window.frames.length) //mesela sayfa 3 adet frame varsa çıktısı 3 olur
- window Nesnesi Özellikleri
closed : bir pencerenin kapanıp kapanmadığı sorusuna true yada false sonucunu/değerini döndürür.
Burdaki kodları deneyerek sonucu görebilirsiniz. Örnek kod
defaultStatus : pencerenin durum çubuğuna (statusbar) denen kısmına belirlenen veriyi atar/yazar. Firefoxta çalışmaz.
window.defaultStatus = 'Pencerenin en altındaki yazı.';
length : pencere içindeki tüm frame'leri kurar/döndürür.
********.write(window.length) //çıktısı 0
name : pencere adı.
window.open('','Pencere','width=200,height=100') //Pencere adında bir pencere açar =)
opener : pencereyi açan pencere.
window.open('','Pencere','width=200,height=100') //Pencere adında bir pencere açtıktan sonra
opener.********.write('Ben Pencere adındaki pencereyi açan pencereyim') //kendi de kendi üzerine 'Ben Pencere adındaki pencereyi açan pencereyim' yazar
outerheight : pencere yüksekliğini döndürür/kurar (pixel cinsinden).
outerheight : pencere genişliğini döndürür/kurar (pixel cinsinden).
Ayrıntılı Örnekler
pageXOffset : sol köşeden itibaren X konumunu kurar/döndürür.
pageYOffset : sol köşeden itibaren Y konumunu kurar/döndürür.
Ayrıntılı Örnekler
parent : ana pencere (window nesnesini sonuna alır!).
parent.window.resizeTo(1024,768);
self : pencerenin kendisi.
window.self.close() //kendini kapat
top : en üstteki pencere.
if (window.top != window.self)
window.top.******** = 'framden_kurtar.php';
status : durum çubuğu iletisi.
window.status = 'durum çubuğu iletisi';
- window Nesnesi Yöntemleri
* Başlarına window nesnesi geçirilerek uygulamaya alınırlar.
alert() : 1. sayfa da yazmış olduğum Popup Kutuları kısmına bakın!
focus() : pencereye odaklanmayı sağlar.
window.focus()
blur() : pencereden odaklanmayı alır.
window.blur()
open() : pencere açar (popup penceresi). Değiştirge belirtilmişse onları temel alarak çalışır, değilse olağan bir pencere açar.
window.open('açılacaksayfa.php .htm .asp vs.', 'sayfaadı', 'değiştirgeler ....')
-keyfi değiştirgeler
width=pixel //genişliği
left=pixel //yüksekliği
top=pixel //yukarıdan uzaklığı
height=pixel //soldan uzaklığı
channelmode=yes|no yada 1|0
directories=yes|no yada 1|0
fullscreen=yes|no yada 1|0 //tam ekran
********=yes|no yada 1|0 //adres
menubar=yes|no yada 1|0 //menü
resizable=yes|no yada 1|0 //tekrar boyutlandırılabilir?
scrollbars=yes|no yada 1|0 //sürükleme çubuğu
status=yes|no yada 1|0 //durum çubuğu
titlebar=yes|no yada 1|0
toolbar=yes|no yada 1|0 //araç çubuğu
-sayfaadı yerine 1 yazılırsa tek popup açar.
-HTML'deki _self, _parent, _top, _blank komutlarını alabilir.
close() : pencereyi kapatır (pencere popup tarzı olursa kapatır).
window.close()
setInterval() : bir uygulamanın icrası için aralık kurar (belirler).
window.onload = function Q() {
alert('uyarı!');
}
var T = setInterval('Q()', 6000); //devam eder gider
clearInterval() : bir uygulamanın icrası için kurulan aralığı temizler.
window.onload = function Q() {
alert('uyarı!');
}
var T = setInterval('Q()', 6000);
clearInterval(T); //aralık temizlendiğine göre devam etmez
setTimeout() : bir uygulamanın icrasını belirlenen zamandan sonra gerçekleştirir.
window.onload = function Q() {
alert('uyarı!');
}
var T = setTimeout('Q()', 6000); //devam eder gider
setTimeout() : bir uygulamanın icrası için kurulan zamanı temizler.
window.onload = function Q() {
alert('uyarı!');
}
var T = setTimeout('Q()', 6000);
clearInterval(T); //zaman temizlendiğine göre devam etmez
confirm() : onaylama ister, aldığı cevaba göre davranır.
<a href= "sil.php?id=123" onClick="return confirm('Veriyi silcek misiniz?')">Sil</a>
createPopup() : Pop-up pencereleri görüntüler. IE'da çalışır. Firefox ve Opera'da çalışmaz.
Örnek //IE ile girin.
prompt() : 1. sayfa da yazmış olduğum Popup Kutuları kısmına bakın!
print() : sayfayı yazdırır.
window.print()
-Aşağıdaki haraketler pixsel cinsinde olur.
moveBy() : verilen değerlere göre pencerenin bulunduğu konumu temel alarak pencereyi hareket ettirir.
moveBy(10,10)
moveTo() : verilen değerlere göre pencereye hareket sağlar (pixel ölçüsünde).
moveTo(0,0)
resizeBy() : verilen değerlere göre pencerenin bulunduğu konumu temel alarak pencereyi yeniden boyutlandırır.
resizeBy(10,10)
resizeTo() : verilen değerlere göre pencereyi yeniden boyutlandırır.
resizeTo(550,350)
scrollBy() : verilen değerlere göre durum çubuğunu bulunduğu konumu temel alarak durum çubuğunu hareket ettirir.
scrollBy(10,10)
scrollTo() : verilen değerlere göre durum çubuğunu sürükler.
scrollTo(0,0)
******** Nesnesi
* Bir HTML belgesini simgeler ve bu belge içindeki tüm öğelere erişimi sağlar. Mesela ********.cookie ifadesiyle sayfanın çerezlerine erişilir.
Aynı zamanda window nesnesinin de bir bölümü olduğunu söyleyebiliriz.
- ******** Nesnesi Derlemleri (dizi olarak kabul edilebilir).
acnhors[] : sayfadaki tüm çapalar (<a> etiketine sahip tüm öğeler).
<a name="Birinci Çapa">Birinci Çapa</a>
<a name="İkinci Çapa">İkinci Çapa</a>
<a name="Üçüncü Çapa">Üçüncü Çapa</a>
********.write(********.anchors.length) //çıktısı 3
//veya
********.write(********.anchors[1].innerHTML) //çıktısı İkinci Çapa
forms[] : sayfadaki tüm formlar (<form> etiketine sahip tüm öğeler).
<form name="Form1"></form>
<form name="Form2"></form>
<form name="Form3"></form>
//********.write('Bu sayfada ' + ********.forms.length + ' adet form var.')
images[] : sayfadaki tüm resim bağlantıları (<img> etiketine sahip tüm öğeler).
<img src= "resim1.jpg"> <img src= "resim2.jpg">
********.write(********.images[1].src) //resim2.jpg
links[] : sayfadaki tüm köprüler (<a href= ""> etiketine sahip tüm öğeler).
<a href= "abc.php">
********.write(********.links[1].href) //abc.php
- ******** Nesnesi Özellikleri
cookie : belgenin çerezi (üç değer alır, name = ; expires = ; path = /)
Detaylı anlatıma buradan ulaşabilirsiniz.
domain : sitenin alan adını döndürür.
********.write(********.domain)
lastModified : belgenin son değiştirilme tarihini döndürür.
********.write(********.lastModified)
referrer : yüklenen belgenin URL'sini döndürür.
********.write(********.referrer)
title : yüklenen belgenin başlık içeriğini döndürür.
********.write(********.title)
URL : belgenin URL'sini döndürür.
********.write(********.URL)
- ******** Nesnesi Yöntemleri
write : belgeye yazar.
********.write('Merhaba!')
writeln : belgeye satır ile yazar.
********.writeln('Merhaba!')
open : veri akışı oluşturur veya yeni bir belge (sayfa) açar, yeni belgenin açılmasında değişge (parametre) kullanılmamış ise boş bir belge açar.
//text/html = MIME türü, replace = bellekteki önceki verinin üstüne yaz
var YeniBelge = ********.open("text/html","replace");
YeniBelge.write("<html><bOdy>Merhaba Afrika!</bOdy></html>");
YeniBelge.close();
Ajax uygulamalarında sıkça kullanılır.
MyXmlHttpRequest.open("GET", MyUrl, true) gibi.
close : veri akışını durdurur ve toplanan veriyi görüntüler.
var YeniBelge = ********.open("text/html","replace");
YeniBelge.write("<html><bOdy>Merhaba Afrika!</bOdy></html>");
YeniBelge.close();
********.getElementById : ********.getElementById('GelBeniBul') yani id'si GelBeniBul olan öğeyi döndür.
var Oge = ********.getElementById('GelBeniBul')
********.write(Oge.innerHTML) //Buldun beni =)
<div id="GelBeniBul">Buldun beni =)</div>
-hazır yeri gelmişken işimiz kolaylaştıracak her seferinde ********.getElementById('.....') yazmaktan kurtaracak kendimize ait bir işlev yazalım
function G(GelenOge) {
return ********.getElementById(GelenOge);
}
-şimdi de yukarıdaki örneği bu işlevimizle yazalım ve bize ne kadar kolaylık sağladığını görelim.
var Oge = G('GelBeniBul')
********.write(Oge.innerHTML) //Buldun beni =)
<div id="GelBeniBul">Buldun beni =)</div>
********.getElementsByName : ********.getElementsByName('Alanlar'), name'i ad(lar)ı Alanlar olan öğeyi (öğeleri) döndür.
function OgeBul() {
var X = ********.getElementsByName("Alanlar");
alert(X.length);
}
<input name="Alanlar"><br>
<input name="Alanlar"><br>
<input name="Alanlar"><br>
<input type="button" onclick="OgeBul()" value="kaç adet Alanlar var?">
********.getElementsByTagName : ********.getElementsByTagName('INPUT'), etiket cinsi INPUT olan öğeyi (öğeleri) döndür.
//tüm INPUT cinsi öğeleri döndür
********.getElementsByTagName('INPUT')
//yada INPUT cinsinin CHECKBOX öğelerini döndür
********.getElementsByTagName('INPUT','CHECKBOX')
history Nesnesi
* Sayfanın gezinti geçmişini döndürür. HTML DOM nesnesi değildir, tamamen JS nesnesidir. JS bir tarayıcı bir belgeyi (sayfayı) açınca geçmişi tutmaya başlar ve istendiği zaman tuttuğu veriyi kullanıma sunar.
* window.history... şeklinde yada history... şeklinde kullanılabilir.
* Taratıcılarda bulunan "İleri - Geri" özelliğinin aynı şeklinde çalışır.
- history Nesnesi Özellikleri
length : geçmiş sayfaların uzunluğunu verir.
********.write(hitory.length)
- history Nesnesi Yöntemleri
back() : geçmiş belgeyi döndürür (1 geri gider), geçmişte bir belge bulamaz ise null sonucunu döndürür yani hiç bir sayfayı döndürmez.
<a href= "javascript:history.back()">Geri git</a>
forward() : gelecek belgeyi döndürür (1 ileri gider), gelecekte bir belge bulamaz ise null sonucunu döndürür yani hiç bir sayfayı döndürmez.
<a href= "javascript:history.forward()">İleri git</a>
go() : belirtilen belgeyi döndürür, belirtilen bir belgeyi bulamaz ise null sonucunu döndürür yani hiç bir sayfayı döndürmez.
<a href= "javascript:history.go(-1)">Bir geri git</a>
<a href= "javascript:history.go(-2)">İki geri git</a>
******** Nesnesi
* Belgenin URL bilgilerini döndürür. HTML DOM nesnesi değildir, tamamen JS nesnesidir. JS bir tarayıcı bir belgeyi açınca belgeye ait URL bilgisi tutmaya başlar ve istendiği zaman tuttuğu veriyi kullanıma sunar.
* window.********... şeklinde yada ********... şeklinde kullanılabilir.
- ******** Nesnesi Özellikleri
hash : URL'nin # işaretinden sonrasını kurar/döndürür.
https://tik.lat/yxSfy
********.write(********.hash) //#yol1
host : URL'nin host adını ve port numarasını kurar/döndürür.
https://tik.lat/bODly
********.write(********.host) //www.adres.com
hostname : URL'nin host adını kurar/döndürür.
https://tik.lat/1u2jF
********.write(********.host) //www.adres.com
href : tüm URL'yi kurar/döndürür.
https://tik.lat/fw7jl
********.write(********.href) //http://www.adres.com/dizin/abc.php
pathname : URL'nin host adından sonrasını kurar/döndürür.
https://tik.lat/jA41q
********.write(********.pathname) ///dizin/abc.php
port : URL'nin port numarasını döndürür (port numarası 80 ise belirsiz kalır).
ftp://www.adres.com [url]https://tik.lat/oyDCc
********.write(********.search) //?cat=123
- ******** Nesnesi Yöntemleri
assign() : yeni belge açar.
********.assign('yenibelge.php')
reload() : belgeyi yeniler.
********.reload()
replace() : açık olan belge yerine yeni bir belge açar.
********.replace('yenibelge.php')
navigator Nesnesi
* Tarayıcı bilgilerini döndürür. HTML DOM nesnesi değildir, tamamen JS nesnesidir. JS bir tarayıcı bir belgeyi açınca tarayıcıya ait bilgileri tutmaya başlar ve istendiği zaman tuttuğu veriyi kullanıma sunar.
- navigator Nesnesi Derlemleri (dizi olarak kabul edilebilir.)
plugins[] : tarayıcı eklentilerinin döndürür.
if (navigator.plugins['Shockwave Flash'])
********.write('Tarayıcıda Flash kurulu')
else
********.write('Tarayıcıda Flash kurulu değil')
- navigator Nesnesi Özellikleri
appCodeName : tarayıcı kod ismini döndürür.
********.write(navigator.appCodeName)
appMinorVersion : tarayıcı ikincil uyarlamasını (versiyon) döndürür (FF ve Opera'da çalışmaz).
********.write(navigator.appMinorVersion)
appName : tarayıcı adını döndürür.
********.write(navigator.appName)
appVersion : tarayıcı uygulama ve uyarlamasını döndürür.
********.write(navigator.appVersion)
browserLanguage : tarayıcı dilini döndürür (FF'da çalışmaz).
********.write(navigator.browserLanguage)
cookieEnabled : tarayıcıda çerez kabulünün açık olup olmadığını döndürür (true yada false sonuç verir).
********.write(navigator.cookieEnabled)
cpuClass : tarayıcı sisteminin CPU sınıfını döndürür (FF ve Opera'da çalışmaz).
********.write(navigator.cpuClass)
onLine : tarayıcının çevrimdışı/çevrimiçi çalışıp çalışmadığını döndürür (true yada false sonuç verir, Opera'da çalışmaz).
********.write(navigator.onLine)
platform : tarayıcı işletim sistemini döndürür.
********.write(navigator.platform)
systemLanguage : tarayıcı işletim sisteminin dilini döndürür (FF ve Opera'da çalışmaz).
********.write(navigator.systemLanguage)
userAgent : tarayıcıya ait tüm bilgileri döndürür.
********.write(navigator.userAgent)
userLanguage : tarayıcı işletim sisteminin dilini döndürür (FF'da çalışmaz).
********.write(navigator.userLanguage)
- navigator Nesnesi Yöntemleri
javaEnabled() : tarayıcıda Java eklentisinin açık olup olmadığını döndürür (true yada false sonuç verir).
********.write(navigator.javaEnabled())
taintEnabled() : tarayıcıda veri bozulmasının açık olup olmadığını döndürür (true yada false sonuç verir).
********.write(navigator.taintEnabled())
screen Nesnesi
* Ekran bilgilerini döndürür. HTML DOM nesnesi değildir, tamamen JS nesnesidir. JS kullanılmaya başladığında kullanıcı ekranına ait bilgileri tutmaya başlar ve istendiği zaman tuttuğu veriyi kullanıma sunar.
- screen Nesnesi Özellikleri
availHeight : tarayıcının yerleşebileceği yüksekliği döndürür (görev çubuğunu dikkate alır).
availWidth : tarayıcının yerleşebileceği genişliği döndürür (görev çubuğunu dikkate alır).
height : ekran yüksekliğini (çözünürlüğünü) döndürür.
width : ekran genişliğini (çözünürlüğünü) döndürür.
colorDepth : ekranın renk kalitesini pixel cinsinden döndürür.
pixelDepth : ekranın renk çözünürlüğünü pixel cinsinden döndürür (IE'da çalışmaz).
IE'da çalışmayan ve bana göre gereksiz olan bir kaç özelliği buraya aktarmadım, istenirse burdan açıklamalarına ve buradan'dan da emsallemerine ulaşılabilir.
Böylece temel anlamda sıfırdan başlayıp sonuna kadar JavaScript dilini bir anlamda ele almış olduk, fakat unutmayın ki JavaScript geniş bir dildir ve çok fazla alanda çeşitli yöntemler kullanılarak programlar yazılabilir.
Mesela C:\\********s and Settings\\user\\Application Data\\Mozilla\\Firefox\\Profiles klasörüne baktığınızda Firefox için ne kadar önemli olduğunu göreceksiniz.
Tüm makaleyi indirmek için aşağıdaki bağlantıları kullanabilirsiniz (Bağlantılarda sorun olursa buraya yazmayın, bana PM ile bildirin lütfen).
DOC (MS Word) formatında (JavsScript(Manual)):
köprü 1
köprü 2
MHT (Zengin HTML) formatında (JavsScript(Manual)-(mht)):
köprü 1
köprü 2
ÇOK UĞRAŞTIM Bİ ++REPİ ÇOK GÖRMEYİN
Kısmet olursa sonuna dek, ta ki nesne yönelimlerine kadar kullanımlara haiz olana dek burada derslerimiz devam edecektir. Yani a’dan z’ye her konuya temas edeceğiz. Aşağıda yazan notu lütfen dikkate alınız!
NOT: Bu konu altına ben haricinde kimsenin ileti yazmaması rica olunur. Aksi halde bölüm yönetici tarafından silinecektir. Sorulmak istenen sorular PM vasıtasıyla tarafıma iletilebilir. Teşekkürler..
---
“Netscape Navigator 2.0 ile birlikte geliştirilen JavaScript dili başlangıçta sadece istemci taraflı (client-side) yorumlanan (interpreted) bir dildir. Aralık 1995 tarihinde, C dilinin tarayıcılara uyarlanmış hali diyebileceğimiz JavaScript piyasaya sürüldü. Web sayfalarında dinamik içerik sağlamak ya da kullanıcıyla iletişim kurmak için kullanılmaktadır.
Ad benzerliğine rağmen ’Java’ ile ilişkili değildir. Yaygın yanlışlardan biri JavaScript’in basitleştirilmiş Java olarak tanımlanmasıdır.
Başlangıçta sadece Netscape tarayıcıları üstünde çalışan JavaScript artık tüm yaygın ağ taraycıları tarafından desteklenmekte. Microsoft JavaScript’e benzer bir dil olan JScript’i geliştirdi. Microsoft Internet Explorer her iki dili de desteklerken standart olmayan JScript eklentileri diğer tarayıcılar üstünde çalışmamaktadır.”
Buraya kadar olan kısım wikipedia’dan alıntıdır, yazılması elzem olmamasına karşın neyle uğraştığımızın bilinmesi açısından faydalı olabilir.
Öncelikle temin etmeniz gerekenler;
Firefox Web Taracısı --> indir (HTML ve JS gösterimde web standartlarını uygular, fire verme ihtimali çok düşüktür)
Firebug Firefox eklentisi --> indir (JS’i çalıştırdığınız zaman detaylı bilgi alabilirsiniz, hata durumlarında hata ayrıntıları sayesinde hatayı gidermeniz kolaylaşır)
Bunun yanı sıra temel anlamda HTML / XHTML bilgisine sahip olmanız sizin için bir + olacaktır.
---
* JavaScript HTML arasına gömülerek yazılır. ********> etiketi kullanılarak kodlama başlatılır ve </script> etiketi ile de betiğin sonlandığı belirtilir.
* ******** type=”text/javascript”> veya ******** language=”javascript”> gibi uzun ifadelere genelde ihtiyaç duyulmaz ama kendi araştırmalarımda rastladığım odur ki, betik kodlamaları google, youtube, flikers, last.fm, yahoo gibi sitelerde ******** type=”text/javascript”> şeklinde başlatılmıştır. Fakat ********></script> şeklinde kullanımında da kodumuz çalışacaktır.
Örnek:
******** type= text/javascript >
********.write( Hello Africa! );
</script>
* Arzu edilirse eski sürüm tarayıcıları JavaScript’i desteklemiyor olmasından dolayı zarar görmesin diye koruma altına alabiliriz. Yalnız bunun son zamanlar pek hükmü kalmamıştır.
Örnek:
******** type=”text/javascript”>
<!--
********.write( Hello Africa! );
//-->
********>
* ********.write standart bir JS uyglamasıdır ve kendisine yüklenen değiştirge(parametre)’ler, yukarıdaki her iki kodun çıktısı da “Hello Africa!” şeklinde olacaktır.
* İfadeleri noktalı virgülle (
********.write( Hello Africa! );
ile
********.write( Hello Africa! )
arasında hiçbir fark yoktur. İkisi de aynı çıktıyı verir. “Hello Afrika!”
* // işaretleri yorum yapılan tek satırlarda kullanılır, çoklu yorum satırlarında /**/ kullanılır. Fakat /**/ sadece çoklu yorum satırlarına mahsus değildir, tek satırda da kullanılabilir.
******** type=”text/javascript”>
/* birinci satır
ikinci satır
üçüncü satır */
********.write( Hello Africa! );
/*tekli yorum satırı*/
//tekli yorum satırı
********>
* <head></head> etiketi arasına yazılan JS çağrıldığı zaman çalışır.
* <bOdy></bOdy> etiketi arasına yazılan JS sayfa yüknenince çalışır.
* Her iki etiket arasına istediğiniz kadar kod öbeği yazabilirsiniz fakat harici JS dosyalarını kullanmanız HTML kodlamada sayfanıza daha sade bir görünüm kazandıracak ve hata yapma ihtimalinizi daha aza indirgeyecektir. Bu harici dosyaları da <head> yada <bOdy> arasında kullanabilirsiniz.
Örnek;
<html>
<head>
******** src= "> ******** type="text/javascript">
....
</script>
</head>
<bOdy>
******** src= "> ******** type="text/javascript">
....
</script>
</bOdy>
* w3school'da bahsi atlanmış bir konuyuda belirtmek isterim ki;
JS kodlarını HTML nesnelerine de doğrudan yüklenebilir.
<a href= "sil.php?id=319" onClick="return confirm('Veriyi silmek istiyor musunuz?')">Sil</a>
Fakat bunu çoklu kullanımlarda pek tavsiye etmiyorum zira önceden bir betik öbeğinde bir function yazarak bunu HTML nesnelerinde onClick="return Onay()" şeklinde yazmak sayfamızı daha sade yapacak ve yüklenme esnasında kolaylık sağlayacaktır.
---
Örnek;
Yukarıda ki örnek güvenlik sebebiyle forum tarafından tekrar biçimlendirildiğinden düzgün görüntülenmedi, tekrar biraz değiştirerek yazıyorum.
<html>
<head>
******** src=`harici.js`></script>
******** type=`text/javascript`>
//kodlar
</script>
</head>
<bOdy>
******** src=`harici.js`></script>
******** type=`text/javascript`>
//kodlar
</script>
</bOdy>
Değişkenler
* Değişkenler veri depolama - taşıma işlemlerini üstüne alan nesnelerdir. JS'de var ifadesiyle tanımlanır (var İngilizce'deki variable kelimesinin kısaltılmışıdır.).
Örnek;
var Deg = 'Merhaba, ben Deg. Görevim bu tırnaklar arasındaki yazıyı değer olarak taşımaktır.';
********.write(Deg);
* JS büyük-küçük harfe duyarlı bir dildir (Case-Sensitive), yani Deg değişkeni ile DEG değişkeni farklı değişkenlerdir. Bu yüzden değişkenleri tanımlarken dikkatli olmak gerekir!
* Herhangi bir işlev (function) içinde tanımlanmış olan bir değişken sadece o işlevin elemanıdır ve başka işlev tarafından kullanılamaz, bu da aynı isimde ama farklı işlevler içinde değişkenler tanımlamanıza imkan sağlar.
Tüm işlevler tarafından tanınmasını istediğimiz değişkenleri işlevlerin öncesine yazmak gerekir. Bunlara genel değişkenler diyebiliriz ve var ifadesine ihtiyac duymazlar.
Örnek;
GenelDeg = 'Ben genel bir değişkenim ve tüm işlevler tarafından kullanılabilirim.<br>';
function Islev1() {
var Deg = 'Ben Islev1 adlı işlevin değişkeniyim<br>';
********.write(GenelDeg);
********.write(Deg);
}
function Islev2() {
var Deg = 'Ben Islev2 adlı işlevin değişkeniyim<br>';
********.write(GenelDeg);
********.write(Deg);
}
//işlevlerimizi çağırıp çalıştıralım
Islev1();
Islev2();
* Değişken tanımlamasında tek tırnak ' yada çift tırnak " kullanmak pek fazla bir fark arz etmez. (Ben kodlarımın byte hesabını bile yaptığımdan genelde tek tırnak kullanırım). Tek dikkat edilmesi gereken değişken değeri içinde tırnak kullanılacaksa bunu ters taksim \\ işareti ile savmanız gerekir, aksi halde betiğiniz hata verecektir.
Örnek;
//yanlış
var Deg = 'Ramazan'ı Şerif';
//doğru
var Deg = 'Ramazan\\'ı Şerif';
var Deg = "Ramazan'ı Şerif";
* Bir değişkene bir başka değişkenleri atamak mümkündür.
Örnek;
var Deg1 = 'Ramazan\\'ı Şerif';
var Deg2 = 'iniz mübarek olsun.';
var Deg3 = Deg1 + Deg2;
********.write(Deg3);
Ama değişken tanımlamalarında
var Deg1 = '1';
var Deg2 = '2';
var Deg3 = Deg1 + Deg2;
********.write(Deg3);
ile
var Deg1 = 1;
var Deg2 = 2;
var Deg3 = Deg1 + Deg2;
********.write(Deg3);
farklı sonuçlar verecektir, ilerde STRING'leri gördükten sonra daha anlaşılır olacaktır bu kısım.
İşlemciler
Hesap İşlemcileri
+ : Toplama
x = 2;
y = 1;
********.write(x + y)
//çıktısı 3
- : Çıkarma
x = 2;
y = 1;
********.write(x - y)
//çıktısı 1
* : Çarpma
x = 2;
y = 1;
********.write(x * y)
//çıktısı 2
/ : Bölme
x = 2;
y = 1;
********.write(x / y)
//çıktısı 2
% : Yüzde
x = 2;
y = 1;
********.write(x % y)
//2'nin 1'e bölünmesinden kalanı --> çıktısı 0
---
Atama İşlemcileri
=
x = y anlamı x = y
+
x += y anlamı x = x + y
-
x -= y anlamı x = x - y
*
x *= y anlamı x = x * y
/
x /= y anlamı x = x / y
%
x %= y anlamı x = x % y
---
Karşılaştırma İşlemcileri
= : Eşittir
3 == 5 //yanlış
% : Eşittir (tip olarak da yoklamasını yapar)
x = 3;
y = '3';
x == y; //doğru
x === y; //yanlış
!= : Eşit değildir
3 != 5 //doğru
< : Küçüktür
3 < 5 //doğru
> : Büyüktür
3 > 5 //yanlış
<= : Küçüktür ve/veya eşittir
3 <= 5 //doğru
>= : Büyüktür ve/veya eşittir
3 >= 5 //yanlış
---
Mantıksal İşlemciler
&& : Ve
|| : Yada
! : Değil (Yok)
---
String İşlemcisi
* Değişkenleri bir birine eklemek için kullanılır.
x = 'Merhaba';
y = 'Afrika!';
q = x + y;
//çıktısı MerhabaAfrika!
//veya araya boşluk koyacaksak
q = x +' '+ y;
//çıktısı Merhaba Afrika!
---
Şartlı İşlemciler ( ? ve : )
* if ve else kullanmak istemediğiniz zamanlarda çok kullanışlı olan bu işlemcileri aşağıdaki gibi kullanabilirsiniz. a'nın değerini değiştirince alacağınız cevapta farklı olacaktır.
var a = 1;
var b = (a == 1) ? 'doğru' : 'yanlış';
********.write(b);
Eğer parantez içindeki şart doğruysa soru işaretinden (?) sonraki tırnak işaretinin içeriği b'nin değerine atanacaktır, eğer parantez içindeki şart yanlışsa iki nokta (
Özel Yazı İşaretleri
* Özel yazı işaretlerinin JS tarafından anlaşılabilmesi için ters taksim (backslash) dediğimiz işaretin kullanılması gerekir.
' --> tek tırnak (single quote)
" --> çift tırnak (double quote)
& --> ile ifadesi (ampersand)
--> ters taksim (backslash)
n --> (new line)
r --> satır başına dön (carriage return)
t --> Tab tuşunun HTML içinde bıraktığı boş alan (tab)
* Not: satır atlamak işaretiyle örneğin alert işlevi ile açılan uyarı penceresinde mümkün olabilir, fakat HTML'de <br> etiketini kullanmak gerekir.
Şart İfadeleri (if, else, if ... else if)
* Bu ifadeler şartların değişme durumuna bağlı olarak betiğe farklı işler yaptırma amacıyla kullanılır.
var Bugun = 'Bugünü bilen bir değişken';
if (Bugun == 'Pazartesi')
********.write('Bugün haftanın ilk günüdür.')
else
********.write('Bugün haftanın ilk günü değildir.')
* Eğer if veya else'den sonra bir satırdan fazla kod yazılacaksa bu öbekleme olur ki {} işaretleri içine yazmanız gerekir. Süslü parantez bulunmadığı zaman betik if / else'den sonraki ilk satıra göre çalışmasına devam edecektir.
var Bugun = 'Bugünü bilen bir değişken';
if (Bugun == 'Pazartesi') {
********.write('Bugün haftanın ilk günüdür.')
********.******** = 'pazartesi.php';
} else {
********.write('Bugün haftanın ilk günü değildir.')
********.******** = 'nereye gitmek isteniyorsa...';
}
* if ... else if ... else
var Bugun = 'Bugünü bilen bir değişken';
if (Bugun == 'Pazartesi') {
********.write('Bugün haftanın ilk günüdür.')
********.******** = 'pazartesi.php';
} else if (Bugun == 'Salı') {
********.write('Bugün haftanın ikinci günüdür.')
********.******** = sali.php';
} else {
********.write('Bugün haftanın diğer günlerinden biridir.')
********.******** = 'nereye gitmek isteniyorsa
Switch
* Switch mantığı da aynen if şartlandırmasındaki gibidir. Eğer case şart koşulan değeri yakalarsa break switch'i durduracaktır.
var Deg = 5;
switch (Deg) {
case 5:
********.write('Değerimiz 5')
break;
case 6:
********.write('Değerimiz 6')
break;
case 0:
********.write('Değerimiz 0')
break;
default:
********.write('Deg değişkenin değeri değiştikçe betiğin yazacağı değerde değişir')
}
Popup Kutuları
alert() : Uyarı Kutusu
alert('Uyarı iletisi.');
veya
var Deg = 'Uyarı iletisi.';
alert(Deg);
* CW'da profil güncelleme sayfasının en altındaki kırmızı alanda bulunan şifre kısmını boş bırakıldığında uyarı vermek için kullanılıyor.
---
confirm() : Onay Kutusu
confirm('Onay iletisi.');
veya
var Deg = 'Onay iletisi.';
confirm(Deg);
* CW'da bu script ile PM sayfasında iletilerin silinmesi için onay isteniyor.
""Seçilen mesaj(lar)ı silmek istediğinizden emin misiniz?" Onay iletisidir.
return ifadesiyle kullanılır.
return confirm('Veriyi silmek istiyor musunuz?')
---
prompt() : İstem Kutusu
prompt('İstem iletisi.', 'Varsayılan değer');
İşlevler (function)
* JS'de kendi işlevlerimizi oluşturup bunları istediğimiz şekilde kullanabiliriz.
- İşlev isimleri ancak alt çizgi (_) veya harflerle başlayabilir ve devamında rakam alabilir.
- İşlev isimlerinde alert, go, focus gibi JS bünyesinde bulunan hazır işlev adlarını kullanmak betiklerinizde hatalara yol açabilir!
//1. ve en yaygın olan yazım şekli
function Islev1() {
var Deg = "Islev1'in değişkeni";
alert(Deg);
}
//2. yazım
Islev1 = function () {
var Deg = "Islev1'in değişkeni";
alert(Deg);
}
//çağırma
<input type="button" value="İşlevi çağır" onclick="Islev1()">
* İşlevler durağan komutlar olduğundan bazen sayfa yüklenmesiyle veya bunun gibi herhangi bir müdahele olmadan çalışmasını istediğimiz durumlarda aşağıdaki yazımları kullanırız.
//1. yazım
window.onload = function() {
var Deg = "Islev1'in değişkeni";
alert(Deg);
}
//2. yazım
function Islev1() {
var Deg = "Islev1'in değişkeni";
alert(Deg);
}
window.onload = Islev1(); //Islev1 şeklinde de yazılabilir
* İşlevlerimiz bağımsız değişkenlere (argument) de tabi olarak çalıştırılabilir ve bir işlev birden fazla bağımsız değişken alabilir.
function Islev(Ileti) {
alert(Ileti)
}
<input type="button" value="1. ileti!" onclick="Islev('1. (değişken) ileti!')">
<input type="button" value="2. ileti!" onclick="Islev('2. (değişken) ileti!')">
* İşlevler sayısal sonuçlar elde etmek amacıyla da kullanılabilir.
function Carp(Deg1, Deg2) {
Sonuc = Deg1 * Deg2;
return Sonuc;
}
<input type="button" value="Çarp" onclick="alert(Carp(2, 2))">
Döngüler
* Döngüler belirtilen şart yerine gelinceye yada belirlenen sayı tamamlanıncaya dek betiğin çalışması için kullanılır.
* for belirlenen sayıya kadar ulaşıncaya kadar döner.
* while bellirlenen şart gerçekleşene kadar döner.
-Araçlar : (++ ->değeri bir artırır, -- ->değeri bir eksiltir)
for
* Belirlenen sayıyı buluncaya kadar döner.
-Bu kod i değişkeni 5'ten küçük olduğu halde 4'ü buluncaya kadar dönecektir.
for (i = 0; i < 5; i++) {
********.write(i + '<br>');
}
---
for ... in
* for in ifadesi dizi elemanlarının yinelemeleri (iteration) için kullanılır.
-Bu kod dizi içindeki elemanları teker teker alıp sırasıyla yazdıracaktır.
var Dizi = new Array();
Dizi[0]= 'Deg1';
Dizi[1]= 'Deg2';
Dizi[2]= 'Deg3';
for (var Yaz in Dizi) {
********.write([Yaz] + '<br>');
}
---
while
* Belirlenen şart yerine gelinceye dek döner.
-Bu kod i değişkeni 5'ten küçük olduğu halde 4'ü buluncaya kadar dönecektir.
var i = 1;
while (i < 5) {
********.write(i + '<br>');
i = i + 1; //i'yi bir artırarak devam et, i++ şeklinde de yazılabilir
}
---
do ... while
* Belirlenen şart yerine gelinceye dek döner. Kullanımı while ile hemen hemen aynıdır.
-Bu kod i değişkeni 5'ten küçük olduğu halde 4'ü buluncaya kadar dönecektir.
var i = 1;
do {
********.write(i + '<br>');
i = i + 1; //i'yi bir artırarak devam et, i++ şeklinde de yazılabilir
}
while (i < 5)
---
* Döngüleri durdurmak ve devam ettirmek için ayrıca iki ifade vardır.
break
* Belirli bir şart vuku bulduğunda break döngüyü durdurur.
-Bu kodda döngü i’nin değerini 3 yaptığında döngü duracaktır.
for (i = 1; i < 5; i++) {
if (i == 3) {break};
********.write(i);
}
continue
* break'ın durdurduğu döngüyü devam ettirir.
-Bu kodda herhangi bir iş yapmaz, çünkü duran bir döngü yoktur.
for (i = 1; i < 5; i++) {
if (i == 3) {continue};
********.write(i);
}
Olaylar (Events)
* Olaylar JS tarafından anlaşılabilen sayfa kıpraşımları =) yada hareketleridir diyebiliriz. Sayfanın yüklenmesi, bir butona tıklanması, bir formun yollanılması gibi şeylerde sayfa üzerinde gerçekleşen olaylardır.
Mesela bir onClick olayını kullanarak
<input type="button" onClick="alert('Amanın!')"> gibi bir kod yazabiliriz.
- onabort = resim dosyasının yüklenmesinin yarıda kesilmesi olayı
- onblur = bir nesnenin odaklamasının kaybolması, onfocus'un tersi
- onchange = bir alanın içeriğinin değiştirilmesi
- onclick = fare ile bir nesneye tıklama
- ondblclick = fare ile bir nesneye iki kez tıklama
- onerror = bir belge veya görüntü dosyasının yüklenme hatası
- onfocus = bir nesne odaklamayı alması, onblur'un tersi
- onkeydown = bir klavye tuşuna basılması
- onkeypress = bir klavye tuşuna basılması veya tuşun basılı tutulması
- onkeyup = bir klavye tuşunun serbest bırakılması
- onload = bir belge veya görüntü dosyasının yüklenmesinin tamamlanması
- onmousedown = bir fare tuşunun tıklanması
- onmousemove = farenin oynatılması
- onmouseout = farenin bir nesne üzerinden çekilmesi
- onmouseover = farenin bir nesne üzerine getirilmesi
- onmouseup = bir fare tuşunun serbest bırakılması
- onreset = sıfırlama (reset) düğmesinin tıklanması
- onresize = bir pencere (window) veya çerçeve (frame) nin yeniden boyutlanmasın
- onselect = sayfadaki bir yazının seçilmesi
- onsubmit = yollama (submit) düğmesinin tıklanması
- onunload = kullanıcın sayfayı kapatması/çıkması
with
* with ifadesi JS'in yazılımda sağladığı kolaylıklardan bir tanesidir. with ile mesela boş alan denetimi yapmak istediğimiz bir form adını sürekli şarlandırma öbeği içine yazmak zorunda kalmayız.
-Bu fuzuli yere kod yazılan örnek
function FormDenetim(Form) {
if (!Form.Ad) {
alert('Lütfen Ad kısmını doldurun!');
return false;
} else if (!Form.EPosta) {
alert('Lütfen E-Posta kısmını doldurun!');
return false;
} else if (!Form.Aciklama) {
alert('Lütfen Açıklama kısmını doldurun');
return false;
} else {
return true;
}
}
-Bu ise with kullanılarak gereksiz yazımların olmadığı örnek
function FormDenetim(Form) {
with (Form) {
if (!Ad) {
alert('Lütfen Ad kısmını doldurun!');
return false;
} else if (!EPosta) {
alert('Lütfen E-Posta kısmını doldurun!');
return false;
} else if (!Aciklama) {
alert('Lütfen Açıklama kısmını doldurun');
return false;
} else {
return true;
}
}
}
! işareti ile yok(mu?) şartını koyarak doldurulması gereken alanların denetimi gerçekleştiriyoruz, with ifadesini kullanarak betiğimizi byte değeri daha düşük, daha okunaklı, sade ve tabi ki hata ihtimali daha az olacak şekle sokuyoruz.
try ... catch
* İstisna yönetimidir. Hata denetimi yapmanızı ve hata durumunda başka bir uygulamaya geçebilmenizi sağlar.
try {
//buraya yapılasını istediğiniz uygulamayı yazarsınız
}
ola ki bir hata meydana gelirse catch devreye girer ve kendi bünyesi içindeki kodu uygulamaya koyar.
catch (e) {
//yedekteki yazım buraya geçirilir
}
- Mesela bir sayfamız var ve bu sayfaya erişildiği zaman ziyaretçinin başka sayfa yönlendirilmesini istiyoruz. (o zaman sayfa yüklenince deyimini yani window.onload kullanacağız)
- Sayfa yüklenince betik try ile index2.htm sayfasına gitmek isteyecektir, şu halde try kısmı çalışır.
- Fakat ********.replace ifadesi bozuk yazılırsa (********.replaces gibi) catch hatayı yakalayacak ve kendi bünyesindeki yazımı çalıştıracaktır.
window.onload = function() {
try {
********.replace('index2.htm');
}
catch (e) {
********.write('Yönlendirmede hata meydana geldi, <a href=index2.htm>Burayı tıklayarak sayfaya ulaşabilirsiniz</a>');
}
}
* try ... catch yapılarına kendi yazdığımız işlevleri de geçirebiliriz.
* Soru : catch içindeki e ne işe yarar?
* Cevap : Bu hatanın tanımlanmasıdır, yani bir hata yakalarsan adını e koy demektir. e a'da olabilir HaciKilinc'ta olabilir. Sadece yazılımlarda bazı kolaylamalara gitmek durumunda olduğumuzdan bu tür kısa deyimleri kullanırız.
* try bir komutu yerine getiremedi diye catch ile illa başka bir komut uygulamak zorunda değilizdir, catch içini boş bırakarak betiği durdurabiliriz.
try {
//birşey yampaya çalış
}
catch (e) {
//hata olursa hiç birşey yapma
}
---
throw
* İstisna yönetimi aracıdır (öyle olmazsa böyle yap, böyle de olmazsa şöyle yap gibi).
var x = prompt('1 ile 10 arasında bir rakam girin.', '')
try {
if(x > 10)
throw 'Hata 1';
else if(x < 0)
throw 'Hata 2';
else if(isNaN(x))
throw 'Hata 3';
}
catch(e) {
if(e == 'Hata 1')
alert('Girdiğiniz sayı 10 dan büyük olamaz!');
if(e == 'Hata 2')
alert('Girdiğiniz sayı 0 dan küçük olamaz!');
if(e == 'Hata 3')
alert('Rakam girmeniz gerekir!');
}
onerror
* try ... catch ifadesiyle bu denetimi yapabiliyorken onerror olayı aracılığıyla da hata denetimi yapılabilmektedir. Bu eski JS standardıdır.
* Bu kullanım için öncelikle hataları kullanacak olan bir işlev oluşturmamız gerekir. Daha sonradan hata meydana gelmesi halinde onerror olayı işlevimize çalışması için komut gönderecek ve işlev görevini icra edecektir.
onerror = HataGoster;
function HataGoster(Hata, Konum, Satir) {
var Ileti;
Ileti = 'Görüntülemekte olan sayfada hata oluştu. Ayrıntılar aşağıdaki gibidir.nn'
Ileti += 'Hata: ' + Hata + 'n';
Ileti += 'Konum: ' + Konum + 'n';
Ileti += 'Satır: ' + Satir;
alert(Ileti)
return true
}
function Deneme() {
//Hello adında bir işlev olmadığından hata oluşacak
Hello('Hello Afrika!');
}
Hatırlatmalar
* JS küçük büyük harfe duyarlıdır, işlev ve değişken adlarını tanımlarken buna dikkat etmek gerekir. Degisken ile DEGISKEN aynı değildir.
* JS yazımdaki boşlukları dikkate almaz, yani;
var Deg='Değer1';
var Deg = 'Değer1'; aralarında fark yoktur. Yazımı daha okunaklı hale getirmek için boşukları kullanabilirsiniz.
* String türündeki bir bir yazımda string içinde kalmak şartıyla satır atlayabilirsiniz.
********.write('Hello
Africa!')
Fakat
********.write
('Hello Africa!') şeklinde bir kullanım söz konusu olamaz
Nesneler (Object)
* JS nesne yönelimli bir dildir buda bize kendi nesnelerimiz tanımlamamıza, veri türlerini belirlememize imkan sağlar. Kendi nesnelerimi oluşturmayı kısmet olur olursa ilerde göreceğiz. Şimdi Js bünyesindeki nesnelerle devam ediyoruz.
* Nesneler sadece bir özel veri tipidir. Kendilerine ait özellik veri yönemleri vardır.
Özellikler
Örnek String nesnesinin length özelliğini kullanıyoruz.
var Deg = 'Hello Afrika!';
********.write(Deg.length);
//çıktısı 13
Yöntem
Örnekte String nesnesine toUpperCase() yöndetimini kullanıyoruz.
var Deg = 'Hello Afrika!';
********.write(Deg.toUpperCase());
//çıktısı HELLO AFRICA!
---
String Nesneleri
* Çok yazı verilerini depolamak için kullanılır.
var Deg = 'Bu bir String nesnesidir.';
* Şimdi String nesnesinin yöntem (method) diye adlandırılan işlemcilerini görelim.
anchor() : HTML çapaları oluşturur. (İsimlendirilmesi gerekir - 'Capam' isimdir. İsimlendirilmediği zaman name='undefined' olarak kalır).
var Deg = 'Hello';
********.write(deg.anchor('Capam'));
//HTML çıktısı <a name="Capam">Hello</a>
big() : string'i büyük yazı etiketinde görüntüler.
var Deg = 'Hello';
********.write(Deg.big());
//HTML çıktısı <big>Hello</big>
blink() : yanıp sönen yazı oluşturur ama Internet Explorer'da çalışmaz. Çalışanını ilerde yapıcaz =).
var Deg = 'Hello';
********.write(Deg.blink());
//HTML çıktısı <blink>Hello</blink>
bold() : String'i kalın yazıyla gösterir.
var Deg = 'Hello';
********.write(Deg.bold());
//HTML çıktısı <b>Hello/b>
charAt() : Belirtilen mevkideki karakteri çıkarır (mevki belirtmek zorunludur).
var Deg = 'Hello';
********.write(Deg.charAt(1));
//çıktısı e
charCodeAt : Belirtilen mevkideki karakterin UNICODE karşılığını çıkarır (mevki belirtmek zorunludur).
var Deg = 'Hello';
********.write(Deg.charCodeAt(1));
//çıktısı 101
concat() : İki stringi birleştirir.
var Deg1 = 'Hello';
var Deg1 = 'Afrika!';
********.write(Deg1.concat(Deg2));
//çıktısı Hello Afrika!
fixed() : String'i teletype şekliyle görüntüler.
var Deg = 'Hello';
********.write(Deg.fixed());
//HTML çıktısı <tt>Hello</tt>
fontcolor() : String'e belirlenen rengi atar.
var Deg = 'Hello';
********.write(Deg.fontcolor('red'));
//HTML çıktısı <font color="red">Hello</font>
fontsize() : String'e belirlenen font boyutunu atar.
var Deg = 'Hello';
********.write(Deg.fontcolor('7'));
//HTML çıktısı <font size="7">Hello</font>
fromCharCode() : UNICODE değerleri string'e çevirir.
********.write(String.fromCharCode(65,66,67))
//çıktısı ABC
indexOf() : Belirtilen değerin string iiçinde 0'ncı noktadan kaçıncı noktada olduğu gösterir. Belirtilen değer yoksa -1 sonucunu dönderir.
var Deg = 'Hello Afrika';
********.write(Deg.indexOf('Hello') + '<br>')
********.write(Deg.indexOf('Amerika') + '<br>')
********.write(Deg.indexOf('Afrika'))
//çıktısı sırayla 0, -1, 6
italics() : String'i italik şekille yazıdırır.
var Deg = 'Hello';
********.write(Deg.italics());
//HTML çıktısı <i>Hello</i>
lastIndexOf() : Yakınen indexOf() yöntemi gibidir.
var Deg = 'Hello Afrika';
********.write(Deg.indexOf('Hello') + '<br>')
********.write(Deg.indexOf('Amerika') + '<br>')
********.write(Deg.indexOf('Afrika'))
//çıktısı sırayla 0, -1, 6
link() : String'i linke çevirir.
var Deg = 'Hello';
********.write(Deg.link('http://www.Cyber-Warrior.org'));
//HTML çıktısı <i>Hello</i>
match() : Belirtilen değerin string içinde olup olmadığına bakar. Değeri bulursa değeri yazar, bulamassa null sonucunu dönderir.
var Deg = 'Hello!';
********.write(Deg.match('Hello') + '<br>')
********.write(Deg.match('Amerika') + '<br>')
********.write(Deg.match('Hello!'))
//çıktısı sırayla Hello, null, Hello!
replace() : String içinde bir değeri bulup yerine başka bir değer yazar (aranacak ve aranın yerine konulucak değeri bu işlemciye yüklemek gerekir. Küçük-büyük harf dikkase almaması için i belirteci işlemciye geçirilir. Geniş aramada g belirteci ile arama yaptırılır, geniş aramada küçük-büyük harfe duyarsız bir şekilde gi belirteci ile arama yaptırılır).
var Deg = 'Hello';
********.write(Deg.replace(/Hello/, 'Afrika'));
//çıktısı Afrika
var Deg = 'Hello';
********.write(Deg.replace(/hello/i, 'Afrika'));
//çıktısı Afrika
var Deg = 'Hello';
Deg += 'Afrika';
Deg += 'Hello Amerika';
********.write(Deg.replace(/Hello/g, 'Hi'));
//çıktısı Hi Afrika Hi Amerika
var Deg = 'Hello';
Deg += 'Afrika';
Deg += 'Hello Amerika';
********.write(Deg.replace(/hello/gi, 'Hi'));
//çıktısı Hi Afrika Hi Amerika
search() : Belirlenen bir değeri string içinde arar, bulursa 0'dan bulunduğu mevkii yazar, bulamassa -1 sonucunu döndürür (küçük-büyük harf duyarsızlığı için i belirteci kullanılır).
var Deg = 'Hello';
********.write(Deg.search(/hello/));
//çıktısı -1
var Deg = 'Hello';
********.write(Deg.search(/hello/i));
//çıktısı 0
slice() : String'i belirlenen yerden böler.
var Deg = 'Hello Afrika';
********.write(Deg.slice(6));
//çıktısı Afrika
veya
var Deg = 'Hello Afrika';
********.write(Deg.slice(6, 10));
//çıktısı Afri
small() : String'i küçük yazı şekliyle yazar.
var Deg = 'Hello';
********.write(Deg.small());
//HTML çıktısı <small>Hello</small>
split() : String'i belirlenen yerden böler (bölünmenin temel alınacağı belirteç işlemciye geçirilir).
var Deg1 = 'Hello Afrika';
var Deg2.split(' '));
********.write(Deg2[0]);
//çıktısı Hello
********.write(Deg2[1]);
//çıktısı Afrika
strike() : String'in üstünü çizerek yazar.
var Deg = 'Hello';
********.write(Deg.strike());
//HTML çıktısı <strike>Hello</strike>
sub() : String'i subscript şelinde yazar.
var Deg = 'Hello';
********.write(Deg.sub());
//HTML çıktısı <sub>Hello</sub>
sup() : String'i superscript şelinde yazar.
var Deg = 'Hello';
********.write(Deg.sup());
//HTML çıktısı <sup>Hello</sup>
substr() : String'in belirlenen aralıklardaki değerlerini yazar. (NOT: bu yöntem sorun çıkardığı için tavsiye edilmiyor. KULLANMAYIN!. Bunun yerine substring() kullanın.)
var Deg = 'Hello';
********.write(Deg.substr(3));
//çıktısı lo
var Deg = 'Hello';
********.write(Deg.substr(1, 3));
//çıktısı ell
substring() : String'in belirlenen aralıklardaki değerlerini yazar.
var Deg = 'Hello';
********.write(Deg.substring(3));
//çıktısı lo
var Deg = 'Hello';
********.write(Deg.substring(1, 3));
//çıktısı ell
toLowerCase() : String'in küçük harflerde yazar.
var Deg = 'HELLO';
********.write(Deg.toLowerCase());
//çıktısı hello
toUpperCase() : String'in büyük harflerde yazar.
var Deg = 'hello';
********.write(Deg.toUpperCase());
//çıktısı HELLO
---
length() : String'in değer uzunluğunu verir.
var Deg = 'Hello';
********.write(Deg.length);
//çıktısı 5
Date Nesnesi
* Date nesnesi tarih ve zamanlarla ilgili çalışmalarda kullanılır.
* İçinde Yıl, Gün, Ay, Saat, Dakika, Saniye, Salise verilerini tutan daha doğrusu betiğin çalıştığı makinada bu verilerin
nerede olduğunu bilen ve bulup getiren bir nesnedir.
* Tüm tarihlerde İngilizce isimlerler temel alınır ve bu isimlerin baştan 3 harfi yazılır (günler ve aylarda - örn: Cuma -
Fri).
---
Date() : Bugünün tarihini ve zamanı verir.
********.write(Date())
//çıktısı şuan için Sat Sep 15 2007 00:38:52 GMT+0300 (GTB Yaz Saati)
getDate() : Günü verir ve günü 1-31 arasından bir sayı olarak yansıtır. Date
nesnesine bağımlı çalışır.
var T = new Date()
********.write(T.getDate())
-Kendi tanımladığımız tarihide getDate() ile alabiliriz.
var T = new Date('July 21, 1983 01:15:00')
********.write(birthday.getDate())
//çıktısı 21
getDay() : Haftanın gününü verir ve bu günü 0-6 arasında bir rakamla belirtir.
var T = new Date();
********.write(T.getDay());
//çıktısı 6 (bugün cumartesi)
-Biz sayı şeklinde olan günlere gerçek adlarını verebiliriz.
var T = new Date();
var Gun = new Array(7);
Gun[0] = 'Pazar';
Gun[1] = 'Pazartesi';
Gun[2] = 'Salı';
Gun[3] = 'Çarşamba';
Gun[4] = 'Perşembe';
Gun[5] = 'Cuma';
Gun[6] = 'Cumartesi';
********.write('Bugün günlerden ' + Gun[T.getDay()])
getMonth() : Ayı verir ve bunu 0-11 arası bir rakam ile belirtir.
var T = new Date();
********.write(T.getMonth());
//çıktısı 8
-Biz sayı şeklinde olan aylara gerçek adlarını verebiliriz.
var T = new Date();
var Ay = new Array(12);
Ay[0] = 'Ocak';
Ay[1] = 'Şubat';
Ay[2] = 'Mart';
Ay[3] = 'Nisan';
Ay[4] = 'Mayıs';
Ay[5] = 'Haziran';
Ay[6] = 'Temmuz';
Ay[7] = 'Ağustos';
Ay[8] = 'Eylül';
Ay[9] = 'Ekim';
Ay[10] = 'Kasım';
Ay[11] = 'Aralık';
********.write('Aylardan ' + Ay[T.getMonth()] + ' ayındayız.');
getFullYear() : Yılı 4 haneli rakam olarak verir.
var T = new Date();
********.write(T.getFullYear());
//çıktısı 2007
-Kendi belirlediğimiz verilere görede sonuç döndürebilir.
var T = new Date('July 21, 1983 01:15:00');
********.write('Ben' + T.getFullYear() +' yılında doğdum);
getYear() : Yılı 2 haneli rakam olarak verir (çok fazla kullanılmaz, FF'de sorun çıkarır. KULLANMAYIN!. bunun yerine
getFullYear() kullanın).
getHours() : Saati verir.
var T = new Date();
********.write(T.getHours());
var T = new Date('July 21, 1983 01:15:00');
********.write(T.getHours());
//çıktısı 1
getMinutes() : Dakikaları verir.
var T = new Date();
********.write(T.getMinutes());
var T = new Date('July 21, 1983 01:15:00');
********.write(T.getMinutes());
//çıktısı 15
getSeconds() : Saniyeyi verir.
var T = new Date();
********.write(T.getSeconds());
var T = new Date('July 21, 1983 01:15:00');
********.write(T.getSeconds());
//çıktısı 0
getMilliseconds() : Saliseyi (Milisaniye) verir.
var T = new Date();
********.write(T.getMilliseconds());
var T = new Date('July 21, 1983 01:15:00');
********.write(T.getMilliseconds());
//çıktısı 0
getTime() : 1 Ocak 1970 geceyarısı (1.1.1970 00:00:00) tarihinden bu yana geçmiş olan zamanı salise cinsinden verir.
(Forma yeni ileti göndereceğiniz zaman "Önizleme yap" mak için açılan pencerede ?ID=1189879523090 gibi)
var T = new Date();
********.write('1970.01.01 tarihinden bu yana' + T.getTime() + 'salise geçti');
*
Yukarıdaki getDate() ile getMilliseconds() arasındaki
tüm yöntemlere UTC (Universal Coordinated Time) ekleyerek uluslar arası tarih/zaman sonuçlarını elde edilir.
getDate --> getUTCDate() gibi.
*
parse() : Belirtilen tarih String'ini salise cinsine çevirir.
var Bugun = new Date.parse('Sep 15, 2007');
********.write(Bugun);
//çıktısı 1189803600000
setDate() : Belirlenen Ay değerine göre tarihi kurar.
var Bugun = new Date();
Bugun.setDate(15); //bugün ayın 15'i
********.write(Bugun);
//çıktısı Sat Sep 15 21:21:21 UTC+0300 2007
setMonth() : Ayı kurar. (yazım olarak iki değer alır, birincisi ayı belirtir - zorunludur. ikincisi günü belirtir,
keyfidir ama belirtilmediğinde hali hazırdaki günü alır).
var T = new Date();
T.setMonth(0); //0 ocak ayıdır, gün olarak 15 yani bugünü alır
********.write(T);
//çıktısı Mon Jan 15 21:36:36 UTC+0200 2007
var T = new Date();
T.setDate(0,20); //ocak'ın 20'si
********.write(T);
//çıktısı Sat Jan 20 21:31:04 UTC+0200 2007
setFullYear() : Yılı kurar (yıl, ay, gün değerlerini alır. yıl değeri mecburidir, ay ve gün keyfidir).
var T = new Date();
T.setFullYear(2000);
********.write(T);
//çıktısı Fri Sep 15 21:42:48 UTC+0300 2000
var T = new Date();
T.setFullYear(2000, 8, 16);
********.write(T);
//çıktısı Sat Sep 16 21:45:20 UTC+0300 2000
setYear() : Sözde setFullYear() ile aynı işe yarar ama hatalara neden olur. KULLANMAYIN!. Bunun yerine
setFullYear() kullanın.
setHours() : Saati kurar (saat değerini belirtmek zorunludur, dakika, saniye, salise keyfidir).
var T = new Date();
T.setHours(15);
********.write(T);
//Sat Sep 15 15:23:36 UTC+0300 2007
var T = new Date();
T.setHours(15,30,00);
********.write(T);
//Sat Sep 15 15:30:00 UTC+0300 2007
setMinutes() : Dakikayı kurar (dakika belirtisi gerekir, saniye ve salise keyfidir).
var T = new Date();
T.setMinutes(1);
********.write(T);
//Sat Sep 15 22:01:39 UTC+0300 2007
setSeconds() : Saniyeyi kurar (saniye belirtisi zorunlu, salise keyfidir).
var T = new Date();
T.setSeconds(1);
********.write(T);
//Sat Sep 15 22:29:01 UTC+0300 2007
setMilliseconds() : Saliseyi kurar.
var T = new Date();
T.setMilliseconds(1);
********.write(T);
setTime() : Salise cinsindeki bir tarih/zaman değerini String'e çevirir. (çalışmak için tarih/zaman salise cinsini
ister).
var T = new Date();
T.setTime(1564221);//1.1.1970 tarihinin salise cinsidir
********.write(T);
//çıktısı Thu Jan 1 02:26:04 UTC+0200 1970
var T = new Date();
T.setTime(1126731600000);//bugünün salise cinsi
********.write(T);
//çıktısı Sat Sep 15 00:00:00 UTC+0300 2007
-Bu yöntemler 1970 senesinin Ocak 1 (00:00) tarihini temel alarak çalışmaktadır. Peki 1970 öncesi nasıl olur. Salisenin
başına eksi (-) işareti koyarız.
var T = new Date();
T.setTime(-28349233200000); //Malazgirt Savaşı tarihi, Cuma'yı Cumartesiye bağlayan gece
********.write(T);
//çıktısı Sat Aug 26 00:00:00 UTC+0300 1071
*
Yukarıdaki setDate() ile setMilliseconds() arasındaki
tüm yöntemlere UTC (Universal Coordinated Time) ekleyerek uluslar arası tarih/zaman kurulur.
setDate() --> setUTCDate() gibi.
*
toString() : Date nesnesini String'e çevirir (yani saliseyi yazıya çevirir
diyebiliriz).
var T = new Date();
********.write(T.toString());
//çıktısı Sat Sep 15 23:13:38 UTC+0300 2007
UTC() : Her zaman olduğu gibi 1970'i temel alarak String (yazı cinsi) halindeki
Date nesnesini saliseye çevirir (yıl, ay, gün belirtmek mecburi, saat, dakika, saniye,
salise belirtmek ise keyfidir).
var T = new Date.UTC(1921,7,22);//Sakarya Meydan Muharebesi
********.write(T);
//çıktısı -1526169600000
toLocaleString() : Date nesnesini yerel saate çevirir (dilini de çevirir).
var T = new Date();
********.write(T.toLocaleString());
//çıktısı 15 Eylül 2007 Cumartesi 23:35:33
-Kendi belirlediğimiz bir tarih/zamanı da yerele çevirir.
-Ancak IE7 de 1601 senesinden öncesini çevirmiyor, galiba bir IE7 kusuru bulduk =)
var T = new Date('July 16, 622'); //Hicret'in 1. günü
********.write(T.toLocaleString());
//çıktısı 16 Temmuz 0622 Salı 00:00:00 (saat belirtilmediğinden 00:00:00 verdi)
* Bu kısmı yazarken önizleme alamadığım içim makalede hatalı yazımlar olmuş olabilir. Date
nesnesi için bu adrese bakabilirsiniz.
Array Nesnesi
* Tek bir değişken içinde birden fazla değer depolamak için kullanılır. Dizi anlamına gelir.
var Deg1 = 'Ali';
var Deg2 = 'Veli';
yerine
var Dizi = new Array('birinci değer', 'ikinci değer');
yada
var Dizi = new Array();
Dizi[0] = 'Ali';
Dizi[1] = 'Veli';
şeklinde yazım mümkündür.
* Ancak Array ölçüsünü denetim altında tutmak istenilirse Array() nesnesine içerik adeti sayısınca bir değer geçirilir.
var Dizi = new Array(2); //bu dizi 2 değer alır
Dizi[0] = 'Ali';
Dizi[1] = 'Veli';
---
Array yöntemleri
concat() : Birden fazla Array'i birleştirir.
var Dizi1 = new Array(2);
Dizi[0] = 'Ali';
Dizi[1] = 'Veli';
var Dizi2 = new Array(2);
Dizi[0] = 'Kerem';
Dizi[1] = 'Alp';
********.write(Dizi1.concat(Dizi2))
//çıktısı -> Ali,Veli,Kerem,Alp
join() : JS'de dizilerden veri çekmek istenildiğinde araya JS virgül (,) işareti koyar. Fakat bu virgülleri temizlemek için de join() ile bir çözüm sunar. İstediğimiz bir karakter ile bu virgülü değiştirebiliriz. Ancak join()'nin asli görevi dizideki tüm öğeleri tek bir String nesnesine atamaktır.
var Dizi = new Array(3);
Dizi[0] = 'Ali';
Dizi[1] = 'Veli';
Dizi[2] = 'Kerem';
********.write(Dizi.join()); //Ali,Veli,Kerem
********.write('<br>');
********.write(arr.join('.')); //Ali.Veli.Kerem
pop() : Dizinin en sonuncu öğesini siler ve sildiği öğeyi döndürür. pop() kullanıldıktan sonra dizinin son öğesi artık kullanılamaz. shift()'in tersidir.
var Dizi = new Array(3);
Dizi[0] = 'Ali';
Dizi[1] = 'Veli';
Dizi[2] = 'Kerem';
********.write(Dizi); //Ali,Veli,Kerem
********.write('<br>');
********.write(Dizi.pop()); //Kerem
********.write('<br>');
********.write(Dizi); //Ali,Veli
push() : Dizi sonuna bir öğe ekler yeni dizi boyutunu döndürür. Değer olarak ilk öğe ismini ister, 2. 3. ... öğeler keyfidir.
var Dizi = new Array(3);
Dizi[0] = 'Ali';
Dizi[1] = 'Veli';
Dizi[2] = 'Kerem';
********.write(Dizi); //Ali,Veli,Kerem
********.write('<br>');
********.write(Dizi.push('Hacı Kılınç')); //4, yeni boyut
********.write('<br>');
********.write(Dizi); //Ali,Veli,Kerem,Hacı Kılınç
reverse() : Dizinin sıralanma şeklini tersine dönderir.
var Dizi = new Array(3);
Dizi[0] = 'Ali';
Dizi[1] = 'Veli';
Dizi[2] = 'Kerem';
********.write(Dizi); //Ali,Veli,Kerem
********.write('<br>');
********.write(Dizi.reverse()); //Kerem,Veli,Ali
shift() : Dizinin en ilk öğesini siler ve sildiği öğeyi döndürür. shift() kullanıldıktan sonra dizinin ilk öğesi artık kullanılamaz. pop()'ın tersidir.
var Dizi = new Array(3);
Dizi[0] = 'Ali';
Dizi[1] = 'Veli';
Dizi[2] = 'Kerem';
********.write(Dizi); //Ali,Veli,Kerem
********.write('<br>');
********.write(Dizi.shift()); //Ali
********.write('<br>');
********.write(Dizi); //Veli,Kerem
slice() : Dizi öğelerini belirteci esas alarak siler. Başlangıç belirteci mecburi, bitiş belirteci keyfidir.
var Dizi = new Array(3);
Dizi[0] = 'Ali';
Dizi[1] = 'Veli';
Dizi[2] = 'Kerem';
********.write(Dizi); //Ali,Veli,Kerem
********.write('<br>');
********.write(Dizi.slice(1)); //Veli,Kerem
********.write('<br>');
********.write(Dizi); //Ali,Veli,Kerem
var Dizi = new Array(5)
Dizi[0] = 'Ali';
Dizi[1] = 'Veli';
Dizi[2] = 'Kerem';
Dizi[3] = 'mub@rek';
Dizi[4] = 'Mahmut';
********.write(Dizi); //Ali,Veli,Kerem,mub@rek,Mahmut
********.write('<br>');
********.write(Dizi.slice(2,4)); //Kerem,mub@rek
********.write('<br>');
********.write(Dizi); //Ali,Veli,Kerem,mub@rek,Mahmut
sort() : Dizi öğelerini sıralar.
-A'dan Z'ye.
var Dizi = new Array(3);
Dizi[0] = 'Ali';
Dizi[1] = 'Veli';
Dizi[2] = 'Kerem';
********.write(Dizi1); //Ali,Veli,Kerem
********.write('<br>');
********.write(Dizi1.sort()); //Ali,Kerem,Veli
-Küçükten büyüğe (yanlıştır)
var Dizi = new Array(3);
Dizi[0] = '28';
Dizi[1] = '2';
Dizi[2] = '7';
********.write(Dizi); //28,2,7
********.write('<br>');
********.write(Dizi.sort()); //2,28,7
-Sayıları doğru sıralamk için kendi işlevimizi yazıyoruz ve aşağıda kullanıyoruz
function DogruSirala(x, y) {
return x - y;
}
-Küçükten büyüğe (doğrudur)
var Dizi = new Array(3);
Dizi[0] = '28';
Dizi[1] = '2';
Dizi[2] = '7';
********.write(Dizi); //28,2,7
********.write('<br>');
********.write(Dizi.sort(DogruSirala)); //2,7,28
splice() : Dizi öğesi(öğeleri) silinip yerine başka öğe(öğeler) konulacağı yada sadece yeni öğenin(öğelerin) belirli bir sıraya ekleneceği zaman kullanılır. Kaçıncı öğe silinecekse yada yeni öğe nereye konulacaksa belirtilmek zorundadır. Kaç elaman silineceğinin belirtilmesi keyfidir.
var Dizi = new Array(4);
Dizi[0] = 'Ali';
Dizi[1] = 'Veli';
Dizi[2] = 'Kerem';
Dizi[3] = 'Mert';
********.write(Dizi); //Ali,Veli,Kerem,Mert
********.write('<br>');
//2. öğeden sonra 0 tane öğe sil ve 'Hacı'yı ekle
Dizi.splice(2,0, 'Hacı');
********.write(Dizi); //Ali,Veli,Hacı,Kerem,Mert
yada
********.write(Dizi); //Ali,Veli,Kerem,Mert
//2. öğeden sonra 1 öğeyi sil ve yerine 'Mahmut'u koy
Dizi.splice(2,1, 'Mahmut');
********.write(Dizi); //Ali,Veli,Mahmut,Mert
toString() : Dizi öğelerini bir String'e çevirir ve sonuca döner.
var Dizi = new Array(4);
Dizi[0] = 'Ali';
Dizi[1] = 'Veli';
Dizi[2] = 'Kerem';
Dizi[3] = 'Mert';
********.write(Dizi.toString()); //Ali,Veli,Kerem,Mert
unshift() : Dizinin başına belirtece göre yeni bir öğe ekler. IE'de gerektiği gibi çalışmaz, dizinin boyutunu (uzunluğunu) değiştirir ve yeni boyutu döndürür.
var Dizi = new Array(4); //boyut belirlemedik!
Dizi[0] = 'Ali';
Dizi[1] = 'Veli';
Dizi[2] = 'Kerem';
Dizi[3] = 'Mert';
********.write(Dizi); //Ali,Veli,Kerem,Mert
********.write('<br>');
Dizi.unshift('Hacı'); //4, yeni boyut
********.write('<br>');
********.write(Dizi); //Hacı,Ali,Veli,Hacı,Kerem,Mert
length : Dizi boyutunu verir (bir anlamda dizi içinde kaç adet eleman varsa onları sayar).
var Dizi = new Array(4); //boyut belirlemedik!
Dizi[0] = 'Ali';
Dizi[1] = 'Veli';
Dizi[2] = 'Kerem';
Dizi[3] = 'Mert';
********.write(Dizi.length); //4 adet öğe mevcut
Boolean Nesnesi
* true yada false sonucunu verir. Mantıksal bir ifadedir.
* Boolean nesnesi başlangıcında bir değer almamışsa yada değer 0, -0, null, '', false, undefined, NaN ise false sonucunu dönderir.
-Tümünün çıktısı false olacaktır.
var B1 = new Boolean();
var B2 = new Boolean(0);
var B3 = new Boolean(-0);
var B4 = new Boolean('');
var B5 = new Boolean(null);
var B6 = new Boolean(NaN);
var B7 = new Boolean(false);
var B8 = new Boolean(undefined);
********.write(B1 + '<br>');
********.write(B2 + '<br>');
********.write(B3 + '<br>');
********.write(B4 + '<br>');
********.write(B5 + '<br>');
********.write(B6 + '<br>');
********.write(B7 + '<br>');
********.write(B8);
-Tümünün çıktısı true olacaktır.
var B1 = new Boolean(true)
var B2 = new Boolean('true')
var B3 = new Boolean('false')
var B4 = new Boolean('CW')
********.write(B1 + '<br>');
********.write(B2 + '<br>');
********.write(B3 + '<br>');
********.write(B4);
Math Nesnesi
* Riyaziye (matematik) işlemleri yapabilmenize imkan sağlar.
* JS içerisinde sabit 8 adet riyaziye değeri taşır, bunlara erişim Math nesnesi ile olur. İşlem yaptırmak için bu sabit değerlerin başına diğer yöntemlerdeki uygulamalarda olduğu gibi Math nesnesi konur.
* NaN ifadesinin anlamı NOT A NUMBER yani SAYI DEĞİL demektir.
Math.E
//çıktısı 2.718281828459045
Math.PI
//çıktısı 3.141592653589793
Math.SQRT2
//çıktısı 1.4142135623730951
Math.SQRT1_2
//çıktısı 0.7071067811865476
Math.LN2
//çıktısı 0.6931471805599453
Math.LN10
//çıktısı 2.302585092994046
Math.LOG2E
//çıktısı 1.4426950408889634
Math.LOG10E
//çıktısı 0.4342944819032518
---
Yöntemler
sqrt() : karekök, sqrt(x), x sayısının karekök değeri.
********.write(Math.sqrt(0)) //0
********.write(Math.sqrt(1)) //1
********.write(Math.sqrt(9)) //3
********.write(Math.sqrt(0.64)) //0.8
********.write(Math.sqrt(-9)) //NaN
log() : logaritma. log(x), x'in logaritması.
********.write(Math.log(2.7183)) //1.0000066849139877
********.write(Math.log(2)) //0.6931471805599453
********.write(Math.log(1)) //0
********.write(Math.log(0)) //-Infinity
********.write(Math.log(-1)) //NaN
pow() : power, pow(x,y) x^y, x üzeri y sayısının değeri.
********.write(Math.pow(0,0)) //1
********.write(Math.pow(0,1)) //0
********.write(Math.pow(1,1)) //1
********.write(Math.pow(1,10)) //1
********.write(Math.pow(2,3)) //8
********.write(Math.pow(-2,3)) //-8
********.write(Math.pow(2,4)) //16
********.write(Math.pow(-2,4)) //16
sinüs() :sinüs, sin(x) x sayısının sinüs değeri.
********.write(Math.sin(3)) //0.1411200080598672
********.write(Math.sin(-3)) //-0.1411200080598672
********.write(Math.sin(0)) //0
********.write(Math.sin(Math.PI)) //1.2246063538223772e-16
********.write(Math.sin(Math.PI/2)) //1
cos() : cosinüs, cos(x), x sayısının cosinüs değeri.
********.write(Math.cos(3)) //-0.9899924966004454
********.write(Math.cos(-3)) //-0.9899924966004454
********.write(Math.cos(0)) //1
********.write(Math.cos(Math.PI)) //-1
********.write(Math.cos(2 * Math.PI)) //1
tan() : tanjant, tan(x), x sayısının tanjant değeri.
********.write(Math.tan(0.50)) //0.5463024898437905
********.write(Math.tan(-0.50)) //-0.5463024898437905
********.write(Math.tan(5)) //-3.380515006246586
********.write(Math.tan(10)) //0.6483608274590866
********.write(Math.tan(-5)) //3.380515006246586
********.write(Math.tan(-10)) //-0.6483608274590866
asin() : arcsinüs, asin(x), x sayısının arcsinüs değeri
********.write(Math.asin(0.64)) //0.6944982656265559
********.write(Math.asin(0)) //0
********.write(Math.asin(-1)) //-1.5707963267948965
********.write(Math.asin(1)) //1.5707963267948965
********.write(Math.asin(2)) //NaN
acos() : arccosinüs, acos(x), x sayısının arccosinüs değeri.
********.write(Math.acos(0.64)) //0.8762980611683406
********.write(Math.acos(0)) //1.5707963267948965
********.write(Math.acos(-1)) //3.141592653589793
********.write(Math.acos(1)) //0
********.write(Math.acos(2)) //NaN
atan() : arctanjant, atan(x), x sayısının arctanjant değeri.
********.write(Math.atan(0.50)) //0.4636476090008061
********.write(Math.atan(-0.50)) //-0.4636476090008061
********.write(Math.atan(5)) //1.373400766945016
********.write(Math.atan(10)) //1.4711276743037347
********.write(Math.atan(-5)) //-1.373400766945016
********.write(Math.atan(-10)) //-1.4711276743037347
atan2() : arctanjant2, değeri bilinmeyen x ve y noktalarının açısını -PI ve PI radyanları (bkz. radian) arasında bir sayısal değer döndürür.
********.write(Math.atan2(0.50,0.50)) //0.7853981633974483
********.write(Math.atan2(-0.50,-0.50)) //-2.356194490192345
********.write(Math.atan2(5,5)) //0.7853981633974483
********.write(Math.atan2(10,20)) //0.4636476090008061
********.write(Math.atan2(-5,-5)) //-2.356194490192345
********.write(Math.atan2(-10,10)) //-0.7853981633974483
abs() : tamkısım, abs(x), x sayısının tamkısımını döndürür.
********.write(Math.abs(7.25)) //7.25
********.write(Math.abs(-7.25)) //7.25
********.write(Math.abs(7.25 - 10)) //2.75
********.write(Math.abs(0.102000)) //0.102
max() : büyük sayı, max(x,y), x ve y sayılarından büyük olanın değeri.
********.write(Math.max(5,7)) //7
********.write(Math.max(-3,5)) //5
********.write(Math.max(-3,-5)) //-3
********.write(Math.max(7.25,7.30)) //7.3
min() : küçük sayı, min(x,y), x ve y sayılarından küçük olanın değeri.
********.write(Math.min(5,7)) //5
********.write(Math.min(-3,5)) //-3
********.write(Math.min(-3,-5)) //-5
********.write(Math.min(7.25,7.30)) //7.25
ceil() : büyük tam sayı (yuvarlar), ceil(x), x sayısından büyük en yakın tamsayı değeri.
********.write(Math.ceil(0.60)) //1
********.write(Math.ceil(0.40)) //1
********.write(Math.ceil(5)) //5
********.write(Math.ceil(5.1)) //6
********.write(Math.ceil(-5.1)) //-5
********.write(Math.ceil(-5.9)) //-5
floor() : küçük tam sayı (yuvarlar), floor(x), x sayısından küçük en yakın tamsayı değeri.
********.write(Math.floor(0.60)) //0
********.write(Math.floor(0.40)) //0
********.write(Math.floor(5)) //5
********.write(Math.floor(5.1)) //5
********.write(Math.floor(-5.1)) //-6
********.write(Math.floor(-5.9)) //-6
round() : tam sayı, round(x), x sayısına en yakın tam sayı değeri.
********.write(Math.round(0.60)) //1
********.write(Math.round(0.50)) //1
********.write(Math.round(0.49)) //0
********.write(Math.round(-4.40)) //-4
********.write(Math.round(-4.60)) //-5
round() : rasgele sayı, her çalışmasında "0" ile "1" arasında rasgele bir sayı değeri verir.
********.write(Math.random()) //0.3578453.........
exp() : Math.E alakalı bişi, tam çözmüş değilim.
********.write(Math.E) //2.718281828459045
-
********.write(Math.exp(1)) //2.718281828459045
********.write(Math.exp(-1)) //0.36787944117144233
********.write(Math.exp(5)) //148.4131591025766
********.write(Math.exp(10)) //22026.465794806718
HTML DOM Nesneleri
* DOM nedir, ne işe yarar önce wikipedia'da yazılı olan şu yazıyı dikkatle okuyun, bu makale zaten uzun olacağından buraya yazmıyorum, neticede oradaki benim yazımdır. -->******** object Model.
* Biz web programcıları için en fazla önem arz eden konu bu olsa gerek. Zira HTML saylarımız üzerinde gerekli yerlere müdalelerimizi bu nesneler aracılığıyla yaparız. Hatta yeri gelir mesela PHP programlar yazarken PHP'den istediğiniz başarımı alamadığınız durumlarda JS'e bu eksik kısmı tamamlatırırız.
-Mesela bu betikte header işlevi sorun çıkardı diyelim.
if (isset($_POST[Sil])) {
mysql_query("DELETE FROM ".$Tablo." WHERE Id='".$_POST[Id]."'");
header ('********: ?Sayfa='.$_GET[Sayfa].'');
}
-İşte o zaman JS bize bir seçenek sunar.
if (isset($_POST[Sil])) {
mysql_query("DELETE FROM ".$Tablo." WHERE Id='".$_POST[Id]."'");
echo '********>********="?Sayfa='.$_GET[Sayfa].'";</script>';
}
Gördüğünüz gibi bu sorunumuzu çözecektir.
* HTML DOM JavaScript'e has bir kurum değildir. VBScript, Java gibi dillerde de kullanılabilir.
---
window Nesnesi
* JS yapısının en başında gelir ve kullanıcının tarayıcı penceresini simgeler.
- window Nesnesi Derlemeleri
* Genelde başlarına window nesnesi geçirilerek uygulamaya alınırlar.
frames[] : pencere içindeki tüm frame'leri belirtir.
********.write(window.frames.length) //mesela sayfa 3 adet frame varsa çıktısı 3 olur
- window Nesnesi Özellikleri
closed : bir pencerenin kapanıp kapanmadığı sorusuna true yada false sonucunu/değerini döndürür.
Burdaki kodları deneyerek sonucu görebilirsiniz. Örnek kod
defaultStatus : pencerenin durum çubuğuna (statusbar) denen kısmına belirlenen veriyi atar/yazar. Firefoxta çalışmaz.
window.defaultStatus = 'Pencerenin en altındaki yazı.';
length : pencere içindeki tüm frame'leri kurar/döndürür.
********.write(window.length) //çıktısı 0
name : pencere adı.
window.open('','Pencere','width=200,height=100') //Pencere adında bir pencere açar =)
opener : pencereyi açan pencere.
window.open('','Pencere','width=200,height=100') //Pencere adında bir pencere açtıktan sonra
opener.********.write('Ben Pencere adındaki pencereyi açan pencereyim') //kendi de kendi üzerine 'Ben Pencere adındaki pencereyi açan pencereyim' yazar
outerheight : pencere yüksekliğini döndürür/kurar (pixel cinsinden).
outerheight : pencere genişliğini döndürür/kurar (pixel cinsinden).
Ayrıntılı Örnekler
pageXOffset : sol köşeden itibaren X konumunu kurar/döndürür.
pageYOffset : sol köşeden itibaren Y konumunu kurar/döndürür.
Ayrıntılı Örnekler
parent : ana pencere (window nesnesini sonuna alır!).
parent.window.resizeTo(1024,768);
self : pencerenin kendisi.
window.self.close() //kendini kapat
top : en üstteki pencere.
if (window.top != window.self)
window.top.******** = 'framden_kurtar.php';
status : durum çubuğu iletisi.
window.status = 'durum çubuğu iletisi';
- window Nesnesi Yöntemleri
* Başlarına window nesnesi geçirilerek uygulamaya alınırlar.
alert() : 1. sayfa da yazmış olduğum Popup Kutuları kısmına bakın!
focus() : pencereye odaklanmayı sağlar.
window.focus()
blur() : pencereden odaklanmayı alır.
window.blur()
open() : pencere açar (popup penceresi). Değiştirge belirtilmişse onları temel alarak çalışır, değilse olağan bir pencere açar.
window.open('açılacaksayfa.php .htm .asp vs.', 'sayfaadı', 'değiştirgeler ....')
-keyfi değiştirgeler
width=pixel //genişliği
left=pixel //yüksekliği
top=pixel //yukarıdan uzaklığı
height=pixel //soldan uzaklığı
channelmode=yes|no yada 1|0
directories=yes|no yada 1|0
fullscreen=yes|no yada 1|0 //tam ekran
********=yes|no yada 1|0 //adres
menubar=yes|no yada 1|0 //menü
resizable=yes|no yada 1|0 //tekrar boyutlandırılabilir?
scrollbars=yes|no yada 1|0 //sürükleme çubuğu
status=yes|no yada 1|0 //durum çubuğu
titlebar=yes|no yada 1|0
toolbar=yes|no yada 1|0 //araç çubuğu
-sayfaadı yerine 1 yazılırsa tek popup açar.
-HTML'deki _self, _parent, _top, _blank komutlarını alabilir.
close() : pencereyi kapatır (pencere popup tarzı olursa kapatır).
window.close()
setInterval() : bir uygulamanın icrası için aralık kurar (belirler).
window.onload = function Q() {
alert('uyarı!');
}
var T = setInterval('Q()', 6000); //devam eder gider
clearInterval() : bir uygulamanın icrası için kurulan aralığı temizler.
window.onload = function Q() {
alert('uyarı!');
}
var T = setInterval('Q()', 6000);
clearInterval(T); //aralık temizlendiğine göre devam etmez
setTimeout() : bir uygulamanın icrasını belirlenen zamandan sonra gerçekleştirir.
window.onload = function Q() {
alert('uyarı!');
}
var T = setTimeout('Q()', 6000); //devam eder gider
setTimeout() : bir uygulamanın icrası için kurulan zamanı temizler.
window.onload = function Q() {
alert('uyarı!');
}
var T = setTimeout('Q()', 6000);
clearInterval(T); //zaman temizlendiğine göre devam etmez
confirm() : onaylama ister, aldığı cevaba göre davranır.
<a href= "sil.php?id=123" onClick="return confirm('Veriyi silcek misiniz?')">Sil</a>
createPopup() : Pop-up pencereleri görüntüler. IE'da çalışır. Firefox ve Opera'da çalışmaz.
Örnek //IE ile girin.
prompt() : 1. sayfa da yazmış olduğum Popup Kutuları kısmına bakın!
print() : sayfayı yazdırır.
window.print()
-Aşağıdaki haraketler pixsel cinsinde olur.
moveBy() : verilen değerlere göre pencerenin bulunduğu konumu temel alarak pencereyi hareket ettirir.
moveBy(10,10)
moveTo() : verilen değerlere göre pencereye hareket sağlar (pixel ölçüsünde).
moveTo(0,0)
resizeBy() : verilen değerlere göre pencerenin bulunduğu konumu temel alarak pencereyi yeniden boyutlandırır.
resizeBy(10,10)
resizeTo() : verilen değerlere göre pencereyi yeniden boyutlandırır.
resizeTo(550,350)
scrollBy() : verilen değerlere göre durum çubuğunu bulunduğu konumu temel alarak durum çubuğunu hareket ettirir.
scrollBy(10,10)
scrollTo() : verilen değerlere göre durum çubuğunu sürükler.
scrollTo(0,0)
******** Nesnesi
* Bir HTML belgesini simgeler ve bu belge içindeki tüm öğelere erişimi sağlar. Mesela ********.cookie ifadesiyle sayfanın çerezlerine erişilir.
Aynı zamanda window nesnesinin de bir bölümü olduğunu söyleyebiliriz.
- ******** Nesnesi Derlemleri (dizi olarak kabul edilebilir).
acnhors[] : sayfadaki tüm çapalar (<a> etiketine sahip tüm öğeler).
<a name="Birinci Çapa">Birinci Çapa</a>
<a name="İkinci Çapa">İkinci Çapa</a>
<a name="Üçüncü Çapa">Üçüncü Çapa</a>
********.write(********.anchors.length) //çıktısı 3
//veya
********.write(********.anchors[1].innerHTML) //çıktısı İkinci Çapa
forms[] : sayfadaki tüm formlar (<form> etiketine sahip tüm öğeler).
<form name="Form1"></form>
<form name="Form2"></form>
<form name="Form3"></form>
//********.write('Bu sayfada ' + ********.forms.length + ' adet form var.')
images[] : sayfadaki tüm resim bağlantıları (<img> etiketine sahip tüm öğeler).
<img src= "resim1.jpg"> <img src= "resim2.jpg">
********.write(********.images[1].src) //resim2.jpg
links[] : sayfadaki tüm köprüler (<a href= ""> etiketine sahip tüm öğeler).
<a href= "abc.php">
********.write(********.links[1].href) //abc.php
- ******** Nesnesi Özellikleri
cookie : belgenin çerezi (üç değer alır, name = ; expires = ; path = /)
Detaylı anlatıma buradan ulaşabilirsiniz.
domain : sitenin alan adını döndürür.
********.write(********.domain)
lastModified : belgenin son değiştirilme tarihini döndürür.
********.write(********.lastModified)
referrer : yüklenen belgenin URL'sini döndürür.
********.write(********.referrer)
title : yüklenen belgenin başlık içeriğini döndürür.
********.write(********.title)
URL : belgenin URL'sini döndürür.
********.write(********.URL)
- ******** Nesnesi Yöntemleri
write : belgeye yazar.
********.write('Merhaba!')
writeln : belgeye satır ile yazar.
********.writeln('Merhaba!')
open : veri akışı oluşturur veya yeni bir belge (sayfa) açar, yeni belgenin açılmasında değişge (parametre) kullanılmamış ise boş bir belge açar.
//text/html = MIME türü, replace = bellekteki önceki verinin üstüne yaz
var YeniBelge = ********.open("text/html","replace");
YeniBelge.write("<html><bOdy>Merhaba Afrika!</bOdy></html>");
YeniBelge.close();
Ajax uygulamalarında sıkça kullanılır.
MyXmlHttpRequest.open("GET", MyUrl, true) gibi.
close : veri akışını durdurur ve toplanan veriyi görüntüler.
var YeniBelge = ********.open("text/html","replace");
YeniBelge.write("<html><bOdy>Merhaba Afrika!</bOdy></html>");
YeniBelge.close();
********.getElementById : ********.getElementById('GelBeniBul') yani id'si GelBeniBul olan öğeyi döndür.
var Oge = ********.getElementById('GelBeniBul')
********.write(Oge.innerHTML) //Buldun beni =)
<div id="GelBeniBul">Buldun beni =)</div>
-hazır yeri gelmişken işimiz kolaylaştıracak her seferinde ********.getElementById('.....') yazmaktan kurtaracak kendimize ait bir işlev yazalım
function G(GelenOge) {
return ********.getElementById(GelenOge);
}
-şimdi de yukarıdaki örneği bu işlevimizle yazalım ve bize ne kadar kolaylık sağladığını görelim.
var Oge = G('GelBeniBul')
********.write(Oge.innerHTML) //Buldun beni =)
<div id="GelBeniBul">Buldun beni =)</div>
********.getElementsByName : ********.getElementsByName('Alanlar'), name'i ad(lar)ı Alanlar olan öğeyi (öğeleri) döndür.
function OgeBul() {
var X = ********.getElementsByName("Alanlar");
alert(X.length);
}
<input name="Alanlar"><br>
<input name="Alanlar"><br>
<input name="Alanlar"><br>
<input type="button" onclick="OgeBul()" value="kaç adet Alanlar var?">
********.getElementsByTagName : ********.getElementsByTagName('INPUT'), etiket cinsi INPUT olan öğeyi (öğeleri) döndür.
//tüm INPUT cinsi öğeleri döndür
********.getElementsByTagName('INPUT')
//yada INPUT cinsinin CHECKBOX öğelerini döndür
********.getElementsByTagName('INPUT','CHECKBOX')
history Nesnesi
* Sayfanın gezinti geçmişini döndürür. HTML DOM nesnesi değildir, tamamen JS nesnesidir. JS bir tarayıcı bir belgeyi (sayfayı) açınca geçmişi tutmaya başlar ve istendiği zaman tuttuğu veriyi kullanıma sunar.
* window.history... şeklinde yada history... şeklinde kullanılabilir.
* Taratıcılarda bulunan "İleri - Geri" özelliğinin aynı şeklinde çalışır.
- history Nesnesi Özellikleri
length : geçmiş sayfaların uzunluğunu verir.
********.write(hitory.length)
- history Nesnesi Yöntemleri
back() : geçmiş belgeyi döndürür (1 geri gider), geçmişte bir belge bulamaz ise null sonucunu döndürür yani hiç bir sayfayı döndürmez.
<a href= "javascript:history.back()">Geri git</a>
forward() : gelecek belgeyi döndürür (1 ileri gider), gelecekte bir belge bulamaz ise null sonucunu döndürür yani hiç bir sayfayı döndürmez.
<a href= "javascript:history.forward()">İleri git</a>
go() : belirtilen belgeyi döndürür, belirtilen bir belgeyi bulamaz ise null sonucunu döndürür yani hiç bir sayfayı döndürmez.
<a href= "javascript:history.go(-1)">Bir geri git</a>
<a href= "javascript:history.go(-2)">İki geri git</a>
******** Nesnesi
* Belgenin URL bilgilerini döndürür. HTML DOM nesnesi değildir, tamamen JS nesnesidir. JS bir tarayıcı bir belgeyi açınca belgeye ait URL bilgisi tutmaya başlar ve istendiği zaman tuttuğu veriyi kullanıma sunar.
* window.********... şeklinde yada ********... şeklinde kullanılabilir.
- ******** Nesnesi Özellikleri
hash : URL'nin # işaretinden sonrasını kurar/döndürür.
https://tik.lat/yxSfy
********.write(********.hash) //#yol1
host : URL'nin host adını ve port numarasını kurar/döndürür.
https://tik.lat/bODly
********.write(********.host) //www.adres.com
hostname : URL'nin host adını kurar/döndürür.
https://tik.lat/1u2jF
********.write(********.host) //www.adres.com
href : tüm URL'yi kurar/döndürür.
https://tik.lat/fw7jl
********.write(********.href) //http://www.adres.com/dizin/abc.php
pathname : URL'nin host adından sonrasını kurar/döndürür.
https://tik.lat/jA41q
********.write(********.pathname) ///dizin/abc.php
port : URL'nin port numarasını döndürür (port numarası 80 ise belirsiz kalır).
ftp://www.adres.com [url]https://tik.lat/oyDCc
********.write(********.search) //?cat=123
- ******** Nesnesi Yöntemleri
assign() : yeni belge açar.
********.assign('yenibelge.php')
reload() : belgeyi yeniler.
********.reload()
replace() : açık olan belge yerine yeni bir belge açar.
********.replace('yenibelge.php')
navigator Nesnesi
* Tarayıcı bilgilerini döndürür. HTML DOM nesnesi değildir, tamamen JS nesnesidir. JS bir tarayıcı bir belgeyi açınca tarayıcıya ait bilgileri tutmaya başlar ve istendiği zaman tuttuğu veriyi kullanıma sunar.
- navigator Nesnesi Derlemleri (dizi olarak kabul edilebilir.)
plugins[] : tarayıcı eklentilerinin döndürür.
if (navigator.plugins['Shockwave Flash'])
********.write('Tarayıcıda Flash kurulu')
else
********.write('Tarayıcıda Flash kurulu değil')
- navigator Nesnesi Özellikleri
appCodeName : tarayıcı kod ismini döndürür.
********.write(navigator.appCodeName)
appMinorVersion : tarayıcı ikincil uyarlamasını (versiyon) döndürür (FF ve Opera'da çalışmaz).
********.write(navigator.appMinorVersion)
appName : tarayıcı adını döndürür.
********.write(navigator.appName)
appVersion : tarayıcı uygulama ve uyarlamasını döndürür.
********.write(navigator.appVersion)
browserLanguage : tarayıcı dilini döndürür (FF'da çalışmaz).
********.write(navigator.browserLanguage)
cookieEnabled : tarayıcıda çerez kabulünün açık olup olmadığını döndürür (true yada false sonuç verir).
********.write(navigator.cookieEnabled)
cpuClass : tarayıcı sisteminin CPU sınıfını döndürür (FF ve Opera'da çalışmaz).
********.write(navigator.cpuClass)
onLine : tarayıcının çevrimdışı/çevrimiçi çalışıp çalışmadığını döndürür (true yada false sonuç verir, Opera'da çalışmaz).
********.write(navigator.onLine)
platform : tarayıcı işletim sistemini döndürür.
********.write(navigator.platform)
systemLanguage : tarayıcı işletim sisteminin dilini döndürür (FF ve Opera'da çalışmaz).
********.write(navigator.systemLanguage)
userAgent : tarayıcıya ait tüm bilgileri döndürür.
********.write(navigator.userAgent)
userLanguage : tarayıcı işletim sisteminin dilini döndürür (FF'da çalışmaz).
********.write(navigator.userLanguage)
- navigator Nesnesi Yöntemleri
javaEnabled() : tarayıcıda Java eklentisinin açık olup olmadığını döndürür (true yada false sonuç verir).
********.write(navigator.javaEnabled())
taintEnabled() : tarayıcıda veri bozulmasının açık olup olmadığını döndürür (true yada false sonuç verir).
********.write(navigator.taintEnabled())
screen Nesnesi
* Ekran bilgilerini döndürür. HTML DOM nesnesi değildir, tamamen JS nesnesidir. JS kullanılmaya başladığında kullanıcı ekranına ait bilgileri tutmaya başlar ve istendiği zaman tuttuğu veriyi kullanıma sunar.
- screen Nesnesi Özellikleri
availHeight : tarayıcının yerleşebileceği yüksekliği döndürür (görev çubuğunu dikkate alır).
availWidth : tarayıcının yerleşebileceği genişliği döndürür (görev çubuğunu dikkate alır).
height : ekran yüksekliğini (çözünürlüğünü) döndürür.
width : ekran genişliğini (çözünürlüğünü) döndürür.
colorDepth : ekranın renk kalitesini pixel cinsinden döndürür.
pixelDepth : ekranın renk çözünürlüğünü pixel cinsinden döndürür (IE'da çalışmaz).
IE'da çalışmayan ve bana göre gereksiz olan bir kaç özelliği buraya aktarmadım, istenirse burdan açıklamalarına ve buradan'dan da emsallemerine ulaşılabilir.
Böylece temel anlamda sıfırdan başlayıp sonuna kadar JavaScript dilini bir anlamda ele almış olduk, fakat unutmayın ki JavaScript geniş bir dildir ve çok fazla alanda çeşitli yöntemler kullanılarak programlar yazılabilir.
Mesela C:\\********s and Settings\\user\\Application Data\\Mozilla\\Firefox\\Profiles klasörüne baktığınızda Firefox için ne kadar önemli olduğunu göreceksiniz.
Tüm makaleyi indirmek için aşağıdaki bağlantıları kullanabilirsiniz (Bağlantılarda sorun olursa buraya yazmayın, bana PM ile bildirin lütfen).
DOC (MS Word) formatında (JavsScript(Manual)):
köprü 1
köprü 2
MHT (Zengin HTML) formatında (JavsScript(Manual)-(mht)):
köprü 1
köprü 2
ÇOK UĞRAŞTIM Bİ ++REPİ ÇOK GÖRMEYİN
