Sitede ara   Gelişmiş Arama seçenekleri »
TurkProgrammers.NeT
Ana sayfa Ana Sayfa | Ana sayfanız yapın | Sık kullanılanlara ekle | Rss/Rdf Besleme| JavaScript
Bölümler
Arşiv
paz sa ça pş cu cum pa
12345
6789101112
13141516171819
20212223242526
272829

Mailinizi ekleyin
Haberlere abone olun:

anket: Sayfamızda En çok hangi bölüm ilginizi çekmekte
Sayfamızda En çok hangi bölüm yani programlama dili ve makaleleri ilginizi çekmekte?
PHP
C / C++ / C#
Asp ve .NET
JS / Ajax / DHTML /HTML
SQL
Visual Basic
Güvenlik
Action Script
Diğer
Anket sonuçları | Eski Anketler


Ana sayfa : Makaleler : JS / Ajax / DHTML /HTML : JavaScript Dünyasında Adım Adım
email Arkadaşınızın maili | print Yazıcı versionu | comment Yanıtlar (0 Gönder)

JavaScript Dünyasında Adım Adım

by Mr. CanaWar on Temmuz 24,2007

small font medium font large font
image

Yazı dizimizin giriş bölümünde JavaScript'in kısa tarihi, ne olup ne olmadığı ve bugüne kadar yayınlanan JavaScript versiyonları hakkında bilgi sahibi olmuştuk. Artık JavaScript ile yapabileceklerimiz ve nasıl yapabileceğimiz ile ilgili fikirler edinip adımlarımızı sıklaştırmanın vakti geldi. Öyleyse dikkat kesilip bu konudaki yazımızı okumaya başlayabilirsiniz.

Netscape firmasının JavaScript dilini geliştirmesindeki amaç HTML(Hyper Text Markup Language - Zengin Metin İşaretleme Dili)' nin dinamik web sayfaları hazırlamak için sunduğu olanakların yok denilecek kadar az olmasıydı. Bu yüzden kısaca HTML ile yapamadıklarımızı JavaScript ile yapabiliriz denilebilir. Tabi bu tanım yazıya son noktayı koymak için yeterli olmayacağından biraz daha açıklama yapmamız gerekiyor.

JavaScript istemci-taraflı(client-side) bir dil olduğu için JavaScript ile yazılan kodlar web sunucusunda(server) değil, kodların içinde bulunduğu sayfayı gezen ziyaretçinin-ki burada ziyaretçiye istemci de diyebiliriz- bilgisayarında çalışır. Yani ilk olarak ziyaretçi tarayıcı programının URL bölümüne bir web sayfasının adresini yazıp onay vererek bu sayfanın görüntülenmesi için istemde bulunur; web sunucusu da bu istemi kabul ederek dosyaların iletimine olanak tanıdıktan sonra sayfa, tüm içeriğiyle birlikte ziyaretçinin bilgisayarında belli bir tampon alana(cache) yüklenerek bu alandan çalıştırılır. İşte JavaScript kodları da web sayfasıyla beraber iletilen içerikler arasındadır.

Bu noktaya kadar edindiğimiz bilginin ışığında JavaScript kodlarının web sayfasından bağımsız çalışabilecek programlar olmadığını anladık. Peki JavaScript'i sayfamıza nasıl bağlayabiliriz? Aslında terminolojide bu işlemi tanımlamak için "bağlamak" yerine "gömmek" sözcüğünü tercih ediyoruz. Evet, JavaScript kodları web sayfasını oluşturan html kodlarının içine gömülür ve html kodları yorumlanırken işlerlik kazanır. Buna göre eğer ortada bir script uygulaması varsa html belgesi de olmak zorundadır. Bazı durumlarda tüm html belgesinin JavaScript ile oluşturulması da söz konusu olabilir; ileride bu konuya geniş olarak değineceğiz. Şimdi biraz html bilgilerimizi gözden geçirelim...

Tüm HTML içeriğinin "<html>" ve "</html>" etiketleri arasına alınarak işaretlendiğini biliyoruz. "<html>" etiketinden sonra gelen "<head>" bölümünde belge içeriğini tanıtmak amacıyla bir takım bilgiler verilir. "<body>" ve "</body>" etiketleri arasına yazdıklarımız ise sayfanın gövde kısmıdır; sayfada yer almasını istediğimiz yazı, grafik, ses gibi tüm öğeler bu kısımda belirtilir. Sadece bu etiketlerden oluşan temel HTML sayfasının kod dizilimi aşağıdakine benzeyecektir :


  <html>   <head>   <title>HTML sayfası</title>   </head>    <body>    </body>   </html>

JavaScript kodları genel olarak "<head>..</head>" etiketleriyle sınırlandırılan bölüme eklenir. Ancak özel durumlarda belgenin gövde kısmına eklendiği de görülebilir. Biz gerçekleştireceğimiz ilk uygulamada birinci yöntemi kullanacağız. Öyleyse metin editörünü(Windows altında "Notepad", Linux'ta "Kate" önerilir) açıp bir çırpıda aşağıdaki kodları yazalım :


<html>   <head>   <title>HTML Sayfası</title>    <script language="JavaScript">   <!--      function merhabaDunya()     // "merhabaDunya" fonksiyonunu bildiriyoruz      { // fonksiyon blokları bu işaretle başlar          alert("Merhaba Dünya! Biz dostuz...");         /* "alert" komutu kullanılarak işlenecek metni            parantez içerisinde çift tırnak arasına            alıyoruz. */       } // fonksiyon blokları bu işaretle biter    -->   </script>    </head>    <body>    <form>   <input type="button" value="Tıklayın"    onClick="merhabaDunya();">   </form>    </body>   </html>

Dosyayı "merhaba_dunya.htm" adıyla kaydettikten sonra simgesine tıklayıp açalım. Açılan sayfadaki düğmeye tıklayınca ilk JavaScript kodumuzun(hatta fonksiyonumuzun) icra edilmesi sonucunda görüntülenen uyarı kutusu bizi selamlayacaktır. Peki bunu nasıl yaptık? Veya şöyle soralım : Salt html kodu yazarak bu uyarı kutusunun görüntülenmesini sağlabilir miydik? Tabiki hayır! O halde html içine gömdüğümüz JavaScript kodumuzu derinlemesine inceleyerek bazı gerçekleri su üstüne çıkaralım;

  • JavaScript kod bloğu "<script>...</script>" etiketleri arasına yazılır. Örnek kodda bulunan "<script language="JavaScript">" ifadesi script dilinin JavaScript olduğunu belirtiyor. Eğer belli bir JavaScript versiyonuna ait komutlar kullanılacaksa ilgili versiyon numarası belirtilmelidir. Örneğin "<script language="JavaScript1.2">" gibi.

  • JavaScript yorumlayıcısı olmayan eski tarayıcı versiyonlarında JavaScript kodlarının icra edilmemesi için, kod bloğu örneğimizdeki gibi "<!-- -->" işaretleri arasına alınır. Bu yolla eski tarayıcıların JavaScript kodlarını yorum-açıklama satırı olarak algılaması sağlanır. Yani kodlar ne icra edilir ne de düz-metin olarak tarayıcı ekranında gösterilir.

  • Eğer C ya da Visual Basic gibi programlama dilleriyle ilgilendiyseniz "fonksiyon" kullanımı hakkında da az çok bilgi sahibi olabilirsiniz. Fonksiyonlar belirli bir kaynak tarafından çağrılmadığı sürece icra edilmeyen program bölümleridir. Örneğimizde "merhabaDunya" adını verdiğimiz fonksiyonu gerektiği yerde çağrılması, yani icra edilmesi için bildiriyoruz(declaration). Burada fonksiyon kodlarının "{" ve "}" işaretleri arasına yazılması gerektiğini hemen belirtelim

  • Örnek JavaScript'imizde yer alan "alert()" komutu, uyarı kutuları görüntületmek amacıyla kullanılır. Bu örnekte komutumuz, "Merhaba Dünya!..." metni ile birlikte kullanılıyor; fonksiyon icra edildiğinde komut işlerlik kazanmakta.

  • Örnekte bol bol "//" işaretleri bulunduğunu farketmişsinizdir(sizden de hiçbir şey kaçmıyor :)) Bu işaretlerin arkasına yazılan metinler, içeriği ne olursa olsun kod olarak algılanmaz; kullanım amacı genellikle bir kod satırının ya da kod kümesinin ne işe yaradığını açıklamaktır. İyi kod yazarları gerektiği yerde açıklama ve yorum yazmaktan kaçınmazlar. Böylece kod bloklarının hem okunabilirliği hem de anlaşılabilirliği artar. Eğer yorum metni bir satırdan fazlaysa, örneğimizdeki gibi "/*" ve "*/" işaretleri arasına yazılmalıdır.

  • Örnek html kaynak kodumuzun gövde kısmında bir form öğesi bulunuyor. "<input type="button"..." ifadesiyle tanımladığımız düğmeyi JavaScript fonksiyonunu çağırmak amacıyla sayfaya ekledik. Fonksiyonu nasıl mı çağırıyoruz? "onClick" komutu bizim için bu işi gerçekleştiriyor. DOM(Document Object Model - Belge Nesne Modeli) referansları arasında tanımı yapılan bu komut(veya olay) bir nesneye tıklandığında belli bir işin yerine getirilmesi amacıyla kullanılıyor.

Buraya kadar herşey anlaşıldıysa su üstüne çıkardığımız gerçekleri kurulamanın zamanı geldi demektir(!) Yukarıdaki listede belirttiğimiz noktalar ışığında diyebiliriz ki; evet, JavaScript nesne-yönelimli(object-orianted) bir dildir. Çünkü JavaScript kodları html etiketleri kullanarak oluşturulan nesneleri kontrol eder ve nesnelere uygulanan olaylar sonucunda icra edilir. Örneğin "BODY" öğesi veya örneğimizde kullandığımız "INPUT" unsuru birer nesnedir. Aynı şeklide "alert()" komutuyla görüntülettiğimiz uyarı kutusu da bir nesnedir. Bu yüzden bilmeniz gereken en önemli nokta, JavaScript uygulamaları hazırlamaktaki amacın Web tarayıcısı programın bir/bir çok unsuruna-nesnesine müdahale etmek veya bir nesne oluşturmasını sağlamak olduğudur. Sözgelimi bazı web sitelerinde karşılaştığınız kaydırma çubuğu olmayan ve/veya belirli boyutlarda kendiliğinden açılan pencereler bu tanıma güzel bir örnek olabilir. Veya kursörü üzerine taşıyınca değişen grafikler, aşağı-yukarı kayan metinler, sayfayı ne kadar kaydırırsanız kaydırın konumu değişmeyen iletiler,vs,vs...

Şimdi, hazırsanız iyi haberi veriyorum : Siz de artık bir OOP(object-orianted program) kod geliştiricisi olabileceksiniz... Henüz bu konuyla yeni ilgilenmeye başlamışsanız ve bu yazıdaki bazı kavramları anlamakta zorluk çekiyorsanız, merak etmeyin, çünkü yazı dizimiz ilerledikçe bu kavramlar hakkındaki bilgilerinizi arttıracak, sağlamlaştıracağız. Bu defa size vereceğim kötü bir haber yok. Umarım iyi haberlerin sayısı gün geçtikçe artar.

Bir sonraki yazımızda, JavaScript kodlarını nasıl ayrı bir dosya olarak kaydedip html belgemize ekleyebileceğimizi görecek, DOM hakkında kısa bir ön bilgi edineceğiz. Genel programlama bilgisi de sayılabilecek olan yazım kurallarına değindikten sonra bazı temel bilgileri aktararak JavaScript dünyasındaki adımlarımızı hızlandıracağız. Artık Türkçe JavaScript referans dökümanlarımızı oluşturmaya başlayabiliriz. Unutmayın; eğer programlamayla yeni ilgilenmeye başladıysanız, bu büyülü evrenin küçük bir gezegeni olan JavaScript dünyasını keşfettikten sonra "olay ufku"nu daha net görebilirsiniz!


265 Kere okundu

Bu makaleyi beyendinizmi ?

1 2 3 4 5 Rating: 5.00Rating: 5.00Rating: 5.00Rating: 5.00Rating: 5.00 (Toplam 21 Oylar)
comment Yanıtlar (0 Gönder)
Çok okunanlar
En Çok Yorumlananlar
Yazarlar

Mehmet YILMAZ
Ana sayfa | Ana sayfanız yapın | Sık kullanılanlara ekle |

Tasarım: Türk Programmers

Netvibes Modulü

Siyyah