JavaScript Temelleri – İlk Programımızı Yazıyoruz
Merhabalar, JavaScriptte değişken isimlendirmeleri ve de değişken tanımlamayı öğrenmiştik. Eğer bu konulara göz atmak isterseniz şuradan değişken isimlendirmelerine buradan da değişkenler adlı konuya göz atabilirsiniz.
Şimdi ilk programımızı yazacağız. Evet heyecan dorukta. çıkartın kalemi kağıdı yazılı yoklama yapacağız. Sual bir… şaka şaka. devam edelim. ilk programımızda bir şeyleri görmek ve de öğrenmek adına “alert” adlı komutu öğreneceğiz. bu en temel kodlardan birisidir. JavaScript’te alerti kullandığımız yerler kullanıcıya uyarı verdiğimiz yerler ve de hatalarımızı tespit etmek için şurasını eğer doğru yaptıysam alert ile şunu yazsın gibisinden kendimize fayda sağlamaktır. tabiki de detaylı bir şekilde alert’i inceleyeceğiz ama henüz buna gerek yok sadece ne işe yaradığını bilmeniz yeterli olacaktır. javascript’te alert komutu ekrana bir uyarı penceresi getirir ve bu pencerede ilgili uyarıyı vermenizi sağlar.
Şimdi bir html dosyası oluşturup body ya da head in içerisine script etiketimizi açıp kapatıp içerisine alert fonksiyonunu yazalım.
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script type="text/javascript">
//Alert nasıl yazılır diyenlere kapak gibi cevap
alert();
</script>
</body>
</html>
işte alert’in yazım kuralı budur arkadaşlar. alert yazar parantez açıp kapatır ve de JavaScript’te her “cümle”nin sonuna koyduğumuz o nalet gelesice noktalı virgül ile kod satırımızın bittiğini belirtiyoruz. ve dosyamızı çalıştıralım script.html olsun dosyamızın adı. karşımıza direk olarak “alert” çıkacaktır.
Ohaaa uyarı verdik ya lan !!! ama bi dakka e bu bomboş. tabiki de boş olur alert içerisini boş bıraktık çünkülüm. Şimdi alertte görünmesini istediğimiz mesajımızı yazalım. Eğer yazacağımız uyarı yalnızca metinden oluşuyorsa ; alert içerisindeki paranteze çift tırnak açıyoruz. Şöyle ki;
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script type="text/javascript">
//Alert nasıl yazılır diyenlere kapak gibi cevap
alert("Mesaj Gelsin Bakalım !");
</script>
</body>
</html>
ve tekrardan çalıştırıyoruz. ta daaaaaa… ekrana mesaj gelsin bakalım yazısı basıldı.
şimdi document.write(); komutunu öğreneceğiz. Bu ise şu anlama gelir ; document = belge açıldığında write = yaz, yani belge açıldığında şunu yaz dedirtiyoruz. hepsi bu.
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script type="text/javascript">
//Alert nasıl yazılır diyenlere kapak gibi cevap
alert("Mesaj Gelsin Bakalım !");
document.write("<h1>Merhabayın tekrardana</h1>");
</script>
</body>
</html>
Şimdi bu programı kaydediyoruz ve de sonucumuza bakıyoruz. Açtık sayfayı alert geldi sonrasında ekrana h1 etiketi içerisinde merhabayın tekrardana yazısı belirdi. Ana ! ikisi neden aynı anda değil ? Çünkü javascript’te kodlar sırasıyla okunur ve de işlenir. yani biz document.write ile alert’i yer değiştirsek ; o zaman ekranda merhabayın yazar ve sonrasında direk alert verir. Kapiş ? Şimdi son bir satır kod ekleyelim document.write’ın altına. bakalım ne olacak.
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script type="text/javascript">
//Alert nasıl yazılır diyenlere kapak gibi cevap
alert("Mesaj Gelsin Bakalım !");
document.write("<h1>Merhabayın tekrardana</h1>");
alert("Tebrikler bir alertin daha belini kırdın ve başardın !");
</script>
</body>
</html>
Yani burada anlatmaya çalıştığım şey şu;
JavaScript kodları sırayla okunur işlenir ve ondan sonra bir sonraki kod satırına (statement) geçilir. Yazdığımız programda gelişen basamakları sıralayalım tam anlamak için;
1- alert komutu çalışır ve de içerisine mesaj gelsin bakalım metni yazılır statement biter ve bir sonraki koda geçilir.
2- belgeye h1 etiketi içerisinde metin yazdırılır statement biter ve bir sonraki statement’a geçilir.
3- tekrar alert açılır ve tebrikler mesajı verilir statement biter ve bir sonraki statement’e geçilir. ancak başka statement olmadığı için işlem durur.
Evet şimdi neler öğrendik ? alert komutunun parantezler içerisine tırnak açarak bir şeyler yazdırmayı öğrendik. ayrıca sayfa içerisinde de direk olarak değişiklik yapabileceğimiz document.write komutunu öğrendik. ve JavaScript’in kodlarımızı okurken nasıl çalıştığını öğrendik. Sıradaki derste görüşmek üzere arkadaşlar.