Eğer JavaScript'e zaten hakimsen, bu bölüme girme kardeşim. Temel JS kategorisindeki makaleler, bu işe yeni başlayan hevesli kardeşlerimle benim aramda. Burada onların ön yargısız ve kirlenmemiş beyinlerine bilgi aktarımında bulunacağım. Sen git, bloğun geri kalan kısımlarında takıl. Orada bir sürü uçan kaçan uygulama var.

Evet, şimdi biz bizeyiz. Bak kardeşim, bugüne kadar kullanıcıydın. Önüne ne veriyorlarsa, onu yiyordun. Bugün mutfağa geçip, yemek yapma vaktidir. Hiç merak etmedin mi ki, o oynadığın oyunları kim, nasıl yapıyor? Ya da kullandığın programlar nasıl yapılıyor? Muhtemelen merak etmişsindir ki, buradasın.

Temel JS kategorisindeki makaleler ile sıfırdan başlayarak bir program nasıl yazılır, birlikte öğreneceğiz inşallah. İstersen şu aşamada hiçbir şey bilmiyor ol. Bu blogdaki tüm kategorileri bitirdiğin zaman, kendi kendine oyun veya program yazabiliyor hale gelebileceğini iddia ediyorum. Hem de yazdığın programlar Windows'da, Linux'da, Mac OS'da, Android'de ve IOS'da çalışacak. Öyle çakma oyunlardan da bahsetmiyorum ha. Bildiğin, para vererek aldığın oyunları söylüyorum. Need for Speed yapacaksın, Flight Simulator yapacaksın. Daha nasıl motive edeyim ki ben seni? Bak, sen varsan, ben de varım. Bu işi birlikte başaracağız inşallah.


İddialıyım, çünkü bunu daha önce pek çok kişiye yaptım ve inşallah şimdi internet vasıtasıyla toplu olarak yapacağım. Ancak tüm kategorilerde paralel şekilde makale yazdığım ve bu bloğu işimden, eşimden ve çocuklarımdan arta kalan zamanda doldurduğum için muhtemelen tüm makaleleri tamamlamam biraz zaman alacaktır, mazur gör lütfen.

Eğer ben varım diyorsan, haydi başlayalım, bismillah.

Bilgisayar üzerinde kullandığımız her türlü program, oyun hatta (Windows, Linux, Mac OS, Android ve IOS gibi) işletim sisteminin kendisi bile bir programdır ve bu programlar insanlar tarafından yazılmaktadır. Tabii işletim sistemi yazmaya kalkmazsın herhalde ama "Kim bilir kaç yüz kişi yazıyordur onları, ben tek başıma nasıl yazayım?" deme. Mesleki kariyerimde iki kişi ile devasa projeleri bitirdiğimiz ancak yirmi kişi ile orta ölçekli projelerde başarısız olduğumuz çok oldu. Azimle ve hevesle kod yazan, proje planını deler.

Peki bu insanlar, bu programları nasıl yazıyorlar? Cevap : Programlama dilleri ile. Bu diller, bizim insanlar arasında kullandığımız dillere benzer ancak görüntüsü biraz daha sayısaldır. Bu diller ile derdimizi bilgisayara anlatabilirsek, bilgisayar bizim istediklerimizi yerine getirir ve ortaya bir program çıkar.

Programcılık dünyasında oldukça fazla sayıda dil mevcuttur. Her birinin bir diğerine göre artıları ve eksileri vardır. Ancak hangi dili bildiğin çok fark etmez, ciddi bir tecrübeyle bunlardan herhangi biri ile istediğin noktaya gidebilirsin.

Sitenin konseptinden de anlayabileceğin gibi, burada öğreneceğimiz dilin adı JavaScript. Bu dili diğer dillerden ayıran çok ciddi özellikleri var. Bunları zaman içerisinde birlikte göreceğiz ancak bugün programlamaya başlamaya karar verdiysen, JavaScript'in senin için mükemmel bir seçim olacağını iddia ediyorum.

Çok uzatmadan devam edelim. Bildiğimiz bir programlama dili ile bilgisayara istediklerimizi anlattığımızda, bilgisayar bizim yerine getirmesini istediğimiz görevleri yerine getirir. Bu istek, bir butona basıldığında yazılan yazının karşıdaki arkadaşımıza gönderilmesini istemek de olabilir, başka bir butona basıldığında muhasebe kayıtlarının yazıcıya gönderilmesini istemek de olabilir, Mouse'un sol tuşuna bastığımızda ekrandaki silahımızdan bir kurşunun çıkarak ileriye doğru hızla gitmesini istemek de olabilir. Burada önemli olan, biz bir şey isteriz, bilgisayar da koşulsuz şartsız onu yerine getirir. Mesele bilgisayar ile aynı dili konuşabilmek. O bizim dili (şimdilik) öğrenemeyeceğine göre, iş başa düşüyor.

Programlama dilleri kendi aralarında seviyelere ayrılır. Alt seviye diller, bilgisayara daha yakın, insana daha uzak dillerdir. Alt seviye bir dil ile yazılan komutlar, bilgisayarın işlemcisi tarafından direk anlaşılarak işleme konulur ancak bu dilleri öğrenmek ve kullanmak daha zahmetlidir. Üst seviye diller ise insanın daha rahat öğrenebileceği ve kullanabileceği dillerdir. Ancak bu dilleri de bilgisayar işlemcileri direk anlayamaz. Bunun yerine biz söyleyeceklerimizi üst seviye bir dil ile söyleriz. Sonrasında bu komutlar, işlemcinin anlayabileceği alt seviye bir dile çevrilir ve ardından yürürlüğe konur.

Derleme ve yorumlama gibi terimlere girerek şimdiden canını sıkmak istemiyorum, muhtemelen zaten biraz bunaltmışımdır. Ancak JavaScript'i şimdilik çok üst seviye bir dil olarak görmen yeterli. Sen JavaScript dili ile istediklerini söylersin, bu komutlar bilgisayarın anlayacağı hale çevrilir ve ardından işleme konur. JavaScript'de bu çevrimi, tarayıcı adı verilen programlar yapar.

Not : Bu kısımda, yeni başlayan arkadaşlar hararet yapmasın diye bir miktar bilgiyi atlıyorum. Bu atladığım bilgiler teorik olup, program yazmamıza engel olmayacaktır. Hatta hayatımız boyunca bunları öğrenmesek bile yine de program yazabiliriz. Bu notu, baştaki paragrafı okumasına rağmen sınıftan halen ayrılmamış ve "Lan, orası öyle değil, sallama" demesi muhtemel sivrileri susturmak için yazıyorum. Devam edelim.

Yani işin özü şu ki, senin JavaScript ile yazdığın programların, kurulum yaptığın bilgisayarlarda çalışabilmesi için, o bilgisayarda bir adet tarayıcı adı verilen programın kurulu olması gereklidir. Buyur sana birkaç tarayıcı program örneği: Internet Explorer, Google Chrome, Mozilla Firefox, Safari, Opera. Bunların herhangi birinin kurulu olmadığı bir bilgisayar günümüzde bulunmadığına göre, şimdilik endişe edecek bir şey yok.

Çoğu kişi fark etmez aslında ama bu tarayıcılar aslında çok çok yetenekli ve saygı duyulması gereken programlardır. Birden fazla dili anlayabilir ve yorumlayabilirler. Her ne kadar bizim asıl konumuz JavaScript olsa da, bu tarayıcıların asıl görevi, web sayfalarını göstermektir. Web sayfaları da HTML dili kullanılarak hazırlanır. Bu yüzden, JavaScript ile yazdığımız kodumuzun yanında çok küçük bir HTML kodunun da olması gereklidir.

Evet, yaz yaz bir yere kadar. Ellemeden öğrenmek zor. Haydi bakalım, ilk örneğimizi yapalım. Bu örneğimizde amacımız, bilgisayarın açılan ekranda "Selam" yazmasını sağlamak. Bunun için iki adet dosya hazırlamamız gerekecek. Dosyaları hazırlarken, en sevdiğin basit metin editörü programını kullanabilirsin.

Dikkat : Word olmaz arkadaşım. Basit dedim. Windows kullanıyorsan Notepad, Notepad2, Notepad++ olabilir. Linux kullanıyorsan gedit olabilir. Mac OS kullanıyorsan TextMate olabilir.

Şimdi en sevdiğimiz basit metin editörünü açalım ve aşağıdaki kodu bunun içerisine yapıştırıp "sayfa.html" ismi ile masaüstüne kaydedelim.

Dikkat : Özellikle Windows'ta dosya uzantısı otomatik olarak ".txt" şeklinde veriliyor olabilir. Bunun olmadığından emin olmak için, not defterinde dosya kaydetme formunda en alttaki açılır menüden "Tüm Dosyalar / All Files" seçeneğinin seçili olduğundan ve dosya ismi olarak sadece "sayfa" değil, "sayfa.html" yazdığından emil ol. Aksi takdirde bildiğin metin dosyası oluşur ve açmaya çalıştığında tarayıcı tarafından değil, metin editörü tarafından açılır.

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1254" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script src="program.js"></script>
</head>
<body>
</body>
</html>

Yukarıda gördüğün dil JavaScript değil HTML dili. Ne olduğu ile şimdilik çok ilgilenmene gerek yok çünkü çok uzun bir süre bu halde sabit kalacak. Bilmen gereken, bu kodun tarayıcıya, kendini bir HTML belgesi olduğunu söylemesi ve bizim programımızı, hemen bu dosyanın yanında bulunan "program.js" dosyasına yazdığımızı bildirmesi. Bunu gören tarayıcı, hemen bu dosyanın yanında "program.js" adında bir dosya arayacak ve onun içerisine yazdığımız kodları yürürlüğe koyacak. Üst tarafta içinde Google yazan kısım, işimizi daha kolay hale getirmek için kullandığımız bir kütüphanenin Google üzerindeki adresini içeriyor. Şimdilik görmezden gelsen de olur. Dediğim gibi, bundan sonraki neredeyse tüm örneklerimizde bu html dosyasını değiştirmeden kullanacağız. Şimdiye kadar bir sıkıntı yoktur inşallah.

Şimdi gelelim asıl işimize. Yine en sevdiğimiz basit metin editörünü açalım ve aşağıdaki kodu bunun içerisine yapıştırıp "program.js" ismi ile az önceki dosyanın hemen yanına kaydedelim. Böylece masaüstünde yan yana iki adet dosya olacak. Biri "sayfa.html", diğeri de "program.js". Programı çalıştırmak için tek yapman gereken "sayfa.html" dosyasının üzerine çift tıklamak.

$(document).ready(function(){

    $("body").append("Selam");

});

Bu örneğin hazır yazılmışını çalıştırmak için buraya tıklayabilirsin. Karşına aşağıdaki gibi bir sayfanın gelmesi gerekiyor.


Bak hocam, yukarıda 3 satır kod var. Daha rahat okunsun diye iki satır da boşluk bıraktım aralara, toplam 5 gözüküyor ama aslında dolu olan 3 satır var. Bir işe başlamak, bitirmenin yarısıdır ki, biz zaten başlamıştık. Bir de bu kodu anlayabilirsek, işin çoğunluğu bitmiş demektir. Şimdi gözlerini dört aç ve beni iyi dinle.

Öncelikle bu programlama dilinde parantezler çok önemli. Açılan her parantez muhakkak kapanır ve parantez içerisine yazılan şeyler, parantezden hemen önce gelen kod ile ilgilidir. İlk olarak 1. satırda yer alan

$(document).ready(function(){ "

komutuna bakalım. Bunun Türkçe'deki anlamı "Sayfa yüklendikten sonra". Sondaki "{" işaretine dikkat et. 5. satırda bunun bir de "}" şeklinde kapanışı var. Yani biz burada bilgisayara diyoruz ki, "Sayfa açıldıktan hemen sonra, iki küme parantezi arasında ne diyorsam onu yap". Peki, iki parantez arasında ne demişiz?

$("body").append("Selam"); "

Bu komut aslında iki kısımdan oluşuyor. İlk kısmı işlemin nerede yapılacağı, ikinci kısmı ise ne yapılacağı şeklinde. Parça parça ele alalım.

$("body") "

Bunun Türkçe'deki anlamı açılan sayfa demek. Yani bundan sonra vereceğimiz komut, açılan sayfada gerçekleştirilecek.

append("Selam") "

Buradaki "append" komutu, hemen öncesinde seçilen nesneye, parantez içerisinde yazılan metni ekler. Hemen öncesinde seçilen nesne "body" yani açılan sayfa olduğuna göre ikisini birleştirince ne çıkıyor? "Açılan sayfaya Selam yazısını ekle".

Komut satırının sonundaki ";" işaretine dikkat edelim. Bu işaret, o komut satırının tamamlandığını gösterir. Bunu her komut satırının sonuna koyarız. İki komutun arasındaki "." işareti ise bağlaç niteliğindedir.

Eğer ki bu, hayatın boyunca gördüğün ilk kod ise, hemen anlamak biraz zor olabilir. Kendine biraz zaman tanı ve sıradaki birkaç örneği daha incele. Göreceksin, aslında o kadar da zor değil.

Hemen sıcağı sıcağına bir örnek daha yapalım. Bu sefer ekrana "Selam" ve "Nasılsın?" yazdırmak istiyoruz. Önceki örnekte hazırladığımız iki dosyadan sayfa.html'e hiç dokunmuyoruz. "program.js" dosyasını açıp, aşağıdaki kodu bu dosyanın içerisine yapıştırıyor ve kaydediyoruz.

$(document).ready(function(){

    $("body").append("Selam");
    
    $("body").append("Nasılsın?");

});
Bu örneğin hazır yazılmışını çalıştırmak için buraya tıklayabilirsin. Karşına aşağıdaki gibi bir sayfanın gelmesi gerekiyor.


Yazdığımız koda bir satır daha ekledik ve bu satırda dedik ki, "Açılan sayfaya Nasılsın? yazısını ekle". Görüldüğü üzere bilgisayar söylediğimizi koşulsuz şartsız yerine getirdi.

Burada dikkat edilecek birkaç husus var. Biz bilgisayara gerçekleştirmesi için iki komut verdik. O da bunları, yukarıdan aşağıya doğru gerçekleştirdi. Yani öncelikle açılan sayfaya "Selam" yazdı. Ardından hemen yanına "Nasılsın?" yazdı. Demek ki verilen komutların sırası önemli. Akış yukarıdan aşağıya doğru gidiyor.

Diğer bir husus da, verilen iki metni de yan yana yazdı. Çünkü "append" komutu ne veriliyorsa, onu seçilen nesneye ekler. Biz burada alt satıra geç demedik. Bu yüzden de geçmedi. Peki biz iki kelimeyi alt alta yazılmasını isteseydik ne diyecektik?

İşte burada bir adet HTML komutu öğreniyoruz. HTML'de "Alt satıra geç" komutunun karşılığı "<br>" ifadesidir. Tarayıcı bunu gördüğü zaman, sanki Word'de Enter tuşuna basılmış gibi hemen bir alt satıra geçer. Hemen bir örnek ile pekiştirelim.

sayfa.html'e yine dokunmuyoruz. "program.js" dosyasını açıp, aşağıdaki kodu bu dosyanın içerisine yapıştırıyor ve kaydediyoruz.

$(document).ready(function(){

    $("body").append("Selam");
    
    $("body").append("<br>");

    $("body").append("Nasılsın?");

});

Bu örneğin hazır yazılmışını çalıştırmak için buraya tıklayabilirsin. Karşına aşağıdaki gibi bir sayfanın gelmesi gerekiyor.


Burada bilgisayara arka arkaya üç komut verdik. Tarayıcı önce açılan sayfaya "Selam" yazdı. Ardından "<br>" ifadesini yazmaya çalıştı ki, bu onun için bir alt satıra geçme anlamına geliyor. Son olarak da ekrana "Nasılsın?" yazdı.

İlk ders için biraz uzun oldu, kabul ediyorum. Zaten yeni başlangıçlar da her zaman zordur. Ama toparlamaya çalışırsak bu derste neler öğrendik?
  • Bilgisayar programlarının, insanlar tarafından programlama dilleri kullanılarak yazıldığını
  • Programlama dillerinin alt ve üst seviye şeklinde ikiye ayrıldığını
  • JavaScript'in üst seviye bir programlama dili olduğunu ve bu yüzden de çalışmak için ilgili makinede bir tarayıcının kurulu olması gerektiğini (Ki günümüzde tarayıcı kurulu olmayan bir makinenin bulunmadığını)
  • Tarayıcıların kodları yorumlayabilmeleri için en azından temel bir HTML sayfasına ihtiyaç duyduğunu
  • HTML sayfasında referans gösterdiğimiz ve uzantısı ".js" olan başka bir dosya içerisine JavaScript dili ile kod yazabileceğimizi
  • $(document).ready(function(){ " komutunun "Sayfa yüklendikten sonra" anlamına geldiğini
  • $("body").append("Selam"); " komutunun "Açılan sayfaya Selam yaz" anlamına geldiğini
  • Yazdığımız komutların yukarıdan aşağıya doğru çalıştırıldığını
  • Word'deki "Enter" tuşuna basmak gibi alt satıra geçebilmek için "<br>" HTML ifadesini kullanabileceğimizi

öğrendik. Samimi söylüyorum, bu makale benim için de yazacağım tüm makaleler arasında en zoruydu. Her ikimiz de güzel bir dinlenmeyi hak ettik. Bundan sonrasının çok daha kolay olacağını inşallah sen de göreceksin. Lütfen sonuna kadar pes etme de, gelecekte cep telefonundan oyun oynamak için ecnebilere değil de sana para veriyor olalım.


Geri
Bu ilk makaledir
İleri
Fonksiyonlar

Yorum Gönder

  1. Abi anlatım tarzı o kadar tatlı olmuş ki, yeğenlere buradan ödev vermeyi bile düşündüm :)

    YanıtlaSil
  2. merhaba hocam yukarıda anlattıklarınızı sırası ile yazdım, ama ben sayfa.html çift tıklayınca 1.2.3.4.5.6.7.8.9.10.11 şeklinde rakamlar geliyor ie.

    YanıtlaSil
  3. Merhaba hocam,
    Yukarıda anlatılanlar bence ilk etap için çok ağır. Çünkü jQuery ile başlamak javascript ilk temelini atmak için doğru bir yaklaşım değil.

    YanıtlaSil
  4. Merhaba çok değerli kardeşim,
    Size kardeşim diyorum çünkü ikimizinde birbirimizden haberi olmadığı halde senin şu yazı ve site üzerindeki uğraşın sayesinde ben seni bir ağabey bir kardeş olarak görmeye başladım. Eline sağlık. Güzel anlatımın ile bildiklerini bizimle lütfen paylaşmaya devam et.

    YanıtlaSil
  5. fvgvdf gdffdgfd

    YanıtlaSil

 
Top