JavaScript/Giriş

JavaScript HTML içine gömülebilen, tarayıcılar tarafından yorumlanabilen, web sayfalarına etkileşim kazandırmak için kullanılan bir betik dilidir. Java programlama diliyle isim benzerliği dışında bir ilgisi yoktur. JavaScript bir ECMAScript implementasyonudur. JavaScript bir betik dilidir, dolayısıyla JavaScript ile yazılan programlar da betik (script) olarak adlandırılır.

JavaScript her ne kadar web sitelerini (web tarayıcıların JavaScript betiklerini çalıştırma yeteneğini kullanarak) daha işlevsel hale getirmek için geliştirilmiş ve yıllarca yalnızca bu amaçla kullanılmış olsa da günümüzde sunucu (server) tarafında da yoğun olarak kullanılmaktadır. Aslında JavaScript betikleri, bir JavaScript motorunun (engine) bulunduğu her cihazda çalıştırılabilir. Şirketler ve topluluklar tarafından geliştirilen farklı JavaScript motorları vardır:

Google Chrome ve Opera tarafından kullanılan V8
Mozilla Firefox tarafından kullanılan SpiderMonkey
Safari tarafından kullanılan SquirrelFish

Bunlar dışında daha birçok JavaScript motoru mevcuttur.

JavaScript betikleri öncelikle JavaScript motoru tarafından okunur. Okunan betik, derlenerek makine diline dönüştürülür ve son olarak bu makine kodu işleme konur.

Web tarayıcı üzerinde çalışan bir JavaScript betiği; web sayfasını değişikliğe uğratmak, kullanıcıyla etkileşimde bulunmak ve sunucu ile iletişim kurmak gibi işleri başarıyla gerçekleştirir. Ancak kullanıcının dosya sisteminden dosya okuma - yazma gibi işlemleri yapamaz. Çünkü web tarayıcılar, kullanıcının güvenliğini gözeterek birtakım işlemleri ya doğrudan engeller ya da kullanıcının onayına sunar. Fakat örneğin sunucu taraflı JavaScript kullanımını mümkün kılan (çünkü bünyesinde bir JavaScript motoru barındırır) Node.js isimli çalışma ortamı, geliştiricilere daha özgür bir ortam sunar.

Bir tarayıcı sekmesinde çalışan JavaScript betiği, başka bir sekmeyle haberleşemez. Örneğin ilk sekmede example.com alan adı altında çalışan bir betik, diğer sekmede açık olan example.org alan adına erişemez, bu alan adına bir ağ (network) isteğinde bulunamaz ve buradan herhangi bir bilgi alamaz. Buna Same Origin Policy (aynı kök politikası) adı verilir. Ancak JavaScript betikleri, çalıştıkları sayfanın bulunduğu sunucu ile etkileşim içinde olabilir. Sunucu taraflı çalışan JavaScript uygulamaları için ise bu tip kısıtlamalar söz konusu değildir.

JavaScript'i nasıl kullanacağım?

Sunucu taraflı çalışma ortamlarında, örneğin Node.js ortamında, bir JavaScript betiğini çalıştırmak için komut satırında (terminal, command line) node ilk-betik.js komutunu vermek yeterlidir. Diğer taraftan JavaScript betikleri, HTML dokümanlarının herhangi bir yerinde <script> etiketiyle kullanılabilir:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
    </head>
    <body>
        <script>
            alert('Merhaba Dünya!');
        </script>
    </body>
</html>

Bu HTML dokümanını web tarayıcıda açarak sonucu görebilirsiniz.

<script> etiketi, web tarayıcı tarafından, görüldüğü anda çalıştırılmaya başlanan JavaScript kodlarını içerir.

Eski bir standart olan HTML4 standardında, <script> etiketinin içerdiği ifadelerin bir JavaScript betiği olduğunu web tarayıcıya bildirmek için type niteliğini eklemek gerekirdi:

<script type="text/javascript">
    
</script>

Ancak günümüzde kullanılan HTML5 standardında bu gereksizdir. Çünkü HTML5 standardında, type niletiği için varsayılan (default) değer JavaScript'tir. Bir de çok çok eski tarayıcıları bilgilendirmek için language niteliği kullanılırdı:

<script language="javascript">
    
</script>

Ancak günümüzde bu niteliği kullanmaya da gerek yoktur. Oldukça eski JavaScript betiklerinde şöyle bir şeye rastlayabilirsiniz:

<script type="text/javascript">
    <!--
    
    //-->
</script>

Buradaki yorum satırları, içerdiği JavaScript kodlarını, JavaScript betiklerini çalıştırma yeteneği bulunmayan web tarayıcılardan gizlemek için kullanılırdı. Ancak günümüzde oldukça yüksek kullanım oranına sahip olan modern tarayıcılar JavaScript betiklerini düzgünce çalıştırabilme kabiliyetine sahiptir.

Harici JavaScript betiklerini HTML dokümanına dahil etmek için <script> etiketine src niteliği eklenir ve bu niteliğe değer olarak harici betiğin URL'si verilir:

<script src="http://example.com/js/betik.js"></script>

Betiklerin, sunucudaki göreceli yolları da kullanılabilir:

<script src="/js/script1.js"></script>
<script src="/js/script2.js"></script>

Dahil edilen harici betiklerin, web sayfası ile aynı alan adında bulunması gerekmez:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

Fakat bu yöntemle kullanılan etiketlerin içine ayrıca JS kodu eklenmemelidir.

Basit, az sayıda işler yapan JavaScript kodları HTML dokümanlarının içerisine yerleştirilebilir. Ancak karmaşık işleri yerine getiren betiklerin betik dosyalarına kaydedilip harici olarak HTML dokümanına eklenmesi çoğunlukla daha iyidir. Bu sayede aynı dosya birden fazla sayfada kullanılabilir ve önbellek özelliği olan tarayıcılar dosyaları tekrar tekrar indirmek zorunda kalmaz.

Peki ya tarayıcının JavaScript özelliği kapalıysa?

Modern web tarayıcıların JavaScript çalıştırma özelliği, varsayılan olarak açık gelse de daha sonradan bu özellik kapatılabilmektedir. Eğer tarayıcının JavaScript çalıştırma özelliği kapalıysa kullanıcıya bir mesaj göstererek JavaScript özelliğini açmasını isteyebilirsiniz:

<noscript>
    Web tarayıcınızın <strong>JavaScript</strong> özelliği kapalıdır. Bu web sayfasının işlevselliğinden
    faydalanabilmek için web tarayıcınızın JavaScript özelliğini açın.
</noscript>

Ayrıca Javascript ile görünmez yapılan bir noscript'siz mesaj da yerleştirebilirsiniz. Bu daha stabil çalışır fakat sayfa ilk açıldığı zaman kısa bir süreliğine JS izni olsa bile görünebilme şeklinde bir sorunu vardır.

JavaScript kodlarını olaylara bağlamak

JavaScript kodlarını <script> etiketiyle sayfaya direkt gömdüğümüzde ilgili JavaScript kodları sayfa açılır açılmaz çalışacaktır. Ancak JavaScript kodlarını olaylara bağlayarak ilgili JavaScript kodlarının sadece ilgili olay gerçekleştiğinde çalışmasını sağlayabiliriz. Örnek:

<button onclick="//Buraya JavaScript kodları gelecek">Tıkla</button>

Her HTML etiketi her olayı desteklemeyebilir. Buradaki onclick olayı tıklamayı belirtir. Daha bunun gibi birçok olay vardır. Olayları ayrıntılı olarak olaylar konusunda göreceğiz.

Sözde URL yöntemi

HTML dosyasında normalde link yazılması gereken bazı yerlere javascript: ön ekini izleyen JavaScript kodları yazabiliriz. Örnek:

<a href="javascript://Buraya JavaScript kodları gelecek.">Tıkla</a>

Bu kodda kullanıcı linke tıkladığı zaman ilgili JavaScript kodları çalışacaktır.

JavaScript'te boşluk duyarlılığı

JavaScript tek bir istisna dışında boşluk duyarlılığı olmayan bir dildir. Normalde her JavaScript komutunun ; (noktalı virgül) ile sonlandırılması gerekir. Ancak bu zorunluluk, eğer komutları farklı satırlarda yazmışsak ortadan kalkar. Yani JavaScript'te ; karakteri ve/veya yeni satır komut sonlandırma amacıyla kullanılabilir. Ancak elbetteki aynı satıra birden fazla komut koyacaksak bunları ; ile ayırmak zorundayız. Lakin komutlar satırlara bölünür iken bitiş olamaz noktadan bölünmelidir çünkü aksi halde komutun orada bittiği varsayılır.

JavaScript'te bloklama

JavaScript bloklama için C stilini kullanır. Yani { karakteri bloğu açar ve } karakteri bu bloğu kapatır. Bloklar komutları belirli bir amaç için gruplamak için kullanılır. Örneğin belirli bir koşul gerçekleştiğinde hangi komutlar çalışacak? Fonksiyon hangi komutlardan oluşuyor? vs.