Flashcentury » JavaScript http://blog.flashcentury.de Bir başka WordPress blogu. Mon, 18 Jan 2010 15:45:59 +0000 http://wordpress.org/?v=2.9.1 en hourly 1 Javascript Alert (ikaz) Komutu http://blog.flashcentury.de/index.php/programlama/javascript-dersleri/javascript-alert-ikaz-komutu.html http://blog.flashcentury.de/index.php/programlama/javascript-dersleri/javascript-alert-ikaz-komutu.html#comments Mon, 02 Mar 2009 10:54:45 +0000 Huseyin Kocak http://www.flashcentury.net/?p=329 Alert (ikaz) konutu JavaScript ‘te sıklıkla kullanılır, bazen ziyaretçiye bilgi vermek için kullanılsa da benim tavsiye edeceğim kullanım alanı bir değişkeni kontrol ederken veya kodunuzun doğru calışıp çalışmadığını test etmek için olacaktır. Eğer daha inceden Action Script kullandıysaniz Alert konutunu ActionScript ‘teki trace komutu olarak düşünebilirsiniz.

Örnek ;

<html>
<head>
<script type="text/javascript">
function load()
{
alert("Merhaba Dünya");
}
</script>
</head>
<body onload="load()">
</body>
</html>

Yukarıdaki örneği bir Html dosyası olarak kaydedip çalıştırdığınızda, bir pencere açılıp “Merhaba Dünya” yazacaktır.

]]> http://blog.flashcentury.de/index.php/programlama/javascript-dersleri/javascript-alert-ikaz-komutu.html/feed 0 JavaScript ‘te Operatörler (İşleçler) http://blog.flashcentury.de/index.php/programlama/javascript-dersleri/javascript-te-operatorler-islecler.html http://blog.flashcentury.de/index.php/programlama/javascript-dersleri/javascript-te-operatorler-islecler.html#comments Mon, 02 Mar 2009 10:24:22 +0000 Huseyin Kocak http://www.flashcentury.net/?p=327 Aslinda Operatörle bize cok yabanci degildir hayatimizin her alaninda bu işaretleri ve işlevlerini kullaniyoruz veya öğrenciliğimiz boyunca bir çok defa derslerimizde işledik örneğin toplama, cikarma, bölme veya çarpma gibi bu tip işlemleri JavaScript ‘te  yapmamiz gerekebilir.
Operatörler 4 gruba ayrılırlar ;

  • Aritmatiksel Operatörler
  • Karşılaştırma Operatörleri
  • Mantiksal (Lojikal) Operatörler
  • Atama Operatörleri

Aritmatiksel Operatörler ;
Bildiğimiz matematiksel operatörlerdir (örnegin toplama, cıkarma, bölme vb…) Bu operatörlerin sembolleride bize pek yabanci degildir;

+      Toplama
-       Çıkarma
*      Çarpma
/       Bölme
%     Bölmeden sonra kalan sayı
–     1 Eksiltme
++   1 arttırma

 

Karşılaştırma Operatörleri ;
Değiskenleri biririyle karşılastırmaya yararlar (Örneğin büyüktür, küçüktür, eşittir vb..)

=     Eşittir İki degerin esitligini kontrol eder.
!=   Birbirinden farklı Eşittir işaretinin tam tersi olarak düşünebilirsiniz.
<     Küçüktür İki sayidan birinin digerinden kücük oldugunu kontrol eder.
>     Büyüktür İki sayidan birinin digerinden büyük oldugunu kontrol eder.
<=  Küçük Eşittir İki sayidan birinin digerinden kücük veya esit oldugunu kontrol eder.
>=  Büyük Eşittir İki sayidan birinin digerinden büyük veya esit oldugunu kontrol eder.

 

Mantiksal (Lojikal) Operatörler ;
Daha çok Mantiksal ifadeler de ( if ) kullanılırlar.

&&   ve anlamına gelir.
örneğin : if (A==B &&  A==C){ echo ”A hem B ‘ye, hemde C’ye eşit“;}

||   veya anlamında kullanılır.
örneğin : if (A==B ||  A==C){ echo ”A ya B ‘ye, yada C’ye eşit“;}

!    negetifleştirmek için kullanılır.
örneğin : if (A!=B ){ echo ”A, B ‘ye eşit değil“;}

 

 

 

Atama Operatörleri ;
Atama operatörü, sağ tarafındaki operandın değerinin sol tarafındaki dğere aktarılmasını sağlar. Aşağıdaki listede operatörler ve işlevleri verilmiştir.

X += Y X = X + Y
X -= Y A = X – Y
X *= Y X = X * Y
X /= Y X = X / Y
X %= Y X = X % Y
X <<= Y X = X << Y
X >>= Y X = X >> Y
X >>>= Y X = X >>> Y
X &= Y X = X & Y
X ^= Y X = X ^ Y
X |= Y X = X | Y

 

]]> http://blog.flashcentury.de/index.php/programlama/javascript-dersleri/javascript-te-operatorler-islecler.html/feed 0 JavaScript ‘te Events (Olaylar) http://blog.flashcentury.de/index.php/programlama/javascript-dersleri/javascript-te-events-olaylar.html http://blog.flashcentury.de/index.php/programlama/javascript-dersleri/javascript-te-events-olaylar.html#comments Thu, 04 Dec 2008 01:58:34 +0000 Huseyin Kocak http://www.flashcentury.net/?p=325 Events yani olayları Javascript nesnelerini tetikleyenler unsurlar olarak görmeliyiz.

Örnegin; Mause linklerin üzerinde geldiginde, “onMouseOver” özelliği tetiklenmiş olur.

Eğer linki tıklarsa, bu sefer önce “onMouseDown”, sonra ise “onMouseUp” ve “onClick” tetiklenmiş olur.

Nesnelere Tanımlanabilecek olaylar şunlardır.

1. onclick Fareyle tıklamayı ifade eder.
2. ondblclick Fareyle çift tıklamayı ifade eder.
3. onmouseover Farenin imleciyle üzerine gelmeyi ifade eder.
4. onmouseout Farenin imlecini üzerinden çekmeyi ifade eder.
5. onmousedown Fare düğmesine basmayı ifade eder.
6. onmouseup Fare düğmesini bırakmayı ifade eder.
7. onload Sayfanın yüklenmesini ifade eder.
8. onunload Sayfanın kapatılmasını ifade eder.
9. onchange Form aracının değişmesini ifade eder.
10. onsubmit Form bilgilerinin gönderilmesini ifade eder.
11. onreset Form bilgilerinin silinmesini ifade eder.
12. onselect Form aracının seçilmesini ifade eder.
13. onblur Form aracının pasif hale geçmesini ifade eder.
14. onfocus Form aracının aktif hale geçmesini ifade eder.
15. accesskey İstenen karakterin girilmesini ifade eder.
16. tabindex Nesnelerin işlem sıralamasını numaralandırır.
17. onkeydown Tuşun basılmasını ifade eder.
18. onkeyup Tuşun salınmasını ifade eder.
19. onfocus Tuşun basılıp salınmasını ifade eder.

bu olaylardan en çok kullanılanları inceleyelim.

onClick

Web sayfası üzerinde bir nesnenin mouse ile üzerine tıklanması sonucu onClick olayı gerçekleşir. Olayın gerçekleşmesi için mouse’un nesneyi tıklayıp bırakması gereklidir. Bağlantılar, resimler, form düğmeleri tıklanabilecek nesneler arasındadır.

Örnek :

<html>
<head>
<title>OnClick Olayı</title>
<script language=”javascript1.2″>
<!–
function tiklandi()
{alert (“tikladiniz”); }
–>
</script></head>
<body>
<form>
<input type=”button” name=”tikla” value=”tikla” onClick=tiklandi()>
</form>
</body>
</html>

Butana tıklanıp bırakıldıgında onlick olayı gercekleşir ve ardından <head> etiketleri arasında yerleştirilen tiklandi() fonksiyonı çağrılır.

onMouseOver , onMouseOut

onMouseOver = mouse işaretçisi(imleç) üzerindeyken , onMouseOut = mouse işaretçisi üzerinden ayrıldığında.

Örnek :

<html>
<head>
<title>onMouseOver ve onMouseOut Olayı </title>
<meta http-equiv=”Content-Type” content=”text/html; charset=windows-1254″>
<script language=”javascript1.2″>
<!–
function uzerinde()
{window.status=”Tıklayın ve http://javascript-dersi.blogspot.com adresine gidin” }
function disinda()
{window.status=”http://javascript-dersi.blogspot.com baglantisina tıklayın” }
–>
</script>
</head>
<body>
<a href=”http://javascript-dersi.blogspot.com” onMouseOver = uzerinde()
onMouseOut =disinda()>

http://javascript-dersi.blogspot.com</a>

</body>
</html>

Bur örnek birak htmlde bağlara verilen title özelliğine benziyor.

onSubmit

Web programlamada action olayında bilgileri doldurulan formu sunucuya yollar.
Javascript’ de bu onSubmit olayı ile form gönderilmeden önce formun düzgün doldurulup doldurulmadığını kontrol edebiliriz.

Basit bir örnek.

<html>
<head>
<title>OnSubmit Olayı </title>
<script language=”javascript1.2″>
function Dogrumu()
{ confirm (“Formu düzgün doldurduysanız OK’i tıklayınız’); }
</script> 

</head>
<body>
<form action=”mail.asp” method=”post” onSubmit=” Dogrumu()”>
Buraya birde submit butonu koy
</body>
</html>

OnSubmit nesnesi ile kullanıcıya OK ve Cancel tuşları ile emin misin ? uyarı penceri çıkartıyoruz.

onReset

Bu olay ile web sayfanızda bulunan formdaki yazdıklarınızın tamamen silinir. Sil (Reset) tuşunu tıklarsınız size boş bir form gelir.

Fakat siz onReset olayı ile bu durum için son bir ziyaretçiye seçenek sunabilirsiniz.

Bunun ile ilgili bir örnek yapalım :

<html>
<head>
<title>JAvascript Reset</title>
<meta http-equiv=”Content-Type” content=”text/html; charset=windows-1254″>
</head>
<body>
<form name=”form1″ method=”post” action=”">
<input type=”text” name=”textfield”>
<input type=”text” name=”textfield2″>
<textarea name=”textarea” ></textarea>
<input type=”reset” name=”Reset” value=”Temizle”>
</form>
</body>
</html>

onChange

Web sayfası üzerinde ziyaretçinin değiştirebileceği üç tür alan vardır. Bunlar text (metin) textarea (geniş metin alanı) select (seçim alanı) dır.

Mouse u bu alanlar üzerine getirip tıkladığınızda onChange(değişti) olayını gerçekleştirmiş olursunuz.

Güzel Bir Örnek yapalım..

<html>
<head>
<script language=”JavaScript”>
function ss() {
var al=”hotmail”
var as =”super”
var ad=”mynet”
var af=”yahoo”
if(document.fff.secenek.value==al){
ms= window.open(‘http://www.hotmail.com’)}
if(document.fff.secenek.value==as){
ms= window.open(‘http://www.superonline.com.tr’)}
if(document.fff.secenek.value==ad){
ms= window.open(‘http://www.mynet.com.tr’)}
if(document.fff.secenek.value==af){
ams= window.open(‘http://www.yahoo.com’)}}
</script>
<title>java Script Onchange</title>
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″>
</head>
<body >
<form name=”fff” >
<select name=”secenek” onchange=”ss()” >
<option >site seciniz!!1
<option value=”hotmail” >hotmail.com
<option value=”yahoo” >yahoo.com
<option value=”super” >superonline.com
<option value=”mynet” >mynet.com
</select>
Gitmek Istediginiz Site!!!
</form>
<br><br><br>
<div align=”center”><a href=”JavaScript:onClick= window.close()” title=”JavaScript Pencereyi Kapat” >Kapat</A>
</div>
</body>
</html>

onLoad , onUnLoad

Bu olaylar bize sayfanın yüklenmeye başlamasında (onLoad) sayfadan ayrılıncaya (onUnLoad) kadar olan yapılacak işlemler için gereklidir.

Bir Javascript fonksiyonun web sayfası yüklenmeye başladığında otomatik olarak çalışmasını istiyorsak onLoad olayını kullanırız.

Mesela sayfa yüklenmeye başladığında (onLoad) ziyaretçiye Web sitemiz hoş geldiniz diyebiliriz. Sayfadan ayrıldığında (onUnLoad) ise Güle Güle diyebiliriz.

Head kısmında sayanın nasıl görüntüleneceği gibi bölümler yer alır. Bu yüzden onLoad ve onUnload kısmı body etiketleri arasında yer alır.

Şimdi de bunun için gerekli kodlara bir göz atalım.

<html>
<head>
<title>onLoad onUnLoad Olayı</title>
<script language=”javascript1.2″>
<!–
function hosgeldiniz()
{
alert(“Web Sitemize Hosgeldiniz”)
}
function gulegule()
{
alert(“Iyi sorfler..”)
}
–>
</script>
</head>
<body onLoad=”hosgeldiniz()” onUnload=”gulegule()”>
</body>
</html>

onError onAbort

Ziyaretçinin Browser’ı açmak üzere olduğu sayfayı transfer hatası yüzünden açamaz, HTML veya Javascript kodunu doğru yorumlayamazsa, Error (hata) olayı oluşur.

Bir resminde image map yaptınız ve dolayısıyla düzgün çalışabilmesi için resmin tam yüklenmesi gerekir.

Örnek :

<img src=”resim.gif” onError=”alert(“Resim.gif tam olarak yüklenemedi’)”>

Eger resmin yüklenmesi ziyaterci stop( dur) tuşu ile durdurursa ( onabort olayı gerçekleşir) olaşacak hatayı ziyaretcinize bildirebilirsiniz.

<img src=”resim.gif” onAbort=”alert(“Resim harita dosyası
tam olarak yüklenemedi. İlgili resim bir harita olduğu için
yüklenmesini tavsiye ederiz.’)”>

onFocus, onBlur

HTML sayfasında da Browser’ın Focus’unu (dikkat odağını) üzerinde topladığı veya odağın çekildiği üç nesne olabilir: Text (Metin), Textarea (Metinalanı) ve Select (Seç) etiketleri. Bu nesnelerden biri tıklanınca Browser’ın focus’u bu nesneye dönmüş, yani “focus” olayı olmuş demektir; bu durumda, biz de bu olayı yönlendiren onFocus’u kullanabiliriz.

Aynı mantıkla, ziyaretçi Browser’ın focus’unu bu nesneden başka bir yere çektiği zaman bu nesne focus’u kaybeder, “blur” (netlikten çıkma, flulaşma) olayı olur. Bunu da onBlur ile yönlendiririz. Bu iki yönlendiricinin birlikte kullanıldığı şu örnek kodu, onFocus.htm adıyla kaydederseniz ve Browser’da ekrandaki talimatları izlerseniz, her iki yönlendiriciyi de kullanmış olacaksınız:

<HTML>
<HEAD>
<TITLE> onFocus ve onBlur Olayı</TITLE>
<SCRIPT LANGUAGE=”JavaScript1.2″>
function goster()
{
document.isimForm.ad.value=”Adınız kayda geçmiştir.”
}
function uyar()
{
document.isimForm.ad.value=”Lütfen yanlışlık yapmayınız!”
}
// –>
</SCRIPT>
</HEAD>
<BODY>
<BR>
<FORM NAME=”isimForm”>
<P>Lütfen adınızı yazın ve sayfa üzerinde başka bir yeri tıklayın:
<BR><INPUT TYPE=”text” NAME=”ad” VALUE=”Adınızı buraya yazınız” SIZE=25 onBlur=”goster()”>
<P>Şimdi de aşağıdaki kutuya mesleğinizi yazın:
<BR><INPUT TYPE=”text” NAME=”meslek” VALUE=”Mesleğinizi buraya yazınız” SIZE=25 onFocus=”uyar()”>
</FORM>
</BODY>
</HTML>
]]> http://blog.flashcentury.de/index.php/programlama/javascript-dersleri/javascript-te-events-olaylar.html/feed 1 JavaScript ‘te Değişkenler http://blog.flashcentury.de/index.php/programlama/javascript-dersleri/javascript-te-degiskenler.html http://blog.flashcentury.de/index.php/programlama/javascript-dersleri/javascript-te-degiskenler.html#comments Sun, 23 Nov 2008 11:58:19 +0000 Huseyin Kocak http://www.flashcentury.net/?p=323 JavaScript değiskenleri Var  komutuyla tanımlarız.

var Adi
var Soyadi

Ayrıca değişkenleri tek satırda tanımlaza bilir hatta aynı satır üzerinde değerini verebilirz. Örneğin ;

var Adi, Soyadi

Değer atamak için ;

var Adi ="Hüseyin", Soyadi="Kocak"

ama değer atama işlemini ayrı bir satirda da yapabilirdi, Örneğin,

Var Adi, Soyadi, Yasi
Adi = "Hüseyin"
Soyadi = "Kocak"
Yasi = 30

Değişkenlere verilecek ismimlerin anlaşılır olması programın okunulurluğunu kolaylaştırır. Ayrıca değişken tanımlarken uyulması gereken bazı kurallar vardır;

  1. Değişken ismi bir harf veza altcizgi  ile başlamalıdır.
    Ad1, Ad2, _Ad şeklinde değişken tanımı yapılabilir fakat 1Ad veya 2Ad kullanımı yanlıştır
  2. Değişken isminde boşluk bulunamaz. Bunun yerine alt çizgi karakteri kullanılabilir.
    Adi_Soyadi doğru kullanımdır.
  3. Değişken isimlerinde İngilizce ‘de olmayan karakterleri (ş, ç, ö, ğ vb.) kullanmayınız.
  4. Değişken ismi 255 karakterden fazlada olamaz.
  5. Değişken isimleri içinde diğer semboller (+, -, /, boşluk, vb.) yer alamaz.
  6. Değişken isminiz SOYAD ise, bu değişkeni hep böyle büyük harflerle yazmak zorundasınız. soyad yazarsanız,  Asp bunu farklı bir değişken olarak okur.

Öyellıkle son şıkta yazdığım, büyük küçük harf olayı programcıların ilk başta sıklıkla yaptığı hatalardan biridir JavaScript case-sensitive olduğu için kodlamada büyük küçük harf  konusunda çok hassatır.

Bu kadar teknik bilgiden sonra artık birazda ugulama yapalım ;

Var Ad, Soyad, Maas, Odeme_Durum
Ad = "Hüseyin";
Soyad = "Koçak";
Maas = 200;
Odeme_Durum = true;

Burada 3 farklı türdeki değişkeni tanımlamış olduk bunlar

Strings = Düz metinlerdir (Alfanümerik ) ve tırnak ( ” ) içinde yazılırlar

Ad = "Hüseyin"
Soyad = "Koçak"

Numbers = Adından da anlaşıldığı üzere sayı değerleridir. Eksi veya artı değerlerini alabilirler.

Maas = 200
Borc = -250

Booleans = Sadece True (Doğru) veya False (Yanlış) degerini alırlar, programlamaza göre 0 veya 1 olarata degerlendirilebilir. Sadece iki olasilikli bir değişken türü oldugu için sistemi fazla zorlamazlar.

Odeme_Durum = true
Borc_odeme = false

Ayrıca bu üç değişken türü dışında Null, Undefined, Object ve funciıon olmak üzere dört farkı değişken türü daha vardırç İleri derslerde bol bol değineceğiz ama bu değişken türlerini kısaca açıklama gerekirseÖ

Null = Değeri yoktur daha doğrusu değeri tamamen boştur

var maas
maas = Null

Undefined= Değeri yoktur fakat Null ıle karıştırılmasın. Null ‘da değişkenin değeri olmasa bile en azından sıfır ( 0 ) yani tamamen boştur fakat Undefined değersizdir JavaScript ‘ın bu değişken hakkında hiçbir fikri yoktur :) 

Var Adi
if Adi=(Undefined){
Adi = "Bilinmiyor"
}

Object = Object aslında tam anlamıyla değişken sayılmaz ama JavaScript kodları içerisinde Oblectlerı bir değişken gibi kullanmamız mümkün.

var Neslemiz
Neslemiz = new Object();

Function= Function (Fonksiyon) aslında başlı başına ayrı bir konudur. JavaScript ‘te fonksizonlar çok önemli bir yer tutar ve esasen bütün kodlama neredeyse fonksiyonlardan oluşur.
 

var fonksiyonumuz = Function

veya

function Fonksiyonumuz

Şeklinde tanımlanabilir.

]]> http://blog.flashcentury.de/index.php/programlama/javascript-dersleri/javascript-te-degiskenler.html/feed 0 Json`da diziler (array) http://blog.flashcentury.de/index.php/programlama/javascript-dersleri/ajax-dersleri/jsonda-diziler-array.html http://blog.flashcentury.de/index.php/programlama/javascript-dersleri/ajax-dersleri/jsonda-diziler-array.html#comments Mon, 10 Nov 2008 08:57:30 +0000 Huseyin Kocak http://www.flashcentury.net/?p=321 Bir Önceki dersimizde Json’un (JavaScript Object Notation) ne oldugunu ve nasil tanimlama yaptigimizi anlatmistim. Simdi ise Json ile dizi tanimlamayi gösterecegim. Böylelikle siraki isimiz Javascript veya diger programla dilleriyle ile Json’u cagirmak ve kullanmak olacak.

Hadi baslayalim ;

[
“Ocak” ,
“Subat” ,
“Mart” ,
“Nisan” ,
“Mayis” ,
“Haziran” ,
“Temmus”,
“Agustos” ,
“Eylül” ,
“Ekim” ,
“Kasim” ,
“Aralik”
]

Gördügünüz gibi diziler köseli Parantez ( [  ] ) ile baslar ve biterler, dizi icerisindeki degeler virgül ( , ) isareti ile ayrilir ve eger deger string yani yazi ise cift tirnak ( ” ) icerisine alinirlar.

Yukaridaki örnek tek boyutlu bir dizidir fakat Json bize iki boyut veya daha fazla boyutta dizi tanimlama imkanida sunar;

[
[
“Ocak” ,
“Subat” ,
“Mart” ,
“Nisan” ,
“Mayis” ,
“Haziran” ,
“Temmus” ,
“Agustos” ,
“Eylül” ,
“Ekim” ,
“Kasim” ,
“Aralik”
] ,
31 ,
28 ,
31 ,
30 ,
31 ,
30 ,
31 ,
31 ,
30 ,
31 ,
30 ,
31
]
]

Gördügünüz gibi Json ile iki boyutlu bir dizi (Array) tanimlamis olduk. Yukaridaki örnekte ay isimleri ve o ayin kac gün cektigini tanimladik. Dizilerin köseli parantezler ( [ ] ) icerisine yazildigini yukarida söylemistim, cok boyutlu dizi tanimlarken de köseli parantez ( [ ] ) kullaniyoruz ve dizileri birbirinden ayirirken yine virgül ( , ) isareti kullaniyoruz. Yukaridaki örnekte ay isimleri bitip köseli parantezle kapatildiktan sonraki virgül ( , ) isareti ikinci boyutun oldugunu belirtmektedir. Yukaridaki örnekte bir diger ayrinti ise ikinci gruptaki, ayin kac gün cektigini gösteren veriler sayi oldugu icin cift tirnak ( ” ) icerisinde yer almadi, diger programlama dillerinde oldugu gibi Jsonda da sayilar tirnak icerisinde yer almamaktadir. Bir önceki dersimizde Json veri cesitleri ile ilgile bilgi sahibi olabilirsiniz.

Ilerleyen derslerde diger programla dillerinin Json ile nasil baglanti kurdugunu anlatarak devam edecegim. Bir sonraki derste görüsmek üzere…

]]> http://blog.flashcentury.de/index.php/programlama/javascript-dersleri/ajax-dersleri/jsonda-diziler-array.html/feed 0 Json Nedir? http://blog.flashcentury.de/index.php/programlama/javascript-dersleri/ajax-dersleri/json-nedir.html http://blog.flashcentury.de/index.php/programlama/javascript-dersleri/ajax-dersleri/json-nedir.html#comments Tue, 04 Nov 2008 09:01:14 +0000 Huseyin Kocak http://www.flashcentury.net/?p=318 AJax ilk kullanilmaya baslandigi yillarda Xml ‘lin gücünden bol bol faydalanacagi düsünülmüstü fakat Xml ‘lin javaScript ile parse edilmesi zor ve zahmetli oldugundan yeni cözümler düsünüldü ve sonunda Json yani orjinal acili ile ( JavaScript Object Notation) biz programcilara sunuldu.

Json ‘nu Xml ‘le alternatif olarak düsünebilirsiniz. Her ne kadar Ajax uygulamalarinda Xml hala kullanilsa veya kullanilmaya devam etsede hemen hemen ayni isleri  Json ile de cok daha bir sekilde yapabiliriz.  Json javaScript ‘in alt kümesi olduğu için Xml ‘den çok daha hızlı bir şekilde calistigini göreceksiniz. Ayrıca bir diger avantaji ise Json ile biçimlendirdiğiniz bir veri kümesini Xml ‘le kiyasla daha az yer kaplamasidir.

Json ‘nun ne oldugunu konusunda bir fikir sahibi oldunuzu düsünerek birazda uygulama yapalim.

{
“isim”: “Hüseyin Kocak”,
“yasi”: 30,
“calisiyor”: true
}

Örnektende anyacaginiz üzere, Json ‘da nesneler Parantez ( {   } ) isareti ile baslar ve biter. Bunu Css ‘ye benzetebilirsiniz. Ayrica degisken isimleri cifttirnak ( “ ) isaretleri arasina yazilir, deger ile aralarina iki nokta üst üste ( : ) ve son olarak veriler virgül ( , ) isareti ile ayrilir.


Veri Cesitleri ;

Json ile 4 cesit veri olusturmaniz mümkündür bunlar;

  • yazi (string)    –> cift tirnak ( ” ) icerisinde yazilirlar
  • Sayi (Number)
  • true – False –> dogru veya yanlis (boolean)
  • null

Yukaridaki örnekte ilk üc degisken türünü görebilirsiniz. Örnekte yer almayan null ise bir gdegere sahip olmadigi durumlarda kullanilir.

simdi yukaridaki örnegimize baska nesnelerde ekleyelim;

{
"elemanlar":[
{
"isim" : "Hüseyin Kocak",
"yasi" : 30,
"calisiyor" : true
},
{
"isim":"Ergin Baltaci",
"yasi" : 27,
"calisiyor" : false
},
{
"isim":"Ali Gündüz",
"yasi": 29,
"calisiyor": true
}
]
}

Gördügünüz gibi köseli paranteler ( [  ] ) icerinde diger nesneleri tanimliyoruz. Bir sonraki derste Json ‘da dizi (array) islemleri adli baslikta bu konu hakkinda daha fazla fikir sahibi olacaginizi düsünüyorum.

Simdi yukaridaki son örnegimizi Xml ile yapmis olsaydik, nasil bir yol izlecektik ve ne gibi ajavantaj veya dezavantajlarimiz olurdu bir göz atalim ;

<elemanlar>
    <eleman>
        <isim>Hüseyin Kocak</isim>
        <yasi>30</yasi>
        <calisiyor>true</calisiyor>
    </eleman>
    <eleman>
        <isim>Ergin Baltaci</isim>
        <yasi>27</yasi>
        <calisiyor>false</calisiyor>
    </eleman>
    <eleman>
        <isim>Ali Gündüz</isim>
        <yasi>29</yasi>
        <calisiyor>true</calisiyor>
    </eleman>
</elemanlar>

Gördügünüz bircok Tag acip kapamak zorunda kaliyoruz ayrica her iki örnegide text olarak kaydederseniz Json ile yazilmis kodumuzun cok daha az yer kapladigini göreceksiniz bunu binlerce nesne yüklü bir dosya oldugunu düsünürsek aradaki fark cok daha belirgin bir sekilde acilacaktir. Fakat yukarida belirttigim gibi Json ‘un en büyük avantaji javaScript ‘in bir alt kümesi olduğu için Ajax uygulamalarınızda cok daha kolaylıkla kullanabilmemiz ve Xml gibi parse edilmesine gerek yoktur. Bir diger avantaji ise Json ‘u Html veya hangi programlama diline kullaniyorsaniz direk kodlariniz icerisine yerlestirip bir değişkene set ederek kullanabilirsiniz.

Json Php, Asp, .Net, Python, ColdFusion, java, vb.. tüm programlama dillerinde kullanilabilir.

Bir sonraki dersimizde Json ‘da dizi (array ) islemlerini anlattiktan sonra Json ‘nu nasil kodumuz icerisinde nasil kullanacagimizi ve Ajax uygulamalarinda ne tip görevler veregimizi örneklerle anlatmaya devam edecegim.

]]> http://blog.flashcentury.de/index.php/programlama/javascript-dersleri/ajax-dersleri/json-nedir.html/feed 1 JavaScript Nedir? http://blog.flashcentury.de/index.php/programlama/javascript-dersleri/javascript-nedir.html http://blog.flashcentury.de/index.php/programlama/javascript-dersleri/javascript-nedir.html#comments Sat, 11 Oct 2008 17:23:26 +0000 Huseyin Kocak http://www.flashcentury.net/?p=311 Bildiginiz gibi Html sadece taglardan olusan bir programlama dilidir. Yapabiliecegi isler sahip oldugu taglarla sinirlidir örnegin programla dillerinin en önemli yapi taslarindan biri olan sartli ifade (if then else) özelligi bile yoktur. Iste Javascript Html ‘yi daha dinamik olarak kullanma görevini üstlenmis bir programlama dilidir. Ilk olarak Netscape firması tarafından Html’in sahip olmadığı bazı özelliklerin web sayfalarında kullanılmak amaci ile C dilinden esinlenilerek yazılmıştır. Netscape, Inc. zaman icerisinde calismalarina devam ederek JavaScript dilini bizlere kazandirmistir. Ajax ‘in temel programi olan JavaScript bir cok web programcisinin vazgecilmezidir.

Javascript ‘in en büyük dezavantaji web tarayici ( browser ) uyusmazligi sorunu ile sik sik karsilasiyor olmamisi. Yukarida da Anlattigim gibi JavaScript dili Netscape Firmasi tarafindan gelistirilmistir ve ilk olarak Netscape 2.0 versiyonunda akabinde Firefox ‘ta uygulanmistir. Sonrasinda JavaScript ‘tin kullanim alani hergecen gün gelismis ve en sonunda Microsoft firması bu dili Internet Explorer’a eklememistir. Fakat Microsoft her zamnki gibi gicikli yapmaktan geri kalmayip Kendi yazım kurallarını belirlemistir ve  kodu kendi istedigi sistemde Internet Explorer ‘da algilatmaktadir bu nedenle Bazi kodlar Firefox veya operada farkli gözükürken Internet Explorer ‘da farkli sonuclar verebiliryor. Bu sebeple Web sitenize Javascript kodlari yazarken her iki tarayicida tet edip ikisinde de calisir sekilde kodlamak gerekiyor.

]]> http://blog.flashcentury.de/index.php/programlama/javascript-dersleri/javascript-nedir.html/feed 1 javaScript Kodlarınızı Sıkıştırmak İçin Araçlar http://blog.flashcentury.de/index.php/web-site-tanitimlari/javascript-kodlarinizi-sikistirmak-icin-araclar.html http://blog.flashcentury.de/index.php/web-site-tanitimlari/javascript-kodlarinizi-sikistirmak-icin-araclar.html#comments Wed, 08 Oct 2008 23:55:44 +0000 Huseyin Kocak http://www.flashcentury.net/?p=302 Web Sitenize ufakta olsa hiz kazandırma için üzerinde tüm çalışmaları tamamladığınız JavaScript kütüpanelerinizi (dosyalarınızı) sıkıştırmak mantıklı bir hareket olabilir.

Aşağıda JavaScript dosyalarınızı sıkıştırma ( Javascript compressor  )hizmet veren belli başlı siteleri listeledim, beğeninize göre aşağıdaki sitelerden istediğiniz bu iş için kullanabilirsiniz.

 

Online Javascript compressor hizmeti veren bu sitelerden bazıları dosyaları tekrar okunabilir hale getiriken bayıları sadece dosyanızı sıkıştırmala hizmetini tamalıyor, bu noktada size tavsiyem sıkıştıracağınız js dosyasının ilk önce bir kopyasını almanız olacaktır. Bu sayede eğer ileride Javascript dosyanizda bir düzenleme veya ekleme yapmanız gerekirse kopyaladığınız dosya üzerinde yapabilirsiniz.

Javascript ‘tin yanı sıra aynı sıkıştırma işlemini Css üzerinde yapmak isterseniz CSS Kodlarınızı Sıkıştırmak İçin Araçlar isimli makaleden faydalanabilirsiniz.

]]> http://blog.flashcentury.de/index.php/web-site-tanitimlari/javascript-kodlarinizi-sikistirmak-icin-araclar.html/feed 0 CSS Kodlarınızı Sıkıştırmak İçin Araçlar http://blog.flashcentury.de/index.php/web-site-tanitimlari/css-kodlarinizi-sikistirmak-icin-araclar.html http://blog.flashcentury.de/index.php/web-site-tanitimlari/css-kodlarinizi-sikistirmak-icin-araclar.html#comments Wed, 08 Oct 2008 23:26:57 +0000 Huseyin Kocak http://www.flashcentury.net/?p=297 Eğer sitenizde çok ağır Css dosyaları varsa bu araçlar yardımı ile css dosyalarınızın boyutlarını küçültebilir veya eski haline dönüştürebilirsiniz.

Css dosyalarını sıkıştırma hizmeti ( CSS Compressor ) veren siteleri kendi beğenime göre sıralızorum siz bu siteler arasından beğenize göre tercihinizi yapabilirsiniz. 

Her ne kadar Css dosyalarınızı küçülterek sitenize ufak çaplı hız kazandırsanızda, aynı işlemi Javascript kütüpaneleriniz üzerinde de uygulayarak Css dosyalarınızdan elde ettiğiniz performansın daha fazlasını saglayabilirsiniz. Zira Javascript kütüpaneleri Css dosyalarına kıyasla çok daha büyük olabiliyor.

Online Javascript compressor Hizmeti veren sitelerin listesine javaScript Kodlarınızı Sıkıştırmak İçin Araçlar isimli makaleden ulaşabilirsiniz.

]]> http://blog.flashcentury.de/index.php/web-site-tanitimlari/css-kodlarinizi-sikistirmak-icin-araclar.html/feed 0 DOM nedir? http://blog.flashcentury.de/index.php/programlama/javascript-dersleri/dom-nedir.html http://blog.flashcentury.de/index.php/programlama/javascript-dersleri/dom-nedir.html#comments Wed, 08 Oct 2008 01:52:42 +0000 Huseyin Kocak http://www.flashcentury.net/?p=264 Dom yani Orjinal acilimi ile Document Object Model (Belge Nesne Yapısı) Ajax ‘in yapi taşlarindan birisidir. hazırladığınız web sayfasini internet tarayicisinda actiginizda tarayiciniz (Internet Explorer, Firafox, opera vb..) bu sayfayi bir dokuman (belge) olarak kabul ederler ve bu belde bulunan tum taglar hiyerarsik bir yapiya sahiptir örnegin ;

<div><ul><li><h3>yazi</h3></li><ul><div>

yani Div icinde –> liste –> listenin icinde –> h –> baslik (header) icinde yazimiz var.

iste Dom bu noktada html dokumani icerisindeki taglar ulamamizi saglar.

Daha önceden nesle tabanli bir programla dili kullandiysaniz Dom ‘u daha rahat kavrayabilaceginize eminim. Dom ‘u kisaca özetlemek gerekirse html veya xml dosyasi üzerindeki tüm nesnelere ulasir ve bu nesneler üzerinde islem yapma imkani sunar. Örnegin bir resimin width degerini degisterebilir veya bir form icindeki textbox ‘tan dagerini alabiliriz.

Dom ‘un islemesi icin iki ana faktör vardir birincisi sitenin temel dili yani Html duruma göre Xml ‘de olabilir ve birde dom ‘u isletecek bir isletme diline ihtiyac vardir. Isletme dili olarak genel olarak Javascript kullanilsada asp, php, python,jsp vb.. gibi server tabanli dillerde olarabilir hatta Php 5 ‘in en önemli yeniliklerinde bir tanesi bünyesinde Dom sinifi barindiriyor olmasi. Bu son yadiklarimdan sonra hakli olarak “Dom bir programlama dili degilmi ?” seklinde bir soru takilabilir. Dom kesinlikle bir programlama dili degil dom aslinda bir web saysinin kaynagidir daha dogrusu hazirlamis oldugunuz sayfanin yapisidir.

Isterseniz örneklerle anlatarak Dom ‘u kavramaya calisalim ;

Ilk browserler web sayfasini bir dokuman olarak kabul eder yazmistim. bu sebeple Dom hiyerarsisinde en yukaridaki kurum document ‘tir

document.

sonrasinda dokuman icerisindeki nesnelerimiz gelir;

document.form.textbox.

sonrasinda da bu neslenin özelligi gelir;

document.form.textbox.value

söyle bir kod yazalim

<script type="text/javascript"><!--
document.form.textbox.value = "Hüseyin Kocak"
// --></script>

<form method="post"> <input id="isim" type="text" /> </form>

burada form ‘un icindeki textbox ‘un degerini Hüseyin Kocak yaptik ve textbox ‘un bu özelligine Dom ile ulasmis olduk. bu durumda kutucuk icerisinde verdigimiz deger yazacaktir.

Sanirim bu örnekten sonra Dom ‘un ne oldugunu ve ne isie yaradigini daha iyi anladiniz.

Yukarida örnekte textbox ‘a hiyerarsik bir yapiyla tag isimleri araciligi ile ulastiniz fakat ayni islemi id araciligi ile yapabilirdik.

Simdi ayni örnegi bir kez daha yapalim

<script type="text/javascript"><!--
document.getElementById('isim').value = "Hüseyin Kocak"
// --></script>

<form method="post"> <input id="isim" type="text" /> </form>

Dokumanin getElementById özelligini kullanarak id ’si isim olan nesnenin degerine ulasmis olduk. Islev olarak yukaridaki örnekle tamamen aynidir fakat nesnelere Id ile ulasmak daha yaygindir ayrica ileri derslerimizde bol bol görecegimiz örneklerde nesneyi id ile bulup islemenin farklarini daha iyi kavrayacaksiniz

Ayrica nesnelere ait bir cok özellik mevcuttur size bir fikir vermesi acisindan bunlardan birkac tanesini yazacak olursak;

- title –> bu özellik ile web sayfanizin veya nesnenin basligini degistirebilirsiniz.

document.title = "Web SayfasininBasligini Degistirdim"

- className –> nesnenin css icin class ‘ini degistirir

document.div.className = "kirmizi"

- width –> nesnenin genislik ebatini verir

resimin_genisligi = document.resimim.width

Tabiki Dom bünyesinde bir cok nesne özelligi vardir yukarida saydiklarin bunlardan sadece birkac tanesi. Ilerleyen derslerde Dom ‘un diger özelliler ve örneklerle Dom derslerine devam edecegim.

]]> http://blog.flashcentury.de/index.php/programlama/javascript-dersleri/dom-nedir.html/feed 0