HTML

İlk olarak en yalın haliyle bir Select Menü (Sekme Menü) oluşturalım;

<select name="secenekler">
<option value="1" selected="selected">1. Seçenek</option>
<option value="1">2. Seçenek</option>
<option value="3">3. Seçenek</option>
<option value="4">4. Seçenek</option>
<option value="5">5. Seçenek</option>
</select>

Kodları test etmek için tıklayınız.

Yukarıda  gördünüz gibi bir sekme oluşturduk ve option ile 5 adet seçenek sunduk. <select> etiketine sadece name parametresini Kullandım. Bu etiket  <option> etiketindeki seçeneklerden hangisi seçilmiş ise onun değerini value parametresi alacılığı ile sever tabanlı bir programlama diline (PHP, ASP vb..) göndermenize ve işlenizi sağlıyor  (PHP başlığında açıklayacağım).

Name parametrisi haricinde <select> etikeinde kullanabileceğiniz bir çok parametre bulunmakta bunları kısaca açıklamak gerekirse;

• id → <select> etiketine benzersiz bir isim vermenizi sağlar (özellikle javaScript için kullanılır)
• class → CSS sınıfı tanımlamanız için kullanılır
• style → Direk CSS etiketleri girmeniz için kullanılır
• title → <select> hakkında bilgi veya başlık belirtmek için kullanılır (özellikle SEO çalışmalarına katkıda bulunur)
• lang → <select> içerisindeki verilerin dilini (lisanını) belirtmek için kullanılır
• dir → <select> listesini açmak için kullanılan buttonu (sağ taraftaki üçgen şeklindeki araç) sağa veya sola taşınmanızı sağlar
• size → Satır sayısını belirtmek için kullanılır (fakat CSS ile bu işlem çok daha başarılı bir şekilde yapıldığı için gereksizdir)
• multiple → Tek seçenek sınırlamasını kaldırarak birden fazla seçenek seçmenizi sağlar
• disabled → Select menünüzü pasif durumuna getirmek için kullanılır
• tabindex → Varsayılan seçeneği belirtmenizi sağlar.

CSS

Yukarıda 5 seçenekli sade bir Select Menü oluşturmuştuk. Şimdi bu Sekme Menüyü CSS Class oluşturarak standartların dışında farklı bir görünüme taşıyacağız.

Makalenin ilk başında bir proje üzerinde çalışırken bu konuda bir yazı yazma kararı aldım demiştim. Bahsi geçen projede ki Sekme Menüyü beraber adım adım tasarlayalım;
Buradan çalışmaya bakabilirsiniz : http://www.sabah.de/tr/sari-sayfalar

ilk olarak bir div oluşturuyoruz ve select-menu isminde bir class atıyoruz. Sonra div ‘in içine select menümüzü ekliyoruz

<div>
<select name="secenekler">
<option selected="selected" value="1">1. Seçenek</option>
<option value="1">2. Seçenek</option>
<option value="3">3. Seçenek</option>
<option value="4">4. Seçenek</option>
<option value="5">5. Seçenek</option>
</select>
</div>

ve CSS kodlarımızı yazmaya başlıyoruz;

<style type="text/css">
<!--
.select-menu{
background:url(select-background.jpg) no-repeat;
width:250px;
height:30px;
padding-left:440px;
padding-top:215px;
}
.select-menu select {
width:250px;
height:30px;
padding:5px;
padding-left:1px;
font-weight:bold;
font-size:12px;
color:#223C75;
background:#f1f1f1;
border:1px #666666 solid;
}

.select-menu select option{
padding:3px;
}
-->
</style>

Kodları test etmek için tıklayınız.

select-menu CSS klası ile <select> ve <option> etiketlerini yeniden boyutlandırdık, yazı renklerini ve boyutlarını değiştirdik ayrıca bazı ufak ayrıntılarla standart görünümünde kurtardık.

JAVASCRIPT

<select> etiketi javaScript ile en sık kullanılan HTML form öğelerindendir ve bünyesinde bir çok javaScipt olayı barındırır.

• onclick →    <select> etiketini fare (mouse) ile tıklandığında tetikler.
• ondblclick →    <select> etiketini fare (mouse) ile çift tıklandığında tetikler.
• onmousedown →    Fare (mouse) sol tuşuna basıldığında tetikler.
• onmouseup →    Basılı olan fare (mouse) tuşu bırakıldığında tetikler.
• onmouseover →    <select> etiketinin üzerine fare ile gelindiğinde tetikler.
• onmousemove →    <select> etiketinin üzerinde fare ile hareket edildiğinde tetikler.
• onmouseout →   <select> etiketinin üzerine fare ile üzerine gelinip sonra çıkıldığında tetikler.
• onkeypress →   <select> etiketinin üzerine fare ile üzerindeyken klavyeden bir tuşa basıldığında tetikler.
• onkeydown →    <select> etiketinin üzerindeyken klavyeden bir tuşa ilk basıldığı anda tetikler.
• onkeyup →   <select> etiketinin üzerindeyken basılı olan klavye tuşu bırakıldığında tetikler.
• onfocus →   <select> etiketi seçildiğinde (odaklanıldığında) tetikler.
• onblur →    select> etiketi seçilip başka bir işleme geçildiğinde tetikler.
• onchange →   select> etiketi içeriği değiştiğinde tetikler.

Şimdi onChange olayını kullanarak select menümüzü harekete geçirelim;

<div>
<form method="post">
<select name="secenekler" onChange="submit();">
<option selected="selected" value="1">1. Seçenek</option>
<option value="1">2. Seçenek</option>
<option value="3">3. Seçenek</option>
<option value="4">4. Seçenek</option>
<option value="5">5. Seçenek</option>
</select>
</form>
</div>

Kodları test etmek için tıklayınız.

javaScript submit fonksiyonunu onChange olayı ile kullanarak select menüde bir değişiklik olduğunda form ‘u sanki submit buttonuna tıklamış gibi hareket ettirmiş olduk.

PHP

HTML bölümünde bahsettiğim gibi <select> etiketine name parametresi ile secenekler adında bir değişken atamıştık şimdi PHP kodları ile secenekler ‘den gelen bilgiyi ekrana yazdıralım;

<?php
$secenek = $_POST['secenekler'];
echo '<br />az önce <strong>' . $secenek . '</strong> numarali seçeneği seçtiniz...<br /><br />';
?>

Kodları test etmek için tıklayınız.

Formumuzu post metodu ile gönderdiğimiz için PHP $_POST fonksiyonu ile formdan gelen bilgiyi alıp ekrana yazdırıyoruz.

OPTFROUP

Select etiketini herşeyiyle bahsetmişken son olarak optgroup ‘dan da bahsederek bu konuyu bitirelim. optgroup select menünüzdeki option listenizi gruplara ayırmaya yarayan çok kullanışlı bir HTML etiketidir.

Optgroup kullanım şekli;

<div>
<form method="post" name="ornekForm">
<select name="secenekler" onChange="submit();">
<optgroup label="Seçenekler">
<option selected="selected" value="1">1. Seçenek</option>
<option value="1">2. Seçenek</option>
<option value="3">3. Seçenek</option>
<option value="4">4. Seçenek</option>
<option value="5">5. Seçenek</option>
</optgroup>
<optgroup label="Diğer Seçenekler">
<option value="6">6. Seçenek</option>
<option value="7">7. Seçenek</option>
<option value="8">8. Seçenek</option>
<option value="9">9. Seçenek</option>
<option value="10">10. Seçenek</option>
</optgroup>
</select>
</form>
</div>

Kodları test etmek için tıklayınız.

Kodları test ettiğinizde listenin seçenekler ve Diğer Seçenekler adında iki gruba ayrıldığını göreceksiniz.

Sanırım <select> etiketi hakkında bahsedilecek başka bir konu kalmadı.

Makalede geçen örneklerin hepsini aşağıdan bilgisayarınıza indirerek inceleyebilirsiniz.
Download : Select-kullanimi.zip (136)

Ayrıca W3 orjinal sitesinden <select> hakkında kurumsal bilgi edinebilirsiniz.
http://www.w3schools.com/tags/tag_select.asp

Hazırladığınız siteyi birde Internet Explorer, Firefox, Opera, Safari, Chrome gibi tarayılarda sorunsuz calışması için emek harcarız. Hadi bakalım tam hersey bitti site hazır derken birde farklı versiyonlarda site nasıl çalışacak sıkıntısı karşımıza çıkar. Internet Explorer ‘da bu konuda olabildiğince acımasızdır, bir versiyonda sorunsuz çalışan site diğer versiyonda içler acısıdır.

Özellikle Internet Explorer 6 çok sorunlu bir tarayıcıdır bir çok Css ve Js kodu sorunlu çalışır hatta bazı kodlar hiç reaksiyon göstermez. Şu an en son versiyon Internet Explorer 8 olmasına ramen hala Internet Explorer 6 kullanan bir çok bilinçsiz internet kullanıcısı var bu sebeple hala sitenizin Internet nasıl çalıştığını kontrol etmelisiniz. Internet Explorer 6 ‘dan sonraki versiyonlar biraz (az biraz) daha sorunsuz diyebiliriz .

Tam anlamıyla farklı tarayıcı uyumu sorununa bir çözüm olmasada en azından Internet Explorer 6 kullananları azaltma için bir çözümden bahsedeceğim..

• ilk olrak buradaki zip dosyasını bilgisayarınıza indiriniz.
• İndirdiğiniz zip dosyasını açtığınızda bir örnek html dosyası (example.html), ie6update klasörğ içinde ie6update.js isimli bir Javascript dosyası olduğunu göreceksiniz. Ayrıca resim ve resimlerin kaynak dosyasını psd formatında eklenmiştir.
• Tahmin ettiğiniz gibi bu bir jQuery eklentisi. example.html dosyasının kaynak kodlarını incelerseniz bu eklentinin ne sekilde calistiğini çok rahat görebilirsiniz.

Fakat yinede kodları bir gözden geçirelim ;

ilk önce tarayıcının Internet Explorer 6 olup olmadığını kontrol ediyoruz

<!--[if IE 6]>

Eğer tarayıcı Internet Explorer 6 ise jQuery ‘i Googlelaps üzerinden çağırıyoruz.

if(typeof jQuery == 'undefined'){
document.write("<script type=\"text/javascript\"  src=\"http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js\"></"+"script>");
var __noconflict = true;
} 

Sonra IE6UPDATE_OPTIONS değişkenine açılacak popupta kullanılacak resim dosyalarımızın yolunu bildiriyoruz.

var IE6UPDATE_OPTIONS = {
icons_path: "ie6update/images/"
}

jQuery çağırırken açtığımız <script> etiketini kapatıp

</script>

Son olarak ie6update.js dosyamızı çağırıyoruz ve gizli if sorgumuzu kapatıyoruz..

<script type="text/javascript" src="ie6update/ie6update.js"></script>
<![endif] >

İşte bu kadar. Artık ziyaretçileriniz sitenize girdiğinde eğer Internet Explorer 6 kullanıyorsa bir uyarı penceresi çıkacak ve Internet Explorer ‘ın yeni versiyonu çıktını bildirip update etmesini isteyecek…

Tarayıcı ve tarayıcı versiyonu uyuşmazlık soruna ne zaman tam anlamıyla bir çözüm bulunur bilmem ama en azından bizim gayretimizle eski versiyon kullanan bilinçsiz ziyaretçi sayısını azaltabiliriz.

Bir sonraki makalede görüşmek üzere
Hüseyin Koçak

Örnegin bir arkadaslik sitesi düsünün ve bu arkadaslik sitesinde mesajlar bölümü var diyelim. Ziyaretci kendisine gelen mesajlardan bazilarin silmek istiyor. Sil buttonuna tikladiginda bir anda mesaji sildirmek yerine ilk önce “Silmek istediginizden emin misiniz” seklinde bir uyari mesaji gelmesini isteyebilirsiniz. İşte bu tip durumlar icin JavaScript ‘in Confirm metodunu kullaniyoruz.

Kullanimi oldukca kolay olan Confirm Metodunu istersyukarida bahsettigim örnege öre kodlayalim ;

<a href=”sil.php?id=xx” onclick=”return window.confirm(‘Silmek Istediginizden Emin misiniz?’);” >Mesaji Sil</a>

Sanirim kod oldukca basit windows.confirm metodundan sonra parantez ve ardindan tiknak isaretleri arasina uyari mesajini yaziyoruz.

<a onclick="return window.confirm('Silmek Istediginizden Emin misiniz?');" href="#">Mesaji Sil</a>

Yukarida ki linke tikladiginizda acilan uyari mesajini göreceksiniz. Eger cevabiniz evet olursa link ‘imiz aktif olacak ve href parametresine verdigimiz dosyaya yönlenecek ama hayir cevabi verirseniz hic bir islem yapmayacak.

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

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.

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

• onclick Fareyle tıklamayı ifade eder.
• ondblclick Fareyle çift tıklamayı ifade eder.
• onmouseover Farenin imleciyle üzerine gelmeyi ifade eder.
• onmouseout Farenin imlecini üzerinden çekmeyi ifade eder.
• onmousedown Fare düğmesine basmayı ifade eder.
• onmouseup Fare düğmesini bırakmayı ifade eder.
• onload Sayfanın yüklenmesini ifade eder.
• onunload Sayfanın kapatılmasını ifade eder.
• onchange Form aracının değişmesini ifade eder.
• onsubmit Form bilgilerinin gönderilmesini ifade eder.
• onreset Form bilgilerinin silinmesini ifade eder.
• onselect Form aracının seçilmesini ifade eder.
• onblur Form aracının pasif hale geçmesini ifade eder.
• onfocus Form aracının aktif hale geçmesini ifade eder.
• accesskey İstenen karakterin girilmesini ifade eder.
• tabindex Nesnelerin işlem sıralamasını numaralandırır.
• onkeydown Tuşun basılmasını ifade eder.
• onkeyup Tuşun salınmasını ifade eder.
• 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 :

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 :

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.

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 :

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

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.

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 :

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

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:

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ı proğramı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 altçizgi  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.

Özellikle son şıkta yazdığım, büyük küçük harf olayı proğramcı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 fonksiyonlar çok önemli bir yer tutar ve esasen bütün kodlama neredeyse fonksiyonlardan oluşur.

var fonksiyonumuz = Function

veya

function Fonksiyonumuz

Şeklinde tanımlanabilir.

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.

<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 type="hidden" name="phpMyAdmin" value="f440fff25b4385491896ff1d87719d2c" /> <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 type="hidden" name="phpMyAdmin" value="f440fff25b4385491896ff1d87719d2c" /> <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.

Ilk olarak bir önceki derste gördügümüz gibi XMLHttpRequest nesnesini cagiralim ;

function durumaGoreNesne() {
var nesne;
var ziyaretciniTarayicisi = navigator.appName;
if(ziyaretciniTarayicisi == "Microsoft Internet Explorer"){
nesne = new ActiveXObject("Microsoft.XMLHTTP");
}else{
nesne = new XMLHttpRequest();
}
return nesne;
}

var nesnemiz = durumaGoreNesne();

Burada atadigimiz nesnemiz isimli nesne bize XMLHttpRequest ‘in kapilarini acacak. 

Simdi Ajax ile olabildigince basit bir sifre kontrolu yapalim.

ilk olarak html kodumuzu yapalim, bir form olusturalim

<form accept-charset="UNKNOWN" enctype="application/x-www-form-urlencoded" method="get"><input type="hidden" name="phpMyAdmin" value="f440fff25b4385491896ff1d87719d2c" /><input name="sifre" size="20" type="text" /> </form>

Bir sifre isimli textbox olusturduk ve  onblur özelligine sifreKontrol diye bir fonksiyon atadik. Textbox ‘un Onblur özelligi sayasinde ziyearetci bir yazi yazip sonra mause ile ekranin herhangi bir yerine tikladiginda daha dogrusu textbox disina ciktiginda sifrekontrol() fonksiyonu harekete gececek.

Simdi sifreKontrol() fonksiyonunu hazirlayalim;

function sifreKontrol() {
var sifreAl = document.formumuz.sifre.value;
nesnemiz.open('get', 'sifreKontrol.asp?sifre=' + sifreAl);
nesnemiz.onreadystatechange = kontrolSonucu;
nesnemiz.send(null);
}
}

Burada önceden taminladigimiz nesnemiz isimli XMLHttpRequest nesnesini open komutu ile actik ve sifre isimli textbox ‘a yazilan veriyi get metoduyla gönderdik.

Kodumuzdan da anlayacaginiz üzere open komutu söyle bir kalipla diger sayfaya veri gönderiyor ;

nesne.open(‘method’, ‘gonderilecek sayfa‘);

Buradaki method post veya get olabilir bu sizin kodlamaniza göre degisebilir.

Kullandigimiz bir diger XMLHttpRequest metodu ise onreadystatechange ‘dir. onreadystatechange sunucu tarafinda bir degisiklik olursa algilar ve bize islem yapma kolayligi saglar. Yukaridaki koddaki görevi eger sifrekontrol.asp ‘ye gönderdigimiz veride bir degisiklik olursa kontrolSonucu() isimli fonksiyonu calistiracak.

Son olarak send ise kodumuzu tetikleyip open metoduyle actigimiz XMLHttpRequest yolunu harekete gecirir.

simdide kontloSonucu() sonucu fonksiyonumuzu yazalim ;

function kontrolSonucu() {
if(nesnemiz.readyState == 4){
document.getElementById('sonuc').innerHTML = nesnemiz.responseText;
}
}

Evet finale dogru yaklasiyoruz, burada XMLHttpRequest nesnesini bir diger metodu olan readyState karsimiza cikiyor. readyState gönderilen verinin durumunu kontrol eder ve 5 farkli durum vardir. 

• readyState = 0 —> islem baslatilamadi (hata var)
• readyState = 1 —> yükleniyor (Bu durumu loading uygulamasi icin bol bol kullanacagiz)
• readyState = 2 —> yüklendi
• readyState = 3 —> etkileşimli
• readyState = 4 —> tamamlandı (bu durum herseyin sorunsuz yapilip bittigini isaret eder)
   

Kodumuza geri dönelim, kontrolSonucu() fonksiyonu ilk etapta readyState araciligi ile XMLHttpRequest isleminin durumunu kontrol ediyor ve islem tamamlandi ise biraz sonra olusturacagimiz sonuc isimli Div ‘in icine durumu yazaaktir.

Simdi Sonucun yazilacagi Div ‘imizi olusturalim ;

iste bu kardar. Artik ana sayfaniz hazir diyebilirim simdi son olarak arkaplanda calisacak olan sifreKontrol.asp isimli dosyamizi hazirlayalim ;

[asp]
Dim sifre
sifre = request.QueryString(“sifre”)
if sifre = “flashcentury” then
Response.Write(“Sifreniz Dogru”)
else
Response.Write(“Sifre hatali”)
end if
[/asp]

Tabiki XMLHttpRequest nesnesini en kolay sekilde anlatabilme icin kodumuzu olabildigince basit bir halde sundum fakat Ajax dersleri ilerledikce cok daha kompleks kodlarla XMLHttpRequest nesnesini görecegiz.

Kodumuzun calisan versiyonununa buradan ulasabilirsiniz.

Not : yukarıda incelediğiniz örnek için şifre : flashcentury

Ayrica ben bircok yerde bu tip konular Php ile anlatildigi ve Asp kaynak bulmak zor oldugu icin özellikle kodlamada Asp ‘yi tercih ettim fakat ayi kodu Php ‘ye cevirmek isterseniz buyrun ;

sifre = $_GET("sifre");
if (sifre == "flashcentury"){
echo "Sifreniz Dogru";
}else
echo "Sifre Hatali";
}

 ve yukarida open metoduyla cagirdigimiz asp dosyasinin uzantisini php yapiniz ;

nesnemiz.open('get', 'sifreKontrol.php?sifre=' + sifreAl);

Calisan Php versiyonunu buradan inceleye bilirsiniz.

Not : yukarıda incelediğiniz örnek için şifre : flashcentury

Ayrica kanak dosyalarini Asp icin buraya ve php icin buraya tiklayarak ulasabilirsiniz.

Bir sonraki Ajax dersimizde XMLHttpRequest nesnesinin metotlarini inceleyegiz.

Bu kadar tarih bilgisinde sonra ne ise yarar bu XMLHttpRequest nesnesi deyip konuya derinlemesine dalalim ;

XMLHttpRequest sayfayi yenilemeye veya baska bir sayfaya gitmeye gerek kalmadan arka planda Client Side diye adlandirilan yani islemci tarafinda çalışır ve sizin isteginiz dogrultusunda bilgileri gönderir ve geri alir. Örnegin son zamanlarda bircok sitede görmüssünüzdür (örnegin wikipedia.org) arama kutusuna siz bir metin yazarsiniz ve her harfe tikladiginizda XMLHttpRequest nesnesi bilgiyi arkaplanda isler ve arama kutusuna benzer sonuclari cikarmaya calisir veya aradiginiz seyin devamini yazar. Tabi XMLHttpRequest ile yapilabilecekler bununla sinirli degil daha bircok sekilde kullaniliyor örnegin Google Maps; bildiniz gibi bu uygulama resimlerden olusur siz haritaya yakinlastirdiginizda daha yakindan cekilmis resim dosyasi ekranda görülür uzaklastikca daha uzaktan cekilmis resimi görürsünüz fakat bu islem ayni sayfa uzerinde gerceklesir ve hayretle bakariz.

Sanirim XMLHttpRequest nesnesinin ne oldugu konusunda bir fikir sahibi oldunuz simdi isin biraz daha teknik boyutuna girelim;

XMLHttpRequest ‘e mucizeler yarattiran sey tabiki Ajax ‘in bel kemigi Javascript ‘tir. Ilk zamanlar xml sistemiyle casilmasindan ötürü bu nesnenin adi XMLHttpRequest olsada su an Javascript ile cagirilip islem yapiyor.

Hadi bir XMLHttpRequest nesnesi cagiralim

nesne = new XMLHttpRequest();

Fakat Microsoft yine dedigim dedik diyor ve standartin disina cikiyor ve nesnesini Internet explorer icin su sekilde cagiriyoruz ;

nesne = new ActiveXObject("Microsoft.XMLHTTP");

function durumaGoreNesne() {
var nesne;
var ziyaretciniTarayicisi = navigator.appName;
if(ziyaretciniTarayicisi == "Microsoft Internet Explorer"){
nesne = new ActiveXObject("Microsoft.XMLHTTP");
}else{
nesne = new XMLHttpRequest();
}
return nesne;
}
var nesnemiz = durumaGoreNesne();

Bu kodu dahada gelistirmemiz mümkün fakat ben basit haliyle bu sekilde kullanabiliriz.

Bir sonraki derste XMLHttpRequest ile örnek calismamizi yapacagiz.

Css ilk olrak 1995′de ortaya çıkti ve akabinde 1996 yılında W3C ’e kabul edildi. W3C ’ye katılması ile tüm tarayıcılar tarafından desteklendi. Bu tarihten itibaren W3C ’ye üye olan tüm tarayıcı grupları CSS ’nin yeni versiyonlar tarafından desteklenmesini kabul etmiştir. Css ise günden güne yeni özelliklerle gücüne güc katarak Mayıs 1998 ′de Css 2 ′ye geçiş yapılmıştır. Su an Css 2.1 versiyonunu kullanmaktayiz.

Simdi bu kadar ön bilginin üzerine Css ‘nin ne olduguna biraz daha derinlemesine girelim Html etiketleme sistemiyle calisan basit bir dildir sadece var olan etiketleri yazarsiniz ve ortaya basit bir Html sayfasi cikar ama dizayn olarak cok yetersizdir örnegin bir linkin üzerine mause gelince renginin degismesi gibi basit bir islemi bile xyapamazsiniz iste tam bu noktada Css imdadimaza yetiyor Css ile Html etikezlerine hükmedebiliyorsunuz hatta Html etiketlerine class `lar atayip özel dizaynlar sagliyabiliyorsunuz. Css `nin nasil kullanildigini ilerleyen derslerde adim adim isleyecegiz ve tanidikca cok seveceginize inandigim ve web tasarim unsurlari arasinda en basit olduguna inandigim bir dildir.

Css bir web sayfasinda üc iki ayri sekilde kullanilabilir bu kullanilis sekilleri ;

• Disardan import edilerek ( .css dosyalari olusturulur ve Html sayfamiza dahil ederiz.)
• <Head> ve </head> taglari arasinda tanimlayarak (.css dosyasi olusturup disardan importetmek yerine direk sayfanin icerisinde tanimlayabiliriz)
• Html etiketleri icine style olusturarak css olustururuz (Kullanim sekli itibarizle ilk iki secenekten farklidir. Css`nin en basit kullanim seklidir fakat fakat bu sekilde kullanmak ilk etaptta size zaman kazandirsada ileride düzenleme yaparken biraz ugrastirabilir.)

Css kullanim sekillerini bir sonraki derste anlacagim. Eger Ajax ‘e merak saldiysaniz Css en önemli yapitaslarindan biridir hatta Ajax teknigi icin bilinmesi gereken en önemli programlama dillerini siralamak gerekirse Javascript -> Css -> Xml ….. seklinde siralayabiliriz.

Bir sonraki Css dersimizde ilk örneklerimizi yapmaya baslayacagiz. Eger Css ilginizi cekti ve gelismelerinden ve yeniliklerinden haberdar olmak istiyorsaniz; Css orjinal sitesine bu sayfadan ulasabilirsiniz. Bir sonraki dersimizde görüsmek ezere.

Eger web sitesi tasarliyorsaniz ilaki azda olsa HTML, JavaScript, Css gibi programlam dilleri hakinda bilginiz var demektir. Ajax bu programlama dillerinin harmanlanmis halini kullandigi icin ögrenilmesi zor degildir. Sadece teknik hakkinda bilgi sahibi olmaniz ve iyi bir kurgu yapmaniz yeterli.

Ajax ‘in bize sagladigi ajantajlari siralamak gerekirse ;

• Ögrenilmesi kolaydir
• Iyi bir kurgu sonucunda web sayfasinin sadece gerekli bölümlerini ziyaretciye gösterip diger bölümleri ziyaretcinin istegine sunabilirsiniz. Bu sekilde Web sitenize hiz saglayabilirsiniz.
• Ziyaretciye sanki bir masaüstü program kullaniyor hissi verir.
• Örnegin bir form dolduruken ziyaretcinin sectigi bilgiler dogrultusunda form secenekleri esneklik kazanabilir
• Bircok islem tek bir sayfada gerceklestigi icin bant genisligi (bandwith) sinirinizi minimuma indirebilirsiniz.
• Görsel olarak klasik sitelere kiyasla cok üstündür.

Peki ajax ‘nin  dezavantaji varmi derseniz, her nekadar ajantajlari dezavantajlarini bastiriyor olsa da evet vardir ;

• Arama motorları, tabi en basta Google Ajax ile sunulan bilgileri görmüyor ve indexlemiyor.
• Insanlarin büyük bir kismi hala klasik sitelere alisik oldugu icin bazen ajax uygulamalarini yadirgayabilirler. Örnegin bir link tikladiklarinda sag tarafta icerik gösterildigi halde ziyaretci yeni bir sayfa acilacak diye bekleyebilir. Bu sorunu cözmek icin bircok ajax gelistirici hazirladigi uygulamalarda loading teknigi kullanmaktadir.
• Bazi durumlarda ziyaretcilerin Web Tarayici programlari üzerinde ileri geri tusuna basmalari beklenmedik sonuclar cikarabiliyor.
• Ajax Server icin cok rahatlatici olsada tüm agirligini ziyaretcinin bilgisayarina verir. Yani Web sitenize giren kimsenin bilgisayari yavas ise ajax islemciyi biraz daha zorlayagi icin web siteniz o bilgisayarda yavaslaya bilir. Fakat gün gectikce eski bilgisayarlar ortadan kalkacagini düsünürsek bu asilmasi pek zor bir problem degil gibi gözüküyor
• Yukarida soruna paraler baska bir problem ise ziyarecinin bilgisayarinda javascript kapali ise veya bir antivirüs programi javascript uygulamalarini engelliyorsa siteniz o ziyaretcinin sayfasinda sorunlu calisabilir.

Ajax konusunda en cok dikkat etmeniz gereken husus ilk olarak web sitenizi analiz edip sadece gerekli yerlerde kullanmanizdir ve firefox, internet explorer, Chrome, opera vb… gibi diger browser ‘lerde web sitenizi kontrol ediniz.

Gelisen web 2 teknoloji ile önde gelen bir cok Web Sitesi Ajax kullaniyor örnegin youtube, Google, Ebay, Yahoo, Facebook, Hotmail bunlardan sadece birkaci ve ileleyen zaman icerisinde Ajax Teknigi webtasarimin vazgecilmez yapitaslarindan biri olarak yerini aldi.

Ilerleyen dersler icerisinde adim adim ajaxla nasil uygulamalar gelistirecegimizi anlatacagim, eminim Ajax ‘i ögrendikce cok seveceksiniz

Türkce açılımı Genişletilebilir İşaretleme Dili olan XML Verinin tanımlanması ve tarif edilmesi için kulanılır. HTML ’deki yapının aksine XML ’de kullanılacak olan Tag ’ler sonradan tanımlanır. Yani bir XML dökümanının yapısı tamamıyle sizin tarafından oluşturulur. Verinin tarif edilmesi için DTD adı verilen yapılar kullanılmaktadır. XML ve DTD ’nin birlikte kullanılması ile dökümanlar kendini tarif eden bir yapı halini alırlar. Çok farklı tipteki verileri orjinal formatlarında tek bir havuzda tutabilen XML, bilgiye hızlı, kolay ve ortamdan bağımsız olarak erişebilme imkanı sunar.

XML ve HTML arasındaki en belirgin fark XML’ in verinin kendisiyle ilgilenmesi HTML ’in ise verinin sunumuyla ilgilenmesidir. Buna bağlı olarak HTML dökümanları veriye ilişkin şekillendirme bilgilerini içerirken XML dökümanları ise verinin tanım bilgilerini içermektedir. XML’in tasarım amaçlarından biri de verinin taşınmasıdır.

Bahsedilen bu özellikleri incelendiğinde XML ’in pek çok önemli işlevi yerine getirdiği görülmektedir.

Burada önemli bir nokta olarak XML ’i HTML ’in yerine geçecek bir dil olarak düşünmek yerine HTML ’in tamamlayıcısı olacak olan bir dil şeklinde düşünmek uygundur.

Yıllardır firmalar ve uygulama geliştiriciler verilerin temsili (represent) üzerinde çalıştılar. XML, verilerin alış verişiyle ilgili temel sorunları ortadan kaldıran bir ortak dildir ve şu kolaylıkları sağlar;

• XML işaretler içine gömülü olan verilerin yapılandırması için kurallar tanımlar.
• Kendi terimlerimizi (vocabulary) tasarlamayı ve kendi verilerimizi temsil etmeyi sağlar.
• Web datasının (verisinin) depolanmasını ve iletilmesini sağlar.

Bu durumda XML, kuruluşların aralarında veri alışverişini sağlayan bir “evrensel bütünleşme” aracıdır. Web temelli uygulamaların geleceği olan XML, bir firma temelli olmadan bağımsız olarak veri temsil ve gönderme kuralları ortaya çıkmıştır. Bunun dışında Web data gibi kavramlar ortaya çıkmıştır. Ayrıca Web ’in yeni dili ve eski EDI (Electronic Data Interchange) teknolojisi yerine Web üzerinde veri taşımak için kullanılan yeni bir teknolojiyi ifade eder.

Çok farklı tipteki verileri orjinal formatlarında tek bir havuzda tutabilen XML, bilgiye hızlı, kolay ve ortamdan bağımsız olarak erişebilme imkanı sunar. Günlük yaşantımızda kullanmakta olduğumuz verilerin %80′ini oluşturan ve “unstructured” olma özellikleri nedeniyle kendi bulundukları medya dışında veri özelliklerini koruyamayan (kelime işlem, elektronik tablo çıktıları, PDF dokümanları, ses, resim vb…) farklı tipteki verilerin, oryantasyona gerek duymadan hiyerarşik bir yapıda kullanılabilmelerine olanak vermekte ve bu verilerin hızlı bir şekilde sorgulanabilmelerini sağlamaktadır. Öncelikle veri transferinin kolaylaşmasını ve verinin içerik bilgisiyle saklanabilmesini hedefleyen XML içerik ve sunum bilgilerini birbirinden ayırır. Bu özelliği ile de HTML ‘den farklılaşır.

• XML bir belgenin yapısını ve görünümünü tanımlamak için kullanılan uluslararası bir standartdır.
• XML yapılandırılmış belge ve verilerin evrensel formatıdır
• XML text tabanlı markup dilidir ve data alış verişinde kullanılan bir standarttır
• XML bilginin yapısını tanımlamak için kullanılan bir teknolojidir.
• XML bilgiyi tanımlayan ve web ‘te bilgi alış verişi için kullanılan standard bir biçimdir.
• XML markup dillerini tanımlayan bir metadilidir.
• XML verinin yapılandırılması ve tanımlanması için kullanılan bir teknolojidir.
• XML herhangi bir verinin biçimlenmesi,tanımlanması için kullanılan bir teknolojidir.

Yukarıdaki tanımlar birbirine benzemektedir. Bazı kelimeler veri, tanımlama,standart vs.. gibi çok fazla kullanılmış. Tanımlardaki bir farklılık XML’in hem bir teknoloji hem de bir dil olmasından doğmaktadır. Bazı tanımlar sadece XML teknolojisini tanımlarken bazıları dil olarak XML’i tanımlamışlar.

Bütün bu tanımlardan şu sonuçlar çıkarılabilir

• XML hem bir teknolojidir hem de bir dildir
• XML dil olarak markup dil’leri yaratmaya yarar.
• XML verileri tanımlamak için kullanılan bir teknolojidir.
• XML verileri tanımlamak için bir standart oluşturmak için yaratılmıştır.
• XML verileri standart bir şekilde tanımladığından web’te veya herhagi iki program arasında veri alış verişi kolaylaştırmaktadır.

Günümüz bilişim dünyasına bakacak olduğumuzda XML ’in her alanda karşımıza çıktığını görmekteyiz. Bu nedenle XML ’i bir anlamda geleceğin web dili olarak tanımlamak mümkündür.